Browse Source

Added collapsible header to more screens and added an abstraction layer around collapsible behaviour

Arnaud Vergnet 1 year ago
parent
commit
be33726e39
29 changed files with 392 additions and 398 deletions
  1. 51
    0
      src/components/Collapsible/CollapsibleComponent.js
  2. 26
    0
      src/components/Collapsible/CollapsibleFlatList.js
  3. 26
    0
      src/components/Collapsible/CollapsibleScrollView.js
  4. 26
    0
      src/components/Collapsible/CollapsibleSectionList.js
  5. 6
    11
      src/components/Screens/WebSectionList.js
  6. 106
    102
      src/navigation/MainNavigator.js
  7. 12
    9
      src/screens/About/AboutDependenciesScreen.js
  8. 2
    1
      src/screens/About/AboutScreen.js
  9. 3
    2
      src/screens/About/DebugScreen.js
  10. 5
    16
      src/screens/Amicale/AmicaleContactScreen.js
  11. 4
    3
      src/screens/Amicale/Clubs/ClubAboutScreen.js
  12. 7
    3
      src/screens/Amicale/Clubs/ClubDisplayScreen.js
  13. 4
    11
      src/screens/Amicale/Clubs/ClubListScreen.js
  14. 5
    15
      src/screens/Amicale/Equipment/EquipmentConfirmScreen.js
  15. 5
    15
      src/screens/Amicale/Equipment/EquipmentListScreen.js
  16. 5
    16
      src/screens/Amicale/Equipment/EquipmentRentScreen.js
  17. 13
    24
      src/screens/Amicale/LoginScreen.js
  18. 4
    16
      src/screens/Amicale/ProfileScreen.js
  19. 13
    15
      src/screens/Amicale/VoteScreen.js
  20. 0
    26
      src/screens/Game/screens/GameEndScreen.js
  21. 4
    3
      src/screens/Game/screens/GameStartScreen.js
  22. 4
    3
      src/screens/Other/FeedbackScreen.js
  23. 35
    34
      src/screens/Other/Settings/DashboardEditScreen.js
  24. 9
    8
      src/screens/Other/Settings/SettingsScreen.js
  25. 4
    3
      src/screens/Services/Proximo/ProximoAboutScreen.js
  26. 4
    13
      src/screens/Services/Proximo/ProximoListScreen.js
  27. 5
    27
      src/screens/Services/ServicesScreen.js
  28. 1
    1
      src/utils/CollapsibleUtils.js
  29. 3
    21
      src/utils/withCollapsible.js

+ 51
- 0
src/components/Collapsible/CollapsibleComponent.js View File

@@ -0,0 +1,51 @@
1
+// @flow
2
+
3
+import * as React from 'react';
4
+import {withCollapsible} from "../../utils/withCollapsible";
5
+import {Collapsible} from "react-navigation-collapsible";
6
+import CustomTabBar from "../Tabbar/CustomTabBar";
7
+
8
+export type CollapsibleComponentProps = {
9
+    children?: React.Node,
10
+    hasTab?: boolean,
11
+    onScroll?: (event: SyntheticEvent<EventTarget>) => void,
12
+};
13
+
14
+type Props = {
15
+    ...CollapsibleComponentProps,
16
+    collapsibleStack: Collapsible,
17
+    component: any,
18
+}
19
+
20
+class CollapsibleComponent extends React.Component<Props> {
21
+
22
+    static defaultProps = {
23
+        hasTab: false,
24
+    }
25
+
26
+    onScroll = (event: SyntheticEvent<EventTarget>) => {
27
+        if (this.props.onScroll)
28
+            this.props.onScroll(event);
29
+    }
30
+
31
+    render() {
32
+        const Comp = this.props.component;
33
+        const {containerPaddingTop, scrollIndicatorInsetTop, onScrollWithListener} = this.props.collapsibleStack;
34
+        return (
35
+            <Comp
36
+                {...this.props}
37
+                onScroll={onScrollWithListener(this.onScroll)}
38
+                contentContainerStyle={{
39
+                    paddingTop: containerPaddingTop,
40
+                    paddingBottom: this.props.hasTab ? CustomTabBar.TAB_BAR_HEIGHT : 0,
41
+                    minHeight: '100%'
42
+                }}
43
+                scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
44
+            >
45
+                {this.props.children}
46
+            </Comp>
47
+        );
48
+    }
49
+}
50
+
51
+export default withCollapsible(CollapsibleComponent);

+ 26
- 0
src/components/Collapsible/CollapsibleFlatList.js View File

@@ -0,0 +1,26 @@
1
+// @flow
2
+
3
+import * as React from 'react';
4
+import {Animated} from "react-native";
5
+import type {CollapsibleComponentProps} from "./CollapsibleComponent";
6
+import CollapsibleComponent from "./CollapsibleComponent";
7
+
8
+type Props = {
9
+    ...CollapsibleComponentProps
10
+}
11
+
12
+class CollapsibleFlatList extends React.Component<Props> {
13
+
14
+    render() {
15
+        return (
16
+            <CollapsibleComponent
17
+                {...this.props}
18
+                component={Animated.FlatList}
19
+            >
20
+                {this.props.children}
21
+            </CollapsibleComponent>
22
+        );
23
+    }
24
+}
25
+
26
+export default CollapsibleFlatList;

+ 26
- 0
src/components/Collapsible/CollapsibleScrollView.js View File

@@ -0,0 +1,26 @@
1
+// @flow
2
+
3
+import * as React from 'react';
4
+import {Animated} from "react-native";
5
+import type {CollapsibleComponentProps} from "./CollapsibleComponent";
6
+import CollapsibleComponent from "./CollapsibleComponent";
7
+
8
+type Props = {
9
+    ...CollapsibleComponentProps
10
+}
11
+
12
+class CollapsibleScrollView extends React.Component<Props> {
13
+
14
+    render() {
15
+        return (
16
+            <CollapsibleComponent
17
+                {...this.props}
18
+                component={Animated.ScrollView}
19
+            >
20
+                {this.props.children}
21
+            </CollapsibleComponent>
22
+        );
23
+    }
24
+}
25
+
26
+export default CollapsibleScrollView;

+ 26
- 0
src/components/Collapsible/CollapsibleSectionList.js View File

@@ -0,0 +1,26 @@
1
+// @flow
2
+
3
+import * as React from 'react';
4
+import {Animated} from "react-native";
5
+import type {CollapsibleComponentProps} from "./CollapsibleComponent";
6
+import CollapsibleComponent from "./CollapsibleComponent";
7
+
8
+type Props = {
9
+    ...CollapsibleComponentProps
10
+}
11
+
12
+class CollapsibleSectionList extends React.Component<Props> {
13
+
14
+    render() {
15
+        return (
16
+            <CollapsibleComponent
17
+                {...this.props}
18
+                component={Animated.SectionList}
19
+            >
20
+                {this.props.children}
21
+            </CollapsibleComponent>
22
+        );
23
+    }
24
+}
25
+
26
+export default CollapsibleSectionList;

+ 6
- 11
src/components/Screens/WebSectionList.js View File

@@ -4,7 +4,7 @@ import * as React from 'react';
4 4
 import {ERROR_TYPE, readData} from "../../utils/WebData";
5 5
 import i18n from "i18n-js";
6 6
 import {Snackbar} from 'react-native-paper';
7
-import {Animated, RefreshControl, View} from "react-native";
7
+import {RefreshControl, View} from "react-native";
8 8
 import ErrorView from "./ErrorView";
9 9
 import BasicLoadingScreen from "./BasicLoadingScreen";
10 10
 import {withCollapsible} from "../../utils/withCollapsible";
@@ -12,6 +12,7 @@ import * as Animatable from 'react-native-animatable';
12 12
 import CustomTabBar from "../Tabbar/CustomTabBar";
13 13
 import {Collapsible} from "react-navigation-collapsible";
14 14
 import {StackNavigationProp} from "@react-navigation/stack";
15
+import CollapsibleSectionList from "../Collapsible/CollapsibleSectionList";
15 16
 
