Browse Source

Added collapsible headers to more screens

Arnaud Vergnet 3 years ago
parent
commit
14970abeab

+ 80
- 54
src/navigation/TabNavigator.js View File

44
             headerMode={"screen"}
44
             headerMode={"screen"}
45
             screenOptions={defaultScreenOptions}
45
             screenOptions={defaultScreenOptions}
46
         >
46
         >
47
-            {createScreenCollapsibleStack("index", ServicesStack, WebsitesHomeScreen, i18n.t('screens.services.title'))}
48
-            {createScreenCollapsibleStack("services-section", ServicesStack, ServicesSectionScreen, "SECTION")}
49
-            {createScreenCollapsibleStack("amicale-contact", ServicesStack, AmicaleContactScreen, i18n.t('screens.amicaleAbout.title'))}
47
+            {createScreenCollapsibleStack(
48
+                "index",
49
+                ServicesStack,
50
+                WebsitesHomeScreen,
51
+                i18n.t('screens.services.title'))}
52
+            {createScreenCollapsibleStack(
53
+                "services-section",
54
+                ServicesStack,
55
+                ServicesSectionScreen,
56
+                "SECTION")}
57
+            {createScreenCollapsibleStack(
58
+                "amicale-contact",
59
+                ServicesStack,
60
+                AmicaleContactScreen,
61
+                i18n.t('screens.amicaleAbout.title'))}
50
         </ServicesStack.Navigator>
62
         </ServicesStack.Navigator>
51
     );
63
     );
52
 }
64
 }
60
             headerMode={"screen"}
72
             headerMode={"screen"}
61
             screenOptions={defaultScreenOptions}
73
             screenOptions={defaultScreenOptions}
62
         >
74
         >
63
-            {createScreenCollapsibleStack("index", ProxiwashStack, ProxiwashScreen, i18n.t('screens.proxiwash.title'))}
64
-            <ProxiwashStack.Screen
65
-                name="proxiwash-about"
66
-                component={ProxiwashAboutScreen}
67
-                options={{title: i18n.t('screens.proxiwash.title'),}}
68
-            />
75
+            {createScreenCollapsibleStack(
76
+                "index",
77
+                ProxiwashStack,
78
+                ProxiwashScreen,
79
+                i18n.t('screens.proxiwash.title'))}
80
+            {createScreenCollapsibleStack(
81
+                "proxiwash-about",
82
+                ProxiwashStack,
83
+                ProxiwashAboutScreen,
84
+                i18n.t('screens.proxiwash.title'))}
69
         </ProxiwashStack.Navigator>
85
         </ProxiwashStack.Navigator>
70
     );
86
     );
71
 }
87
 }
84
                 component={PlanningScreen}
100
                 component={PlanningScreen}
85
                 options={{title: i18n.t('screens.planning.title'),}}
101
                 options={{title: i18n.t('screens.planning.title'),}}
86
             />
102
             />
87
-            <PlanningStack.Screen
88
-                name="planning-information"
89
-                component={PlanningDisplayScreen}
90
-                options={{title: i18n.t('screens.planning.eventDetails'),}}
91
-            />
103
+            {createScreenCollapsibleStack(
104
+                "planning-information",
105
+                PlanningStack,
106
+                PlanningDisplayScreen,
107
+                i18n.t('screens.planning.eventDetails'))}
92
         </PlanningStack.Navigator>
108
         </PlanningStack.Navigator>
93
     );
109
     );
94
 }
110
 }
115
                         headerStyle: {
131
                         headerStyle: {
116
                             backgroundColor: colors.surface,
132
                             backgroundColor: colors.surface,
117
                         },
133
                         },
118
-                        headerTitle: (props) => <View style={{flexDirection: "row"}}>
119
-                            <Mascot
120
-                                style={{
121
-                                    width: 50
122
-                                }}
123
-                                emotion={MASCOT_STYLE.RANDOM}
124
-                                animated={true}
125
-                                entryAnimation={{
126
-                                    animation: "bounceIn",
127
-                                    duration: 1000
128
-                                }}
129
-                                loopAnimation={{
130
-                                    animation: "pulse",
131
-                                    duration: 2000,
132
-                                    iterationCount: "infinite"
133
-                                }}
134
-                            />
135
-                            <Title style={{
136
-                                marginLeft: 10,
137
-                                marginTop: "auto",
138
-                                marginBottom: "auto",
139
-                            }}>{i18n.t('screens.home.title')}</Title>
140
-                        </View>
134
+                        headerTitle: () =>
135
+                            <View style={{flexDirection: "row"}}>
136
+                                <Mascot
137
+                                    style={{
138
+                                        width: 50
139
+                                    }}
140
+                                    emotion={MASCOT_STYLE.RANDOM}
141
+                                    animated={true}
142
+                                    entryAnimation={{
143
+                                        animation: "bounceIn",
144
+                                        duration: 1000
145
+                                    }}
146
+                                    loopAnimation={{
147
+                                        animation: "pulse",
148
+                                        duration: 2000,
149
+                                        iterationCount: "infinite"
150
+                                    }}
151
+                                />
152
+                                <Title style={{
153
+                                    marginLeft: 10,
154
+                                    marginTop: "auto",
155
+                                    marginBottom: "auto",
156
+                                }}>{i18n.t('screens.home.title')}</Title>
157
+                            </View>
141
                     }}
