Browse Source

Update component overrides and intro slides to use TypeScript

Arnaud Vergnet 1 year ago
parent
commit
acc4f8cdcc

+ 17
- 0
package-lock.json View File

@@ -2608,6 +2608,17 @@
2608 2608
         "@types/react": "*"
2609 2609
       }
2610 2610
     },
2611
+    "@types/react-native-calendars": {
2612
+      "version": "1.20.10",
2613
+      "resolved": "https://registry.npmjs.org/@types/react-native-calendars/-/react-native-calendars-1.20.10.tgz",
2614
+      "integrity": "sha512-bmWlkFa/6SNF98aM9rjKMGUOSDb15VBsfxBW5oo/iJ5tm5THf+eAGlxH72hGZFqJpr93plBs+ctkRVHQA7fx1w==",
2615
+      "dev": true,
2616
+      "requires": {
2617
+        "@types/react": "*",
2618
+        "@types/react-native": "*",
2619
+        "@types/xdate": "*"
2620
+      }
2621
+    },
2611 2622
     "@types/react-native-vector-icons": {
2612 2623
       "version": "6.4.6",
2613 2624
       "resolved": "https://registry.npmjs.org/@types/react-native-vector-icons/-/react-native-vector-icons-6.4.6.tgz",
@@ -2632,6 +2643,12 @@
2632 2643
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
2633 2644
       "integrity": "sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw=="
2634 2645
     },
