|
@@ -2,7 +2,6 @@
|
2
|
2
|
|
3
|
3
|
import * as React from 'react';
|
4
|
4
|
import {Platform, StatusBar, StyleSheet, View} from 'react-native';
|
5
|
|
-import type {MaterialCommunityIconsGlyphs} from 'react-native-vector-icons/MaterialCommunityIcons';
|
6
|
5
|
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
|
7
|
6
|
import i18n from 'i18n-js';
|
8
|
7
|
import AppIntroSlider from 'react-native-app-intro-slider';
|
|
@@ -12,6 +11,9 @@ import {Card} from 'react-native-paper';
|
12
|
11
|
import Update from '../../constants/Update';
|
13
|
12
|
import ThemeManager from '../../managers/ThemeManager';
|
14
|
13
|
import Mascot, {MASCOT_STYLE} from '../Mascot/Mascot';
|
|
14
|
+import MascotIntroWelcome from '../Intro/MascotIntroWelcome';
|
|
15
|
+import IntroIcon from '../Intro/IconIntro';
|
|
16
|
+import MascotIntroEnd from '../Intro/MascotIntroEnd';
|
15
|
17
|
|
16
|
18
|
type PropsType = {
|
17
|
19
|
onDone: () => void,
|
|
@@ -23,12 +25,12 @@ type StateType = {
|
23
|
25
|
currentSlide: number,
|
24
|
26
|
};
|
25
|
27
|
|
26
|
|
-type IntroSlideType = {
|
|
28
|
+export type IntroSlideType = {
|
27
|
29
|
key: string,
|
28
|
30
|
title: string,
|
29
|
31
|
text: string,
|
30
|
32
|
view: () => React.Node,
|
31
|
|
- mascotStyle: number,
|
|
33
|
+ mascotStyle?: number,
|
32
|
34
|
colors: [string, string],
|
33
|
35
|
};
|
34
|
36
|
|
|
@@ -88,15 +90,14 @@ export default class CustomIntroSlider extends React.Component<
|
88
|
90
|
key: '0', // Mascot
|
89
|
91
|
title: i18n.t('intro.slideMain.title'),
|
90
|
92
|
text: i18n.t('intro.slideMain.text'),
|
91
|
|
- view: this.getWelcomeView,
|
92
|
|
- mascotStyle: MASCOT_STYLE.NORMAL,
|
|
93
|
+ view: (): React.Node => <MascotIntroWelcome />,
|
93
|
94
|
colors: ['#be1522', '#57080e'],
|
94
|
95
|
},
|
95
|
96
|
{
|
96
|
97
|
key: '1',
|
97
|
98
|
title: i18n.t('intro.slidePlanex.title'),
|
98
|
99
|
text: i18n.t('intro.slidePlanex.text'),
|
99
|
|
- view: (): React.Node => CustomIntroSlider.getIconView('calendar-clock'),
|
|
100
|
+ view: (): React.Node => <IntroIcon icon="calendar-clock" />,
|
100
|
101
|
mascotStyle: MASCOT_STYLE.INTELLO,
|
101
|
102
|
colors: ['#be1522', '#57080e'],
|
102
|
103
|
},
|
|
@@ -104,7 +105,7 @@ export default class CustomIntroSlider extends React.Component<
|
104
|
105
|
key: '2',
|
105
|
106
|
title: i18n.t('intro.slideEvents.title'),
|
106
|
107
|
text: i18n.t('intro.slideEvents.text'),
|
107
|
|
- view: (): React.Node => CustomIntroSlider.getIconView('calendar-star'),
|
|
108
|
+ view: (): React.Node => <IntroIcon icon="calendar-star" />,
|
108
|
109
|
mascotStyle: MASCOT_STYLE.HAPPY,
|
109
|
110
|
colors: ['#be1522', '#57080e'],
|
110
|
111
|
},
|
|
@@ -112,8 +113,7 @@ export default class CustomIntroSlider extends React.Component<
|
112
|
113
|
key: '3',
|
113
|
114
|
title: i18n.t('intro.slideServices.title'),
|
114
|
115
|
text: i18n.t('intro.slideServices.text'),
|
115
|
|
- view: (): React.Node =>
|
116
|
|
- CustomIntroSlider.getIconView('view-dashboard-variant'),
|
|
116
|
+ view: (): React.Node => <IntroIcon icon="view-dashboard-variant" />,
|
117
|
117
|
mascotStyle: MASCOT_STYLE.CUTE,
|
118
|
118
|
colors: ['#be1522', '#57080e'],
|
119
|
119
|
},
|
|
@@ -121,22 +121,12 @@ export default class CustomIntroSlider extends React.Component<
|
121
|
121
|
key: '4',
|
122
|
122
|
title: i18n.t('intro.slideDone.title'),
|
123
|
123
|
text: i18n.t('intro.slideDone.text'),
|
124
|
|
- view: (): React.Node => this.getEndView(),
|
125
|
|
- mascotStyle: MASCOT_STYLE.COOL,
|
|
124
|
+ view: (): React.Node => <MascotIntroEnd />,
|
126
|
125
|
colors: ['#9c165b', '#3e042b'],
|
127
|
126
|
},
|
128
|
127
|
];
|
129
|
|
- // $FlowFixMe
|
130
|
|
- this.updateSlides = [];
|
131
|
|
- for (let i = 0; i < Update.slidesNumber; i += 1) {
|
132
|
|
- this.updateSlides.push({
|
133
|
|
- key: i.toString(),
|
134
|
|
- title: Update.getInstance().titleList[i],
|
135
|
|
- text: Update.getInstance().descriptionList[i],
|
136
|
|
- icon: Update.iconList[i],
|
137
|
|
- colors: Update.colorsList[i],
|
138
|
|
- });
|
139
|
|
- }
|
|
128
|
+
|
|
129
|
+ this.updateSlides = new Update().getUpdateSlides();
|
140
|
130
|
|
141
|
131
|
this.aprilFoolsSlides = [
|
142
|
132
|
{
|
|
@@ -175,7 +165,7 @@ export default class CustomIntroSlider extends React.Component<
|
175
|
165
|
<View style={{height: '100%', flex: 1}}>
|
176
|
166
|
<View style={{flex: 1}}>{item.view()}</View>
|
177
|
167
|
<Animatable.View useNativeDriver animation="fadeIn">
|
178
|
|
- {index !== 0 && index !== this.introSlides.length - 1 ? (
|
|
168
|
+ {item.mascotStyle != null ? (
|
179
|
169
|
<Mascot
|
180
|
170
|
style={{
|
181
|
171
|
marginLeft: 30,
|
|
@@ -244,95 +234,6 @@ export default class CustomIntroSlider extends React.Component<
|
244
|
234
|
);
|
245
|
235
|
};
|
246
|
236
|
|
247
|
|
- getEndView = (): React.Node => {
|
248
|
|
- return (
|
249
|
|
- <View style={{flex: 1}}>
|
250
|
|
- <Mascot
|
251
|
|
- style={{
|
252
|
|
- ...styles.center,
|
253
|
|
- height: '80%',
|
254
|
|
- }}
|
255
|
|
- emotion={MASCOT_STYLE.COOL}
|
256
|
|
- animated
|
257
|
|
- entryAnimation={{
|
258
|
|
- animation: 'slideInDown',
|
259
|
|
- duration: 2000,
|
260
|
|
- }}
|
261
|
|
- loopAnimation={{
|
262
|
|
- animation: 'pulse',
|
263
|
|
- duration: 2000,
|
264
|
|
- iterationCount: 'infinite',
|
265
|
|
- }}
|
266
|
|
- />
|
267
|
|
- </View>
|
268
|
|
- );
|
269
|
|
- };
|
270
|
|
-
|
271
|
|
- getWelcomeView = (): React.Node => {
|
272
|
|
- return (
|
273
|
|
- <View style={{flex: 1}}>
|
274
|
|
- <Mascot
|
275
|
|
- style={{
|
276
|
|
- ...styles.center,
|
277
|
|
- height: '80%',
|
278
|
|
- }}
|
279
|
|
- emotion={MASCOT_STYLE.NORMAL}
|
280
|
|
- animated
|
281
|
|
- entryAnimation={{
|
282
|
|
- animation: 'bounceIn',
|
283
|
|
- duration: 2000,
|
284
|
|
- }}
|
285
|
|
- />
|
286
|
|
- <Animatable.Text
|
287
|
|
- useNativeDriver
|
288
|
|
- animation="fadeInUp"
|
289
|
|
- duration={500}
|
290
|
|
- style={{
|
291
|
|
- color: '#fff',
|
292
|
|
- textAlign: 'center',
|
293
|
|
- fontSize: 25,
|
294
|
|
- }}>
|
295
|
|
- PABLO
|
296
|
|
- </Animatable.Text>
|
297
|
|
- <Animatable.View
|
298
|
|
- useNativeDriver
|
299
|
|
- animation="fadeInUp"
|
300
|
|
- duration={500}
|
301
|
|
- delay={200}
|
302
|
|
- style={{
|
303
|
|
- position: 'absolute',
|
304
|
|
- bottom: 30,
|
305
|
|
- right: '20%',
|
306
|
|
- width: 50,
|
307
|
|
- height: 50,
|
308
|
|
- }}>
|
309
|
|
- <MaterialCommunityIcons
|
310
|
|
- style={{
|
311
|
|
- ...styles.center,
|
312
|
|
- transform: [{rotateZ: '70deg'}],
|
313
|
|
- }}
|
314
|
|
- name="undo"
|
315
|
|
- color="#fff"
|
316
|
|
- size={40}
|
317
|
|
- />
|
318
|
|
- </Animatable.View>
|
319
|
|
- </View>
|
320
|
|
- );
|
321
|
|
- };
|
322
|
|
-
|
323
|
|
- static getIconView(icon: MaterialCommunityIconsGlyphs): React.Node {
|
324
|
|
- return (
|
325
|
|
- <View style={{flex: 1}}>
|
326
|
|
- <Animatable.View
|
327
|
|
- useNativeDriver
|
328
|
|
- style={styles.center}
|
329
|
|
- animation="fadeIn">
|
330
|
|
- <MaterialCommunityIcons name={icon} color="#fff" size={200} />
|
331
|
|
- </Animatable.View>
|
332
|
|
- </View>
|
333
|
|
- );
|
334
|
|
- }
|
335
|
|
-
|
336
|
237
|
static setStatusBarColor(color: string) {
|
337
|
238
|
if (Platform.OS === 'android') StatusBar.setBackgroundColor(color, true);
|
338
|
239
|
}
|