158
                     }}
142
                     initialParams={params}
159
                     initialParams={params}
143
                 />,
160
                 />,
151
                 component={ScannerScreen}
168
                 component={ScannerScreen}
152
                 options={{title: i18n.t('screens.scanner.title'),}}
169
                 options={{title: i18n.t('screens.scanner.title'),}}
153
             />
170
             />
154
-            <HomeStack.Screen
155
-                name="club-information"
156
-                component={ClubDisplayScreen}
157
-                options={{title: i18n.t('screens.clubs.details'),}}
158
-            />
159
-            <HomeStack.Screen
160
-                name="feed-information"
161
-                component={FeedItemScreen}
162
-                options={{title: i18n.t('screens.home.feed'),}}
163
-            />
164
-            <HomeStack.Screen
165
-                name="planning-information"
166
-                component={PlanningDisplayScreen}
167
-                options={{title: i18n.t('screens.planning.eventDetails'),}}
168
-            />
171
+
172
+            {createScreenCollapsibleStack(
173
+                "club-information",
174
+                HomeStack,
175
+                ClubDisplayScreen,
176
+                i18n.t('screens.clubs.details'))}
177
+            {createScreenCollapsibleStack(
178
+                "feed-information",
179
+                HomeStack,
180
+                FeedItemScreen,
181
+                i18n.t('screens.home.feed'))}
182
+            {createScreenCollapsibleStack(
183
+                "planning-information",
184
+                HomeStack,
185
+                PlanningDisplayScreen,
186
+                i18n.t('screens.planning.eventDetails'))}
169
         </HomeStack.Navigator>
187
         </HomeStack.Navigator>
170
     );
188
     );
171
 }
189
 }
179
             headerMode={"screen"}
197
             headerMode={"screen"}
180
             screenOptions={defaultScreenOptions}
198
             screenOptions={defaultScreenOptions}
181
         >
199
         >
182
-            {getWebsiteStack("index", PlanexStack, PlanexScreen, i18n.t("screens.planex.title"))}
183
-            {createScreenCollapsibleStack("group-select", PlanexStack, GroupSelectionScreen, "GROUP SELECT")}
200
+            {getWebsiteStack(
201
+                "index",
202
+                PlanexStack,
203
+                PlanexScreen,
204
+                i18n.t("screens.planex.title"))}
205
+            {createScreenCollapsibleStack(
206
+                "group-select",
207
+                PlanexStack,
208
+                GroupSelectionScreen,
209
+                "")}
184
         </PlanexStack.Navigator>
210
         </PlanexStack.Navigator>
185
     );
211
     );
186
 }
212
 }

+ 7
- 3
src/screens/Home/FeedItemScreen.js View File

1
 // @flow
1
 // @flow
2
 
2
 
3
 import * as React from 'react';
3
 import * as React from 'react';
4
-import {Linking, ScrollView, View} from 'react-native';
4
+import {Linking, View} from 'react-native';
5
 import {Avatar, Card, Text, withTheme} from 'react-native-paper';
5
 import {Avatar, Card, Text, withTheme} from 'react-native-paper';
6
 import ImageModal from 'react-native-image-modal';
6
 import ImageModal from 'react-native-image-modal';
7
 import Autolink from "react-native-autolink";
7
 import Autolink from "react-native-autolink";
9
 import CustomTabBar from "../../components/Tabbar/CustomTabBar";
9
 import CustomTabBar from "../../components/Tabbar/CustomTabBar";
10
 import {StackNavigationProp} from "@react-navigation/stack";
10
 import {StackNavigationProp} from "@react-navigation/stack";
11
 import type {feedItem} from "./HomeScreen";
11
 import type {feedItem} from "./HomeScreen";
12
+import CollapsibleScrollView from "../../components/Collapsible/CollapsibleScrollView";
12
 
13
 
