Browse Source

Improve list icon handling

Arnaud Vergnet 1 year ago
parent
commit
d133ea30a5

+ 8
- 4
src/components/Amicale/Vote/VoteResults.js View File

@@ -13,6 +13,10 @@ import {FlatList, StyleSheet} from 'react-native';
13 13
 import i18n from 'i18n-js';
14 14
 import type {VoteTeamType} from '../../../screens/Amicale/VoteScreen';
15 15
 import type {CustomThemeType} from '../../../managers/ThemeManager';
16
+import type {
17
+  CardTitleIconPropsType,
18
+  ListIconPropsType,
19
+} from '../../../constants/PaperStyles';
16 20
 
17 21
 type PropsType = {
18 22
   teams: Array<VoteTeamType>,
@@ -78,10 +82,10 @@ class VoteResults extends React.Component<PropsType> {
78 82
         <List.Item
79 83
           title={item.name}
80 84
           description={`${item.votes} ${i18n.t('screens.vote.results.votes')}`}
81
-          left={({size}: {size: number}): React.Node =>
85
+          left={(iconProps: ListIconPropsType): React.Node =>
82 86
             isWinner ? (
83 87
               <List.Icon
84
-                size={size}
88
+                style={iconProps.style}
85 89
                 icon={isDraw ? 'trophy-outline' : 'trophy'}
86 90
                 color={props.theme.colors.primary}
87 91
               />
@@ -111,8 +115,8 @@ class VoteResults extends React.Component<PropsType> {
111 115
           subtitle={`${i18n.t('screens.vote.results.subtitle')} ${
112 116
             props.dateEnd
113 117
           }`}
114
-          left={({size}: {size: number}): React.Node => (
115
-            <Avatar.Icon size={size} icon="podium-gold" />
118
+          left={(iconProps: CardTitleIconPropsType): React.Node => (
119
+            <Avatar.Icon size={iconProps.size} icon="podium-gold" />
116 120
           )}
117 121
         />
118 122
         <Card.Content>

+ 3
- 2
src/components/Amicale/Vote/VoteSelect.js View File

@@ -8,6 +8,7 @@ import ConnectionManager from '../../../managers/ConnectionManager';
8 8
 import LoadingConfirmDialog from '../../Dialogs/LoadingConfirmDialog';
9 9
 import ErrorDialog from '../../Dialogs/ErrorDialog';
10 10
 import type {VoteTeamType} from '../../../screens/Amicale/VoteScreen';
11
+import type {CardTitleIconPropsType} from '../../../constants/PaperStyles';
11 12
 
12 13
 type PropsType = {
13 14
   teams: Array<VoteTeamType>,
@@ -99,8 +100,8 @@ export default class VoteSelect extends React.PureComponent<
99 100
           <Card.Title
100 101
             title={i18n.t('screens.vote.select.title')}
101 102
             subtitle={i18n.t('screens.vote.select.subtitle')}
102
-            left={({size}: {size: number}): React.Node => (
103
-              <Avatar.Icon size={size} icon="alert-decagram" />
103
+            left={(iconProps: CardTitleIconPropsType): React.Node => (
104
+              <Avatar.Icon size={iconProps.size} icon="alert-decagram" />
104 105
             )}
105 106
           />
106 107
           <Card.Content>

+ 3
- 2
src/components/Amicale/Vote/VoteTease.js View File

@@ -4,6 +4,7 @@ import * as React from 'react';
4 4
 import {Avatar, Card, Paragraph} from 'react-native-paper';
5 5
 import {StyleSheet} from 'react-native';
6 6
 import i18n from 'i18n-js';
7
+import type {CardTitleIconPropsType} from '../../../constants/PaperStyles';
7 8
 
8 9
 type PropsType = {
9 10
   startDate: string,
@@ -30,8 +31,8 @@ export default class VoteTease extends React.Component<PropsType> {
30 31
         <Card.Title
31 32
           title={i18n.t('screens.vote.tease.title')}
32 33
           subtitle={i18n.t('screens.vote.tease.subtitle')}
33
-          left={({size}: {size: number}): React.Node => (
34
-            <Avatar.Icon size={size} icon="vote" />
34
+          left={(iconProps: CardTitleIconPropsType): React.Node => (
35
+            <Avatar.Icon size={iconProps.size} icon="vote" />
35 36
           )}
36 37
         />
37 38
         <Card.Content>

+ 4
- 8
src/components/Amicale/Vote/VoteWait.js View File

@@ -1,15 +1,11 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {
5
-  ActivityIndicator,
6
-  Card,
7
-  Paragraph,
8
-  withTheme,
9
-} from 'react-native-paper';
4
+import {Avatar, Card, Paragraph, withTheme} from 'react-native-paper';
10 5
 import {StyleSheet} from 'react-native';
11 6
 import i18n from 'i18n-js';
12 7
 import type {CustomThemeType} from '../../../managers/ThemeManager';
8
+import type {CardTitleIconPropsType} from '../../../constants/PaperStyles';
13 9
 
14 10
 type PropsType = {
15 11
   startDate: string | null,
@@ -45,8 +41,8 @@ class VoteWait extends React.Component<PropsType> {
45 41
               : i18n.t('screens.vote.wait.titleEnded')
46 42
           }
47 43
           subtitle={i18n.t('screens.vote.wait.subtitle')}
48
-          left={({size}: {size: number}): React.Node => (
49
-            <ActivityIndicator size={size} />
44
+          left={(iconProps: CardTitleIconPropsType): React.Node => (
45
+            <Avatar.Icon size={iconProps.size} icon="progress-check" />
50 46
           )}
51 47
         />
52 48
         <Card.Content>

+ 4
- 4
src/components/Animations/AnimatedAccordion.js View File

@@ -6,6 +6,7 @@ import {List, withTheme} from 'react-native-paper';
6 6
 import Collapsible from 'react-native-collapsible';
7 7
 import * as Animatable from 'react-native-animatable';
8 8
 import type {CustomThemeType} from '../../managers/ThemeManager';
9
+import type {ListIconPropsType} from '../../constants/PaperStyles';
9 10
 
10 11
 type PropsType = {
11 12
   theme: CustomThemeType,
@@ -91,14 +92,13 @@ class AnimatedAccordion extends React.Component<PropsType, StateType> {
91 92
           subtitle={props.subtitle}
92 93
           titleStyle={state.expanded ? {color: colors.primary} : null}
93 94
           onPress={this.toggleAccordion}
94
-          right={({size}: {size: number}): React.Node => (
95
+          right={(iconProps: ListIconPropsType): React.Node => (
95 96
             <AnimatedListIcon
96 97
               ref={this.chevronRef}
97
-              size={size}
98
+              style={iconProps.style}
98 99
               icon={this.chevronIcon}
99
-              color={state.expanded ? colors.primary : null}
100
+              color={state.expanded ? colors.primary : iconProps.color}
100 101
               useNativeDriver
101
-              style={{rotate: '0deg'}}
102 102
             />
103 103
           )}
104 104
           left={props.left}

+ 15
- 6
src/components/Home/ActionsDashboardItem.js View File

@@ -6,6 +6,7 @@ import {View} from 'react-native';
6 6
 import i18n from 'i18n-js';
7 7
 import {StackNavigationProp} from '@react-navigation/stack';
8 8
 import type {CustomThemeType} from '../../managers/ThemeManager';
9
+import type {ListIconPropsType} from '../../constants/PaperStyles';
9 10
 
10 11
 type PropsType = {
11 12
   navigation: StackNavigationProp,
@@ -19,19 +20,27 @@ class ActionsDashBoardItem extends React.Component<PropsType> {
19 20
   }
20 21
 
21 22
   render(): React.Node {
22
-    const {props} = this;
23
+    const {navigation} = this.props;
23 24
     return (
24 25
       <View>
25 26
         <List.Item
26 27
           title={i18n.t('screens.feedback.homeButtonTitle')}
27 28
           description={i18n.t('screens.feedback.homeButtonSubtitle')}
28
-          left={({size}: {size: number}): React.Node => (
29
-            <List.Icon size={size} icon="comment-quote" />
29
+          left={(props: ListIconPropsType): React.Node => (
30
+            <List.Icon
31
+              color={props.color}
32
+              style={props.style}
33
+              icon="comment-quote"
34
+            />
30 35
           )}
31
-          right={({size}: {size: number}): React.Node => (
32
-            <List.Icon size={size} icon="chevron-right" />
36
+          right={(props: ListIconPropsType): React.Node => (
37
+            <List.Icon
38
+              color={props.color}
39
+              style={props.style}
40
+              icon="chevron-right"
41
+            />
33 42
           )}
34
-          onPress={(): void => props.navigation.navigate('feedback')}
43
+          onPress={(): void => navigation.navigate('feedback')}
35 44
           style={{
36 45
             paddingTop: 0,
37 46
             paddingBottom: 0,

+ 3
- 2
src/components/Home/EventDashboardItem.js View File

@@ -11,6 +11,7 @@ import {
11 11
 import {StyleSheet, View} from 'react-native';
12 12
 import i18n from 'i18n-js';
13 13
 import type {CustomThemeType} from '../../managers/ThemeManager';
14
+import type {CardTitleIconPropsType} from '../../constants/PaperStyles';
14 15
 
15 16
 type PropsType = {
16 17
   eventNumber: number,
@@ -76,11 +77,11 @@ class EventDashBoardItem extends React.Component<PropsType> {
76 77
               titleStyle={{color: textColor}}
77 78
               subtitle={subtitle}
78 79
               subtitleStyle={{color: textColor}}
79
-              left={(): React.Node => (
80
+              left={(iconProps: CardTitleIconPropsType): React.Node => (
80 81
                 <Avatar.Icon
81 82
                   icon="calendar-range"
82 83
                   color={iconColor}
83
-                  size={60}
84
+                  size={iconProps.size}
84 85
                   style={styles.avatar}
85 86
                 />
86 87
               )}

+ 3
- 2
src/components/Lists/Clubs/ClubListHeader.js View File

@@ -7,6 +7,7 @@ import i18n from 'i18n-js';
7 7
 import AnimatedAccordion from '../../Animations/AnimatedAccordion';
8 8
 import {isItemInCategoryFilter} from '../../../utils/Search';
9 9
 import type {ClubCategoryType} from '../../../screens/Amicale/Clubs/ClubListScreen';
10
+import type {ListIconPropsType} from '../../../constants/PaperStyles';
10 11
 
11 12
 type PropsType = {
12 13
   categories: Array<ClubCategoryType>,
@@ -74,8 +75,8 @@ class ClubListHeader extends React.Component<PropsType> {
74 75
       <Card style={styles.card}>
75 76
         <AnimatedAccordion
76 77
           title={i18n.t('screens.clubs.categories')}
77
-          left={({size}: {size: number}): React.Node => (
78
-            <List.Icon size={size} icon="star" />
78
+          left={(props: ListIconPropsType): React.Node => (
79
+            <List.Icon color={props.color} style={props.style} icon="star" />
79 80
           )}
80 81
           opened>
81 82
           <Text style={styles.text}>

+ 13
- 12
src/components/Lists/DashboardEdit/DashboardEditItem.js View File

@@ -5,6 +5,7 @@ import {Image} from 'react-native';
5 5
 import {List, withTheme} from 'react-native-paper';
6 6
 import type {CustomThemeType} from '../../../managers/ThemeManager';
7 7
 import type {ServiceItemType} from '../../../managers/ServicesManager';
8
+import type {ListIconPropsType} from '../../../constants/PaperStyles';
8 9
 
9 10
 type PropsType = {
10 11
   item: ServiceItemType,
@@ -21,36 +22,36 @@ class DashboardEditItem extends React.Component<PropsType> {
21 22
   }
22 23
 
23 24
   render(): React.Node {
24
-    const {props} = this;
25
+    const {item, onPress, height, isActive, theme} = this.props;
25 26
     return (
26 27
       <List.Item
27
-        title={props.item.title}
28
-        description={props.item.subtitle}
29
-        onPress={props.isActive ? null : props.onPress}
28
+        title={item.title}
29
+        description={item.subtitle}
30
+        onPress={isActive ? null : onPress}
30 31
         left={(): React.Node => (
31 32
           <Image
32
-            source={{uri: props.item.image}}
33
+            source={{uri: item.image}}
33 34
             style={{
34 35
               width: 40,
35 36
               height: 40,
36 37
             }}
37 38
           />
38 39
         )}
39
-        right={({size}: {size: number}): React.Node =>
40
-          props.isActive ? (
40
+        right={(props: ListIconPropsType): React.Node =>
41
+          isActive ? (
41 42
             <List.Icon
42
-              size={size}
43
+              style={props.style}
43 44
               icon="check"
44
-              color={props.theme.colors.success}
45
+              color={theme.colors.success}
45 46
             />
46 47
           ) : null
47 48
         }
48 49
         style={{
49
-          height: props.height,
50
+          height,
50 51
           justifyContent: 'center',
51 52
           paddingLeft: 30,
52
-          backgroundColor: props.isActive
53
-            ? props.theme.colors.proxiwashFinishedColor
53
+          backgroundColor: isActive
54
+            ? theme.colors.proxiwashFinishedColor
54 55
             : 'transparent',
55 56
         }}
56 57
       />

+ 3
- 2
src/components/Lists/PlanexGroups/GroupListAccordion.js View File

@@ -11,6 +11,7 @@ import type {
11 11
   PlanexGroupCategoryType,
12 12
 } from '../../../screens/Planex/GroupSelectionScreen';
13 13
 import type {CustomThemeType} from '../../../managers/ThemeManager';
14
+import type {ListIconPropsType} from '../../../constants/PaperStyles';
14 15
 
15 16
 type PropsType = {
16 17
   item: PlanexGroupCategoryType,
@@ -87,10 +88,10 @@ class GroupListAccordion extends React.Component<PropsType> {
87 88
             height: props.height,
88 89
             justifyContent: 'center',
89 90
           }}
90
-          left={({size}: {size: number}): React.Node =>
91
+          left={(iconProps: ListIconPropsType): React.Node =>
91 92
             item.id === 0 ? (
92 93
               <List.Icon
93
-                size={size}
94
+                style={iconProps.style}
94 95
                 icon="star"
95 96
                 color={props.theme.colors.tetrisScore}
96 97
               />

+ 7
- 2
src/components/Lists/PlanexGroups/GroupListItem.js View File

@@ -5,6 +5,7 @@ import {IconButton, List, withTheme} from 'react-native-paper';
5 5
 import * as Animatable from 'react-native-animatable';
6 6
 import type {CustomThemeType} from '../../../managers/ThemeManager';
7 7
 import type {PlanexGroupType} from '../../../screens/Planex/GroupSelectionScreen';
8
+import type {ListIconPropsType} from '../../../constants/PaperStyles';
8 9
 
9 10
 type PropsType = {
10 11
   theme: CustomThemeType,
@@ -61,8 +62,12 @@ class GroupListItem extends React.Component<PropsType> {
61 62
       <List.Item
62 63
         title={props.item.name.replace(REPLACE_REGEX, ' ')}
63 64
         onPress={props.onPress}
64
-        left={({size}: {size: number}): React.Node => (
65
-          <List.Icon size={size} icon="chevron-right" />
65
+        left={(iconProps: ListIconPropsType): React.Node => (
66
+          <List.Icon
67
+            color={iconProps.color}
68
+            style={iconProps.style}
69
+            icon="chevron-right"
70
+          />
66 71
         )}
67 72
         right={({size, color}: {size: number, color: string}): React.Node => (
68 73
           <Animatable.View ref={this.starRef} useNativeDriver>

+ 12
- 0
src/constants/PaperStyles.js View File

@@ -0,0 +1,12 @@
1
+// @flow
2
+
3
+import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
4
+
5
+export type ListIconPropsType = {
6
+  color: string,
7
+  style: ViewStyleProp,
8
+};
9
+
10
+export type CardTitleIconPropsType = {
11
+  size: number,
12
+};

+ 17
- 18
src/screens/About/AboutScreen.js View File

@@ -8,6 +8,10 @@ import {StackNavigationProp} from '@react-navigation/stack';
8 8
 import packageJson from '../../../package.json';
9 9
 import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatList';
10 10
 import APP_LOGO from '../../../assets/android.icon.png';
11
+import type {
12
+  CardTitleIconPropsType,
13
+  ListIconPropsType,
14
+} from '../../constants/PaperStyles';
11 15
 
12 16
 type ListItemType = {
13 17
   onPressCallback: () => void,
@@ -217,9 +221,9 @@ class AboutScreen extends React.Component<PropsType> {
217 221
         <Card.Title
218 222
           title="Campus"
219 223
           subtitle={packageJson.version}
220
-          left={({size}: {size: number}): React.Node => (
224
+          left={(iconProps: CardTitleIconPropsType): React.Node => (
221 225
             <Avatar.Image
222
-              size={size}
226
+              size={iconProps.size}
223 227
               source={APP_LOGO}
224 228
               style={{backgroundColor: 'transparent'}}
225 229
             />
@@ -246,8 +250,8 @@ class AboutScreen extends React.Component<PropsType> {
246 250
       <Card style={{marginBottom: 10}}>
247 251
         <Card.Title
248 252
           title={i18n.t('screens.about.team')}
249
-          left={({size, color}: {size: number, color: string}): React.Node => (
250
-            <Avatar.Icon size={size} color={color} icon="account-multiple" />
253
+          left={(iconProps: CardTitleIconPropsType): React.Node => (
254
+            <Avatar.Icon size={iconProps.size} icon="account-multiple" />
251 255
           )}
252 256
         />
253 257
         <Card.Content>
@@ -296,14 +300,10 @@ class AboutScreen extends React.Component<PropsType> {
296 300
    * @param props
297 301
    * @return {*}
298 302
    */
299
-  static getChevronIcon({
300
-    size,
301
-    color,
302
-  }: {
303
-    size: number,
304
-    color: string,
305
-  }): React.Node {
306
-    return <List.Icon size={size} color={color} icon="chevron-right" />;
303
+  static getChevronIcon(props: ListIconPropsType): React.Node {
304
+    return (
305
+      <List.Icon color={props.color} style={props.style} icon="chevron-right" />
306
+    );
307 307
   }
308 308
 
309 309
   /**
@@ -313,11 +313,10 @@ class AboutScreen extends React.Component<PropsType> {
313 313
    * @param props
314 314
    * @return {*}
315 315
    */
316
-  static getItemIcon(
317
-    item: ListItemType,
318
-    {size, color}: {size: number, color: string},
319
-  ): React.Node {
320
-    return <List.Icon size={size} color={color} icon={item.icon} />;
316
+  static getItemIcon(item: ListItemType, props: ListIconPropsType): React.Node {
317
+    return (
318
+      <List.Icon color={props.color} style={props.style} icon={item.icon} />
319
+    );
321 320
   }
322 321
 
323 322
   /**
@@ -326,7 +325,7 @@ class AboutScreen extends React.Component<PropsType> {
326 325
    * @returns {*}
327 326
    */
328 327
   getCardItem = ({item}: {item: ListItemType}): React.Node => {
329
-    const getItemIcon = (props: {size: number, color: string}): React.Node =>
328
+    const getItemIcon = (props: ListIconPropsType): React.Node =>
330 329
       AboutScreen.getItemIcon(item, props);
331 330
     if (item.showChevron) {
332 331
       return (

+ 19
- 19
src/screens/Amicale/AmicaleContactScreen.js View File

@@ -2,11 +2,15 @@
2 2
 
3 3
 import * as React from 'react';
4 4
 import {FlatList, Image, Linking, View} from 'react-native';
5
-import {Card, List, Text, withTheme} from 'react-native-paper';
5
+import {Card, List, Text, withTheme, Avatar} from 'react-native-paper';
6 6
 import i18n from 'i18n-js';
7 7
 import type {MaterialCommunityIconsGlyphs} from 'react-native-vector-icons/MaterialCommunityIcons';
8 8
 import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatList';
9 9
 import AMICALE_LOGO from '../../../assets/amicale.png';
10
+import type {
11
+  CardTitleIconPropsType,
12
+  ListIconPropsType,
13
+} from '../../constants/PaperStyles';
10 14
 
11 15
 type DatasetItemType = {
12 16
   name: string,
@@ -74,14 +78,12 @@ class AmicaleContactScreen extends React.Component<null> {
74 78
 
75 79
   keyExtractor = (item: DatasetItemType): string => item.email;
76 80
 
77
-  getChevronIcon = ({
78
-    size,
79
-    color,
80
-  }: {
81
-    size: number,
82
-    color: string,
83
-  }): React.Node => (
84
-    <List.Icon size={size} color={color} icon="chevron-right" />
81
+  getChevronIcon = (iconProps: ListIconPropsType): React.Node => (
82
+    <List.Icon
83
+      color={iconProps.color}
84
+      style={iconProps.style}
85
+      icon="chevron-right"
86
+    />
85 87
   );
86 88
 
87 89
   getRenderItem = ({item}: {item: DatasetItemType}): React.Node => {
@@ -92,8 +94,12 @@ class AmicaleContactScreen extends React.Component<null> {
92 94
       <List.Item
93 95
         title={item.name}
94 96
         description={item.email}
95
-        left={({size, color}: {size: number, color: string}): React.Node => (
96
-          <List.Icon size={size} color={color} icon={item.icon} />
97
+        left={(iconProps: ListIconPropsType): React.Node => (
98
+          <List.Icon
99
+            color={iconProps.color}
100
+            style={iconProps.style}
101
+            icon={item.icon}
102
+          />
97 103
         )}
98 104
         right={this.getChevronIcon}
99 105
         onPress={onPress}
@@ -123,14 +129,8 @@ class AmicaleContactScreen extends React.Component<null> {
123 129
           <Card.Title
124 130
             title={i18n.t('screens.amicaleAbout.title')}
125 131
             subtitle={i18n.t('screens.amicaleAbout.subtitle')}
126
-            left={({
127
-              size,
128
-              color,
129
-            }: {
130
-              size: number,
131
-              color: string,
132
-            }): React.Node => (
133
-              <List.Icon size={size} color={color} icon="information" />
132
+            left={(iconProps: CardTitleIconPropsType): React.Node => (
133
+              <Avatar.Icon size={iconProps.size} icon="information" />
134 134
             )}
135 135
           />
136 136
           <Card.Content>

+ 4
- 3
src/screens/Amicale/Clubs/ClubAboutScreen.js View File

@@ -2,11 +2,12 @@
2 2
 
3 3
 import * as React from 'react';
4 4
 import {Image, View} from 'react-native';
5
-import {Card, List, Text, withTheme} from 'react-native-paper';
5
+import {Card, Avatar, Text, withTheme} from 'react-native-paper';
6 6
 import i18n from 'i18n-js';
7 7
 import Autolink from 'react-native-autolink';
8 8
 import CollapsibleScrollView from '../../../components/Collapsible/CollapsibleScrollView';
9 9
 import AMICALE_ICON from '../../../../assets/amicale.png';
10
+import type {CardTitleIconPropsType} from '../../../constants/PaperStyles';
10 11
 
11 12
 const CONTACT_LINK = 'clubs@amicale-insat.fr';
12 13
 
@@ -35,8 +36,8 @@ class ClubAboutScreen extends React.Component<null> {
35 36
           <Card.Title
36 37
             title={i18n.t('screens.clubs.about.title')}
37 38
             subtitle={i18n.t('screens.clubs.about.subtitle')}
38
-            left={({size}: {size: number}): React.Node => (
39
-              <List.Icon size={size} icon="information" />
39
+            left={(iconProps: CardTitleIconPropsType): React.Node => (
40
+              <Avatar.Icon size={iconProps.size} icon="information" />
40 41
             )}
41 42
           />
42 43
           <Card.Content>

+ 3
- 2
src/screens/Amicale/Clubs/ClubDisplayScreen.js View File

@@ -21,6 +21,7 @@ import type {CustomThemeType} from '../../../managers/ThemeManager';
21 21
 import {ERROR_TYPE} from '../../../utils/WebData';
22 22
 import CollapsibleScrollView from '../../../components/Collapsible/CollapsibleScrollView';
23 23
 import type {ApiGenericDataType} from '../../../utils/WebData';
24
+import type {CardTitleIconPropsType} from '../../../constants/PaperStyles';
24 25
 
25 26
 type PropsType = {
26 27
   navigation: StackNavigationProp,
@@ -133,9 +134,9 @@ class ClubDisplayScreen extends React.Component<PropsType> {
133 134
               ? i18n.t('screens.clubs.managersSubtitle')
134 135
               : i18n.t('screens.clubs.managersUnavailable')
135 136
           }
136
-          left={({size}: {size: number}): React.Node => (
137
+          left={(iconProps: CardTitleIconPropsType): React.Node => (
137 138
             <Avatar.Icon
138
-              size={size}
139
+              size={iconProps.size}
139 140
               style={{backgroundColor: 'transparent'}}
140 141
               color={
141 142
                 hasManagers

+ 23
- 15
src/screens/Amicale/ProfileScreen.js View File

@@ -25,6 +25,10 @@ import Mascot, {MASCOT_STYLE} from '../../components/Mascot/Mascot';
25 25
 import ServicesManager, {SERVICES_KEY} from '../../managers/ServicesManager';
26 26
 import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatList';
27 27
 import type {ServiceItemType} from '../../managers/ServicesManager';
28
+import type {
29
+  CardTitleIconPropsType,
30
+  ListIconPropsType,
31
+} from '../../constants/PaperStyles';
28 32
 
29 33
 type PropsType = {
30 34
   navigation: StackNavigationProp,
@@ -229,11 +233,11 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
229 233
       <List.Item
230 234
         title={title}
231 235
         description={subtitle}
232
-        left={({size}: {size: number}): React.Node => (
236
+        left={(props: ListIconPropsType): React.Node => (
233 237
           <List.Icon
234
-            size={size}
238
+            style={props.style}
235 239
             icon={icon}
236
-            color={field != null ? null : theme.colors.textDisabled}
240
+            color={field != null ? props.color : theme.colors.textDisabled}
237 241
           />
238 242
         )}
239 243
       />
@@ -252,9 +256,9 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
252 256
         <Card.Title
253 257
           title={`${this.data.first_name} ${this.data.last_name}`}
254 258
           subtitle={this.data.email}
255
-          left={({size}: {size: number}): React.Node => (
259
+          left={(iconProps: CardTitleIconPropsType): React.Node => (
256 260
             <Avatar.Icon
257
-              size={size}
261
+              size={iconProps.size}
258 262
               icon="account"
259 263
               color={theme.colors.primary}
260 264
               style={styles.icon}
@@ -305,9 +309,9 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
305 309
         <Card.Title
306 310
           title={i18n.t('screens.profile.clubs')}
307 311
           subtitle={i18n.t('screens.profile.clubsSubtitle')}
308
-          left={({size}: {size: number}): React.Node => (
312
+          left={(iconProps: CardTitleIconPropsType): React.Node => (
309 313
             <Avatar.Icon
310
-              size={size}
314
+              size={iconProps.size}
311 315
               icon="account-group"
312 316
               color={theme.colors.primary}
313 317
               style={styles.icon}
@@ -334,9 +338,9 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
334 338
         <Card.Title
335 339
           title={i18n.t('screens.profile.membership')}
336 340
           subtitle={i18n.t('screens.profile.membershipSubtitle')}
337
-          left={({size}: {size: number}): React.Node => (
341
+          left={(iconProps: CardTitleIconPropsType): React.Node => (
338 342
             <Avatar.Icon
339
-              size={size}
343
+              size={iconProps.size}
340 344
               icon="credit-card"
341 345
               color={theme.colors.primary}
342 346
               style={styles.icon}
@@ -366,9 +370,9 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
366 370
             ? i18n.t('screens.profile.membershipPayed')
367 371
             : i18n.t('screens.profile.membershipNotPayed')
368 372
         }
369
-        left={({size}: {size: number}): React.Node => (
373
+        left={(props: ListIconPropsType): React.Node => (
370 374
           <List.Icon
371
-            size={size}
375
+            style={props.style}
372 376
             color={state ? theme.colors.success : theme.colors.danger}
373 377
             icon={state ? 'check' : 'close'}
374 378
           />
@@ -389,13 +393,17 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
389 393
       this.openClubDetailsScreen(item.id);
390 394
     };
391 395
     let description = i18n.t('screens.profile.isMember');
392
-    let icon = ({size, color}: {size: number, color: string}): React.Node => (
393
-      <List.Icon size={size} color={color} icon="chevron-right" />
396
+    let icon = (props: ListIconPropsType): React.Node => (
397
+      <List.Icon color={props.color} style={props.style} icon="chevron-right" />
394 398
     );
395 399
     if (item.is_manager) {
396 400
       description = i18n.t('screens.profile.isManager');
397
-      icon = ({size}: {size: number}): React.Node => (
398
-        <List.Icon size={size} icon="star" color={theme.colors.primary} />
401
+      icon = (props: ListIconPropsType): React.Node => (
402
+        <List.Icon
403
+          style={props.style}
404
+          icon="star"
405
+          color={theme.colors.primary}
406
+        />
399 407
       );
400 408
     }
401 409
     return (

+ 5
- 16
src/screens/Other/FeedbackScreen.js View File

@@ -6,6 +6,7 @@ import i18n from 'i18n-js';
6 6
 import {Linking} from 'react-native';
7 7
 import type {CustomThemeType} from '../../managers/ThemeManager';
8 8
 import CollapsibleScrollView from '../../components/Collapsible/CollapsibleScrollView';
9
+import type {CardTitleIconPropsType} from '../../constants/PaperStyles';
9 10
 
10 11
 type PropsType = {
11 12
   theme: CustomThemeType,
@@ -91,14 +92,8 @@ class FeedbackScreen extends React.Component<PropsType> {
91 92
           <Card.Title
92 93
             title={i18n.t('screens.feedback.bugs')}
93 94
             subtitle={i18n.t('screens.feedback.bugsSubtitle')}
94
-            left={({
95
-              size,
96
-              color,
97
-            }: {
98
-              size: number,
99
-              color: number,
100
-            }): React.Node => (
101
-              <Avatar.Icon size={size} color={color} icon="bug" />
95
+            left={(iconProps: CardTitleIconPropsType): React.Node => (
96
+              <Avatar.Icon size={iconProps.size} icon="bug" />
102 97
             )}
103 98
           />
104 99
           <Card.Content>
@@ -114,14 +109,8 @@ class FeedbackScreen extends React.Component<PropsType> {
114 109
           <Card.Title
115 110
             title={i18n.t('screens.feedback.title')}
116 111
             subtitle={i18n.t('screens.feedback.feedbackSubtitle')}
117
-            left={({
118
-              size,
119
-              color,
120
-            }: {
121
-              size: number,
122
-              color: number,
123
-            }): React.Node => (
124
-              <Avatar.Icon size={size} color={color} icon="comment" />
112
+            left={(iconProps: CardTitleIconPropsType): React.Node => (
113
+              <Avatar.Icon size={iconProps.size} icon="comment" />
125 114
             )}
126 115
           />
127 116
           <Card.Content>

+ 23
- 22
src/screens/Other/Settings/SettingsScreen.js View File

@@ -11,6 +11,7 @@ import ThemeManager from '../../../managers/ThemeManager';
11 11
 import AsyncStorageManager from '../../../managers/AsyncStorageManager';
12 12
 import CustomSlider from '../../../components/Overrides/CustomSlider';
13 13
 import CollapsibleScrollView from '../../../components/Collapsible/CollapsibleScrollView';
14
+import type {ListIconPropsType} from '../../../constants/PaperStyles';
14 15
 
15 16
 type PropsType = {
16 17
   navigation: StackNavigationProp,
@@ -171,8 +172,8 @@ class SettingsScreen extends React.Component<PropsType, StateType> {
171 172
       <List.Item
172 173
         title={title}
173 174
         description={subtitle}
174
-        left={({size, color}: {size: number, color: number}): React.Node => (
175
-          <List.Icon size={size} color={color} icon={icon} />
175
+        left={(props: ListIconPropsType): React.Node => (
176
+          <List.Icon color={props.color} style={props.style} icon={icon} />
176 177
         )}
177 178
         right={(): React.Node => (
178 179
           <Switch value={state} onValueChange={onPressCallback} />
@@ -196,11 +197,15 @@ class SettingsScreen extends React.Component<PropsType, StateType> {
196 197
         onPress={() => {
197 198
           navigation.navigate(route);
198 199
         }}
199
-        left={({size, color}: {size: number, color: number}): React.Node => (
200
-          <List.Icon size={size} color={color} icon={icon} />
200
+        left={(props: ListIconPropsType): React.Node => (
201
+          <List.Icon color={props.color} style={props.style} icon={icon} />
201 202
         )}
202
-        right={({size, color}: {size: number, color: number}): React.Node => (
203
-          <List.Icon size={size} color={color} icon="chevron-right" />
203
+        right={(props: ListIconPropsType): React.Node => (
204
+          <List.Icon
205
+            color={props.color}
206
+            style={props.style}
207
+            icon="chevron-right"
208
+          />
204 209
         )}
205 210
         onLongPress={onLongPress}
206 211
       />
@@ -249,14 +254,12 @@ class SettingsScreen extends React.Component<PropsType, StateType> {
249 254
             <List.Item
250 255
               title={i18n.t('screens.settings.startScreen')}
251 256
               description={i18n.t('screens.settings.startScreenSub')}
252
-              left={({
253
-                size,
254
-                color,
255
-              }: {
256
-                size: number,
257
-                color: number,
258
-              }): React.Node => (
259
-                <List.Icon size={size} color={color} icon="power" />
257
+              left={(props: ListIconPropsType): React.Node => (
258
+                <List.Icon
259
+                  color={props.color}
260
+                  style={props.style}
261
+                  icon="power"
262
+                />
260 263
               )}
261 264
             />
262 265
             {this.getStartScreenPicker()}
@@ -274,14 +277,12 @@ class SettingsScreen extends React.Component<PropsType, StateType> {
274 277
             <List.Item
275 278
               title={i18n.t('screens.settings.proxiwashNotifReminder')}
276 279
               description={i18n.t('screens.settings.proxiwashNotifReminderSub')}
277
-              left={({
278
-                size,
279
-                color,
280
-              }: {
281
-                size: number,
282
-                color: number,
283
-              }): React.Node => (
284
-                <List.Icon size={size} color={color} icon="washing-machine" />
280
+              left={(props: ListIconPropsType): React.Node => (
281
+                <List.Icon
282
+                  color={props.color}
283
+                  style={props.style}
284
+                  icon="washing-machine"
285
+                />
285 286
               )}
286 287
             />
287 288
             <View style={{marginLeft: 30}}>

+ 10
- 33
src/screens/Proxiwash/ProxiwashAboutScreen.js View File

@@ -3,9 +3,10 @@
3 3
 import * as React from 'react';
4 4
 import {Image, View} from 'react-native';
5 5
 import i18n from 'i18n-js';
6
-import {Card, List, Paragraph, Text, Title} from 'react-native-paper';
6
+import {Card, Avatar, Paragraph, Text, Title} from 'react-native-paper';
7 7
 import CustomTabBar from '../../components/Tabbar/CustomTabBar';
8 8
 import CollapsibleScrollView from '../../components/Collapsible/CollapsibleScrollView';
9
+import type {CardTitleIconPropsType} from '../../constants/PaperStyles';
9 10
 
10 11
 const LOGO = 'https://etud.insa-toulouse.fr/~amicale_app/images/Proxiwash.png';
11 12
 
@@ -35,14 +36,8 @@ export default class ProxiwashAboutScreen extends React.Component<null> {
35 36
         <Card style={{margin: 5}}>
36 37
           <Card.Title
37 38
             title={i18n.t('screens.proxiwash.dryer')}
38
-            left={({
39
-              size,
40
-              color,
41
-            }: {
42
-              size: number,
43
-              color: string,
44
-            }): React.Node => (
45
-              <List.Icon size={size} color={color} icon="tumble-dryer" />
39
+            left={(iconProps: CardTitleIconPropsType): React.Node => (
40
+              <Avatar.Icon size={iconProps.size} icon="tumble-dryer" />
46 41
             )}
47 42
           />
48 43
           <Card.Content>
@@ -56,14 +51,8 @@ export default class ProxiwashAboutScreen extends React.Component<null> {
56 51
         <Card style={{margin: 5}}>
57 52
           <Card.Title
58 53
             title={i18n.t('screens.proxiwash.washer')}
59
-            left={({
60
-              size,
61
-              color,
62
-            }: {
63
-              size: number,
64
-              color: string,
65
-            }): React.Node => (
66
-              <List.Icon size={size} color={color} icon="washing-machine" />
54
+            left={(iconProps: CardTitleIconPropsType): React.Node => (
55
+              <Avatar.Icon size={iconProps.size} icon="washing-machine" />
67 56
             )}
68 57
           />
69 58
           <Card.Content>
@@ -77,14 +66,8 @@ export default class ProxiwashAboutScreen extends React.Component<null> {
77 66
         <Card style={{margin: 5}}>
78 67
           <Card.Title
79 68
             title={i18n.t('screens.proxiwash.tariffs')}
80
-            left={({
81
-              size,
82
-              color,
83
-            }: {
84
-              size: number,
85
-              color: string,
86
-            }): React.Node => (
87
-              <List.Icon size={size} color={color} icon="circle-multiple" />
69
+            left={(iconProps: CardTitleIconPropsType): React.Node => (
70
+              <Avatar.Icon size={iconProps.size} icon="circle-multiple" />
88 71
             )}
89 72
           />
90 73
           <Card.Content>
@@ -96,14 +79,8 @@ export default class ProxiwashAboutScreen extends React.Component<null> {
96 79
           style={{margin: 5, marginBottom: CustomTabBar.TAB_BAR_HEIGHT + 20}}>
97 80
           <Card.Title
98 81
             title={i18n.t('screens.proxiwash.paymentMethods')}
99
-            left={({
100
-              size,
101
-              color,
102
-            }: {
103
-              size: number,
104
-              color: string,
105
-            }): React.Node => (
106
-              <List.Icon size={size} color={color} icon="cash" />
82
+            left={(iconProps: CardTitleIconPropsType): React.Node => (
83
+              <Avatar.Icon size={iconProps.size} icon="cash" />
107 84
             )}
108 85
           />
109 86
           <Card.Content>

+ 6
- 17
src/screens/Services/Proximo/ProximoAboutScreen.js View File

@@ -3,9 +3,10 @@
3 3
 import * as React from 'react';
4 4
 import {Image, View} from 'react-native';
5 5
 import i18n from 'i18n-js';
6
-import {Card, List, Paragraph, Text} from 'react-native-paper';
6
+import {Card, Avatar, Paragraph, Text} from 'react-native-paper';
7 7
 import CustomTabBar from '../../../components/Tabbar/CustomTabBar';
8 8
 import CollapsibleScrollView from '../../../components/Collapsible/CollapsibleScrollView';
9
+import type {CardTitleIconPropsType} from '../../../constants/PaperStyles';
9 10
 
10 11
 const LOGO = 'https://etud.insa-toulouse.fr/~amicale_app/images/Proximo.png';
11 12
 
@@ -35,14 +36,8 @@ export default class ProximoAboutScreen extends React.Component<null> {
35 36
         <Card style={{margin: 5}}>
36 37
           <Card.Title
37 38
             title={i18n.t('screens.proximo.openingHours')}
38
-            left={({
39
-              size,
40
-              color,
41
-            }: {
42
-              size: number,
43
-              color: string,
44
-            }): React.Node => (
45
-              <List.Icon size={size} color={color} icon="clock-outline" />
39
+            left={(iconProps: CardTitleIconPropsType): React.Node => (
40
+              <Avatar.Icon size={iconProps.size} icon="clock-outline" />
46 41
             )}
47 42
           />
48 43
           <Card.Content>
@@ -53,14 +48,8 @@ export default class ProximoAboutScreen extends React.Component<null> {
53 48
           style={{margin: 5, marginBottom: CustomTabBar.TAB_BAR_HEIGHT + 20}}>
54 49
           <Card.Title
55 50
             title={i18n.t('screens.proximo.paymentMethods')}
56
-            left={({
57
-              size,
58
-              color,
59
-            }: {
60
-              size: number,
61
-              color: string,
62
-            }): React.Node => (
63
-              <List.Icon size={size} color={color} icon="cash" />
51
+            left={(iconProps: CardTitleIconPropsType): React.Node => (
52
+              <Avatar.Icon size={iconProps.size} icon="cash" />
64 53
             )}
65 54
           />
66 55
           <Card.Content>

+ 9
- 4
src/screens/Services/Proximo/ProximoMainScreen.js View File

@@ -10,6 +10,7 @@ import MaterialHeaderButtons, {
10 10
 } from '../../../components/Overrides/CustomHeaderButton';
11 11
 import type {CustomThemeType} from '../../../managers/ThemeManager';
12 12
 import type {SectionListDataType} from '../../../components/Screens/WebSectionList';
13
+import type {ListIconPropsType} from '../../../constants/PaperStyles';
13 14
 
14 15
 const DATA_URL = 'https://etud.insa-toulouse.fr/~proximo/data/stock-v2.json';
15 16
 const LIST_ITEM_HEIGHT = 84;
@@ -199,15 +200,19 @@ class ProximoMainScreen extends React.Component<PropsType> {
199 200
           title={item.type.name}
200 201
           description={subtitle}
201 202
           onPress={onPress}
202
-          left={({size}: {size: number}): React.Node => (
203
+          left={(props: ListIconPropsType): React.Node => (
203 204
             <List.Icon
204
-              size={size}
205
+              style={props.style}
205 206
               icon={item.type.icon}
206 207
               color={theme.colors.primary}
207 208
             />
208 209
           )}
209
-          right={({size, color}: {size: number, color: string}): React.Node => (
210
-            <List.Icon size={size} color={color} icon="chevron-right" />
210
+          right={(props: ListIconPropsType): React.Node => (
211
+            <List.Icon
212
+              color={props.color}
213
+              style={props.style}
214
+              icon="chevron-right"
215
+            />
211 216
           )}
212 217
           style={{
213 218
             height: LIST_ITEM_HEIGHT,

+ 1
- 3
src/screens/Services/ServicesScreen.js View File

@@ -118,9 +118,7 @@ class ServicesScreen extends React.Component<PropsType> {
118 118
             title={item.title}
119 119
             subtitle={item.subtitle}
120 120
             left={(): React.Node => this.getListTitleImage(item.image)}
121
-            right={({size}: {size: number}): React.Node => (
122
-              <List.Icon size={size} icon="chevron-right" />
123
-            )}
121
+            right={(): React.Node => <List.Icon icon="chevron-right" />}
124 122
           />
125 123
           <CardList dataset={item.content} isHorizontal />
126 124
         </View>

Loading…
Cancel
Save