16 17
 type Props = {
17 18
     navigation: StackNavigationProp,
@@ -203,10 +204,10 @@ class WebSectionList extends React.PureComponent<Props, State> {
203 204
         if (this.state.fetchedData != null || (this.state.fetchedData == null && !this.props.showError)) {
204 205
             dataset = this.props.createDataset(this.state.fetchedData, this.state.refreshing);
205 206
         }
206
-        const {containerPaddingTop, scrollIndicatorInsetTop, onScrollWithListener} = this.props.collapsibleStack;
207
+        const {containerPaddingTop} = this.props.collapsibleStack;
207 208
         return (
208 209
             <View>
209
-                <Animated.SectionList
210
+                <CollapsibleSectionList
210 211
                     sections={dataset}
211 212
                     extraData={this.props.updateData}
212 213
                     refreshControl={
@@ -231,14 +232,8 @@ class WebSectionList extends React.PureComponent<Props, State> {
231 232
                             onRefresh={this.onRefresh}/>
232 233
                     }
233 234
                     getItemLayout={this.props.itemHeight != null ? this.itemLayout : undefined}
234
-                    // Animations
235
-                    onScroll={onScrollWithListener(this.onScroll)}
236
-                    contentContainerStyle={{
237
-                        paddingTop: containerPaddingTop,
238
-                        paddingBottom: CustomTabBar.TAB_BAR_HEIGHT,
239
-                        minHeight: '100%'
240
-                    }}
241
-                    scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
235
+                    onScroll={this.onScroll}
236
+                    hasTab={true}
242 237
                 />
243 238
                 <Snackbar
244 239
                     visible={this.state.snackbarVisible}

+ 106
- 102
src/navigation/MainNavigator.js View File

@@ -28,16 +28,13 @@ import EquipmentLendScreen from "../screens/Amicale/Equipment/EquipmentRentScree
28 28
 import EquipmentConfirmScreen from "../screens/Amicale/Equipment/EquipmentConfirmScreen";
29 29
 import DashboardEditScreen from "../screens/Other/Settings/DashboardEditScreen";
30 30
 import GameStartScreen from "../screens/Game/screens/GameStartScreen";
31
-import GameEndScreen from "../screens/Game/screens/GameEndScreen";
32 31
 
33 32
 const modalTransition = Platform.OS === 'ios' ? TransitionPresets.ModalPresentationIOS : TransitionPresets.ModalSlideFromBottomIOS;
34 33
 
35
-const screenTransition = TransitionPresets.SlideFromRightIOS;
36
-
37 34
 const defaultScreenOptions = {
38 35
     gestureEnabled: true,
39 36
     cardOverlayEnabled: true,
40
-    ...screenTransition,
37
+    ...TransitionPresets.SlideFromRightIOS,
41 38
 };
42 39
 
43 40
 
@@ -58,48 +55,37 @@ function MainStackComponent(props: { createTabNavigator: () => React.Node }) {
58 55
                     title: i18n.t('screens.home.title'),
59 56
                 }}
60 57
             />
61
-            <MainStack.Screen
62
-                name="settings"
63
-                component={SettingsScreen}
64
-                options={{
65
-                    title: i18n.t('screens.settings.title'),
66
-                }}
67
-            />
68
-            <MainStack.Screen
69
-                name="dashboard-edit"
70
-                component={DashboardEditScreen}
71
-                options={{
72
-                    title: i18n.t('screens.settings.dashboardEdit.title'),
73
-                }}
74
-            />
75
-            <MainStack.Screen
76
-                name="about"
77
-                component={AboutScreen}
78
-                options={{
79
-                    title: i18n.t('screens.about.title'),
80
-                }}
81
-            />
82
-            <MainStack.Screen
83
-                name="dependencies"
84
-                component={AboutDependenciesScreen}
85
-                options={{
86
-                    title: i18n.t('screens.about.libs')
87
-                }}
88
-            />
89
-            <MainStack.Screen
90
-                name="debug"
91
-                component={DebugScreen}
92
-                options={{
93
-                    title: i18n.t('screens.about.debug')
94
-                }}
95
-            />
96
-            <MainStack.Screen
97
-                name="game-start"
98
-                component={GameStartScreen}
99
-                options={{
100
-                    title: i18n.t("screens.game.title"),
101
-                }}
102
-            />
58
+            {createScreenCollapsibleStack(
59
+                "settings",
60
+                MainStack,
61
+                SettingsScreen,
62
+                i18n.t('screens.settings.title'))}
63
+            {createScreenCollapsibleStack(
64
+                "dashboard-edit",
65
+                MainStack,
66
+                DashboardEditScreen,
67
+                i18n.t('screens.settings.dashboardEdit.title'))}
68
+            {createScreenCollapsibleStack(
69
+                "about",
70
+                MainStack,
71
+                AboutScreen,
72
+                i18n.t('screens.about.title'))}
73
+            {createScreenCollapsibleStack(
74
+                "dependencies",
75
+                MainStack,
76
+                AboutDependenciesScreen,
77
+                i18n.t('screens.about.libs'))}
78
+            {createScreenCollapsibleStack(
79
+                "debug",
80
+                MainStack,
81
+                DebugScreen,
82
+                i18n.t('screens.about.debug'))}
83
+
84
+            {createScreenCollapsibleStack(
85
+                "game-start",
86
+                MainStack,
87
+                GameStartScreen,
88
+                i18n.t('screens.game.title'))}
103 89
             <MainStack.Screen
104 90
                 name="game-main"
105 91
                 component={GameMainScreen}
@@ -107,73 +93,91 @@ function MainStackComponent(props: { createTabNavigator: () => React.Node }) {
107 93
                     title: i18n.t("screens.game.title"),
108 94
                 }}
109 95
             />
110
-            <MainStack.Screen
111
-                name="game-end"
112
-                component={GameEndScreen}
113
-                options={{
114
-                    title: i18n.t("screens.game.title"),
115
-                }}
116
-            />
117
-            {createScreenCollapsibleStack("login", MainStack, LoginScreen, i18n.t('screens.login.title'),
118
-                true, {headerTintColor: "#fff"}, 'transparent')}
96
+            {createScreenCollapsibleStack(
97
+                "login",
98
+                MainStack,
99
+                LoginScreen,
100
+                i18n.t('screens.login.title'),
101
+                true,
102
+                {headerTintColor: "#fff"},
103
+                'transparent')}
119 104
             {getWebsiteStack("website", MainStack, WebsiteScreen, "")}
120 105
 
121 106
 
122
-            {createScreenCollapsibleStack("self-menu", MainStack, SelfMenuScreen, i18n.t('screens.menu.title'))}
123
-            {createScreenCollapsibleStack("proximo", MainStack, ProximoMainScreen, i18n.t('screens.proximo.title'))}
107
+            {createScreenCollapsibleStack(
108
+                "self-menu",
109
+                MainStack,
110
+                SelfMenuScreen,
111
+                i18n.t('screens.menu.title'))}
112
+            {createScreenCollapsibleStack(
113
+                "proximo",
114
+                MainStack,
115
+                ProximoMainScreen,
116
+                i18n.t('screens.proximo.title'))}
124 117
             {createScreenCollapsibleStack(
125 118
                 "proximo-list",
126 119
                 MainStack,
127 120
                 ProximoListScreen,
128 121
                 i18n.t('screens.proximo.articleList'),
122
+            )}
123
+            {createScreenCollapsibleStack(
124
+                "proximo-about",
125
+                MainStack,
126
+                ProximoAboutScreen,
127
+                i18n.t('screens.proximo.title'),
129 128
                 true,
130
-                {...screenTransition},
129
+                {...modalTransition},
131 130
             )}
132
-            <MainStack.Screen
133
-                name="proximo-about"
134
-                component={ProximoAboutScreen}
135
-                options={{
136
-                    title: i18n.t('screens.proximo.title'),
137
-                    ...modalTransition,
138
-                }}
139
-            />
140
-
141
-            {createScreenCollapsibleStack("profile", MainStack, ProfileScreen, i18n.t('screens.profile.title'))}
142
-            {createScreenCollapsibleStack("club-list", MainStack, ClubListScreen, i18n.t('screens.clubs.title'))}
143
-            {createScreenCollapsibleStack("equipment-list", MainStack, EquipmentScreen, i18n.t('screens.equipment.title'))}
144
-            {createScreenCollapsibleStack("equipment-rent", MainStack, EquipmentLendScreen, i18n.t('screens.equipment.book'))}
145
-            {createScreenCollapsibleStack("equipment-confirm", MainStack, EquipmentConfirmScreen, i18n.t('screens.equipment.confirm'))}
146
-            <MainStack.Screen
147
-                name="club-information"
148
-                component={ClubDisplayScreen}
149
-                options={{
150
-                    title: i18n.t('screens.clubs.details'),
151
-                    ...modalTransition,
152
-                }}
153
-            />
154
-            <MainStack.Screen
155
-                name="club-about"
156
-                component={ClubAboutScreen}
157
-                options={{
158
-                    title: i18n.t('screens.clubs.title'),
159
-                    ...modalTransition,
160
-                }}
161
-            />
162
-            <MainStack.Screen
163
-                name="vote"
164
-                component={VoteScreen}
165
-                options={{
166
-                    title: i18n.t('screens.vote.title'),
167
-                }}
168
-            />
169 131
 
170
-            <MainStack.Screen
171
-                name="feedback"
172
-                component={BugReportScreen}
173
-                options={{
174
-                    title: i18n.t('screens.feedback.title'),
175
-                }}
176
-            />
132
+            {createScreenCollapsibleStack(
133
+                "profile",
134
+                MainStack,
135
+                ProfileScreen,
136
+                i18n.t('screens.profile.title'))}
137
+            {createScreenCollapsibleStack(
138
+                "club-list",
139
+                MainStack,
140
+                ClubListScreen,
141
+                i18n.t('screens.clubs.title'))}
142
+            {createScreenCollapsibleStack(
143
+                "club-information",
144
+                MainStack,
145
+                ClubDisplayScreen,
146
+                i18n.t('screens.clubs.details'),
147
+                true,
148
+                {...modalTransition})}
149
+            {createScreenCollapsibleStack(
150
+                "club-about",
151
+                MainStack,
152
+                ClubAboutScreen,
153
+                i18n.t('screens.clubs.title'),
154
+                true,
155
+                {...modalTransition})}
156
+            {createScreenCollapsibleStack(
157
+                "equipment-list",
158
+                MainStack,
159
+                EquipmentScreen,
160
+                i18n.t('screens.equipment.title'))}
161
+            {createScreenCollapsibleStack(
162
+                "equipment-rent",
163
+                MainStack,
164
+                EquipmentLendScreen,
165
+                i18n.t('screens.equipment.book'))}
166
+            {createScreenCollapsibleStack(
167
+                "equipment-confirm",
168
+                MainStack,
169
+                EquipmentConfirmScreen,
170
+                i18n.t('screens.equipment.confirm'))}
171
+            {createScreenCollapsibleStack(
172
+                "vote",
173
+                MainStack,
174
+                VoteScreen,
175
+                i18n.t('screens.vote.title'))}
176
+            {createScreenCollapsibleStack(
177
+                "feedback",
178
+                MainStack,
179
+                BugReportScreen,
180
+                i18n.t('screens.feedback.title'))}
177 181
         </MainStack.Navigator>
178 182
     );
179 183
 }

