|
@@ -1,351 +1,390 @@
|
1
|
1
|
// @flow
|
2
|
2
|
|
3
|
3
|
import * as React from 'react';
|
4
|
|
-import {FlatList, Linking, Platform, View} from 'react-native';
|
5
|
|
-import i18n from "i18n-js";
|
|
4
|
+import {FlatList, Linking, Platform} from 'react-native';
|
|
5
|
+import i18n from 'i18n-js';
|
6
|
6
|
import {Avatar, Card, List, Title, withTheme} from 'react-native-paper';
|
7
|
|
-import packageJson from "../../../package.json";
|
8
|
|
-import {StackNavigationProp} from "@react-navigation/stack";
|
9
|
|
-import CollapsibleFlatList from "../../components/Collapsible/CollapsibleFlatList";
|
|
7
|
+import {StackNavigationProp} from '@react-navigation/stack';
|
|
8
|
+import packageJson from '../../../package.json';
|
|
9
|
+import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatList';
|
|
10
|
+import APP_LOGO from '../../../assets/android.icon.png';
|
10
|
11
|
|
11
|
|
-type ListItem = {
|
12
|
|
- onPressCallback: () => void,
|
13
|
|
- icon: string,
|
14
|
|
- text: string,
|
15
|
|
- showChevron: boolean
|
|
12
|
+type ListItemType = {
|
|
13
|
+ onPressCallback: () => void,
|
|
14
|
+ icon: string,
|
|
15
|
+ text: string,
|
|
16
|
+ showChevron: boolean,
|
16
|
17
|
};
|
17
|
18
|
|
18
|
19
|
const links = {
|
19
|
|
- appstore: 'https://apps.apple.com/us/app/campus-amicale-insat/id1477722148',
|
20
|
|
- playstore: 'https://play.google.com/store/apps/details?id=fr.amicaleinsat.application',
|
21
|
|
- git: 'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/README.md',
|
22
|
|
- changelog: 'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/Changelog.md',
|
23
|
|
- license: 'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/LICENSE',
|
24
|
|
- authorMail: "mailto:vergnet@etud.insa-toulouse.fr?" +
|
25
|
|
- "subject=" +
|
26
|
|
- "Application Amicale INSA Toulouse" +
|
27
|
|
- "&body=" +
|
28
|
|
- "Coucou !\n\n",
|
29
|
|
- authorLinkedin: 'https://www.linkedin.com/in/arnaud-vergnet-434ba5179/',
|
30
|
|
- yohanMail: "mailto:ysimard@etud.insa-toulouse.fr?" +
|
31
|
|
- "subject=" +
|
32
|
|
- "Application Amicale INSA Toulouse" +
|
33
|
|
- "&body=" +
|
34
|
|
- "Coucou !\n\n",
|
35
|
|
- yohanLinkedin: 'https://www.linkedin.com/in/yohan-simard',
|
36
|
|
- react: 'https://facebook.github.io/react-native/',
|
37
|
|
- meme: "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
|
|
20
|
+ appstore: 'https://apps.apple.com/us/app/campus-amicale-insat/id1477722148',
|
|
21
|
+ playstore:
|
|
22
|
+ 'https://play.google.com/store/apps/details?id=fr.amicaleinsat.application',
|
|
23
|
+ git:
|
|
24
|
+ 'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/README.md',
|
|
25
|
+ changelog:
|
|
26
|
+ 'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/Changelog.md',
|
|
27
|
+ license:
|
|
28
|
+ 'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/LICENSE',
|
|
29
|
+ authorMail:
|
|
30
|
+ 'mailto:vergnet@etud.insa-toulouse.fr?' +
|
|
31
|
+ 'subject=' +
|
|
32
|
+ 'Application Amicale INSA Toulouse' +
|
|
33
|
+ '&body=' +
|
|
34
|
+ 'Coucou !\n\n',
|
|
35
|
+ authorLinkedin: 'https://www.linkedin.com/in/arnaud-vergnet-434ba5179/',
|
|
36
|
+ yohanMail:
|
|
37
|
+ 'mailto:ysimard@etud.insa-toulouse.fr?' +
|
|
38
|
+ 'subject=' +
|
|
39
|
+ 'Application Amicale INSA Toulouse' +
|
|
40
|
+ '&body=' +
|
|
41
|
+ 'Coucou !\n\n',
|
|
42
|
+ yohanLinkedin: 'https://www.linkedin.com/in/yohan-simard',
|
|
43
|
+ react: 'https://facebook.github.io/react-native/',
|
|
44
|
+ meme: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
|
38
|
45
|
};
|
39
|
46
|
|
40
|
|
-type Props = {
|
41
|
|
- navigation: StackNavigationProp,
|
|
47
|
+type PropsType = {
|
|
48
|
+ navigation: StackNavigationProp,
|
42
|
49
|
};
|
43
|
50
|
|
44
|
51
|
/**
|
45
|
52
|
* Opens a link in the device's browser
|
46
|
53
|
* @param link The link to open
|
47
|
54
|
*/
|
48
|
|
-function openWebLink(link) {
|
49
|
|
- Linking.openURL(link).catch((err) => console.error('Error opening link', err));
|
|
55
|
+function openWebLink(link: string) {
|
|
56
|
+ Linking.openURL(link);
|
50
|
57
|
}
|
51
|
58
|
|
52
|
59
|
/**
|
53
|
60
|
* Class defining an about screen. This screen shows the user information about the app and it's author.
|
54
|
61
|
*/
|
55
|
|
-class AboutScreen extends React.Component<Props> {
|
|
62
|
+class AboutScreen extends React.Component<PropsType> {
|
|
63
|
+ /**
|
|
64
|
+ * Data to be displayed in the app card
|
|
65
|
+ */
|
|
66
|
+ appData = [
|
|
67
|
+ {
|
|
68
|
+ onPressCallback: () => {
|
|
69
|
+ openWebLink(Platform.OS === 'ios' ? links.appstore : links.playstore);
|
|
70
|
+ },
|
|
71
|
+ icon: Platform.OS === 'ios' ? 'apple' : 'google-play',
|
|
72
|
+ text:
|
|
73
|
+ Platform.OS === 'ios'
|
|
74
|
+ ? i18n.t('screens.about.appstore')
|
|
75
|
+ : i18n.t('screens.about.playstore'),
|
|
76
|
+ showChevron: true,
|
|
77
|
+ },
|
|
78
|
+ {
|
|
79
|
+ onPressCallback: () => {
|
|
80
|
+ const {navigation} = this.props;
|
|
81
|
+ navigation.navigate('feedback');
|
|
82
|
+ },
|
|
83
|
+ icon: 'bug',
|
|
84
|
+ text: i18n.t('screens.feedback.homeButtonTitle'),
|
|
85
|
+ showChevron: true,
|
|
86
|
+ },
|
|
87
|
+ {
|
|
88
|
+ onPressCallback: () => {
|
|
89
|
+ openWebLink(links.git);
|
|
90
|
+ },
|
|
91
|
+ icon: 'git',
|
|
92
|
+ text: 'Git',
|
|
93
|
+ showChevron: true,
|
|
94
|
+ },
|
|
95
|
+ {
|
|
96
|
+ onPressCallback: () => {
|
|
97
|
+ openWebLink(links.changelog);
|
|
98
|
+ },
|
|
99
|
+ icon: 'refresh',
|
|
100
|
+ text: i18n.t('screens.about.changelog'),
|
|
101
|
+ showChevron: true,
|
|
102
|
+ },
|
|
103
|
+ {
|
|
104
|
+ onPressCallback: () => {
|
|
105
|
+ openWebLink(links.license);
|
|
106
|
+ },
|
|
107
|
+ icon: 'file-document',
|
|
108
|
+ text: i18n.t('screens.about.license'),
|
|
109
|
+ showChevron: true,
|
|
110
|
+ },
|
|
111
|
+ ];
|
56
|
112
|
|
57
|
|
- /**
|
58
|
|
- * Data to be displayed in the app card
|
59
|
|
- */
|
60
|
|
- appData = [
|
61
|
|
- {
|
62
|
|
- onPressCallback: () => openWebLink(Platform.OS === "ios" ? links.appstore : links.playstore),
|
63
|
|
- icon: Platform.OS === "ios" ? 'apple' : 'google-play',
|
64
|
|
- text: Platform.OS === "ios" ? i18n.t('screens.about.appstore') : i18n.t('screens.about.playstore'),
|
65
|
|
- showChevron: true
|
66
|
|
- },
|
67
|
|
- {
|
68
|
|
- onPressCallback: () => this.props.navigation.navigate("feedback"),
|
69
|
|
- icon: 'bug',
|
70
|
|
- text: i18n.t("screens.feedback.homeButtonTitle"),
|
71
|
|
- showChevron: true
|
72
|
|
- },
|
73
|
|
- {
|
74
|
|
- onPressCallback: () => openWebLink(links.git),
|
75
|
|
- icon: 'git',
|
76
|
|
- text: 'Git',
|
77
|
|
- showChevron: true
|
78
|
|
- },
|
79
|
|
- {
|
80
|
|
- onPressCallback: () => openWebLink(links.changelog),
|
81
|
|
- icon: 'refresh',
|
82
|
|
- text: i18n.t('screens.about.changelog'),
|
83
|
|
- showChevron: true
|
84
|
|
- },
|
85
|
|
- {
|
86
|
|
- onPressCallback: () => openWebLink(links.license),
|
87
|
|
- icon: 'file-document',
|
88
|
|
- text: i18n.t('screens.about.license'),
|
89
|
|
- showChevron: true
|
90
|
|
- },
|
91
|
|
- ];
|
92
|
|
- /**
|
93
|
|
- * Data to be displayed in the author card
|
94
|
|
- */
|
95
|
|
- authorData = [
|
96
|
|
- {
|
97
|
|
- onPressCallback: () => openWebLink(links.meme),
|
98
|
|
- icon: 'account-circle',
|
99
|
|
- text: 'Arnaud VERGNET',
|
100
|
|
- showChevron: false
|
101
|
|
- },
|
102
|
|
- {
|
103
|
|
- onPressCallback: () => openWebLink(links.authorMail),
|
104
|
|
- icon: 'email',
|
105
|
|
- text: i18n.t('screens.about.authorMail'),
|
106
|
|
- showChevron: true
|
107
|
|
- },
|
108
|
|
- {
|
109
|
|
- onPressCallback: () => openWebLink(links.authorLinkedin),
|
110
|
|
- icon: 'linkedin',
|
111
|
|
- text: 'Linkedin',
|
112
|
|
- showChevron: true
|
113
|
|
- },
|
114
|
|
- ];
|
115
|
|
- /**
|
116
|
|
- * Data to be displayed in the additional developer card
|
117
|
|
- */
|
118
|
|
- additionalDevData = [
|
119
|
|
- {
|
120
|
|
- onPressCallback: () => console.log('Meme this'),
|
121
|
|
- icon: 'account',
|
122
|
|
- text: 'Yohan SIMARD',
|
123
|
|
- showChevron: false
|
124
|
|
- },
|
125
|
|
- {
|
126
|
|
- onPressCallback: () => openWebLink(links.yohanMail),
|
127
|
|
- icon: 'email',
|
128
|
|
- text: i18n.t('screens.about.authorMail'),
|
129
|
|
- showChevron: true
|
130
|
|
- },
|
131
|
|
- {
|
132
|
|
- onPressCallback: () => openWebLink(links.yohanLinkedin),
|
133
|
|
- icon: 'linkedin',
|
134
|
|
- text: 'Linkedin',
|
135
|
|
- showChevron: true
|
136
|
|
- },
|
137
|
|
- ];
|
138
|
|
- /**
|
139
|
|
- * Data to be displayed in the technologies card
|
140
|
|
- */
|
141
|
|
- technoData = [
|
142
|
|
- {
|
143
|
|
- onPressCallback: () => openWebLink(links.react),
|
144
|
|
- icon: 'react',
|
145
|
|
- text: i18n.t('screens.about.reactNative'),
|
146
|
|
- showChevron: true
|
147
|
|
- },
|
148
|
|
- {
|
149
|
|
- onPressCallback: () => this.props.navigation.navigate('dependencies'),
|
150
|
|
- icon: 'developer-board',
|
151
|
|
- text: i18n.t('screens.about.libs'),
|
152
|
|
- showChevron: true
|
153
|
|
- },
|
154
|
|
- ];
|
155
|
|
- /**
|
156
|
|
- * Order of information cards
|
157
|
|
- */
|
158
|
|
- dataOrder = [
|
159
|
|
- {
|
160
|
|
- id: 'app',
|
161
|
|
- },
|
162
|
|
- {
|
163
|
|
- id: 'team',
|
164
|
|
- },
|
165
|
|
- {
|
166
|
|
- id: 'techno',
|
167
|
|
- },
|
168
|
|
- ];
|
|
113
|
+ /**
|
|
114
|
+ * Data to be displayed in the author card
|
|
115
|
+ */
|
|
116
|
+ authorData = [
|
|
117
|
+ {
|
|
118
|
+ onPressCallback: () => {
|
|
119
|
+ openWebLink(links.meme);
|
|
120
|
+ },
|
|
121
|
+ icon: 'account-circle',
|
|
122
|
+ text: 'Arnaud VERGNET',
|
|
123
|
+ showChevron: false,
|
|
124
|
+ },
|
|
125
|
+ {
|
|
126
|
+ onPressCallback: () => {
|
|
127
|
+ openWebLink(links.authorMail);
|
|
128
|
+ },
|
|
129
|
+ icon: 'email',
|
|
130
|
+ text: i18n.t('screens.about.authorMail'),
|
|
131
|
+ showChevron: true,
|
|
132
|
+ },
|
|
133
|
+ {
|
|
134
|
+ onPressCallback: () => {
|
|
135
|
+ openWebLink(links.authorLinkedin);
|
|
136
|
+ },
|
|
137
|
+ icon: 'linkedin',
|
|
138
|
+ text: 'Linkedin',
|
|
139
|
+ showChevron: true,
|
|
140
|
+ },
|
|
141
|
+ ];
|
169
|
142
|
|
170
|
|
- /**
|
171
|
|
- * Gets the app icon
|
172
|
|
- *
|
173
|
|
- * @param props
|
174
|
|
- * @return {*}
|
175
|
|
- */
|
176
|
|
- getAppIcon(props) {
|
177
|
|
- return (
|
|
143
|
+ /**
|
|
144
|
+ * Data to be displayed in the additional developer card
|
|
145
|
+ */
|
|
146
|
+ additionalDevData = [
|
|
147
|
+ {
|
|
148
|
+ onPressCallback: () => {
|
|
149
|
+ console.log('Meme this');
|
|
150
|
+ },
|
|
151
|
+ icon: 'account',
|
|
152
|
+ text: 'Yohan SIMARD',
|
|
153
|
+ showChevron: false,
|
|
154
|
+ },
|
|
155
|
+ {
|
|
156
|
+ onPressCallback: () => {
|
|
157
|
+ openWebLink(links.yohanMail);
|
|
158
|
+ },
|
|
159
|
+ icon: 'email',
|
|
160
|
+ text: i18n.t('screens.about.authorMail'),
|
|
161
|
+ showChevron: true,
|
|
162
|
+ },
|
|
163
|
+ {
|
|
164
|
+ onPressCallback: () => {
|
|
165
|
+ openWebLink(links.yohanLinkedin);
|
|
166
|
+ },
|
|
167
|
+ icon: 'linkedin',
|
|
168
|
+ text: 'Linkedin',
|
|
169
|
+ showChevron: true,
|
|
170
|
+ },
|
|
171
|
+ ];
|
|
172
|
+
|
|
173
|
+ /**
|
|
174
|
+ * Data to be displayed in the technologies card
|
|
175
|
+ */
|
|
176
|
+ technoData = [
|
|
177
|
+ {
|
|
178
|
+ onPressCallback: () => {
|
|
179
|
+ openWebLink(links.react);
|
|
180
|
+ },
|
|
181
|
+ icon: 'react',
|
|
182
|
+ text: i18n.t('screens.about.reactNative'),
|
|
183
|
+ showChevron: true,
|
|
184
|
+ },
|
|
185
|
+ {
|
|
186
|
+ onPressCallback: () => {
|
|
187
|
+ const {navigation} = this.props;
|
|
188
|
+ navigation.navigate('dependencies');
|
|
189
|
+ },
|
|
190
|
+ icon: 'developer-board',
|
|
191
|
+ text: i18n.t('screens.about.libs'),
|
|
192
|
+ showChevron: true,
|
|
193
|
+ },
|
|
194
|
+ ];
|
|
195
|
+
|
|
196
|
+ /**
|
|
197
|
+ * Order of information cards
|
|
198
|
+ */
|
|
199
|
+ dataOrder = [
|
|
200
|
+ {
|
|
201
|
+ id: 'app',
|
|
202
|
+ },
|
|
203
|
+ {
|
|
204
|
+ id: 'team',
|
|
205
|
+ },
|
|
206
|
+ {
|
|
207
|
+ id: 'techno',
|
|
208
|
+ },
|
|
209
|
+ ];
|
|
210
|
+
|
|
211
|
+ /**
|
|
212
|
+ * Gets the app card showing information and links about the app.
|
|
213
|
+ *
|
|
214
|
+ * @return {*}
|
|
215
|
+ */
|
|
216
|
+ getAppCard(): React.Node {
|
|
217
|
+ return (
|
|
218
|
+ <Card style={{marginBottom: 10}}>
|
|
219
|
+ <Card.Title
|
|
220
|
+ title="Campus"
|
|
221
|
+ subtitle={packageJson.version}
|
|
222
|
+ left={({size}: {size: number}): React.Node => (
|
178
|
223
|
<Avatar.Image
|
179
|
|
- {...props}
|
180
|
|
- source={require('../../../assets/android.icon.png')}
|
181
|
|
- style={{backgroundColor: 'transparent'}}
|
|
224
|
+ size={size}
|
|
225
|
+ source={APP_LOGO}
|
|
226
|
+ style={{backgroundColor: 'transparent'}}
|
182
|
227
|
/>
|
183
|
|
- );
|
184
|
|
- }
|
|
228
|
+ )}
|
|
229
|
+ />
|
|
230
|
+ <Card.Content>
|
|
231
|
+ <FlatList
|
|
232
|
+ data={this.appData}
|
|
233
|
+ keyExtractor={this.keyExtractor}
|
|
234
|
+ renderItem={this.getCardItem}
|
|
235
|
+ />
|
|
236
|
+ </Card.Content>
|
|
237
|
+ </Card>
|
|
238
|
+ );
|
|
239
|
+ }
|
185
|
240
|
|
186
|
|
- /**
|
187
|
|
- * Extracts a key from the given item
|
188
|
|
- *
|
189
|
|
- * @param item The item to extract the key from
|
190
|
|
- * @return {string} The extracted key
|
191
|
|
- */
|
192
|
|
- keyExtractor(item: ListItem): string {
|
193
|
|
- return item.icon;
|
194
|
|
- }
|
|
241
|
+ /**
|
|
242
|
+ * Gets the team card showing information and links about the team
|
|
243
|
+ *
|
|
244
|
+ * @return {*}
|
|
245
|
+ */
|
|
246
|
+ getTeamCard(): React.Node {
|
|
247
|
+ return (
|
|
248
|
+ <Card style={{marginBottom: 10}}>
|
|
249
|
+ <Card.Title
|
|
250
|
+ title={i18n.t('screens.about.team')}
|
|
251
|
+ left={({size, color}: {size: number, color: string}): React.Node => (
|
|
252
|
+ <Avatar.Icon size={size} color={color} icon="account-multiple" />
|
|
253
|
+ )}
|
|
254
|
+ />
|
|
255
|
+ <Card.Content>
|
|
256
|
+ <Title>{i18n.t('screens.about.author')}</Title>
|
|
257
|
+ <FlatList
|
|
258
|
+ data={this.authorData}
|
|
259
|
+ keyExtractor={this.keyExtractor}
|
|
260
|
+ listKey="1"
|
|
261
|
+ renderItem={this.getCardItem}
|
|
262
|
+ />
|
|
263
|
+ <Title>{i18n.t('screens.about.additionalDev')}</Title>
|
|
264
|
+ <FlatList
|
|
265
|
+ data={this.additionalDevData}
|
|
266
|
+ keyExtractor={this.keyExtractor}
|
|
267
|
+ listKey="2"
|
|
268
|
+ renderItem={this.getCardItem}
|
|
269
|
+ />
|
|
270
|
+ </Card.Content>
|
|
271
|
+ </Card>
|
|
272
|
+ );
|
|
273
|
+ }
|
195
|
274
|
|
196
|
|
- /**
|
197
|
|
- * Gets the app card showing information and links about the app.
|
198
|
|
- *
|
199
|
|
- * @return {*}
|
200
|
|
- */
|
201
|
|
- getAppCard() {
|
202
|
|
- return (
|
203
|
|
- <Card style={{marginBottom: 10}}>
|
204
|
|
- <Card.Title
|
205
|
|
- title={"Campus"}
|
206
|
|
- subtitle={packageJson.version}
|
207
|
|
- left={this.getAppIcon}/>
|
208
|
|
- <Card.Content>
|
209
|
|
- <FlatList
|
210
|
|
- data={this.appData}
|
211
|
|
- keyExtractor={this.keyExtractor}
|
212
|
|
- renderItem={this.getCardItem}
|
213
|
|
- />
|
214
|
|
- </Card.Content>
|
215
|
|
- </Card>
|
216
|
|
- );
|
217
|
|
- }
|
|
275
|
+ /**
|
|
276
|
+ * Gets the techno card showing information and links about the technologies used in the app
|
|
277
|
+ *
|
|
278
|
+ * @return {*}
|
|
279
|
+ */
|
|
280
|
+ getTechnoCard(): React.Node {
|
|
281
|
+ return (
|
|
282
|
+ <Card style={{marginBottom: 10}}>
|
|
283
|
+ <Card.Content>
|
|
284
|
+ <Title>{i18n.t('screens.about.technologies')}</Title>
|
|
285
|
+ <FlatList
|
|
286
|
+ data={this.technoData}
|
|
287
|
+ keyExtractor={this.keyExtractor}
|
|
288
|
+ renderItem={this.getCardItem}
|
|
289
|
+ />
|
|
290
|
+ </Card.Content>
|
|
291
|
+ </Card>
|
|
292
|
+ );
|
|
293
|
+ }
|
218
|
294
|
|
219
|
|
- /**
|
220
|
|
- * Gets the team card showing information and links about the team
|
221
|
|
- *
|
222
|
|
- * @return {*}
|
223
|
|
- */
|
224
|
|
- getTeamCard() {
|
225
|
|
- return (
|
226
|
|
- <Card style={{marginBottom: 10}}>
|
227
|
|
- <Card.Title
|
228
|
|
- title={i18n.t('screens.about.team')}
|
229
|
|
- left={(props) => <Avatar.Icon {...props} icon={'account-multiple'}/>}/>
|
230
|
|
- <Card.Content>
|
231
|
|
- <Title>{i18n.t('screens.about.author')}</Title>
|
232
|
|
- <FlatList
|
233
|
|
- data={this.authorData}
|
234
|
|
- keyExtractor={this.keyExtractor}
|
235
|
|
- listKey={"1"}
|
236
|
|
- renderItem={this.getCardItem}
|
237
|
|
- />
|
238
|
|
- <Title>{i18n.t('screens.about.additionalDev')}</Title>
|
239
|
|
- <FlatList
|
240
|
|
- data={this.additionalDevData}
|
241
|
|
- keyExtractor={this.keyExtractor}
|
242
|
|
- listKey={"2"}
|
243
|
|
- renderItem={this.getCardItem}
|
244
|
|
- />
|
245
|
|
- </Card.Content>
|
246
|
|
- </Card>
|
247
|
|
- );
|
248
|
|
- }
|
|
295
|
+ /**
|
|
296
|
+ * Gets a chevron icon
|
|
297
|
+ *
|
|
298
|
+ * @param props
|
|
299
|
+ * @return {*}
|
|
300
|
+ */
|
|
301
|
+ static getChevronIcon({
|
|
302
|
+ size,
|
|
303
|
+ color,
|
|
304
|
+ }: {
|
|
305
|
+ size: number,
|
|
306
|
+ color: string,
|
|
307
|
+ }): React.Node {
|
|
308
|
+ return <List.Icon size={size} color={color} icon="chevron-right" />;
|
|
309
|
+ }
|
249
|
310
|
|
250
|
|
- /**
|
251
|
|
- * Gets the techno card showing information and links about the technologies used in the app
|
252
|
|
- *
|
253
|
|
- * @return {*}
|
254
|
|
- */
|
255
|
|
- getTechnoCard() {
|
256
|
|
- return (
|
257
|
|
- <Card style={{marginBottom: 10}}>
|
258
|
|
- <Card.Content>
|
259
|
|
- <Title>{i18n.t('screens.about.technologies')}</Title>
|
260
|
|
- <FlatList
|
261
|
|
- data={this.technoData}
|
262
|
|
- keyExtractor={this.keyExtractor}
|
263
|
|
- renderItem={this.getCardItem}
|
264
|
|
- />
|
265
|
|
- </Card.Content>
|
266
|
|
- </Card>
|
267
|
|
- );
|
268
|
|
- }
|
|
311
|
+ /**
|
|
312
|
+ * Gets a custom list item icon
|
|
313
|
+ *
|
|
314
|
+ * @param item The item to show the icon for
|
|
315
|
+ * @param props
|
|
316
|
+ * @return {*}
|
|
317
|
+ */
|
|
318
|
+ static getItemIcon(
|
|
319
|
+ item: ListItemType,
|
|
320
|
+ {size, color}: {size: number, color: string},
|
|
321
|
+ ): React.Node {
|
|
322
|
+ return <List.Icon size={size} color={color} icon={item.icon} />;
|
|
323
|
+ }
|
269
|
324
|
|
270
|
|
- /**
|
271
|
|
- * Gets a chevron icon
|
272
|
|
- *
|
273
|
|
- * @param props
|
274
|
|
- * @return {*}
|
275
|
|
- */
|
276
|
|
- getChevronIcon(props) {
|
277
|
|
- return (
|
278
|
|
- <List.Icon {...props} icon={'chevron-right'}/>
|
279
|
|
- );
|
|
325
|
+ /**
|
|
326
|
+ * Gets a clickable card item to be rendered inside a card.
|
|
327
|
+ *
|
|
328
|
+ * @returns {*}
|
|
329
|
+ */
|
|
330
|
+ getCardItem = ({item}: {item: ListItemType}): React.Node => {
|
|
331
|
+ const getItemIcon = (props: {size: number, color: string}): React.Node =>
|
|
332
|
+ AboutScreen.getItemIcon(item, props);
|
|
333
|
+ if (item.showChevron) {
|
|
334
|
+ return (
|
|
335
|
+ <List.Item
|
|
336
|
+ title={item.text}
|
|
337
|
+ left={getItemIcon}
|
|
338
|
+ right={AboutScreen.getChevronIcon}
|
|
339
|
+ onPress={item.onPressCallback}
|
|
340
|
+ />
|
|
341
|
+ );
|
280
|
342
|
}
|
|
343
|
+ return (
|
|
344
|
+ <List.Item
|
|
345
|
+ title={item.text}
|
|
346
|
+ left={getItemIcon}
|
|
347
|
+ onPress={item.onPressCallback}
|
|
348
|
+ />
|
|
349
|
+ );
|
|
350
|
+ };
|
281
|
351
|
|
282
|
|
- /**
|
283
|
|
- * Gets a custom list item icon
|
284
|
|
- *
|
285
|
|
- * @param item The item to show the icon for
|
286
|
|
- * @param props
|
287
|
|
- * @return {*}
|
288
|
|
- */
|
289
|
|
- getItemIcon(item: ListItem, props) {
|
290
|
|
- return (
|
291
|
|
- <List.Icon {...props} icon={item.icon}/>
|
292
|
|
- );
|
|
352
|
+ /**
|
|
353
|
+ * Gets a card, depending on the given item's id
|
|
354
|
+ *
|
|
355
|
+ * @param item The item to show
|
|
356
|
+ * @return {*}
|
|
357
|
+ */
|
|
358
|
+ getMainCard = ({item}: {item: {id: string}}): React.Node => {
|
|
359
|
+ switch (item.id) {
|
|
360
|
+ case 'app':
|
|
361
|
+ return this.getAppCard();
|
|
362
|
+ case 'team':
|
|
363
|
+ return this.getTeamCard();
|
|
364
|
+ case 'techno':
|
|
365
|
+ return this.getTechnoCard();
|
|
366
|
+ default:
|
|
367
|
+ return null;
|
293
|
368
|
}
|
|
369
|
+ };
|
294
|
370
|
|
295
|
|
- /**
|
296
|
|
- * Gets a clickable card item to be rendered inside a card.
|
297
|
|
- *
|
298
|
|
- * @returns {*}
|
299
|
|
- */
|
300
|
|
- getCardItem = ({item}: { item: ListItem }) => {
|
301
|
|
- const getItemIcon = this.getItemIcon.bind(this, item);
|
302
|
|
- if (item.showChevron) {
|
303
|
|
- return (
|
304
|
|
- <List.Item
|
305
|
|
- title={item.text}
|
306
|
|
- left={getItemIcon}
|
307
|
|
- right={this.getChevronIcon}
|
308
|
|
- onPress={item.onPressCallback}
|
309
|
|
- />
|
310
|
|
- );
|
311
|
|
- } else {
|
312
|
|
- return (
|
313
|
|
- <List.Item
|
314
|
|
- title={item.text}
|
315
|
|
- left={getItemIcon}
|
316
|
|
- onPress={item.onPressCallback}
|
317
|
|
- />
|
318
|
|
- );
|
319
|
|
- }
|
320
|
|
- };
|
321
|
|
-
|
322
|
|
- /**
|
323
|
|
- * Gets a card, depending on the given item's id
|
324
|
|
- *
|
325
|
|
- * @param item The item to show
|
326
|
|
- * @return {*}
|
327
|
|
- */
|
328
|
|
- getMainCard = ({item}: { item: { id: string } }) => {
|
329
|
|
- switch (item.id) {
|
330
|
|
- case 'app':
|
331
|
|
- return this.getAppCard();
|
332
|
|
- case 'team':
|
333
|
|
- return this.getTeamCard();
|
334
|
|
- case 'techno':
|
335
|
|
- return this.getTechnoCard();
|
336
|
|
- }
|
337
|
|
- return <View/>;
|
338
|
|
- };
|
|
371
|
+ /**
|
|
372
|
+ * Extracts a key from the given item
|
|
373
|
+ *
|
|
374
|
+ * @param item The item to extract the key from
|
|
375
|
+ * @return {string} The extracted key
|
|
376
|
+ */
|
|
377
|
+ keyExtractor = (item: ListItemType): string => item.icon;
|
339
|
378
|
|
340
|
|
- render() {
|
341
|
|
- return (
|
342
|
|
- <CollapsibleFlatList
|
343
|
|
- style={{padding: 5}}
|
344
|
|
- data={this.dataOrder}
|
345
|
|
- renderItem={this.getMainCard}
|
346
|
|
- />
|
347
|
|
- );
|
348
|
|
- }
|
|
379
|
+ render(): React.Node {
|
|
380
|
+ return (
|
|
381
|
+ <CollapsibleFlatList
|
|
382
|
+ style={{padding: 5}}
|
|
383
|
+ data={this.dataOrder}
|
|
384
|
+ renderItem={this.getMainCard}
|
|
385
|
+ />
|
|
386
|
+ );
|
|
387
|
+ }
|
349
|
388
|
}
|
350
|
389
|
|
351
|
390
|
export default withTheme(AboutScreen);
|