Browse Source

Improve override components to match linter

Arnaud Vergnet 3 years ago
parent
commit
4db4516296

+ 52
- 49
src/components/Overrides/CustomAgenda.js View File

@@ -1,60 +1,63 @@
1
+// @flow
2
+
1 3
 import * as React from 'react';
2
-import {View} from "react-native";
4
+import {View} from 'react-native';
3 5
 import {withTheme} from 'react-native-paper';
4
-import {Agenda} from "react-native-calendars";
6
+import {Agenda} from 'react-native-calendars';
7
+import type {CustomTheme} from '../../managers/ThemeManager';
5 8
 
6
-type Props = {
7
-    theme: Object,
8
-}
9
+type PropsType = {
10
+  theme: CustomTheme,
11
+  onRef: (ref: Agenda) => void,
12
+};
9 13
 
10 14
 /**
11 15
  * Abstraction layer for Agenda component, using custom configuration
12 16
  */
13
-class CustomAgenda extends React.Component<Props> {
14
-
15
-    getAgenda() {
16
-        return <Agenda
17
-            {...this.props}
18
-            ref={this.props.onRef}
19
-            theme={{
20
-                backgroundColor: this.props.theme.colors.agendaBackgroundColor,
21
-                calendarBackground: this.props.theme.colors.background,
22
-                textSectionTitleColor: this.props.theme.colors.agendaDayTextColor,
23
-                selectedDayBackgroundColor: this.props.theme.colors.primary,
24
-                selectedDayTextColor: '#ffffff',
25
-                todayTextColor: this.props.theme.colors.primary,
26
-                dayTextColor: this.props.theme.colors.text,
27
-                textDisabledColor: this.props.theme.colors.agendaDayTextColor,
28
-                dotColor: this.props.theme.colors.primary,
29
-                selectedDotColor: '#ffffff',
30
-                arrowColor: 'orange',
31
-                monthTextColor: this.props.theme.colors.primary,
32
-                indicatorColor: this.props.theme.colors.primary,
33
-                textDayFontWeight: '300',
34
-                textMonthFontWeight: 'bold',
35
-                textDayHeaderFontWeight: '300',
36
-                textDayFontSize: 16,
37
-                textMonthFontSize: 16,
38
-                textDayHeaderFontSize: 16,
39
-                agendaDayTextColor: this.props.theme.colors.agendaDayTextColor,
40
-                agendaDayNumColor: this.props.theme.colors.agendaDayTextColor,
41
-                agendaTodayColor: this.props.theme.colors.primary,
42
-                agendaKnobColor: this.props.theme.colors.primary,
43
-            }}
44
-        />;
45
-    }
17
+class CustomAgenda extends React.Component<PropsType> {
18
+  getAgenda(): React.Node {
19
+    const {props} = this;
20
+    return (
21
+      <Agenda
22
+        // eslint-disable-next-line react/jsx-props-no-spreading
23
+        {...props}
24
+        ref={props.onRef}
25
+        theme={{
26
+          backgroundColor: props.theme.colors.agendaBackgroundColor,
27
+          calendarBackground: props.theme.colors.background,
28
+          textSectionTitleColor: props.theme.colors.agendaDayTextColor,
29
+          selectedDayBackgroundColor: props.theme.colors.primary,
30
+          selectedDayTextColor: '#ffffff',
31
+          todayTextColor: props.theme.colors.primary,
32
+          dayTextColor: props.theme.colors.text,
33
+          textDisabledColor: props.theme.colors.agendaDayTextColor,
34
+          dotColor: props.theme.colors.primary,
35
+          selectedDotColor: '#ffffff',
36
+          arrowColor: 'orange',
37
+          monthTextColor: props.theme.colors.primary,
38
+          indicatorColor: props.theme.colors.primary,
39
+          textDayFontWeight: '300',
40
+          textMonthFontWeight: 'bold',
41
+          textDayHeaderFontWeight: '300',
42
+          textDayFontSize: 16,
43
+          textMonthFontSize: 16,
44
+          textDayHeaderFontSize: 16,
45
+          agendaDayTextColor: props.theme.colors.agendaDayTextColor,
46
+          agendaDayNumColor: props.theme.colors.agendaDayTextColor,
47
+          agendaTodayColor: props.theme.colors.primary,
48
+          agendaKnobColor: props.theme.colors.primary,
49
+        }}
50
+      />
51
+    );
52
+  }
46 53
 
47
-    render() {
48
-        // Completely recreate the component on theme change to force theme reload
49
-        if (this.props.theme.dark)
50
-            return (
51
-                <View style={{flex: 1}}>
52
-                    {this.getAgenda()}
53
-                </View>
54
-            );
55
-        else
56
-            return this.getAgenda();
57
-    }
54
+  render(): React.Node {
55
+    const {props} = this;
56
+    // Completely recreate the component on theme change to force theme reload
57
+    if (props.theme.dark)
58
+      return <View style={{flex: 1}}>{this.getAgenda()}</View>;
59
+    return this.getAgenda();
60
+  }
58 61
 }
59 62
 
60 63
 export default withTheme(CustomAgenda);

+ 45
- 34
src/components/Overrides/CustomHTML.js View File

@@ -1,47 +1,58 @@
1
+/* eslint-disable flowtype/require-parameter-type */
2
+// @flow
3
+
1 4
 import * as React from 'react';
2 5
 import {Text, withTheme} from 'react-native-paper';
3
-import HTML from "react-native-render-html";
4
-import {Linking} from "react-native";
6
+import HTML from 'react-native-render-html';
7
+import {Linking} from 'react-native';
8
+import type {CustomTheme} from '../../managers/ThemeManager';
5 9
 
6
-type Props = {
7
-    theme: Object,
8
-    html: string,
9
-}
10
+type PropsType = {
11
+  theme: CustomTheme,
12
+  html: string,
13
+};
10 14
 
11 15
 /**
12 16
  * Abstraction layer for Agenda component, using custom configuration
13 17
  */
14
-class CustomHTML extends React.Component<Props> {
15
-
16
-    openWebLink = (event, link) => {
17
-        Linking.openURL(link).catch((err) => console.error('Error opening link', err));
18
-    };
18
+class CustomHTML extends React.Component<PropsType> {
19
+  openWebLink = (event: {...}, link: string) => {
20
+    Linking.openURL(link);
21
+  };
19 22
 
20
-    getBasicText = (htmlAttribs, children, convertedCSSStyles, passProps) => {
21
-        return <Text {...passProps}>{children}</Text>;
22
-    };
23
+  getBasicText = (
24
+    htmlAttribs,
25
+    children,
26
+    convertedCSSStyles,
27
+    passProps,
28
+  ): React.Node => {
29
+    // eslint-disable-next-line react/jsx-props-no-spreading
30
+    return <Text {...passProps}>{children}</Text>;
31
+  };
23 32
 
24
-    getListBullet = (htmlAttribs, children, convertedCSSStyles, passProps) => {
25
-        return (
26
-            <Text>- </Text>
27
-        );
28
-    };
33
+  getListBullet = (): React.Node => {
34
+    return <Text>- </Text>;
35
+  };
29 36
 
30
-    render() {
31
-        // Surround description with p to allow text styling if the description is not html
32
-        return <HTML
33
-            html={"<p>" + this.props.html + "</p>"}
34
-            renderers={{
35
-                p: this.getBasicText,
36
-                li: this.getBasicText,
37
-            }}
38
-            listsPrefixesRenderers={{
39
-                ul: this.getListBullet
40
-            }}
41
-            ignoredTags={['img']}
42
-            ignoredStyles={['color', 'background-color']}
43
-            onLinkPress={this.openWebLink}/>;
44
-    }
37
+  render(): React.Node {
38
+    const {props} = this;
39
+    // Surround description with p to allow text styling if the description is not html
40
+    return (
41
+      <HTML
42
+        html={`<p>${props.html}</p>`}
43
+        renderers={{
44
+          p: this.getBasicText,
45
+          li: this.getBasicText,
46
+        }}
47
+        listsPrefixesRenderers={{
48
+          ul: this.getListBullet,
49
+        }}
50
+        ignoredTags={['img']}
51
+        ignoredStyles={['color', 'background-color']}
52
+        onLinkPress={this.openWebLink}
53
+      />
54
+    );
55
+  }
45 56
 }
46 57
 
47 58
 export default withTheme(CustomHTML);

+ 28
- 16
src/components/Overrides/CustomHeaderButton.js View File

@@ -1,27 +1,39 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
4
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
5 5
 import {HeaderButton, HeaderButtons} from 'react-navigation-header-buttons';
6
-import {withTheme} from "react-native-paper";
6
+import {withTheme} from 'react-native-paper';
7
+import type {CustomTheme} from '../../managers/ThemeManager';
7 8
 
8
-const MaterialHeaderButton = (props: Object) =>
9
+const MaterialHeaderButton = (props: {
10
+  theme: CustomTheme,
11
+  color: string,
12
+}): React.Node => {
13
+  const {color, theme} = props;
14
+  return (
15
+    // $FlowFixMe
9 16
     <HeaderButton
10
-        {...props}
11
-        IconComponent={MaterialCommunityIcons}
12
-        iconSize={26}
13
-        color={props.color != null ? props.color : props.theme.colors.text}
14
-    />;
17
+      // eslint-disable-next-line react/jsx-props-no-spreading
18
+      {...props}
19
+      IconComponent={MaterialCommunityIcons}
20
+      iconSize={26}
21
+      color={color != null ? color : theme.colors.text}
22
+    />
23
+  );
24
+};
15 25
 
16
-const MaterialHeaderButtons = (props: Object) => {
17
-    return (
18
-        <HeaderButtons
19
-            {...props}
20
-            HeaderButtonComponent={withTheme(MaterialHeaderButton)}
21
-        />
22
-    );
26
+const MaterialHeaderButtons = (props: {...}): React.Node => {
27
+  return (
28
+    // $FlowFixMe
29
+    <HeaderButtons
30
+      // eslint-disable-next-line react/jsx-props-no-spreading
31
+      {...props}
32
+      HeaderButtonComponent={withTheme(MaterialHeaderButton)}
33
+    />
34
+  );
23 35
 };
24 36
 
25
-export default withTheme(MaterialHeaderButtons);
37
+export default MaterialHeaderButtons;
26 38
 
27 39
 export {Item} from 'react-navigation-header-buttons';

+ 367
- 375
src/components/Overrides/CustomIntroSlider.js View File

@@ -1,411 +1,403 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Platform, StatusBar, StyleSheet, View} from "react-native";
5
-import type {MaterialCommunityIconsGlyphs} from "react-native-vector-icons/MaterialCommunityIcons";
6
-import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
4
+import {Platform, StatusBar, StyleSheet, View} from 'react-native';
5
+import type {MaterialCommunityIconsGlyphs} from 'react-native-vector-icons/MaterialCommunityIcons';
6
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
7 7
 import i18n from 'i18n-js';
8
-import AppIntroSlider from "react-native-app-intro-slider";
9
-import Update from "../../constants/Update";
10
-import ThemeManager from "../../managers/ThemeManager";
8
+import AppIntroSlider from 'react-native-app-intro-slider';
11 9
 import LinearGradient from 'react-native-linear-gradient';
12
-import Mascot, {MASCOT_STYLE} from "../Mascot/Mascot";
13
-import * as Animatable from "react-native-animatable";
14
-import {Card} from "react-native-paper";
10
+import * as Animatable from 'react-native-animatable';
11
+import {Card} from 'react-native-paper';
12
+import Update from '../../constants/Update';
13
+import ThemeManager from '../../managers/ThemeManager';
14
+import Mascot, {MASCOT_STYLE} from '../Mascot/Mascot';
15 15
 
16
-type Props = {
17
-    onDone: Function,
18
-    isUpdate: boolean,
19
-    isAprilFools: boolean,
16
+type PropsType = {
17
+  onDone: () => void,
18
+  isUpdate: boolean,
19
+  isAprilFools: boolean,
20 20
 };
21 21
 
22
-type State = {
23
-    currentSlide: number,
24
-}
22
+type StateType = {
23
+  currentSlide: number,
24
+};
25 25
 
26
-type Slide = {
27
-    key: string,
28
-    title: string,
29
-    text: string,
30
-    view: () => React.Node,
31
-    mascotStyle: number,
32
-    colors: [string, string]
26
+type IntroSlideType = {
27
+  key: string,
28
+  title: string,
29
+  text: string,
30
+  view: () => React.Node,
31
+  mascotStyle: number,
32
+  colors: [string, string],
33 33
 };
34 34
 
35
+const styles = StyleSheet.create({
36
+  mainContent: {
37
+    paddingBottom: 100,
38
+  },
39
+  text: {
40
+    color: 'rgba(255, 255, 255, 0.8)',
41
+    backgroundColor: 'transparent',
42
+    textAlign: 'center',
43
+    paddingHorizontal: 16,
44
+  },
45
+  title: {
46
+    fontSize: 22,
47
+    color: 'white',
48
+    backgroundColor: 'transparent',
49
+    textAlign: 'center',
50
+    marginBottom: 16,
51
+  },
52
+  center: {
53
+    marginTop: 'auto',
54
+    marginBottom: 'auto',
55
+    marginRight: 'auto',
56
+    marginLeft: 'auto',
57
+  },
58
+});
59
+
35 60
 /**
36 61
  * Class used to create intro slides
37 62
  */
38
-export default class CustomIntroSlider extends React.Component<Props, State> {
63
+export default class CustomIntroSlider extends React.Component<
64
+  PropsType,
65
+  StateType,
66
+> {
67
+  sliderRef: {current: null | AppIntroSlider};
39 68
 
40
-    state = {
41
-        currentSlide: 0,
42
-    }
43
-
44
-    sliderRef: { current: null | AppIntroSlider };
69
+  introSlides: Array<IntroSlideType>;
45 70
 
46
-    introSlides: Array<Slide>;
47
-    updateSlides: Array<Slide>;
48
-    aprilFoolsSlides: Array<Slide>;
49
-    currentSlides: Array<Slide>;
71
+  updateSlides: Array<IntroSlideType>;
50 72
 
51
-    /**
52
-     * Generates intro slides
53
-     */
54
-    constructor() {
55
-        super();
56
-        this.sliderRef = React.createRef();
57
-        this.introSlides = [
58
-            {
59
-                key: '0', // Mascot
60
-                title: i18n.t('intro.slideMain.title'),
61
-                text: i18n.t('intro.slideMain.text'),
62
-                view: this.getWelcomeView,
63
-                mascotStyle: MASCOT_STYLE.NORMAL,
64
-                colors: ['#be1522', '#57080e'],
65
-            },
66
-            {
67
-                key: '1',
68
-                title: i18n.t('intro.slidePlanex.title'),
69
-                text: i18n.t('intro.slidePlanex.text'),
70
-                view: () => this.getIconView("calendar-clock"),
71
-                mascotStyle: MASCOT_STYLE.INTELLO,
72
-                colors: ['#be1522', '#57080e'],
73
-            },
74
-            {
75
-                key: '2',
76
-                title: i18n.t('intro.slideEvents.title'),
77
-                text: i18n.t('intro.slideEvents.text'),
78
-                view: () => this.getIconView("calendar-star",),
79
-                mascotStyle: MASCOT_STYLE.HAPPY,
80
-                colors: ['#be1522', '#57080e'],
81
-            },
82
-            {
83
-                key: '3',
84
-                title: i18n.t('intro.slideServices.title'),
85
-                text: i18n.t('intro.slideServices.text'),
86
-                view: () => this.getIconView("view-dashboard-variant",),
87
-                mascotStyle: MASCOT_STYLE.CUTE,
88
-                colors: ['#be1522', '#57080e'],
89
-            },
90
-            {
91
-                key: '4',
92
-                title: i18n.t('intro.slideDone.title'),
93
-                text: i18n.t('intro.slideDone.text'),
94
-                view: () => this.getEndView(),
95
-                mascotStyle: MASCOT_STYLE.COOL,
96
-                colors: ['#9c165b', '#3e042b'],
97
-            },
98
-        ];
99
-        this.updateSlides = [];
100
-        for (let i = 0; i < Update.slidesNumber; i++) {
101
-            this.updateSlides.push(
102
-                {
103
-                    key: i.toString(),
104
-                    title: Update.getInstance().titleList[i],
105
-                    text: Update.getInstance().descriptionList[i],
106
-                    icon: Update.iconList[i],
107
-                    colors: Update.colorsList[i],
108
-                },
109
-            );
110
-        }
73
+  aprilFoolsSlides: Array<IntroSlideType>;
111 74
 
112
-        this.aprilFoolsSlides = [
113
-            {
114
-                key: '1',
115
-                title: i18n.t('intro.aprilFoolsSlide.title'),
116
-                text: i18n.t('intro.aprilFoolsSlide.text'),
117
-                view: () => <View/>,
118
-                mascotStyle: MASCOT_STYLE.NORMAL,
119
-                colors: ['#e01928', '#be1522'],
120
-            },
121
-        ];
122
-    }
75
+  currentSlides: Array<IntroSlideType>;
123 76
 
124
-    /**
125
-     * Render item to be used for the intro introSlides
126
-     *
127
-     * @param item The item to be displayed
128
-     * @param dimensions Dimensions of the item
129
-     */
130
-    getIntroRenderItem = ({item, dimensions}: { item: Slide, dimensions: { width: number, height: number } }) => {
131
-        const index = parseInt(item.key);
132
-        return (
133
-            <LinearGradient
134
-                style={[
135
-                    styles.mainContent,
136
-                    dimensions
137
-                ]}
138
-                colors={item.colors}
139
-                start={{x: 0, y: 0.1}}
140
-                end={{x: 0.1, y: 1}}
141
-            >
142
-                {this.state.currentSlide === index
143
-                    ? <View style={{height: "100%", flex: 1}}>
144
-                        <View style={{flex: 1}}>
145
-                            {item.view()}
146
-                        </View>
147
-                        <Animatable.View
148
-                            animation={"fadeIn"}>
149
-                            {index !== 0 && index !== this.introSlides.length - 1
150
-                                ?
151
-                                <Mascot
152
-                                    style={{
153
-                                        marginLeft: 30,
154
-                                        marginBottom: 0,
155
-                                        width: 100,
156
-                                        marginTop: -30,
157
-                                    }}
158
-                                    emotion={item.mascotStyle}
159
-                                    animated={true}
160
-                                    entryAnimation={{
161
-                                        animation: "slideInLeft",
162
-                                        duration: 500
163
-                                    }}
164
-                                    loopAnimation={{
165
-                                        animation: "pulse",
166
-                                        iterationCount: "infinite",
167
-                                        duration: 2000,
168
-                                    }}
169
-                                /> : null}
170
-                            <View style={{
171
-                                marginLeft: 50,
172
-                                width: 0,
173
-                                height: 0,
174
-                                borderLeftWidth: 20,
175
-                                borderRightWidth: 0,
176
-                                borderBottomWidth: 20,
177
-                                borderStyle: 'solid',
178
-                                backgroundColor: 'transparent',
179
-                                borderLeftColor: 'transparent',
180
-                                borderRightColor: 'transparent',
181
-                                borderBottomColor: "rgba(0,0,0,0.60)",
182
-                            }}/>
183
-                            <Card style={{
184
-                                backgroundColor: "rgba(0,0,0,0.38)",
185
-                                marginHorizontal: 20,
186
-                                borderColor: "rgba(0,0,0,0.60)",
187
-                                borderWidth: 4,
188
-                                borderRadius: 10,
189
-                            }}>
190
-                                <Card.Content>
191
-                                    <Animatable.Text
192
-                                        animation={"fadeIn"}
193
-                                        delay={100}
194
-                                        style={styles.title}>
195
-                                        {item.title}
196
-                                    </Animatable.Text>
197
-                                    <Animatable.Text
198
-                                        animation={"fadeIn"}
199
-                                        delay={200}
200
-                                        style={styles.text}>
201
-                                        {item.text}
202
-                                    </Animatable.Text>
203
-                                </Card.Content>
204
-                            </Card>
205
-                        </Animatable.View>
206
-                    </View> : null}
207
-            </LinearGradient>
208
-        );
77
+  /**
78
+   * Generates intro slides
79
+   */
80
+  constructor() {
81
+    super();
82
+    this.state = {
83
+      currentSlide: 0,
84
+    };
85
+    this.sliderRef = React.createRef();
86
+    this.introSlides = [
87
+      {
88
+        key: '0', // Mascot
89
+        title: i18n.t('intro.slideMain.title'),
90
+        text: i18n.t('intro.slideMain.text'),
91
+        view: this.getWelcomeView,
92
+        mascotStyle: MASCOT_STYLE.NORMAL,
93
+        colors: ['#be1522', '#57080e'],
94
+      },
95
+      {
96
+        key: '1',
97
+        title: i18n.t('intro.slidePlanex.title'),
98
+        text: i18n.t('intro.slidePlanex.text'),
99
+        view: (): React.Node => CustomIntroSlider.getIconView('calendar-clock'),
100
+        mascotStyle: MASCOT_STYLE.INTELLO,
101
+        colors: ['#be1522', '#57080e'],
102
+      },
103
+      {
104
+        key: '2',
105
+        title: i18n.t('intro.slideEvents.title'),
106
+        text: i18n.t('intro.slideEvents.text'),
107
+        view: (): React.Node => CustomIntroSlider.getIconView('calendar-star'),
108
+        mascotStyle: MASCOT_STYLE.HAPPY,
109
+        colors: ['#be1522', '#57080e'],
110
+      },
111
+      {
112
+        key: '3',
113
+        title: i18n.t('intro.slideServices.title'),
114
+        text: i18n.t('intro.slideServices.text'),
115
+        view: (): React.Node =>
116
+          CustomIntroSlider.getIconView('view-dashboard-variant'),
117
+        mascotStyle: MASCOT_STYLE.CUTE,
118
+        colors: ['#be1522', '#57080e'],
119
+      },
120
+      {
121
+        key: '4',
122
+        title: i18n.t('intro.slideDone.title'),
123
+        text: i18n.t('intro.slideDone.text'),
124
+        view: (): React.Node => this.getEndView(),
125
+        mascotStyle: MASCOT_STYLE.COOL,
126
+        colors: ['#9c165b', '#3e042b'],
127
+      },
128
+    ];
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
+      });
209 139
     }
210 140
 
211
-    getEndView = () => {
212
-        return (
213
-            <View style={{flex: 1}}>
214
-                <Mascot
215
-                    style={{
216
-                        ...styles.center,
217
-                        height: "80%"
218
-                    }}
219
-                    emotion={MASCOT_STYLE.COOL}
220
-                    animated={true}
221
-                    entryAnimation={{
222
-                        animation: "slideInDown",
223
-                        duration: 2000,
224
-                    }}
225
-                    loopAnimation={{
226
-                        animation: "pulse",
227
-                        duration: 2000,
228
-                        iterationCount: "infinite"
229
-                    }}
230
-                />
231
-            </View>
232
-        );
233
-    }
141
+    this.aprilFoolsSlides = [
142
+      {
143
+        key: '1',
144
+        title: i18n.t('intro.aprilFoolsSlide.title'),
145
+        text: i18n.t('intro.aprilFoolsSlide.text'),
146
+        view: (): React.Node => <View />,
147
+        mascotStyle: MASCOT_STYLE.NORMAL,
148
+        colors: ['#e01928', '#be1522'],
149
+      },
150
+    ];
151
+  }
234 152
 
235
-    getWelcomeView = () => {
236
-        return (
237
-            <View style={{flex: 1}}>
153
+  /**
154
+   * Render item to be used for the intro introSlides
155
+   *
156
+   * @param item The item to be displayed
157
+   * @param dimensions Dimensions of the item
158
+   */
159
+  getIntroRenderItem = ({
160
+    item,
161
+    dimensions,
162
+  }: {
163
+    item: IntroSlideType,
164
+    dimensions: {width: number, height: number},
165
+  }): React.Node => {
166
+    const {state} = this;
167
+    const index = parseInt(item.key, 10);
168
+    return (
169
+      <LinearGradient
170
+        style={[styles.mainContent, dimensions]}
171
+        colors={item.colors}
172
+        start={{x: 0, y: 0.1}}
173
+        end={{x: 0.1, y: 1}}>
174
+        {state.currentSlide === index ? (
175
+          <View style={{height: '100%', flex: 1}}>
176
+            <View style={{flex: 1}}>{item.view()}</View>
177
+            <Animatable.View animation="fadeIn">
178
+              {index !== 0 && index !== this.introSlides.length - 1 ? (
238 179
                 <Mascot
239
-                    style={{
240
-                        ...styles.center,
241
-                        height: "80%"
242
-                    }}
243
-                    emotion={MASCOT_STYLE.NORMAL}
244
-                    animated={true}
245
-                    entryAnimation={{
246
-                        animation: "bounceIn",
247
-                        duration: 2000,
248
-                    }}
180
+                  style={{
181
+                    marginLeft: 30,
182
+                    marginBottom: 0,
183
+                    width: 100,
184
+                    marginTop: -30,
185
+                  }}
186
+                  emotion={item.mascotStyle}
187
+                  animated
188
+                  entryAnimation={{
189
+                    animation: 'slideInLeft',
190
+                    duration: 500,
191
+                  }}
192
+                  loopAnimation={{
193
+                    animation: 'pulse',
194
+                    iterationCount: 'infinite',
195
+                    duration: 2000,
196
+                  }}
249 197
                 />
250
-                <Animatable.Text
251
-                    useNativeDriver={true}
252
-                    animation={"fadeInUp"}
253
-                    duration={500}
254
-
255
-                    style={{
256
-                        color: "#fff",
257
-                        textAlign: "center",
258
-                        fontSize: 25,
259
-                    }}>
260
-                    PABLO
261
-                </Animatable.Text>
262
-                <Animatable.View
263
-                    useNativeDriver={true}
264
-                    animation={"fadeInUp"}
265
-                    duration={500}
198
+              ) : null}
199
+              <View
200
+                style={{
201
+                  marginLeft: 50,
202
+                  width: 0,
203
+                  height: 0,
204
+                  borderLeftWidth: 20,
205
+                  borderRightWidth: 0,
206
+                  borderBottomWidth: 20,
207
+                  borderStyle: 'solid',
208
+                  backgroundColor: 'transparent',
209
+                  borderLeftColor: 'transparent',
210
+                  borderRightColor: 'transparent',
211
+                  borderBottomColor: 'rgba(0,0,0,0.60)',
212
+                }}
213
+              />
214
+              <Card
215
+                style={{
216
+                  backgroundColor: 'rgba(0,0,0,0.38)',
217
+                  marginHorizontal: 20,
218
+                  borderColor: 'rgba(0,0,0,0.60)',
219
+                  borderWidth: 4,
220
+                  borderRadius: 10,
221
+                }}>
222
+                <Card.Content>
223
+                  <Animatable.Text
224
+                    animation="fadeIn"
225
+                    delay={100}
226
+                    style={styles.title}>
227
+                    {item.title}
228
+                  </Animatable.Text>
229
+                  <Animatable.Text
230
+                    animation="fadeIn"
266 231
                     delay={200}
232
+                    style={styles.text}>
233
+                    {item.text}
234
+                  </Animatable.Text>
235
+                </Card.Content>
236
+              </Card>
237
+            </Animatable.View>
238
+          </View>
239
+        ) : null}
240
+      </LinearGradient>
241
+    );
242
+  };
267 243
 
268
-                    style={{
269
-                        position: "absolute",
270
-                        bottom: 30,
271
-                        right: "20%",
272
-                        width: 50,
273
-                        height: 50,
274
-                    }}>
275
-                    <MaterialCommunityIcons
276
-                        style={{
277
-                            ...styles.center,
278
-                            transform: [{rotateZ: "70deg"}],
279
-                        }}
280
-                        name={"undo"}
281
-                        color={'#fff'}
282
-                        size={40}/>
283
-                </Animatable.View>
284
-            </View>
285
-        )
286
-    }
287
-
288
-    getIconView(icon: MaterialCommunityIconsGlyphs) {
289
-        return (
290
-            <View style={{flex: 1}}>
291
-                <Animatable.View
292
-                    style={styles.center}
293
-                    animation={"fadeIn"}
294
-                >
295
-                    <MaterialCommunityIcons
296
-                        name={icon}
297
-                        color={'#fff'}
298
-                        size={200}/>
299
-                </Animatable.View>
300
-            </View>
301
-        )
302
-    }
303
-
304
-    setStatusBarColor(color: string) {
305
-        if (Platform.OS === 'android')
306
-            StatusBar.setBackgroundColor(color, true);
307
-    }
308
-
309
-    onSlideChange = (index: number, lastIndex: number) => {
310
-        this.setStatusBarColor(this.currentSlides[index].colors[0]);
311
-        this.setState({currentSlide: index});
312
-    };
313
-
314
-    onSkip = () => {
315
-        this.setStatusBarColor(this.currentSlides[this.currentSlides.length - 1].colors[0]);
316
-        if (this.sliderRef.current != null)
317
-            this.sliderRef.current.goToSlide(this.currentSlides.length - 1);
318
-    }
244
+  getEndView = (): React.Node => {
245
+    return (
246
+      <View style={{flex: 1}}>
247
+        <Mascot
248
+          style={{
249
+            ...styles.center,
250
+            height: '80%',
251
+          }}
252
+          emotion={MASCOT_STYLE.COOL}
253
+          animated
254
+          entryAnimation={{
255
+            animation: 'slideInDown',
256
+            duration: 2000,
257
+          }}
258
+          loopAnimation={{
259
+            animation: 'pulse',
260
+            duration: 2000,
261
+            iterationCount: 'infinite',
262
+          }}
263
+        />
264
+      </View>
265
+    );
266
+  };
319 267
 
320
-    onDone = () => {
321
-        this.setStatusBarColor(ThemeManager.getCurrentTheme().colors.surface);
322
-        this.props.onDone();
323
-    }
268
+  getWelcomeView = (): React.Node => {
269
+    return (
270
+      <View style={{flex: 1}}>
271
+        <Mascot
272
+          style={{
273
+            ...styles.center,
274
+            height: '80%',
275
+          }}
276
+          emotion={MASCOT_STYLE.NORMAL}
277
+          animated
278
+          entryAnimation={{
279
+            animation: 'bounceIn',
280
+            duration: 2000,
281
+          }}
282
+        />
283
+        <Animatable.Text
284
+          useNativeDriver
285
+          animation="fadeInUp"
286
+          duration={500}
287
+          style={{
288
+            color: '#fff',
289
+            textAlign: 'center',
290
+            fontSize: 25,
291
+          }}>
292
+          PABLO
293
+        </Animatable.Text>
294
+        <Animatable.View
295
+          useNativeDriver
296
+          animation="fadeInUp"
297
+          duration={500}
298
+          delay={200}
299
+          style={{
300
+            position: 'absolute',
301
+            bottom: 30,
302
+            right: '20%',
303
+            width: 50,
304
+            height: 50,
305
+          }}>
306
+          <MaterialCommunityIcons
307
+            style={{
308
+              ...styles.center,
309
+              transform: [{rotateZ: '70deg'}],
310
+            }}
311
+            name="undo"
312
+            color="#fff"
313
+            size={40}
314
+          />
315
+        </Animatable.View>
316
+      </View>
317
+    );
318
+  };
324 319
 
325
-    renderNextButton = () => {
326
-        return (
327
-            <Animatable.View
328
-                animation={"fadeIn"}
320
+  static getIconView(icon: MaterialCommunityIconsGlyphs): React.Node {
321
+    return (
322
+      <View style={{flex: 1}}>
323
+        <Animatable.View style={styles.center} animation="fadeIn">
324
+          <MaterialCommunityIcons name={icon} color="#fff" size={200} />
325
+        </Animatable.View>
326
+      </View>
327
+    );
328
+  }
329 329
 
330
-                style={{
331
-                    borderRadius: 25,
332
-                    padding: 5,
333
-                    backgroundColor: "rgba(0,0,0,0.2)"
334
-                }}>
335
-                <MaterialCommunityIcons
336
-                    name={"arrow-right"}
337
-                    color={'#fff'}
338
-                    size={40}/>
339
-            </Animatable.View>
340
-        )
341
-    }
330
+  static setStatusBarColor(color: string) {
331
+    if (Platform.OS === 'android') StatusBar.setBackgroundColor(color, true);
332
+  }
342 333
 
343
-    renderDoneButton = () => {
344
-        return (
345
-            <Animatable.View
346
-                animation={"bounceIn"}
334
+  onSlideChange = (index: number) => {
335
+    CustomIntroSlider.setStatusBarColor(this.currentSlides[index].colors[0]);
336
+    this.setState({currentSlide: index});
337
+  };
347 338
 
348
-                style={{
349
-                    borderRadius: 25,
350
-                    padding: 5,
351
-                    backgroundColor: "rgb(190,21,34)"
352
-                }}>
353
-                <MaterialCommunityIcons
354
-                    name={"check"}
355
-                    color={'#fff'}
356
-                    size={40}/>
357
-            </Animatable.View>
358
-        )
359
-    }
339
+  onSkip = () => {
340
+    CustomIntroSlider.setStatusBarColor(
341
+      this.currentSlides[this.currentSlides.length - 1].colors[0],
342
+    );
343
+    if (this.sliderRef.current != null)
344
+      this.sliderRef.current.goToSlide(this.currentSlides.length - 1);
345
+  };
360 346
 
361
-    render() {
362
-        this.currentSlides = this.introSlides;
363
-        if (this.props.isUpdate)
364
-            this.currentSlides = this.updateSlides;
365
-        else if (this.props.isAprilFools)
366
-            this.currentSlides = this.aprilFoolsSlides;
367
-        this.setStatusBarColor(this.currentSlides[0].colors[0]);
368
-        return (
369
-            <AppIntroSlider
370
-                ref={this.sliderRef}
371
-                data={this.currentSlides}
372
-                extraData={this.state.currentSlide}
347
+  onDone = () => {
348
+    const {props} = this;
349
+    CustomIntroSlider.setStatusBarColor(
350
+      ThemeManager.getCurrentTheme().colors.surface,
351
+    );
352
+    props.onDone();
353
+  };
373 354
 
374
-                renderItem={this.getIntroRenderItem}
375
-                renderNextButton={this.renderNextButton}
376
-                renderDoneButton={this.renderDoneButton}
355
+  getRenderNextButton = (): React.Node => {
356
+    return (
357
+      <Animatable.View
358
+        animation="fadeIn"
359
+        style={{
360
+          borderRadius: 25,
361
+          padding: 5,
362
+          backgroundColor: 'rgba(0,0,0,0.2)',
363
+        }}>
364
+        <MaterialCommunityIcons name="arrow-right" color="#fff" size={40} />
365
+      </Animatable.View>
366
+    );
367
+  };
377 368
 
378
-                onDone={this.onDone}
379
-                onSlideChange={this.onSlideChange}
380
-                onSkip={this.onSkip}
381
-            />
382
-        );
383
-    }
369
+  getRenderDoneButton = (): React.Node => {
370
+    return (
371
+      <Animatable.View
372
+        animation="bounceIn"
373
+        style={{
374
+          borderRadius: 25,
375
+          padding: 5,
376
+          backgroundColor: 'rgb(190,21,34)',
377
+        }}>
378
+        <MaterialCommunityIcons name="check" color="#fff" size={40} />
379
+      </Animatable.View>
380
+    );
381
+  };
384 382
 
383
+  render(): React.Node {
384
+    const {props, state} = this;
385
+    this.currentSlides = this.introSlides;
386
+    if (props.isUpdate) this.currentSlides = this.updateSlides;
387
+    else if (props.isAprilFools) this.currentSlides = this.aprilFoolsSlides;
388
+    CustomIntroSlider.setStatusBarColor(this.currentSlides[0].colors[0]);
389
+    return (
390
+      <AppIntroSlider
391
+        ref={this.sliderRef}
392
+        data={this.currentSlides}
393
+        extraData={state.currentSlide}
394
+        renderItem={this.getIntroRenderItem}
395
+        renderNextButton={this.getRenderNextButton}
396
+        renderDoneButton={this.getRenderDoneButton}
397
+        onDone={this.onDone}
398
+        onSlideChange={this.onSlideChange}
399
+        onSkip={this.onSkip}
400
+      />
401
+    );
402
+  }
385 403
 }
386
-
387
-
388
-const styles = StyleSheet.create({
389
-    mainContent: {
390
-        paddingBottom: 100,
391
-    },
392
-    text: {
393
-        color: 'rgba(255, 255, 255, 0.8)',
394
-        backgroundColor: 'transparent',
395
-        textAlign: 'center',
396
-        paddingHorizontal: 16,
397
-    },
398
-    title: {
399
-        fontSize: 22,
400
-        color: 'white',
401
-        backgroundColor: 'transparent',
402
-        textAlign: 'center',
403
-        marginBottom: 16,
404
-    },
405
-    center: {
406
-        marginTop: 'auto',
407
-        marginBottom: 'auto',
408
-        marginRight: 'auto',
409
-        marginLeft: 'auto',
410
-    },
411
-});

+ 27
- 22
src/components/Overrides/CustomModal.js View File

@@ -2,9 +2,10 @@
2 2
 
3 3
 import * as React from 'react';
4 4
 import {withTheme} from 'react-native-paper';
5
-import {Modalize} from "react-native-modalize";
6
-import {View} from "react-native-animatable";
7
-import CustomTabBar from "../Tabbar/CustomTabBar";
5
+import {Modalize} from 'react-native-modalize';
6
+import {View} from 'react-native-animatable';
7
+import CustomTabBar from '../Tabbar/CustomTabBar';
8
+import type {CustomTheme} from '../../managers/ThemeManager';
8 9
 
9 10
 /**
10 11
  * Abstraction layer for Modalize component, using custom configuration
@@ -12,25 +13,29 @@ import CustomTabBar from "../Tabbar/CustomTabBar";
12 13
  * @param props Props to pass to the element. Must specify an onRef prop to get an Modalize ref.
13 14
  * @return {*}
14 15
  */
15
-function CustomModal(props) {
16
-    const {colors} = props.theme;
17
-    return (
18
-        <Modalize
19
-            ref={props.onRef}
20
-            adjustToContentHeight
21
-            handlePosition={'inside'}
22
-            modalStyle={{backgroundColor: colors.card}}
23
-            handleStyle={{backgroundColor: colors.primary}}
24
-        >
25
-            <View style={{
26
-                paddingBottom: CustomTabBar.TAB_BAR_HEIGHT
27
-            }}>
28
-                {props.children}
29
-            </View>
30
-
31
-        </Modalize>
32
-    );
16
+function CustomModal(props: {
17
+  theme: CustomTheme,
18
+  onRef: (re: Modalize) => void,
19
+  children?: React.Node,
20
+}): React.Node {
21
+  const {theme, onRef, children} = props;
22
+  return (
23
+    <Modalize
24
+      ref={onRef}
25
+      adjustToContentHeight
26
+      handlePosition="inside"
27
+      modalStyle={{backgroundColor: theme.colors.card}}
28
+      handleStyle={{backgroundColor: theme.colors.primary}}>
29
+      <View
30
+        style={{
31
+          paddingBottom: CustomTabBar.TAB_BAR_HEIGHT,
32
+        }}>
33
+        {children}
34
+      </View>
35
+    </Modalize>
36
+  );
33 37
 }
34 38
 
35
-export default withTheme(CustomModal);
39
+CustomModal.defaultProps = {children: null};
36 40
 
41
+export default withTheme(CustomModal);

+ 49
- 42
src/components/Overrides/CustomSlider.js View File

@@ -2,19 +2,19 @@
2 2
 
3 3
 import * as React from 'react';
4 4
 import {Text, withTheme} from 'react-native-paper';
5
-import {View} from "react-native-animatable";
6
-import type {CustomTheme} from "../../managers/ThemeManager";
7
-import Slider, {SliderProps} from "@react-native-community/slider";
8
-
9
-type Props = {
10
-    theme: CustomTheme,
11
-    valueSuffix: string,
12
-    ...SliderProps
13
-}
5
+import {View} from 'react-native-animatable';
6
+import Slider, {SliderProps} from '@react-native-community/slider';
7
+import type {CustomTheme} from '../../managers/ThemeManager';
14 8
 
15
-type State = {
16
-    currentValue: number,
17
-}
9
+type PropsType = {
10
+  theme: CustomTheme,
11
+  valueSuffix?: string,
12
+  ...SliderProps,
13
+};
14
+
15
+type StateType = {
16
+  currentValue: number,
17
+};
18 18
 
19 19
 /**
20 20
  * Abstraction layer for Modalize component, using custom configuration
@@ -22,37 +22,44 @@ type State = {
22 22
  * @param props Props to pass to the element. Must specify an onRef prop to get an Modalize ref.
23 23
  * @return {*}
24 24
  */
25
-class CustomSlider extends React.Component<Props, State> {
26
-
27
-    static defaultProps = {
28
-        valueSuffix: "",
29
-    }
30
-
31
-    state = {
32
-        currentValue: this.props.value,
33
-    }
34
-
35
-    onValueChange = (value: number) => {
36
-        this.setState({currentValue: value});
37
-        if (this.props.onValueChange != null)
38
-            this.props.onValueChange(value);
39
-    }
40
-
41
-    render() {
42
-        return (
43
-            <View style={{flex: 1, flexDirection: 'row'}}>
44
-                <Text style={{marginHorizontal: 10, marginTop: 'auto', marginBottom: 'auto'}}>
45
-                    {this.state.currentValue}min
46
-                </Text>
47
-                <Slider
48
-                    {...this.props}
49
-                    onValueChange={this.onValueChange}
50
-                />
51
-            </View>
52
-        );
53
-    }
25
+class CustomSlider extends React.Component<PropsType, StateType> {
26
+  static defaultProps = {
27
+    valueSuffix: '',
28
+  };
54 29
 
30
+  constructor(props: PropsType) {
31
+    super(props);
32
+    this.state = {
33
+      currentValue: props.value,
34
+    };
35
+  }
36
+
37
+  onValueChange = (value: number) => {
38
+    const {props} = this;
39
+    this.setState({currentValue: value});
40
+    if (props.onValueChange != null) props.onValueChange(value);
41
+  };
42
+
43
+  render(): React.Node {
44
+    const {props, state} = this;
45
+    return (
46
+      <View style={{flex: 1, flexDirection: 'row'}}>
47
+        <Text
48
+          style={{
49
+            marginHorizontal: 10,
50
+            marginTop: 'auto',
51
+            marginBottom: 'auto',
52
+          }}>
53
+          {state.currentValue}min
54
+        </Text>
55
+        <Slider
56
+          // eslint-disable-next-line react/jsx-props-no-spreading
57
+          {...props}
58
+          onValueChange={this.onValueChange}
59
+        />
60
+      </View>
61
+    );
62
+  }
55 63
 }
56 64
 
57 65
 export default withTheme(CustomSlider);
58
-

Loading…
Cancel
Save