+ 12
- 9
src/screens/About/AboutDependenciesScreen.js View File

@@ -1,10 +1,11 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {FlatList} from "react-native";
5 4
 import packageJson from '../../../package';
6 5
 import {List} from 'react-native-paper';
7 6
 import {StackNavigationProp} from "@react-navigation/stack";
7
+import CollapsibleFlatList from "../../components/Collapsible/CollapsibleFlatList";
8
+import {View} from "react-native-animatable";
8 9
 
9 10
 type listItem = {
10 11
     name: string,
@@ -59,14 +60,16 @@ export default class AboutDependenciesScreen extends React.Component<Props> {
59 60
 
60 61
     render() {
61 62
         return (
62
-            <FlatList
63
-                data={this.data}
64
-                keyExtractor={this.keyExtractor}
65
-                renderItem={this.renderItem}
66
-                // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
67
-                removeClippedSubviews={true}
68
-                getItemLayout={this.itemLayout}
69
-            />
63
+            <View>
64
+                <CollapsibleFlatList
65
+                    data={this.data}
66
+                    keyExtractor={this.keyExtractor}
67
+                    renderItem={this.renderItem}
68
+                    // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
69
+                    removeClippedSubviews={true}
70
+                    getItemLayout={this.itemLayout}
71
+                />
72
+            </View>
70 73
         );
71 74
     }
72 75
 }

+ 2
- 1
src/screens/About/AboutScreen.js View File

@@ -6,6 +6,7 @@ import i18n from "i18n-js";
6 6
 import {Avatar, Card, List, Title, withTheme} from 'react-native-paper';
7 7
 import packageJson from "../../../package.json";
8 8
 import {StackNavigationProp} from "@react-navigation/stack";
9
+import CollapsibleFlatList from "../../components/Collapsible/CollapsibleFlatList";
9 10
 
10 11
 type ListItem = {
11 12
     onPressCallback: () => void,
@@ -338,7 +339,7 @@ class AboutScreen extends React.Component<Props> {
338 339
 
339 340
     render() {
340 341
         return (
341
-            <FlatList
342
+            <CollapsibleFlatList
342 343
                 style={{padding: 5}}
343 344
                 data={this.dataOrder}
344 345
                 renderItem={this.getMainCard}

+ 3
- 2
src/screens/About/DebugScreen.js View File

@@ -1,13 +1,14 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {FlatList, View} from "react-native";
4
+import {View} from "react-native";
5 5
 import AsyncStorageManager from "../../managers/AsyncStorageManager";
6 6
 import CustomModal from "../../components/Overrides/CustomModal";
7 7
 import {Button, List, Subheading, TextInput, Title, withTheme} from 'react-native-paper';
8 8
 import {StackNavigationProp} from "@react-navigation/stack";
9 9
 import {Modalize} from "react-native-modalize";
10 10
 import type {CustomTheme} from "../../managers/ThemeManager";
11
+import CollapsibleFlatList from "../../components/Collapsible/CollapsibleFlatList";
11 12
 
12 13
 type PreferenceItem = {
13 14
     key: string,
@@ -168,7 +169,7 @@ class DebugScreen extends React.Component<Props, State> {
168 169
                     {this.getModalContent()}
169 170
                 </CustomModal>
170 171
                 {/*$FlowFixMe*/}
171
-                <FlatList
172
+                <CollapsibleFlatList
172 173
                     data={this.state.currentPreferences}
173 174
                     extraData={this.state.currentPreferences}
174 175
                     renderItem={this.renderItem}

+ 5
- 16
src/screens/Amicale/AmicaleContactScreen.js View File

@@ -1,16 +1,13 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Animated, FlatList, Image, Linking, View} from 'react-native';
4
+import {FlatList, Image, Linking, View} from 'react-native';
5 5
 import {Card, List, Text, withTheme} from 'react-native-paper';
6 6
 import i18n from 'i18n-js';
7
-import {Collapsible} from "react-navigation-collapsible";
8
-import CustomTabBar from "../../components/Tabbar/CustomTabBar";
9
-import {withCollapsible} from "../../utils/withCollapsible";
10 7
 import type {MaterialCommunityIconsGlyphs} from "react-native-vector-icons/MaterialCommunityIcons";
8
+import CollapsibleFlatList from "../../components/Collapsible/CollapsibleFlatList";
11 9
 
12 10
 type Props = {
13
-    collapsibleStack: Collapsible
14 11
 };
15 12
 
16 13
 type DatasetItem = {
@@ -130,22 +127,14 @@ class AmicaleContactScreen extends React.Component<Props> {
130 127
     };
131 128
 
132 129
     render() {
133
-        const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
134 130
         return (
135
-            <Animated.FlatList
131
+            <CollapsibleFlatList
136 132
                 data={[{key: "1"}]}
137 133
                 renderItem={this.getScreen}
138
-                // Animations
139
-                onScroll={onScroll}
140
-                contentContainerStyle={{
141
-                    paddingTop: containerPaddingTop,
142
-                    paddingBottom: CustomTabBar.TAB_BAR_HEIGHT,
143
-                    minHeight: '100%'
144
-                }}
145
-                scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
134
+                hasTab={true}
146 135
             />
147 136
         );
148 137
     }
149 138
 }
150 139
 
151
-export default withCollapsible(withTheme(AmicaleContactScreen));
140
+export default withTheme(AmicaleContactScreen);

+ 4
- 3
src/screens/Amicale/Clubs/ClubAboutScreen.js View File

@@ -1,10 +1,11 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Image, ScrollView, View} from 'react-native';
4
+import {Image, View} from 'react-native';
5 5
 import {Card, List, Text, withTheme} from 'react-native-paper';
6 6
 import i18n from 'i18n-js';
7 7
 import Autolink from "react-native-autolink";
8
+import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";
8 9
 
9 10
 type Props = {};
10 11
 
@@ -14,7 +15,7 @@ class ClubAboutScreen extends React.Component<Props> {
14 15
 
15 16
     render() {
16 17
         return (
17
-            <ScrollView style={{padding: 5}}>
18
+            <CollapsibleScrollView style={{padding: 5}}>
18 19
                 <View style={{
19 20
                     width: '100%',
20 21
                     height: 100,
@@ -43,7 +44,7 @@ class ClubAboutScreen extends React.Component<Props> {
43 44
                         />
44 45
                     </Card.Content>
45 46
                 </Card>
46
-            </ScrollView>
47
+            </CollapsibleScrollView>
47 48
         );
48 49
     }
49 50
 }

+ 7
- 3
src/screens/Amicale/Clubs/ClubDisplayScreen.js View File

@@ -1,7 +1,7 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Linking, ScrollView, View} from 'react-native';
4
+import {Linking, View} from 'react-native';
5 5
 import {Avatar, Button, Card, Chip, Paragraph, withTheme} from 'react-native-paper';
6 6
 import ImageModal from 'react-native-image-modal';
7 7
 import i18n from "i18n-js";
@@ -12,6 +12,7 @@ import type {category, club} from "./ClubListScreen";
12 12
 import type {CustomTheme} from "../../../managers/ThemeManager";
13 13
 import {StackNavigationProp} from "@react-navigation/stack";
14 14
 import {ERROR_TYPE} from "../../../utils/WebData";
15
+import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";
15 16
 
16 17
 type Props = {
17 18
     navigation: StackNavigationProp,
@@ -184,7 +185,10 @@ class ClubDisplayScreen extends React.Component<Props, State> {
184 185
         }
185 186
         if (data != null) {
186 187
             return (
187
-                <ScrollView style={{paddingLeft: 5, paddingRight: 5}}>
188
+                <CollapsibleScrollView
189
+                    style={{paddingLeft: 5, paddingRight: 5}}
190
+                    hasTab={true}
191
+                >
188 192
                     {this.getCategoriesRender(data.category)}
189 193
                     {data.logo !== null ?
190 194
                         <View style={{
@@ -214,7 +218,7 @@ class ClubDisplayScreen extends React.Component<Props, State> {
214 218
                         </Card.Content>
215 219
                         : <View/>}
216 220
                     {this.getManagersRender(data.responsibles, data.email)}
217
-                </ScrollView>
221
+                </CollapsibleScrollView>
218 222
             );
219 223
         } else
220 224
             return null;

+ 4
- 11
src/screens/Amicale/Clubs/ClubListScreen.js View File

@@ -1,7 +1,7 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Animated, Platform} from "react-native";
4
+import {Platform} from "react-native";
5 5
 import {Searchbar} from 'react-native-paper';
6 6
 import AuthenticatedScreen from "../../../components/Amicale/AuthenticatedScreen";
7 7
 import i18n from "i18n-js";
@@ -9,10 +9,9 @@ import ClubListItem from "../../../components/Lists/Clubs/ClubListItem";
9 9
 import {isItemInCategoryFilter, stringMatchQuery} from "../../../utils/Search";
10 10
 import ClubListHeader from "../../../components/Lists/Clubs/ClubListHeader";
11 11
 import MaterialHeaderButtons, {Item} from "../../../components/Overrides/CustomHeaderButton";
12
-import {withCollapsible} from "../../../utils/withCollapsible";
13 12
 import {StackNavigationProp} from "@react-navigation/stack";
14 13
 import type {CustomTheme} from "../../../managers/ThemeManager";
15
-import {Collapsible} from "react-navigation-collapsible";
14
+import CollapsibleFlatList from "../../../components/Collapsible/CollapsibleFlatList";
16 15
 
17 16
 export type category = {
18 17
     id: number,
@@ -32,7 +31,6 @@ export type club = {
32 31
 type Props = {
33 32
     navigation: StackNavigationProp,
34 33
     theme: CustomTheme,
35
-    collapsibleStack: Collapsible,
36 34
 }
37 35
 
38 36
 type State = {
@@ -111,9 +109,8 @@ class ClubListScreen extends React.Component<Props, State> {
111 109
             clubList = data[0].clubs;
112 110
         }
113 111
         this.categories = categoryList;
114
-        const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
115 112
         return (
116
-            <Animated.FlatList
113
+            <CollapsibleFlatList
117 114
                 data={clubList}
118 115
                 keyExtractor={this.keyExtractor}
119 116
                 renderItem={this.getRenderItem}
@@ -121,10 +118,6 @@ class ClubListScreen extends React.Component<Props, State> {
121 118
                 // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
122 119
                 removeClippedSubviews={true}
123 120
                 getItemLayout={this.itemLayout}
124
-                // Animations
125
-                onScroll={onScroll}
126
-                contentContainerStyle={{paddingTop: containerPaddingTop}}
127
-                scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
128 121
             />
129 122
         )
130 123
     };
@@ -241,4 +234,4 @@ class ClubListScreen extends React.Component<Props, State> {
241 234
     }
242 235
 }
243 236
 
244
-export default withCollapsible(ClubListScreen);
237
+export default ClubListScreen;

+ 5
- 15
src/screens/Amicale/Equipment/EquipmentConfirmScreen.js View File

@@ -2,14 +2,13 @@
2 2
 
3 3
 import * as React from 'react';
4 4
 import {Button, Caption, Card, Headline, Paragraph, withTheme} from 'react-native-paper';
5
-import {Collapsible} from "react-navigation-collapsible";
6
-import {withCollapsible} from "../../../utils/withCollapsible";
7 5
 import {StackNavigationProp} from "@react-navigation/stack";
8 6
 import type {CustomTheme} from "../../../managers/ThemeManager";
9 7
 import type {Device} from "./EquipmentListScreen";
10
-import {Animated, View} from "react-native";
8
+import {View} from "react-native";
11 9
 import i18n from "i18n-js";
12 10
 import {getRelativeDateString} from "../../../utils/EquipmentBooking";
11
+import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";
13 12
 
14 13
 type Props = {
15 14
     navigation: StackNavigationProp,
@@ -20,7 +19,6 @@ type Props = {
20 19
         },
21 20
     },
22 21
     theme: CustomTheme,
23
-    collapsibleStack: Collapsible,
24 22
 }
25 23
 
26 24
 
@@ -44,21 +42,13 @@ class EquipmentConfirmScreen extends React.Component<Props> {
44 42
     }
45 43
 
46 44
     render() {
47
-        const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
48 45
         const item = this.item;
49 46
         const dates = this.dates;
50 47
         if (item != null && dates != null) {
51 48
             const start = new Date(dates[0]);
52 49
             const end = new Date(dates[1]);
53 50
             return (
54
-                <Animated.ScrollView
55
-                    // Animations
56
-                    onScroll={onScroll}
57
-                    contentContainerStyle={{
58
-                        paddingTop: containerPaddingTop,
59
-                        minHeight: '100%'
60
-                    }}
61
-                    scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}>
51
+                <CollapsibleScrollView>
62 52
                     <Card style={{margin: 5}}>
63 53
                         <Card.Content>
64 54
                             <View style={{flex: 1}}>
@@ -103,7 +93,7 @@ class EquipmentConfirmScreen extends React.Component<Props> {
103 93
                             </Paragraph>
104 94
                         </Card.Content>
105 95
                     </Card>
106
-                </Animated.ScrollView>
96
+                </CollapsibleScrollView>
107 97
             );
108 98
         } else
109 99
             return null;
@@ -112,4 +102,4 @@ class EquipmentConfirmScreen extends React.Component<Props> {
112 102
 
113 103
 }
114 104
 
115
-export default withCollapsible(withTheme(EquipmentConfirmScreen));
105
+export default withTheme(EquipmentConfirmScreen);

+ 5
- 15
src/screens/Amicale/Equipment/EquipmentListScreen.js View File

@@ -1,11 +1,9 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Animated, View} from "react-native";
4
+import {View} from "react-native";
5 5
 import {Button, withTheme} from 'react-native-paper';
6 6
 import AuthenticatedScreen from "../../../components/Amicale/AuthenticatedScreen";
7
-import {Collapsible} from "react-navigation-collapsible";
8
-import {withCollapsible} from "../../../utils/withCollapsible";
9 7
 import {StackNavigationProp} from "@react-navigation/stack";
10 8
 import type {CustomTheme} from "../../../managers/ThemeManager";
11 9
 import i18n from "i18n-js";
@@ -14,11 +12,11 @@ import EquipmentListItem from "../../../components/Lists/Equipment/EquipmentList
14 12
 import MascotPopup from "../../../components/Mascot/MascotPopup";
15 13
 import {MASCOT_STYLE} from "../../../components/Mascot/Mascot";
16 14
 import AsyncStorageManager from "../../../managers/AsyncStorageManager";
15
+import CollapsibleFlatList from "../../../components/Collapsible/CollapsibleFlatList";
17 16
 
18 17
 type Props = {
19 18
     navigation: StackNavigationProp,
20 19
     theme: CustomTheme,
21
-    collapsibleStack: Collapsible,
22 20
 }
23 21
 
24 22
 type State = {
@@ -29,7 +27,7 @@ export type Device = {
29 27
     id: number,
30 28
     name: string,
31 29
     caution: number,
32
-    booked_at: Array<{begin: string, end: string}>,
30
+    booked_at: Array<{ begin: string, end: string }>,
33 31
 };
34 32
 
35 33
 export type RentedDevice = {
@@ -133,20 +131,12 @@ class EquipmentListScreen extends React.Component<Props, State> {
133 131
             if (fetchedData != null)
134 132
                 this.userRents = fetchedData["locations"];
135 133
         }
136
-        const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
137 134
         return (
138
-            <Animated.FlatList
135
+            <CollapsibleFlatList
139 136
                 keyExtractor={this.keyExtractor}
140 137
                 renderItem={this.getRenderItem}
141 138
                 ListHeaderComponent={this.getListHeader()}
142 139
                 data={this.data}
143
-                // Animations
144
-                onScroll={onScroll}
145
-                contentContainerStyle={{
146
-                    paddingTop: containerPaddingTop,
147
-                    minHeight: '100%'
148
-                }}
149
-                scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
150 140
             />
151 141
         )
152 142
     };
@@ -203,4 +193,4 @@ class EquipmentListScreen extends React.Component<Props, State> {
203 193
     }
204 194
 }
205 195
 
206
-export default withCollapsible(withTheme(EquipmentListScreen));
196
+export default withTheme(EquipmentListScreen);

+ 5
- 16
src/screens/Amicale/Equipment/EquipmentRentScreen.js View File

@@ -2,12 +2,10 @@
2 2
 
3 3
 import * as React from 'react';
4 4
 import {Button, Caption, Card, Headline, Subheading, withTheme} from 'react-native-paper';
5
-import {Collapsible} from "react-navigation-collapsible";
6
-import {withCollapsible} from "../../../utils/withCollapsible";
7 5
 import {StackNavigationProp} from "@react-navigation/stack";
8 6
 import type {CustomTheme} from "../../../managers/ThemeManager";
9 7
 import type {Device} from "./EquipmentListScreen";
10
-import {Animated, BackHandler, View} from "react-native";
8
+import {BackHandler, View} from "react-native";
11 9
 import * as Animatable from "react-native-animatable";
12 10
 import i18n from "i18n-js";
13 11
 import {CalendarList} from "react-native-calendars";
@@ -22,6 +20,7 @@ import {
22 20
     isEquipmentAvailable
23 21
 } from "../../../utils/EquipmentBooking";
24 22
 import ConnectionManager from "../../../managers/ConnectionManager";
23
+import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";
25 24
 
26 25
 type Props = {
27 26
     navigation: StackNavigationProp,
@@ -31,7 +30,6 @@ type Props = {
31 30
         },
32 31
     },
33 32
     theme: CustomTheme,
34
-    collapsibleStack: Collapsible,
35 33
 }
36 34
 
37 35
 type State = {
@@ -269,8 +267,6 @@ class EquipmentRentScreen extends React.Component<Props, State> {
269 267
     }
270 268
 
271 269
     render() {
272
-        const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
273
-
274 270
         const item = this.item;
275 271
         const start = this.getBookStartDate();
276 272
         const end = this.getBookEndDate();
@@ -280,14 +276,7 @@ class EquipmentRentScreen extends React.Component<Props, State> {
280 276
             const firstAvailability = getFirstEquipmentAvailability(item);
281 277
             return (
282 278
                 <View style={{flex: 1}}>
283
-                    <Animated.ScrollView
284
-                        // Animations
285
-                        onScroll={onScroll}
286
-                        contentContainerStyle={{
287
-                            paddingTop: containerPaddingTop,
288
-                            minHeight: '100%'
289
-                        }}
290
-                        scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}>
279
+                    <CollapsibleScrollView>
291 280
                         <Card style={{margin: 5}}>
292 281
                             <Card.Content>
293 282
                                 <View style={{flex: 1}}>
@@ -396,7 +385,7 @@ class EquipmentRentScreen extends React.Component<Props, State> {
396 385
                             }}
397 386
                             style={{marginBottom: 50}}
398 387
                         />
399
-                    </Animated.ScrollView>
388
+                    </CollapsibleScrollView>
400 389
                     <LoadingConfirmDialog
401 390
                         visible={this.state.dialogVisible}
402 391
                         onDismiss={this.onDialogDismiss}
@@ -449,4 +438,4 @@ class EquipmentRentScreen extends React.Component<Props, State> {
449 438
 
450 439
 }
451 440
 
452
-export default withCollapsible(withTheme(EquipmentRentScreen));
441
+export default withTheme(EquipmentRentScreen);

+ 13
- 24
src/screens/Amicale/LoginScreen.js View File

@@ -1,13 +1,11 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Animated, Dimensions, Image, KeyboardAvoidingView, StyleSheet, View} from "react-native";
4
+import {Image, KeyboardAvoidingView, StyleSheet, View} from "react-native";
5 5
 import {Button, Card, HelperText, TextInput, withTheme} from 'react-native-paper';
6 6
 import ConnectionManager from "../../managers/ConnectionManager";
7 7
 import i18n from 'i18n-js';
8 8
 import ErrorDialog from "../../components/Dialogs/ErrorDialog";
9
-import {withCollapsible} from "../../utils/withCollapsible";
10
-import {Collapsible} from "react-navigation-collapsible";
11 9
 import type {CustomTheme} from "../../managers/ThemeManager";
12 10
 import AsyncStorageManager from "../../managers/AsyncStorageManager";
13 11
 import {StackNavigationProp} from "@react-navigation/stack";
@@ -15,11 +13,11 @@ import AvailableWebsites from "../../constants/AvailableWebsites";
15 13
 import {MASCOT_STYLE} from "../../components/Mascot/Mascot";
16 14
 import MascotPopup from "../../components/Mascot/MascotPopup";
17 15
 import LinearGradient from "react-native-linear-gradient";
16
+import CollapsibleScrollView from "../../components/Collapsible/CollapsibleScrollView";
18 17
 
19 18
 type Props = {
20 19
     navigation: StackNavigationProp,
21 20
     route: { params: { nextScreen: string } },
22
-    collapsibleStack: Collapsible,
23 21
     theme: CustomTheme
24 22
 }
25 23
 
@@ -56,7 +54,6 @@ class LoginScreen extends React.Component<Props, State> {
56 54
     onEmailChange: (value: string) => null;
57 55
     onPasswordChange: (value: string) => null;
58 56
     passwordInputRef: { current: null | TextInput };
59
-    windowHeight: number;
60 57
 
61 58
     nextScreen: string | null;
62 59
 
@@ -66,7 +63,6 @@ class LoginScreen extends React.Component<Props, State> {
66 63
         this.onEmailChange = this.onInputChange.bind(this, true);
67 64
         this.onPasswordChange = this.onInputChange.bind(this, false);
68 65
         this.props.navigation.addListener('focus', this.onScreenFocus);
69
-        this.windowHeight = Dimensions.get('window').height;
70 66
     }
71 67
 
72 68
     onScreenFocus = () => {
@@ -323,13 +319,13 @@ class LoginScreen extends React.Component<Props, State> {
323 319
                     {this.getFormInput()}
324 320
                     <Card.Actions style={{flexWrap: "wrap"}}>
325 321
                         <Button
326
-                        icon="lock-question"
327
-                        mode="contained"
328
-                        onPress={this.onResetPasswordClick}
329
-                        color={this.props.theme.colors.warning}
330
-                        style={{marginRight: 'auto', marginBottom: 20}}>
331
-                        {i18n.t("screens.login.resetPassword")}
332
-                    </Button>
322
+                            icon="lock-question"
323
+                            mode="contained"
324
+                            onPress={this.onResetPasswordClick}
325
+                            color={this.props.theme.colors.warning}
326
+                            style={{marginRight: 'auto', marginBottom: 20}}>
327
+                            {i18n.t("screens.login.resetPassword")}
328
+                        </Button>
333 329
                         <Button
334 330
                             icon="send"
335 331
                             mode="contained"
@@ -359,7 +355,6 @@ class LoginScreen extends React.Component<Props, State> {
359 355
     }
360 356
 
361 357
     render() {
362
-        const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
363 358
         return (
364 359
             <LinearGradient
365 360
                 style={{
@@ -375,16 +370,10 @@ class LoginScreen extends React.Component<Props, State> {
375 370
                     enabled
376 371
                     keyboardVerticalOffset={100}
377 372
                 >
378
-                    <Animated.ScrollView
379
-                        onScroll={onScroll}
380
-                        scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
381
-                        style={{flex: 1}}
382
-                    >
383
-                        <View style={{height: this.windowHeight - containerPaddingTop}}>
373
+                    <CollapsibleScrollView>
374
+                        <View style={{height: "100%"}}>
384 375
                             {this.getMainCard()}
385 376
                         </View>
386
-
387
-
388 377
                         <MascotPopup
389 378
                             visible={this.state.mascotDialogVisible}
390 379
                             title={i18n.t("screens.login.mascotDialog.title")}
@@ -405,7 +394,7 @@ class LoginScreen extends React.Component<Props, State> {
405 394
                             onDismiss={this.hideErrorDialog}
406 395
                             errorCode={this.state.dialogError}
407 396
                         />
408
-                    </Animated.ScrollView>
397
+                    </CollapsibleScrollView>
409 398
                 </KeyboardAvoidingView>
410 399
             </LinearGradient>
411 400
         );
@@ -431,4 +420,4 @@ const styles = StyleSheet.create({
431 420
     }
432 421
 });
433 422
 
434
-export default withCollapsible(withTheme(LoginScreen));
423
+export default withTheme(LoginScreen);

+ 4
- 16
src/screens/Amicale/ProfileScreen.js View File

@@ -1,15 +1,12 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Animated, FlatList, StyleSheet, View} from "react-native";
4
+import {FlatList, StyleSheet, View} from "react-native";
5 5
 import {Avatar, Button, Card, Divider, List, Paragraph, withTheme} from 'react-native-paper';
6 6
 import AuthenticatedScreen from "../../components/Amicale/AuthenticatedScreen";
7 7
 import i18n from 'i18n-js';
8 8
 import LogoutDialog from "../../components/Amicale/LogoutDialog";
9 9
 import MaterialHeaderButtons, {Item} from "../../components/Overrides/CustomHeaderButton";
10
-import CustomTabBar from "../../components/Tabbar/CustomTabBar";
11
-import {Collapsible} from "react-navigation-collapsible";
12
-import {withCollapsible} from "../../utils/withCollapsible";
13 10
 import type {cardList} from "../../components/Lists/CardList/CardList";
14 11
 import CardList from "../../components/Lists/CardList/CardList";
15 12
 import {StackNavigationProp} from "@react-navigation/stack";
@@ -17,11 +14,11 @@ import type {CustomTheme} from "../../managers/ThemeManager";
17 14
 import AvailableWebsites from "../../constants/AvailableWebsites";
18 15
 import Mascot, {MASCOT_STYLE} from "../../components/Mascot/Mascot";
19 16
 import ServicesManager, {SERVICES_KEY} from "../../managers/ServicesManager";
17
+import CollapsibleFlatList from "../../components/Collapsible/CollapsibleFlatList";
20 18
 
21 19
 type Props = {
22 20
     navigation: StackNavigationProp,
23 21
     theme: CustomTheme,
24
-    collapsibleStack: Collapsible,
25 22
 }
26 23
 
27 24
 type State = {
@@ -97,20 +94,11 @@ class ProfileScreen extends React.Component<Props, State> {
97 94
         if (data[0] != null) {
98 95
             this.data = data[0];
99 96
         }
100
-        const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
101 97
         return (
102 98
             <View style={{flex: 1}}>
103
-                <Animated.FlatList
99
+                <CollapsibleFlatList
104 100
                     renderItem={this.getRenderItem}
105 101
                     data={this.flatListData}
106
-                    // Animations
107
-                    onScroll={onScroll}
108
-                    contentContainerStyle={{
109
-                        paddingTop: containerPaddingTop,
110
-                        paddingBottom: CustomTabBar.TAB_BAR_HEIGHT,
111
-                        minHeight: '100%'
112
-                    }}
113
-                    scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
114 102
                 />
115 103
                 <LogoutDialog
116 104
                     {...this.props}
@@ -441,4 +429,4 @@ const styles = StyleSheet.create({
441 429
 
442 430
 });
443 431
 
444
-export default withCollapsible(withTheme(ProfileScreen));
432
+export default withTheme(ProfileScreen);

+ 13
- 15
src/screens/Amicale/VoteScreen.js View File

@@ -1,7 +1,7 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {FlatList, RefreshControl, View} from "react-native";
4
+import {RefreshControl, View} from "react-native";
5 5
 import AuthenticatedScreen from "../../components/Amicale/AuthenticatedScreen";
6 6
 import {getTimeOnlyString, stringToDate} from "../../utils/Planning";
7 7
 import VoteTease from "../../components/Amicale/Vote/VoteTease";
@@ -15,6 +15,7 @@ import MascotPopup from "../../components/Mascot/MascotPopup";
15 15
 import AsyncStorageManager from "../../managers/AsyncStorageManager";
16 16
 import {Button} from "react-native-paper";
17 17
 import VoteNotAvailable from "../../components/Amicale/Vote/VoteNotAvailable";
18
+import CollapsibleFlatList from "../../components/Collapsible/CollapsibleFlatList";
18 19
 
19 20
 export type team = {
20 21
     id: number,
@@ -246,20 +247,17 @@ export default class VoteScreen extends React.Component<Props, State> {
246 247
 
247 248
         this.generateDateObject();
248 249
         return (
249
-            <View>
250
-                {/*$FlowFixMe*/}
251
-                <FlatList
252
-                    data={this.mainFlatListData}
253
-                    refreshControl={
254
-                        <RefreshControl
255
-                            refreshing={false}
256
-                            onRefresh={this.reloadData}
257
-                        />
258
-                    }
259
-                    extraData={this.state.hasVoted.toString()}
260
-                    renderItem={this.mainRenderItem}
261
-                />
262
-            </View>
250
+            <CollapsibleFlatList
251
+                data={this.mainFlatListData}
252
+                refreshControl={
253
+                    <RefreshControl
254
+                        refreshing={false}
255
+                        onRefresh={this.reloadData}
256
+                    />
257
+                }
258
+                extraData={this.state.hasVoted.toString()}
259
+                renderItem={this.mainRenderItem}
260
+            />
263 261
         );
264 262
     };
265 263
 

+ 0
- 26
src/screens/Game/screens/GameEndScreen.js View File

@@ -1,26 +0,0 @@
1
-// @flow
2
-
3
-import * as React from "react";
4
-import {StackNavigationProp} from "@react-navigation/stack";
5
-import type {CustomTheme} from "../../../managers/ThemeManager";
6
-import {withTheme} from "react-native-paper";
7
-
8
-type Props = {
9
-    navigation: StackNavigationProp,
10
-    theme: CustomTheme,
11
-}
12
-
13
-type State = {
14
-
15
-}
16
-
17
-class GameEndScreen extends React.Component<Props, State> {
18
-
19
-    render() {
20
-        return (
21
-            null
22
-        );
23
-    }
24
-}
25
-
26
-export default withTheme(GameEndScreen);

+ 4
- 3
src/screens/Game/screens/GameStartScreen.js View File

@@ -4,7 +4,7 @@ import * as React from "react";
4 4
 import {StackNavigationProp} from "@react-navigation/stack";
5 5
 import type {CustomTheme} from "../../../managers/ThemeManager";
6 6
 import {Button, Card, Divider, Headline, Paragraph, Text, withTheme} from "react-native-paper";
7
-import {ScrollView, View} from "react-native";
7
+import {View} from "react-native";
8 8
 import i18n from "i18n-js";
9 9
 import Mascot, {MASCOT_STYLE} from "../../../components/Mascot/Mascot";
10 10
 import MascotPopup from "../../../components/Mascot/MascotPopup";
@@ -17,6 +17,7 @@ import * as Animatable from "react-native-animatable";
17 17
 import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
18 18
 import LinearGradient from "react-native-linear-gradient";
19 19
 import SpeechArrow from "../../../components/Mascot/SpeechArrow";
20
+import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";
20 21
 
21 22
 type GameStats = {
22 23
     score: number,
@@ -417,7 +418,7 @@ class GameStartScreen extends React.Component<Props, State> {
417 418
                     start={{x: 0, y: 0}}
418 419
                     end={{x: 0, y: 1}}
419 420
                 >
420
-                    <ScrollView>
421
+                    <CollapsibleScrollView>
421 422
                         {this.getMainContent()}
422 423
                         <MascotPopup
423 424
                             visible={this.state.mascotDialogVisible}
@@ -434,7 +435,7 @@ class GameStartScreen extends React.Component<Props, State> {
434 435
                             }}
435 436
                             emotion={MASCOT_STYLE.COOL}
436 437
                         />
437
-                    </ScrollView>
438
+                    </CollapsibleScrollView>
438 439
                 </LinearGradient>
439 440
             </View>
440 441
 

+ 4
- 3
src/screens/Other/FeedbackScreen.js View File

@@ -3,8 +3,9 @@
3 3
 import * as React from 'react';
4 4
 import {Avatar, Button, Card, Paragraph, withTheme} from "react-native-paper";
5 5
 import i18n from "i18n-js";
6
-import {Linking, ScrollView} from "react-native";
6
+import {Linking} from "react-native";
7 7
 import type {CustomTheme} from "../../managers/ThemeManager";
8
+import CollapsibleScrollView from "../../components/Collapsible/CollapsibleScrollView";
8 9
 
9 10
 type Props = {
10 11
     theme: CustomTheme
@@ -76,7 +77,7 @@ class FeedbackScreen extends React.Component<Props> {
76 77
 
77 78
     render() {
78 79
         return (
79
-            <ScrollView style={{padding: 5}}>
80
+            <CollapsibleScrollView style={{padding: 5}}>
80 81
                 <Card>
81 82
                     <Card.Title
82 83
                         title={i18n.t('screens.feedback.bugs')}
@@ -107,7 +108,7 @@ class FeedbackScreen extends React.Component<Props> {
107 108
                     </Card.Content>
108 109
                     {this.getButtons(false)}
109 110
                 </Card>
110
-            </ScrollView>
111
+            </CollapsibleScrollView>
111 112
         );
112 113
     }
113 114
 }

+ 35
- 34
src/screens/Other/Settings/DashboardEditScreen.js View File

@@ -13,6 +13,7 @@ import DashboardEditAccordion from "../../../components/Lists/DashboardEdit/Dash
13 13
 import DashboardEditPreviewItem from "../../../components/Lists/DashboardEdit/DashboardEditPreviewItem";
14 14
 import AsyncStorageManager from "../../../managers/AsyncStorageManager";
15 15
 import i18n from "i18n-js";
16
+import CollapsibleFlatList from "../../../components/Collapsible/CollapsibleFlatList";
16 17
 
17 18
 type Props = {
18 19
     navigation: StackNavigationProp,
@@ -108,43 +109,43 @@ class DashboardEditScreen extends React.Component<Props, State> {
108 109
         );
109 110
     }
110 111
 
111
-
112
-    render() {
112
+    getListHeader() {
113 113
         return (
114
-            <View style={{flex: 1}}>
115
-                <View style={{
116
-                    padding: 5
117
-                }}>
118
-                    <Button
119
-                        mode={"contained"}
120
-                        onPress={this.undoDashboard}
121
-                        style={{
122
-                            marginLeft: "auto",
123
-                            marginRight: "auto",
124
-                        }}
125
-                    >
126
-                        {i18n.t("screens.settings.dashboardEdit.undo")}
127
-                    </Button>
128
-                    <View style={{
129
-                        height: 50
130
-                    }}>
131
-                        {this.getDashboard(this.state.currentDashboard)}
114
+            <Card style={{margin: 5}}>
115
+                <Card.Content>
116
+                    <View style={{padding: 5}}>
117
+                        <Button
118
+                            mode={"contained"}
119
+                            onPress={this.undoDashboard}
120
+                            style={{
121
+                                marginLeft: "auto",
122
+                                marginRight: "auto",
123
+                                marginBottom: 10,
124
+                            }}
125
+                        >
126
+                            {i18n.t("screens.settings.dashboardEdit.undo")}
127
+                        </Button>
128
+                        <View style={{height: 50}}>
129
+                            {this.getDashboard(this.state.currentDashboard)}
130
+                        </View>
132 131
                     </View>
132
+                    <Paragraph style={{textAlign: "center"}}>
133
+                        {i18n.t("screens.settings.dashboardEdit.message")}
134
+                    </Paragraph>
135
+                </Card.Content>
136
+            </Card>
137
+        );
138
+    }
133 139
 
134
-                </View>
135
-                <FlatList
136
-                    data={this.content}
137
-                    renderItem={this.renderItem}
138
-                    ListHeaderComponent={<Card style={{margin: 5}}>
139
-                        <Card.Content>
140
-                            <Paragraph
141
-                                style={{textAlign: "center"}}>{i18n.t("screens.settings.dashboardEdit.message")}</Paragraph>
142
-                        </Card.Content>
143
-
144
-                    </Card>}
145
-                    style={{}}
146
-                />
147
-            </View>
140
+
141
+    render() {
142
+        return (
143
+            <CollapsibleFlatList
144
+                data={this.content}
145
+                renderItem={this.renderItem}
146
+                ListHeaderComponent={this.getListHeader()}
147
+                style={{}}
148
+            />
148 149
         );
149 150
     }
150 151
 

+ 9
- 8
src/screens/Other/Settings/SettingsScreen.js View File

@@ -1,7 +1,7 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {ScrollView, View} from "react-native";
4
+import {View} from "react-native";
5 5
 import type {CustomTheme} from "../../../managers/ThemeManager";
6 6
 import ThemeManager from '../../../managers/ThemeManager';
7 7
 import i18n from "i18n-js";
@@ -10,6 +10,7 @@ import {Card, List, Switch, ToggleButton, withTheme} from 'react-native-paper';
10 10
 import {Appearance} from "react-native-appearance";
11 11
 import CustomSlider from "../../../components/Overrides/CustomSlider";
12 12
 import {StackNavigationProp} from "@react-navigation/stack";
13
+import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";
13 14
 
14 15
 type Props = {
15 16
     navigation: StackNavigationProp,
@@ -187,7 +188,7 @@ class SettingsScreen extends React.Component<Props, State> {
187 188
 
188 189
     render() {
189 190
         return (
190
-            <ScrollView>
191
+            <CollapsibleScrollView>
191 192
                 <Card style={{margin: 5}}>
192 193
                     <Card.Title title={i18n.t('screens.settings.generalCard')}/>
193 194
                     <List.Section>
@@ -243,11 +244,11 @@ class SettingsScreen extends React.Component<Props, State> {
243 244
                     <List.Section>
244 245
                         {this.state.isDebugUnlocked
245 246
                             ? this.getNavigateItem(
246
-                                    "debug",
247
-                                    "bug-check",
248
-                                    i18n.t('screens.debug.title'),
249
-                                    ""
250
-                                )
247
+                                "debug",
248
+                                "bug-check",
249
+                                i18n.t('screens.debug.title'),
250
+                                ""
251
+                            )
251 252
                             : null}
252 253
                         {this.getNavigateItem(
253 254
                             "about",
@@ -264,7 +265,7 @@ class SettingsScreen extends React.Component<Props, State> {
264 265
                         )}
265 266
                     </List.Section>
266 267
                 </Card>
267
-            </ScrollView>
268
+            </CollapsibleScrollView>
268 269
         );
269 270
     }
270 271
 }

+ 4
- 3
src/screens/Services/Proximo/ProximoAboutScreen.js View File

@@ -1,11 +1,12 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Image, ScrollView, View} from 'react-native';
4
+import {Image, View} from 'react-native';
5 5
 import i18n from "i18n-js";
6 6
 import {Card, List, Paragraph, Text} from 'react-native-paper';
7 7
 import CustomTabBar from "../../../components/Tabbar/CustomTabBar";
8 8
 import {StackNavigationProp} from "@react-navigation/stack";
9
+import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";
9 10
 
10 11
 type Props = {
11 12
     navigation: StackNavigationProp,
@@ -20,7 +21,7 @@ export default class ProximoAboutScreen extends React.Component<Props> {
20 21
 
21 22
     render() {
22 23
         return (
23
-            <ScrollView style={{padding: 5}}>
24
+            <CollapsibleScrollView style={{padding: 5}}>
24 25
                 <View style={{
25 26
                     width: '100%',
26 27
                     height: 100,
@@ -52,7 +53,7 @@ export default class ProximoAboutScreen extends React.Component<Props> {
52 53
                         <Paragraph>{i18n.t('screens.proximo.paymentMethodsDescription')}</Paragraph>
53 54
                     </Card.Content>
54 55
                 </Card>
55
-            </ScrollView>
56
+            </CollapsibleScrollView>
56 57
         );
57 58
     }
58 59
 }

+ 4
- 13
src/screens/Services/Proximo/ProximoListScreen.js View File

@@ -1,17 +1,16 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Animated, Image, Platform, ScrollView, View} from "react-native";
4
+import {Image, Platform, ScrollView, View} from "react-native";
5 5
 import i18n from "i18n-js";
6 6
 import CustomModal from "../../../components/Overrides/CustomModal";
7 7
 import {RadioButton, Searchbar, Subheading, Text, Title, withTheme} from "react-native-paper";
8 8
 import {stringMatchQuery} from "../../../utils/Search";
9 9
 import ProximoListItem from "../../../components/Lists/Proximo/ProximoListItem";
10 10
 import MaterialHeaderButtons, {Item} from "../../../components/Overrides/CustomHeaderButton";
11
-import {withCollapsible} from "../../../utils/withCollapsible";
12 11
 import {StackNavigationProp} from "@react-navigation/stack";
13 12
 import type {CustomTheme} from "../../../managers/ThemeManager";
14
-import {Collapsible} from "react-navigation-collapsible";
13
+import CollapsibleFlatList from "../../../components/Collapsible/CollapsibleFlatList";
15 14
 
16 15
 function sortPrice(a, b) {
17 16
     return a.price - b.price;
@@ -43,7 +42,6 @@ type Props = {
43 42
     navigation: StackNavigationProp,
44 43
     route: { params: { data: { data: Object }, shouldFocusSearchBar: boolean } },
45 44
     theme: CustomTheme,
46
-    collapsibleStack: Collapsible,
47 45
 }
48 46
 
49 47
 type State = {
@@ -300,7 +298,6 @@ class ProximoListScreen extends React.Component<Props, State> {
300 298
     itemLayout = (data, index) => ({length: LIST_ITEM_HEIGHT, offset: LIST_ITEM_HEIGHT * index, index});
301 299
 
302 300
     render() {
303
-        const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
304 301
         return (
305 302
             <View style={{
306 303
                 height: '100%'
@@ -308,7 +305,7 @@ class ProximoListScreen extends React.Component<Props, State> {
308 305
                 <CustomModal onRef={this.onModalRef}>
309 306
                     {this.state.modalCurrentDisplayItem}
310 307
                 </CustomModal>
311
-                <Animated.FlatList
308
+                <CollapsibleFlatList
312 309
                     data={this.listData}
313 310
                     extraData={this.state.currentSearchString + this.state.currentSortMode}
314 311
                     keyExtractor={this.keyExtractor}
@@ -317,16 +314,10 @@ class ProximoListScreen extends React.Component<Props, State> {
317 314
                     removeClippedSubviews={true}
318 315
                     getItemLayout={this.itemLayout}
319 316
                     initialNumToRender={10}
320
-                    // Animations
321
-                    onScroll={onScroll}
322
-                    contentContainerStyle={{
323
-                        paddingTop: containerPaddingTop,
324
-                    }}
325
-                    scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
326 317
                 />
327 318
             </View>
328 319
         );
329 320
     }
330 321
 }
331 322
 
332
-export default withCollapsible(withTheme(ProximoListScreen));
323
+export default withTheme(ProximoListScreen);

+ 5
- 27
src/screens/Services/ServicesScreen.js View File

@@ -3,24 +3,20 @@
3 3
 import * as React from 'react';
4 4
 import type {cardList} from "../../components/Lists/CardList/CardList";
5 5
 import CardList from "../../components/Lists/CardList/CardList";
6
-import CustomTabBar from "../../components/Tabbar/CustomTabBar";
7
-import {withCollapsible} from "../../utils/withCollapsible";
8
-import {Collapsible} from "react-navigation-collapsible";
9
-import {Animated, Image, View} from "react-native";
6
+import {Image, View} from "react-native";
10 7
 import {Avatar, Card, Divider, List, TouchableRipple, withTheme} from "react-native-paper";
11 8
 import type {CustomTheme} from "../../managers/ThemeManager";
12 9
 import i18n from 'i18n-js';
13 10
 import MaterialHeaderButtons, {Item} from "../../components/Overrides/CustomHeaderButton";
14
-import ConnectionManager from "../../managers/ConnectionManager";
15 11
 import {StackNavigationProp} from "@react-navigation/stack";
16 12
 import {MASCOT_STYLE} from "../../components/Mascot/Mascot";
17 13
 import MascotPopup from "../../components/Mascot/MascotPopup";
18 14
 import AsyncStorageManager from "../../managers/AsyncStorageManager";
19 15
 import ServicesManager, {SERVICES_CATEGORIES_KEY} from "../../managers/ServicesManager";
16
+import CollapsibleFlatList from "../../components/Collapsible/CollapsibleFlatList";
20 17
 
21 18
 type Props = {
22 19
     navigation: StackNavigationProp,
23
-    collapsibleStack: Collapsible,
24 20
     theme: CustomTheme,
25 21
 }
26 22
 
@@ -107,18 +103,6 @@ class ServicesScreen extends React.Component<Props, State> {
107 103
     }
108 104
 
109 105
     /**
110
-     * Redirects to the given route or to the login screen if user is not logged in.
111
-     *
112
-     * @param route The route to navigate to
113
-     */
114
-    onAmicaleServicePress(route: string) {
115
-        if (ConnectionManager.getInstance().isLoggedIn())
116
-            this.props.navigation.navigate(route);
117
-        else
118
-            this.props.navigation.navigate("login", {nextScreen: route});
119
-    }
120
-
121
-    /**
122 106
      * A list item showing a list of available services for the current category
123 107
      *
124 108
      * @param item
@@ -155,20 +139,14 @@ class ServicesScreen extends React.Component<Props, State> {
155 139
     }
156 140
 
157 141
     render() {
158
-        const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
159 142
         return (
160 143
             <View>
161
-                <Animated.FlatList
144
+                <CollapsibleFlatList
162 145
                     data={this.finalDataset}
163 146
                     renderItem={this.renderItem}
164 147
                     keyExtractor={this.keyExtractor}
165
-                    onScroll={onScroll}
166
-                    contentContainerStyle={{
167
-                        paddingTop: containerPaddingTop,
168
-                        paddingBottom: CustomTabBar.TAB_BAR_HEIGHT + 20
169
-                    }}
170
-                    scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
171 148
                     ItemSeparatorComponent={() => <Divider/>}
149
+                    hasTab={true}
172 150
                 />
173 151
                 <MascotPopup
174 152
                     visible={this.state.mascotDialogVisible}
@@ -190,4 +168,4 @@ class ServicesScreen extends React.Component<Props, State> {
190 168
     }
191 169
 }
192 170
 
193
-export default withCollapsible(withTheme(ServicesScreen));
171
+export default withTheme(ServicesScreen);

+ 1
- 1
src/utils/CollapsibleUtils.js View File

@@ -24,7 +24,7 @@ import StackNavigator, {StackNavigationOptions} from "@react-navigation/stack";
24 24
 export function createScreenCollapsibleStack(
25 25
     name: string,
26 26
     Stack: StackNavigator,
27
-    component: React.Node,
27
+    component: React.ComponentType<any>,
28 28
     title: string,
29 29
     useNativeDriver?: boolean,
30 30
     options?: StackNavigationOptions,

+ 3
- 21
src/utils/withCollapsible.js View File

@@ -12,30 +12,12 @@ import {useCollapsibleStack} from "react-navigation-collapsible";
12 12
  * This component will then receive the collapsibleStack prop.
13 13
  *
14 14
  * @param Component The component to use Collapsible with
15
- * @returns {React.ComponentType<React.ClassAttributes<unknown>>}
15
+ * @returns {React.ComponentType<any>}
16 16
  */
17
-export const withCollapsible = (Component: any) => {
17
+export const withCollapsible = (Component: React.ComponentType<any>) => {
18 18
     return React.forwardRef((props: any, ref: any) => {
19
-
20
-        const {
21
-            onScroll,
22
-            onScrollWithListener,
23
-            containerPaddingTop,
24
-            scrollIndicatorInsetTop,
25
-            translateY,
26
-            progress,
27
-            opacity,
28
-        } = useCollapsibleStack();
29 19
         return <Component
30
-            collapsibleStack={{
31
-                onScroll,
32
-                onScrollWithListener,
33
-                containerPaddingTop: containerPaddingTop,
34
-                scrollIndicatorInsetTop: scrollIndicatorInsetTop,
35
-                translateY,
36
-                progress,
37
-                opacity,
38
-            }}
20
+            collapsibleStack={useCollapsibleStack()}
39 21
             ref={ref}
40 22
             {...props}
41 23
         />;

Loading…
Cancel
Save