13
 type Props = {
14
 type Props = {
14
     navigation: StackNavigationProp,
15
     navigation: StackNavigationProp,
71
     render() {
72
     render() {
72
         const hasImage = this.displayData.full_picture !== '' && this.displayData.full_picture != null;
73
         const hasImage = this.displayData.full_picture !== '' && this.displayData.full_picture != null;
73
         return (
74
         return (
74
-            <ScrollView style={{margin: 5,}}>
75
+            <CollapsibleScrollView
76
+                style={{margin: 5,}}
77
+                hasTab={true}
78
+            >
75
                 <Card.Title
79
                 <Card.Title
76
                     title={NAME_AMICALE}
80
                     title={NAME_AMICALE}
77
                     subtitle={this.date}
81
                     subtitle={this.date}
99
                         /> : null
103
                         /> : null
100
                     }
104
                     }
101
                 </Card.Content>
105
                 </Card.Content>
102
-            </ScrollView>
106
+            </CollapsibleScrollView>
103
         );
107
         );
104
     }
108
     }
105
 }
109
 }

+ 7
- 3
src/screens/Planning/PlanningDisplayScreen.js View File

1
 // @flow
1
 // @flow
2
 
2
 
3
 import * as React from 'react';
3
 import * as React from 'react';
4
-import {ScrollView, View} from 'react-native';
4
+import {View} from 'react-native';
5
 import {getDateOnlyString, getFormattedEventTime} from '../../utils/Planning';
5
 import {getDateOnlyString, getFormattedEventTime} from '../../utils/Planning';
6
 import {Card, withTheme} from 'react-native-paper';
6
 import {Card, withTheme} from 'react-native-paper';
7
 import DateManager from "../../managers/DateManager";
7
 import DateManager from "../../managers/DateManager";
14
 import i18n from 'i18n-js';
14
 import i18n from 'i18n-js';
15
 import {StackNavigationProp} from "@react-navigation/stack";
15
 import {StackNavigationProp} from "@react-navigation/stack";
16
 import type {CustomTheme} from "../../managers/ThemeManager";
16
 import type {CustomTheme} from "../../managers/ThemeManager";
17
+import CollapsibleScrollView from "../../components/Collapsible/CollapsibleScrollView";
17
 
18
 
18
 type Props = {
19
 type Props = {
19
     navigation: StackNavigationProp,
20
     navigation: StackNavigationProp,
108
         if (dateString !== null)
109
         if (dateString !== null)
109
             subtitle += ' | ' + DateManager.getInstance().getTranslatedDate(dateString);
110
             subtitle += ' | ' + DateManager.getInstance().getTranslatedDate(dateString);
110
         return (
111
         return (
111
-            <ScrollView style={{paddingLeft: 5, paddingRight: 5}}>
112
+            <CollapsibleScrollView
113
+                style={{paddingLeft: 5, paddingRight: 5}}
114
+                hasTab={true}
115
+            >
112
                 <Card.Title
116
                 <Card.Title
113
                     title={this.displayData.title}
117
                     title={this.displayData.title}
114
                     subtitle={subtitle}
118
                     subtitle={subtitle}
133
                         <CustomHTML html={this.displayData.description}/>
137
                         <CustomHTML html={this.displayData.description}/>
134
                     </Card.Content>
138
                     </Card.Content>
135
                     : <View/>}
139
                     : <View/>}
136
-            </ScrollView>
140
+            </CollapsibleScrollView>
137
         );
141
         );
138
     }
142
     }
139
 
143
 

+ 7
- 3
src/screens/Proxiwash/ProxiwashAboutScreen.js View File

1
 // @flow
1
 // @flow
2
 
2
 
3
 import * as React from 'react';
3
 import * as React from 'react';
4
-import {Image, ScrollView, View} from 'react-native';
4
+import {Image, View} from 'react-native';
5
 import i18n from "i18n-js";
5
 import i18n from "i18n-js";
6
 import {Card, List, Paragraph, Text, Title} from 'react-native-paper';
6
 import {Card, List, Paragraph, Text, Title} from 'react-native-paper';
7
 import CustomTabBar from "../../components/Tabbar/CustomTabBar";
7
 import CustomTabBar from "../../components/Tabbar/CustomTabBar";
8
+import CollapsibleScrollView from "../../components/Collapsible/CollapsibleScrollView";
8
 
9
 
9
 type Props = {};
10
 type Props = {};
10
 
11
 
17
 
18
 
18
     render() {
19
     render() {
19
         return (
20
         return (
20
-            <ScrollView style={{padding: 5}}>
21
+            <CollapsibleScrollView
22
+                style={{padding: 5}}
23
+                hasTab={true}
24
+            >
21
                 <View style={{
25
                 <View style={{
22
                     width: '100%',
26
                     width: '100%',
23
                     height: 100,
27
                     height: 100,
76
                         <Paragraph>{i18n.t('screens.proxiwash.paymentMethodsDescription')}</Paragraph>
80
                         <Paragraph>{i18n.t('screens.proxiwash.paymentMethodsDescription')}</Paragraph>
77
                     </Card.Content>
81
                     </Card.Content>
78
                 </Card>
82
                 </Card>
79
-            </ScrollView>
83
+            </CollapsibleScrollView>
80
         );
84
         );
81
     }
85
     }
82
 }
86
 }

Loading…
Cancel
Save