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,9 +44,21 @@ function ServicesStackComponent() {
44 44
             headerMode={"screen"}
45 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 62
         </ServicesStack.Navigator>
51 63
     );
52 64
 }
@@ -60,12 +72,16 @@ function ProxiwashStackComponent() {
60 72
             headerMode={"screen"}
61 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 85
         </ProxiwashStack.Navigator>
70 86
     );
71 87
 }
@@ -84,11 +100,11 @@ function PlanningStackComponent() {
84 100
                 component={PlanningScreen}
85 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 108
         </PlanningStack.Navigator>
93 109
     );
94 110
 }
@@ -115,29 +131,30 @@ function HomeStackComponent(initialRoute: string | null, defaultData: { [key: st
115 131
                         headerStyle: {
116 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 159
                     initialParams={params}
143 160
                 />,
@@ -151,21 +168,22 @@ function HomeStackComponent(initialRoute: string | null, defaultData: { [key: st
151 168
                 component={ScannerScreen}
152 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 187
         </HomeStack.Navigator>
170 188
     );
171 189
 }
@@ -179,8 +197,16 @@ function PlanexStackComponent() {
179 197
             headerMode={"screen"}
180 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 210
         </PlanexStack.Navigator>
185 211
     );
186 212
 }

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

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

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

Loading…
Cancel
Save