2646
+    "@types/xdate": {
2647
+      "version": "0.8.31",
2648
+      "resolved": "https://registry.npmjs.org/@types/xdate/-/xdate-0.8.31.tgz",
2649
+      "integrity": "sha512-iZYRKKK8UZXoepNh2kwK6TPITMj/dwdv0NzNi9DFMt2foGkU7h+ncaCpGsdD2fp/CXMs9dxPAzV9uddFy7c4QA==",
2650
+      "dev": true
2651
+    },
2635 2652
     "@types/yargs": {
2636 2653
       "version": "15.0.5",
2637 2654
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.5.tgz",

+ 2
- 1
package.json View File

@@ -67,9 +67,10 @@
67 67
     "@babel/runtime": "^7.11.0",
68 68
     "@react-native-community/eslint-config": "^1.1.0",
69 69
     "@types/i18n-js": "^3.0.3",
70
-    "@types/react-native-vector-icons": "^6.4.6",
71 70
     "@types/jest": "^25.2.3",
72 71
     "@types/react-native": "^0.63.2",
72
+    "@types/react-native-calendars": "^1.20.10",
73
+    "@types/react-native-vector-icons": "^6.4.6",
73 74
     "@types/react-test-renderer": "^16.9.2",
74 75
     "@typescript-eslint/eslint-plugin": "^2.27.0",
75 76
     "@typescript-eslint/parser": "^2.27.0",

src/components/Intro/IconIntro.js → src/components/Intro/IconIntro.tsx View File

@@ -17,15 +17,13 @@
17 17
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
18 18
  */
19 19
 
20
-// @flow
21
-
22 20
 import * as React from 'react';
23 21
 import {StyleSheet, View} from 'react-native';
24 22
 import * as Animatable from 'react-native-animatable';
25 23
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
26 24
 
27 25
 type PropsType = {
28
-  icon: string,
26
+  icon: string;
29 27
 };
30 28
 
31 29
 const styles = StyleSheet.create({
@@ -37,24 +35,14 @@ const styles = StyleSheet.create({
37 35
   },
38 36
 });
39 37
 
40
-class IntroIcon extends React.Component<PropsType> {
41
-  shouldComponentUpdate(): boolean {
42
-    return false;
43
-  }
44
-
45
-  render(): React.Node {
46
-    const {icon} = this.props;
47
-    return (
48
-      <View style={{flex: 1}}>
49
-        <Animatable.View
50
-          useNativeDriver
51
-          style={styles.center}
52
-          animation="fadeIn">
53
-          <MaterialCommunityIcons name={icon} color="#fff" size={200} />
54
-        </Animatable.View>
55
-      </View>
56
-    );
57
-  }
38
+function IntroIcon(props: PropsType) {
39
+  return (
40
+    <View style={{flex: 1}}>
41
+      <Animatable.View useNativeDriver style={styles.center} animation="fadeIn">
42
+        <MaterialCommunityIcons name={props.icon} color="#fff" size={200} />
43
+      </Animatable.View>
44
+    </View>
45
+  );
58 46
 }
59 47
 
60 48
 export default IntroIcon;

src/components/Intro/MascotIntroEnd.js → src/components/Intro/MascotIntroEnd.tsx View File

@@ -17,8 +17,6 @@
17 17
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
18 18
  */
19 19
 
20
-// @flow
21
-
22 20
 import * as React from 'react';
23 21
 import {StyleSheet, View} from 'react-native';
24 22
 import Mascot, {MASCOT_STYLE} from '../Mascot/Mascot';
@@ -32,34 +30,28 @@ const styles = StyleSheet.create({
32 30
   },
33 31
 });
34 32
 
35
-class MascotIntroEnd extends React.Component<null> {
36
-  shouldComponentUpdate(): boolean {
37
-    return false;
38
-  }
39
-
40
-  render(): React.Node {
41
-    return (
42
-      <View style={{flex: 1}}>
43
-        <Mascot
44
-          style={{
45
-            ...styles.center,
46
-            width: '80%',
47
-          }}
48
-          emotion={MASCOT_STYLE.COOL}
49
-          animated
50
-          entryAnimation={{
51
-            animation: 'slideInDown',
52
-            duration: 2000,
53
-          }}
54
-          loopAnimation={{
55
-            animation: 'pulse',
56
-            duration: 2000,
57
-            iterationCount: 'infinite',
58
-          }}
59
-        />
60
-      </View>
61
-    );
62
-  }
33
+function MascotIntroEnd() {
34
+  return (
35
+    <View style={{flex: 1}}>
36
+      <Mascot
37
+        style={{
38
+          ...styles.center,
39
+          width: '80%',
40
+        }}
41
+        emotion={MASCOT_STYLE.COOL}
42
+        animated
43
+        entryAnimation={{
44
+          animation: 'slideInDown',
45
+          duration: 2000,
46
+        }}
47
+        loopAnimation={{
48
+          animation: 'pulse',
49
+          duration: 2000,
50
+          iterationCount: 'infinite',
51
+        }}
52
+      />
53
+    </View>
54
+  );
63 55
 }
64 56
 
65 57
 export default MascotIntroEnd;

src/components/Intro/MascotIntroWelcome.js → src/components/Intro/MascotIntroWelcome.tsx View File

@@ -17,8 +17,6 @@
17 17
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
18 18
  */
19 19
 
20
-// @flow
21
-
22 20
 import * as React from 'react';
23 21
 import {StyleSheet, View} from 'react-native';
24 22
 import * as Animatable from 'react-native-animatable';
@@ -34,62 +32,56 @@ const styles = StyleSheet.create({
34 32
   },
35 33
 });
36 34
 
37
-class MascotIntroWelcome extends React.Component<null> {
38
-  shouldComponentUpdate(): boolean {
39
-    return false;
40
-  }
41
-
42
-  render(): React.Node {
43
-    return (
44
-      <View style={{flex: 1}}>
45
-        <Mascot
35
+function MascotIntroWelcome() {
36
+  return (
37
+    <View style={{flex: 1}}>
38
+      <Mascot
39
+        style={{
40
+          ...styles.center,
41
+          width: '80%',
42
+        }}
43
+        emotion={MASCOT_STYLE.NORMAL}
44
+        animated
45
+        entryAnimation={{
46
+          animation: 'bounceIn',
47
+          duration: 2000,
48
+        }}
49
+      />
50
+      <Animatable.Text
51
+        useNativeDriver
52
+        animation="fadeInUp"
53
+        duration={500}
54
+        style={{
55
+          color: '#fff',
56
+          textAlign: 'center',
57
+          fontSize: 25,
58
+        }}>
59
+        PABLO
60
+      </Animatable.Text>
61
+      <Animatable.View
62
+        useNativeDriver
63
+        animation="fadeInUp"
64
+        duration={500}
65
+        delay={200}
66
+        style={{
67
+          position: 'absolute',
68
+          bottom: 30,
69
+          right: '20%',
70
+          width: 50,
71
+          height: 50,
72
+        }}>
73
+        <MaterialCommunityIcons
46 74
           style={{
47 75
             ...styles.center,
48
-            width: '80%',
49
-          }}
50
-          emotion={MASCOT_STYLE.NORMAL}
51
-          animated
52
-          entryAnimation={{
53
-            animation: 'bounceIn',
54
-            duration: 2000,
76
+            transform: [{rotateZ: '70deg'}],
55 77
           }}
78
+          name="undo"
79
+          color="#fff"
80
+          size={40}
56 81
         />
57
-        <Animatable.Text
58
-          useNativeDriver
59
-          animation="fadeInUp"
60
-          duration={500}
61
-          style={{
62
-            color: '#fff',
63
-            textAlign: 'center',
64
-            fontSize: 25,
65
-          }}>
66
-          PABLO
67
-        </Animatable.Text>
68
-        <Animatable.View
69
-          useNativeDriver
70
-          animation="fadeInUp"
71
-          duration={500}
72
-          delay={200}
73
-          style={{
74
-            position: 'absolute',
75
-            bottom: 30,
76
-            right: '20%',
77
-            width: 50,
78
-            height: 50,
79
-          }}>
80
-          <MaterialCommunityIcons
81
-            style={{
82
-              ...styles.center,
83
-              transform: [{rotateZ: '70deg'}],
84
-            }}
85
-            name="undo"
86
-            color="#fff"
87
-            size={40}
88
-          />
89
-        </Animatable.View>
90
-      </View>
91
-    );
92
-  }
82
+      </Animatable.View>
83
+    </View>
84
+  );
93 85
 }
94 86
 
95 87
 export default MascotIntroWelcome;

+ 0
- 82
src/components/Overrides/CustomAgenda.js View File

@@ -1,82 +0,0 @@
1
-/*
2
- * Copyright (c) 2019 - 2020 Arnaud Vergnet.
3
- *
4
- * This file is part of Campus INSAT.
5
- *
6
- * Campus INSAT is free software: you can redistribute it and/or modify
7
- *  it under the terms of the GNU General Public License as published by
8
- * the Free Software Foundation, either version 3 of the License, or
9
- * (at your option) any later version.
10
- *
11
- * Campus INSAT is distributed in the hope that it will be useful,
12
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
13
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
14
- * GNU General Public License for more details.
15
- *
16
- * You should have received a copy of the GNU General Public License
17
- * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
18
- */
19
-
20
-// @flow
21
-
22
-import * as React from 'react';
23
-import {View} from 'react-native';
24
-import {withTheme} from 'react-native-paper';
25
-import {Agenda} from 'react-native-calendars';
26
-import type {CustomThemeType} from '../../managers/ThemeManager';
27
-
28
-type PropsType = {
29
-  theme: CustomThemeType,
30
-  onRef: (ref: Agenda) => void,
31
-};
32
-
33
-/**
34
- * Abstraction layer for Agenda component, using custom configuration
35
- */
36
-class CustomAgenda extends React.Component<PropsType> {
37
-  getAgenda(): React.Node {
38
-    const {props} = this;
39
-    return (
40
-      <Agenda
41
-        // eslint-disable-next-line react/jsx-props-no-spreading
42
-        {...props}
43
-        ref={props.onRef}
44
-        theme={{
45
-          backgroundColor: props.theme.colors.agendaBackgroundColor,
46
-          calendarBackground: props.theme.colors.background,
47
-          textSectionTitleColor: props.theme.colors.agendaDayTextColor,
48
-          selectedDayBackgroundColor: props.theme.colors.primary,
49
-          selectedDayTextColor: '#ffffff',
50
-          todayTextColor: props.theme.colors.primary,
51
-          dayTextColor: props.theme.colors.text,
52
-          textDisabledColor: props.theme.colors.agendaDayTextColor,
53
-          dotColor: props.theme.colors.primary,
54
-          selectedDotColor: '#ffffff',
55
-          arrowColor: 'orange',
56
-          monthTextColor: props.theme.colors.primary,
57
-          indicatorColor: props.theme.colors.primary,
58
-          textDayFontWeight: '300',
59
-          textMonthFontWeight: 'bold',
60
-          textDayHeaderFontWeight: '300',
61
-          textDayFontSize: 16,
62
-          textMonthFontSize: 16,
63
-          textDayHeaderFontSize: 16,
64
-          agendaDayTextColor: props.theme.colors.agendaDayTextColor,
65
-          agendaDayNumColor: props.theme.colors.agendaDayTextColor,
66
-          agendaTodayColor: props.theme.colors.primary,
67
-          agendaKnobColor: props.theme.colors.primary,
68
-        }}
69
-      />
70
-    );
71
-  }
72
-
73
-  render(): React.Node {
74
-    const {props} = this;
75
-    // Completely recreate the component on theme change to force theme reload
76
-    if (props.theme.dark)
77
-      return <View style={{flex: 1}}>{this.getAgenda()}</View>;
78
-    return this.getAgenda();
79
-  }
80
-}
81
-
82
-export default withTheme(CustomAgenda);

+ 75
- 0
src/components/Overrides/CustomAgenda.tsx View File

@@ -0,0 +1,75 @@
1
+/*
2
+ * Copyright (c) 2019 - 2020 Arnaud Vergnet.
3
+ *
4
+ * This file is part of Campus INSAT.
5
+ *
6
+ * Campus INSAT is free software: you can redistribute it and/or modify
7
+ *  it under the terms of the GNU General Public License as published by
8
+ * the Free Software Foundation, either version 3 of the License, or
9
+ * (at your option) any later version.
10
+ *
11
+ * Campus INSAT is distributed in the hope that it will be useful,
12
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
13
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
14
+ * GNU General Public License for more details.
15
+ *
16
+ * You should have received a copy of the GNU General Public License
17
+ * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
18
+ */
19
+
20
+import * as React from 'react';
21
+import {View} from 'react-native';
22
+import {useTheme} from 'react-native-paper';
23
+import {Agenda, AgendaProps} from 'react-native-calendars';
24
+
25
+type PropsType = {
26
+  onRef: (ref: Agenda<any>) => void;
27
+} & AgendaProps<any>;
28
+
29
+/**
30
+ * Abstraction layer for Agenda component, using custom configuration
31
+ */
32
+function CustomAgenda(props: PropsType) {
33
+  const theme = useTheme();
34
+  function getAgenda() {
35
+    return (
36
+      <Agenda
37
+        {...props}
38
+        ref={props.onRef}
39
+        theme={{
40
+          backgroundColor: theme.colors.agendaBackgroundColor,
41
+          calendarBackground: theme.colors.background,
42
+          textSectionTitleColor: theme.colors.agendaDayTextColor,
43
+          selectedDayBackgroundColor: theme.colors.primary,
44
+          selectedDayTextColor: '#ffffff',
45
+          todayTextColor: theme.colors.primary,
46
+          dayTextColor: theme.colors.text,
47
+          textDisabledColor: theme.colors.agendaDayTextColor,
48
+          dotColor: theme.colors.primary,
49
+          selectedDotColor: '#ffffff',
50
+          arrowColor: 'orange',
51
+          monthTextColor: theme.colors.primary,
52
+          indicatorColor: theme.colors.primary,
53
+          textDayFontWeight: '300',
54
+          textMonthFontWeight: 'bold',
55
+          textDayHeaderFontWeight: '300',
56
+          textDayFontSize: 16,
57
+          textMonthFontSize: 16,
58
+          textDayHeaderFontSize: 16,
59
+          agendaDayTextColor: theme.colors.agendaDayTextColor,
60
+          agendaDayNumColor: theme.colors.agendaDayTextColor,
61
+          agendaTodayColor: theme.colors.primary,
62
+          agendaKnobColor: theme.colors.primary,
63
+        }}
64
+      />
65
+    );
66
+  }
67
+
68
+  // Completely recreate the component on theme change to force theme reload
69
+  if (theme.dark) {
70
+    return <View style={{flex: 1}}>{getAgenda()}</View>;
71
+  }
72
+  return getAgenda();
73
+}
74
+
75
+export default CustomAgenda;

+ 0
- 77
src/components/Overrides/CustomHTML.js View File

@@ -1,77 +0,0 @@
1
-/*
2
- * Copyright (c) 2019 - 2020 Arnaud Vergnet.
3
- *
4
- * This file is part of Campus INSAT.
5
- *
6
- * Campus INSAT is free software: you can redistribute it and/or modify
7
- *  it under the terms of the GNU General Public License as published by
8
- * the Free Software Foundation, either version 3 of the License, or
9
- * (at your option) any later version.
10
- *
11
- * Campus INSAT is distributed in the hope that it will be useful,
12
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
13
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
14
- * GNU General Public License for more details.
15
- *
16
- * You should have received a copy of the GNU General Public License
17
- * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
18
- */
19
-
20
-/* eslint-disable flowtype/require-parameter-type */
21
-// @flow
22
-
23
-import * as React from 'react';
24
-import {Text, withTheme} from 'react-native-paper';
25
-import HTML from 'react-native-render-html';
26
-import {Linking} from 'react-native';
27
-import type {CustomThemeType} from '../../managers/ThemeManager';
28
-
29
-type PropsType = {
30
-  theme: CustomThemeType,
31
-  html: string,
32
-};
33
-
34
-/**
35
- * Abstraction layer for Agenda component, using custom configuration
36
- */
37
-class CustomHTML extends React.Component<PropsType> {
38
-  openWebLink = (event: {...}, link: string) => {
39
-    Linking.openURL(link);
40
-  };
41
-
42
-  getBasicText = (
43
-    htmlAttribs,
44
-    children,
45
-    convertedCSSStyles,
46
-    passProps,
47
-  ): React.Node => {
48
-    // eslint-disable-next-line react/jsx-props-no-spreading
49
-    return <Text {...passProps}>{children}</Text>;
50
-  };
51
-
52
-  getListBullet = (): React.Node => {
53
-    return <Text>- </Text>;
54
-  };
55
-
56
-  render(): React.Node {
57
-    const {props} = this;
58
-    // Surround description with p to allow text styling if the description is not html
59
-    return (
60
-      <HTML
61
-        html={`<p>${props.html}</p>`}
62
-        renderers={{
63
-          p: this.getBasicText,
64
-          li: this.getBasicText,
65
-        }}
66
-        listsPrefixesRenderers={{
67
-          ul: this.getListBullet,
68
-        }}
69
-        ignoredTags={['img']}
70
-        ignoredStyles={['color', 'background-color']}
71
-        onLinkPress={this.openWebLink}
72
-      />
73
-    );
74
-  }
75
-}
76
-
77
-export default withTheme(CustomHTML);

+ 68
- 0
src/components/Overrides/CustomHTML.tsx View File

@@ -0,0 +1,68 @@
1
+/*
2
+ * Copyright (c) 2019 - 2020 Arnaud Vergnet.
3
+ *
4
+ * This file is part of Campus INSAT.
5
+ *
6
+ * Campus INSAT is free software: you can redistribute it and/or modify
7
+ *  it under the terms of the GNU General Public License as published by
8
+ * the Free Software Foundation, either version 3 of the License, or
9
+ * (at your option) any later version.
10
+ *
11
+ * Campus INSAT is distributed in the hope that it will be useful,
12
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
13
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
14
+ * GNU General Public License for more details.
15
+ *
16
+ * You should have received a copy of the GNU General Public License
17
+ * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
18
+ */
19
+
20
+import * as React from 'react';
21
+import {Text} from 'react-native-paper';
22
+import HTML from 'react-native-render-html';
23
+import {GestureResponderEvent, Linking} from 'react-native';
24
+
25
+type PropsType = {
26
+  html: string;
27
+};
28
+
29
+/**
30
+ * Abstraction layer for Agenda component, using custom configuration
31
+ */
32
+function CustomHTML(props: PropsType) {
33
+  const openWebLink = (event: GestureResponderEvent, link: string) => {
34
+    Linking.openURL(link);
35
+  };
36
+
37
+  const getBasicText = (
38
+    htmlAttribs: any,
39
+    children: any,
40
+    convertedCSSStyles: any,
41
+    passProps: any,
42
+  ) => {
43
+    return <Text {...passProps}>{children}</Text>;
44
+  };
45
+
46
+  const getListBullet = () => {
47
+    return <Text>- </Text>;
48
+  };
49
+
50
+  // Surround description with p to allow text styling if the description is not html
51
+  return (
52
+    <HTML
53
+      html={`<p>${props.html}</p>`}
54
+      renderers={{
55
+        p: getBasicText,
56
+        li: getBasicText,
57
+      }}
58
+      listsPrefixesRenderers={{
59
+        ul: getListBullet,
60
+      }}
61
+      ignoredTags={['img']}
62
+      ignoredStyles={['color', 'background-color']}
63
+      onLinkPress={openWebLink}
64
+    />
65
+  );
66
+}
67
+
68
+export default CustomHTML;

src/components/Overrides/CustomHeaderButton.js → src/components/Overrides/CustomHeaderButton.tsx View File

@@ -17,39 +17,31 @@
17 17
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
18 18
  */
19 19
 
20
-// @flow
21
-
22 20
 import * as React from 'react';
23 21
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
24
-import {HeaderButton, HeaderButtons} from 'react-navigation-header-buttons';
25
-import {withTheme} from 'react-native-paper';
26
-import type {CustomThemeType} from '../../managers/ThemeManager';
22
+import {
23
+  HeaderButton,
24
+  HeaderButtonProps,
25
+  HeaderButtons,
26
+  HeaderButtonsProps,
27
+} from 'react-navigation-header-buttons';
28
+import {useTheme} from 'react-native-paper';
27 29
 
28
-const MaterialHeaderButton = (props: {
29
-  theme: CustomThemeType,
30
-  color: string,
31
-}): React.Node => {
32
-  const {color, theme} = props;
30
+const MaterialHeaderButton = (props: HeaderButtonProps) => {
31
+  const theme = useTheme();
33 32
   return (
34
-    // $FlowFixMe
35 33
     <HeaderButton
36
-      // eslint-disable-next-line react/jsx-props-no-spreading
37 34
       {...props}
38 35
       IconComponent={MaterialCommunityIcons}
39 36
       iconSize={26}
40
-      color={color != null ? color : theme.colors.text}
37
+      color={props.color ? props.color : theme.colors.text}
41 38
     />
42 39
   );
43 40
 };
44 41
 
45
-const MaterialHeaderButtons = (props: {...}): React.Node => {
42
+const MaterialHeaderButtons = (props: HeaderButtonsProps) => {
46 43
   return (
47
-    // $FlowFixMe
48
-    <HeaderButtons
49
-      // eslint-disable-next-line react/jsx-props-no-spreading
50
-      {...props}
51
-      HeaderButtonComponent={withTheme(MaterialHeaderButton)}
52
-    />
44
+    <HeaderButtons {...props} HeaderButtonComponent={MaterialHeaderButton} />
53 45
   );
54 46
 };
55 47
 

src/components/Overrides/CustomIntroSlider.js → src/components/Overrides/CustomIntroSlider.tsx View File

@@ -17,10 +17,14 @@
17 17
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
18 18
  */
19 19
 
20
-// @flow
21
-
22 20
 import * as React from 'react';
23
-import {Platform, StatusBar, StyleSheet, View} from 'react-native';
21
+import {
22
+  ListRenderItemInfo,
23
+  Platform,
24
+  StatusBar,
25
+  StyleSheet,
26
+  View,
27
+} from 'react-native';
24 28
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
25 29
 import i18n from 'i18n-js';
26 30
 import AppIntroSlider from 'react-native-app-intro-slider';
@@ -35,26 +39,27 @@ import IntroIcon from '../Intro/IconIntro';
35 39
 import MascotIntroEnd from '../Intro/MascotIntroEnd';
36 40
 
37 41
 type PropsType = {
38
-  onDone: () => void,
39
-  isUpdate: boolean,
40
-  isAprilFools: boolean,
42
+  onDone: () => void;
43
+  isUpdate: boolean;
44
+  isAprilFools: boolean;
41 45
 };
42 46
 
43 47
 type StateType = {
44
-  currentSlide: number,
48
+  currentSlide: number;
45 49
 };
46 50
 
47 51
 export type IntroSlideType = {
48
-  key: string,
49
-  title: string,
50
-  text: string,
51
-  view: () => React.Node,
52
-  mascotStyle?: number,
53
-  colors: [string, string],
52
+  key: string;
53
+  title: string;
54
+  text: string;
55
+  view: () => React.ReactNode;
56
+  mascotStyle?: number;
57
+  colors: [string, string];
54 58
 };
55 59
 
56 60
 const styles = StyleSheet.create({
57 61
   mainContent: {
62
+    flex: 1,
58 63
     paddingBottom: 100,
59 64
   },
60 65
   text: {
@@ -83,7 +88,7 @@ const styles = StyleSheet.create({
83 88
  */
84 89
 export default class CustomIntroSlider extends React.Component<
85 90
   PropsType,
86
-  StateType,
91
+  StateType
87 92
 > {
88 93
   sliderRef: {current: null | AppIntroSlider};
89 94
 
@@ -98,8 +103,9 @@ export default class CustomIntroSlider extends React.Component<
98 103
   /**
99 104
    * Generates intro slides
100 105
    */
101
-  constructor() {
102
-    super();
106
+  constructor(props: PropsType) {
107
+    super(props);
108
+    this.currentSlides = [];
103 109
     this.state = {
104 110
       currentSlide: 0,
105 111
     };
@@ -109,14 +115,14 @@ export default class CustomIntroSlider extends React.Component<
109 115
         key: '0', // Mascot
110 116
         title: i18n.t('intro.slideMain.title'),
111 117
         text: i18n.t('intro.slideMain.text'),
112
-        view: (): React.Node => <MascotIntroWelcome />,
118
+        view: () => <MascotIntroWelcome />,
113 119
         colors: ['#be1522', '#57080e'],
114 120
       },
115 121
       {
116 122
         key: '1',
117 123
         title: i18n.t('intro.slidePlanex.title'),
118 124
         text: i18n.t('intro.slidePlanex.text'),
119
-        view: (): React.Node => <IntroIcon icon="calendar-clock" />,
125
+        view: () => <IntroIcon icon="calendar-clock" />,
120 126
         mascotStyle: MASCOT_STYLE.INTELLO,
121 127
         colors: ['#be1522', '#57080e'],
122 128
       },
@@ -124,7 +130,7 @@ export default class CustomIntroSlider extends React.Component<
124 130
         key: '2',
125 131
         title: i18n.t('intro.slideEvents.title'),
126 132
         text: i18n.t('intro.slideEvents.text'),
127
-        view: (): React.Node => <IntroIcon icon="calendar-star" />,
133
+        view: () => <IntroIcon icon="calendar-star" />,
128 134
         mascotStyle: MASCOT_STYLE.HAPPY,
129 135
         colors: ['#be1522', '#57080e'],
130 136
       },
@@ -132,7 +138,7 @@ export default class CustomIntroSlider extends React.Component<
132 138
         key: '3',
133 139
         title: i18n.t('intro.slideServices.title'),
134 140
         text: i18n.t('intro.slideServices.text'),
135
-        view: (): React.Node => <IntroIcon icon="view-dashboard-variant" />,
141
+        view: () => <IntroIcon icon="view-dashboard-variant" />,
136 142
         mascotStyle: MASCOT_STYLE.CUTE,
137 143
         colors: ['#be1522', '#57080e'],
138 144
       },
@@ -140,7 +146,7 @@ export default class CustomIntroSlider extends React.Component<
140 146
         key: '4',
141 147
         title: i18n.t('intro.slideDone.title'),
142 148
         text: i18n.t('intro.slideDone.text'),
143
-        view: (): React.Node => <MascotIntroEnd />,
149
+        view: () => <MascotIntroEnd />,
144 150
         colors: ['#9c165b', '#3e042b'],
145 151
       },
146 152
     ];
@@ -152,7 +158,7 @@ export default class CustomIntroSlider extends React.Component<
152 158
         key: '1',
153 159
         title: i18n.t('intro.aprilFoolsSlide.title'),
154 160
         text: i18n.t('intro.aprilFoolsSlide.text'),
155
-        view: (): React.Node => <View />,
161
+        view: () => <View />,
156 162
         mascotStyle: MASCOT_STYLE.NORMAL,
157 163
         colors: ['#e01928', '#be1522'],
158 164
       },
@@ -162,21 +168,21 @@ export default class CustomIntroSlider extends React.Component<
162 168
   /**
163 169
    * Render item to be used for the intro introSlides
164 170
    *
165
-   * @param item The item to be displayed
166
-   * @param dimensions Dimensions of the item
171
+   * @param data
167 172
    */
168
-  getIntroRenderItem = ({
169
-    item,
170
-    dimensions,
171
-  }: {
172
-    item: IntroSlideType,
173
-    dimensions: {width: number, height: number},
174
-  }): React.Node => {
173
+  getIntroRenderItem = (
174
+    data:
175
+      | (ListRenderItemInfo<IntroSlideType> & {
176
+          dimensions: {width: number; height: number};
177
+        })
178
+      | ListRenderItemInfo<IntroSlideType>,
179
+  ) => {
180
+    const item = data.item;
175 181
     const {state} = this;
176 182
     const index = parseInt(item.key, 10);
177 183
     return (
178 184
       <LinearGradient
179
-        style={[styles.mainContent, dimensions]}
185
+        style={[styles.mainContent]}
180 186
         colors={item.colors}
181 187
         start={{x: 0, y: 0.1}}
182 188
         end={{x: 0.1, y: 1}}>
@@ -254,7 +260,9 @@ export default class CustomIntroSlider extends React.Component<
254 260
   };
255 261
 
256 262
   static setStatusBarColor(color: string) {
257
-    if (Platform.OS === 'android') StatusBar.setBackgroundColor(color, true);
263
+    if (Platform.OS === 'android') {
264
+      StatusBar.setBackgroundColor(color, true);
265
+    }
258 266
   }
259 267
 
260 268
   onSlideChange = (index: number) => {
@@ -266,8 +274,9 @@ export default class CustomIntroSlider extends React.Component<
266 274
     CustomIntroSlider.setStatusBarColor(
267 275
       this.currentSlides[this.currentSlides.length - 1].colors[0],
268 276
     );
269
-    if (this.sliderRef.current != null)
277
+    if (this.sliderRef.current != null) {
270 278
       this.sliderRef.current.goToSlide(this.currentSlides.length - 1);
279
+    }
271 280
   };
272 281
 
273 282
   onDone = () => {
@@ -278,7 +287,7 @@ export default class CustomIntroSlider extends React.Component<
278 287
     props.onDone();
279 288
   };
280 289
 
281
-  getRenderNextButton = (): React.Node => {
290
+  getRenderNextButton = () => {
282 291
     return (
283 292
       <Animatable.View
284 293
         useNativeDriver
@@ -293,7 +302,7 @@ export default class CustomIntroSlider extends React.Component<
293 302
     );
294 303
   };
295 304
 
296
-  getRenderDoneButton = (): React.Node => {
305
+  getRenderDoneButton = () => {
297 306
     return (
298 307
       <Animatable.View
299 308
         useNativeDriver
@@ -308,11 +317,14 @@ export default class CustomIntroSlider extends React.Component<
308 317
     );
309 318
   };
310 319
 
311
-  render(): React.Node {
320
+  render() {
312 321
     const {props, state} = this;
313 322
     this.currentSlides = this.introSlides;
314
-    if (props.isUpdate) this.currentSlides = this.updateSlides;
315
-    else if (props.isAprilFools) this.currentSlides = this.aprilFoolsSlides;
323
+    if (props.isUpdate) {
324
+      this.currentSlides = this.updateSlides;
325
+    } else if (props.isAprilFools) {
326
+      this.currentSlides = this.aprilFoolsSlides;
327
+    }
316 328
     CustomIntroSlider.setStatusBarColor(this.currentSlides[0].colors[0]);
317 329
     return (
318 330
       <AppIntroSlider

src/components/Overrides/CustomModal.js → src/components/Overrides/CustomModal.tsx View File

@@ -17,14 +17,11 @@
17 17
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
18 18
  */
19 19
 
20
-// @flow
21
-
22 20
 import * as React from 'react';
23
-import {withTheme} from 'react-native-paper';
21
+import {useTheme} from 'react-native-paper';
24 22
 import {Modalize} from 'react-native-modalize';
25 23
 import {View} from 'react-native-animatable';
26 24
 import CustomTabBar from '../Tabbar/CustomTabBar';
27
-import type {CustomThemeType} from '../../managers/ThemeManager';
28 25
 
29 26
 /**
30 27
  * Abstraction layer for Modalize component, using custom configuration
@@ -33,11 +30,11 @@ import type {CustomThemeType} from '../../managers/ThemeManager';
33 30
  * @return {*}
34 31
  */
35 32
 function CustomModal(props: {
36
-  theme: CustomThemeType,
37
-  onRef: (re: Modalize) => void,
38
-  children?: React.Node,
39
-}): React.Node {
40
-  const {theme, onRef, children} = props;
33
+  onRef: (re: Modalize) => void;
34
+  children?: React.ReactNode;
35
+}) {
36
+  const theme = useTheme();
37
+  const {onRef, children} = props;
41 38
   return (
42 39
     <Modalize
43 40
       ref={onRef}
@@ -55,6 +52,4 @@ function CustomModal(props: {
55 52
   );
56 53
 }
57 54
 
58
-CustomModal.defaultProps = {children: null};
59
-
60
-export default withTheme(CustomModal);
55
+export default CustomModal;

+ 0
- 84
src/components/Overrides/CustomSlider.js View File

@@ -1,84 +0,0 @@
1
-/*
2
- * Copyright (c) 2019 - 2020 Arnaud Vergnet.
3
- *
4
- * This file is part of Campus INSAT.
5
- *
6
- * Campus INSAT is free software: you can redistribute it and/or modify
7
- *  it under the terms of the GNU General Public License as published by
8
- * the Free Software Foundation, either version 3 of the License, or
9
- * (at your option) any later version.
10
- *
11
- * Campus INSAT is distributed in the hope that it will be useful,
12
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
13
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
14
- * GNU General Public License for more details.
15
- *
16
- * You should have received a copy of the GNU General Public License
17
- * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
18
- */
19
-
20
-// @flow
21
-
22
-import * as React from 'react';
23
-import {Text, withTheme} from 'react-native-paper';
24
-import {View} from 'react-native-animatable';
25
-import Slider, {SliderProps} from '@react-native-community/slider';
26
-import type {CustomThemeType} from '../../managers/ThemeManager';
27
-
28
-type PropsType = {
29
-  theme: CustomThemeType,
30
-  valueSuffix?: string,
31
-  ...SliderProps,
32
-};
33
-
34
-type StateType = {
35
-  currentValue: number,
36
-};
37
-
38
-/**
39
- * Abstraction layer for Modalize component, using custom configuration
40
- *
41
- * @param props Props to pass to the element. Must specify an onRef prop to get an Modalize ref.
42
- * @return {*}
43
- */
44
-class CustomSlider extends React.Component<PropsType, StateType> {
45
-  static defaultProps = {
46
-    valueSuffix: '',
47
-  };
48
-
49
-  constructor(props: PropsType) {
50
-    super(props);
51
-    this.state = {
52
-      currentValue: props.value,
53
-    };
54
-  }
55
-
56
-  onValueChange = (value: number) => {
57
-    const {props} = this;
58
-    this.setState({currentValue: value});
59
-    if (props.onValueChange != null) props.onValueChange(value);
60
-  };
61
-
62
-  render(): React.Node {
63
-    const {props, state} = this;
64
-    return (
65
-      <View style={{flex: 1, flexDirection: 'row'}}>
66
-        <Text
67
-          style={{
68
-            marginHorizontal: 10,
69
-            marginTop: 'auto',
70
-            marginBottom: 'auto',
71
-          }}>
72
-          {state.currentValue}min
73
-        </Text>
74
-        <Slider
75
-          // eslint-disable-next-line react/jsx-props-no-spreading
76
-          {...props}
77
-          onValueChange={this.onValueChange}
78
-        />
79
-      </View>
80
-    );
81
-  }
82
-}
83
-
84
-export default withTheme(CustomSlider);

+ 61
- 0
src/components/Overrides/CustomSlider.tsx View File

@@ -0,0 +1,61 @@
1
+/*
2
+ * Copyright (c) 2019 - 2020 Arnaud Vergnet.
3
+ *
4
+ * This file is part of Campus INSAT.
5
+ *
6
+ * Campus INSAT is free software: you can redistribute it and/or modify
7
+ *  it under the terms of the GNU General Public License as published by
8
+ * the Free Software Foundation, either version 3 of the License, or
9
+ * (at your option) any later version.
10
+ *
11
+ * Campus INSAT is distributed in the hope that it will be useful,
12
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
13
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
14
+ * GNU General Public License for more details.
15
+ *
16
+ * You should have received a copy of the GNU General Public License
17
+ * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
18
+ */
19
+
20
+import * as React from 'react';
21
+import {Text} from 'react-native-paper';
22
+import {View} from 'react-native-animatable';
23
+import Slider, {SliderProps} from '@react-native-community/slider';
24
+import {useState} from 'react';
25
+
26
+type PropsType = {
27
+  valueSuffix?: string;
28
+} & SliderProps;
29
+
30
+/**
31
+ * Abstraction layer for Modalize component, using custom configuration
32
+ *
33
+ * @param props Props to pass to the element. Must specify an onRef prop to get an Modalize ref.
34
+ * @return {*}
35
+ */
36
+function CustomSlider(props: PropsType) {
37
+  const [currentValue, setCurrentValue] = useState(props.value);
38
+
39
+  const onValueChange = (value: number) => {
40
+    setCurrentValue(value);
41
+    if (props.onValueChange) {
42
+      props.onValueChange(value);
43
+    }
44
+  };
45
+
46
+  return (
47
+    <View style={{flex: 1, flexDirection: 'row'}}>
48
+      <Text
49
+        style={{
50
+          marginHorizontal: 10,
51
+          marginTop: 'auto',
52
+          marginBottom: 'auto',
53
+        }}>
54
+        {currentValue}min
55
+      </Text>
56
+      <Slider {...props} ref={undefined} onValueChange={onValueChange} />
57
+    </View>
58
+  );
59
+}
60
+
61
+export default CustomSlider;

Loading…
Cancel
Save