Skip to content
This repository was archived by the owner on Aug 25, 2024. It is now read-only.

Commit 0550b47

Browse files
LeGeek01LeGeek01
authored
Merge pull request #274 from Sacha338/types
Ajout des types manquant dans la totalité du projet et améliorations
2 parents b070a3c + 812e4a5 commit 0550b47

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

65 files changed

+1369
-1689
lines changed

‎components/ListItem.tsx‎

Lines changed: 103 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,35 @@
11
import React from 'react';
2-
32
import {
43
View,
54
StyleSheet,
65
TouchableNativeFeedback,
76
Platform,
8-
type ViewStyle,
97
} from 'react-native';
108

11-
import { PressableScale } from 'react-native-pressable-scale';
129
import { useTheme, Text } from 'react-native-paper';
1310
import * as Haptics from 'expo-haptics';
14-
1511
import { ChevronRight } from 'lucide-react-native';
1612

1713
interface Props {
18-
title?: string
19-
subtitle?: string
20-
underTitle?: string
21-
left?: React.ReactElement
22-
right?: React.ReactElement
23-
/** Most likely an icon component from `lucide-react-native`. */
24-
icon?: React.ReactElement
25-
style?: ViewStyle
26-
color: string
27-
/** Add more space between `title` and `subtitle`. */
28-
isLarge?: boolean
29-
onPress?: () => unknown
30-
onLongPress?: () => unknown
31-
fill?: boolean
32-
/** Should take all the width from the parent. */
33-
width?: boolean
34-
center?: boolean
35-
chevron?: boolean
36-
trimSubtitle?: boolean
37-
bottom?: React.ReactElement
14+
title?: string;
15+
subtitle?: string;
16+
underTitle?: string;
17+
left?: React.ReactNode;
18+
right?: React.ReactNode;
19+
icon?: React.ReactNode;
20+
style?: any;
21+
color: string;
22+
isLarge?: boolean;
23+
onPress?: () => void;
24+
onLongPress?: () => void;
25+
fill?: boolean;
26+
width?: boolean;
27+
center?: boolean;
28+
chevron?: boolean;
29+
trimSubtitle?: boolean;
30+
bottom?: React.ReactNode;
3831
}
3932

40-
/**
41-
* @see https://i.imgur.com/rshTN7n.png
42-
*/
4333
const ListItem: React.FC<Props> = ({
4434
title,
4535
subtitle,
@@ -68,7 +58,7 @@ const ListItem: React.FC<Props> = ({
6858
textColor = '#fff';
6959
}
7060

71-
const bgMaterial = theme.colors.elevation.level1;
61+
const bgMaterial = theme.colors.elevation?.level1;
7262

7363
function onPressActive() {
7464
onPress?.();
@@ -79,28 +69,101 @@ const ListItem: React.FC<Props> = ({
7969
if (!onPress) pressScale = 0.92;
8070

8171
return Platform.OS === 'ios' ? (
82-
<PressableScale
83-
style={{ flex: 1 }}
84-
weight="light"
85-
activeScale={pressScale}
72+
<View style={[styles.listItem, style]}>
73+
<TouchableNativeFeedback
74+
onPress={onPressActive}
75+
onLongPress={onLongPress}
76+
background={TouchableNativeFeedback.Ripple(
77+
theme.colors.surfaceDisabled,
78+
true
79+
)}
80+
>
81+
<View
82+
style={[
83+
{
84+
backgroundColor: bgColor,
85+
borderColor: theme.dark ? '#191919' : '#e5e5e5',
86+
marginHorizontal: width ? 0 : 14,
87+
flex: width ? 1 : undefined,
88+
alignItems: center ? 'center' : undefined,
89+
flexDirection: 'row',
90+
padding: 14,
91+
borderRadius: 12,
92+
borderWidth: 0,
93+
},
94+
]}
95+
>
96+
{left && <View style={styles.left}>{left}</View>}
97+
{icon && (
98+
<View
99+
style={[
100+
styles.icon,
101+
{ backgroundColor: theme.dark ? '#ffffff10' : `${color}10` },
102+
]}
103+
>
104+
{icon}
105+
</View>
106+
)}
107+
<View style={[styles.listItemText, { gap: isLarge ? 8 : 2 }]}>
108+
{title && (
109+
<Text style={[styles.listItemTextTitle, { color: textColor }]}>
110+
{title}
111+
</Text>
112+
)}
113+
{subtitle && (
114+
<Text
115+
style={[styles.listItemTextSubtitle, { color: textColor }]}
116+
numberOfLines={trimSubtitle ? 1 : undefined}
117+
ellipsizeMode="tail"
118+
>
119+
{subtitle}
120+
</Text>
121+
)}
122+
{underTitle && (
123+
<Text
124+
style={[styles.listItemTextUnderTitle, { color: textColor }]}
125+
>
126+
{underTitle}
127+
</Text>
128+
)}
129+
</View>
130+
{right && <View style={styles.right}>{right}</View>}
131+
{chevron && (
132+
<View style={styles.right}>
133+
<ChevronRight
134+
size={24}
135+
strokeWidth={2.5}
136+
style={{ marginTop: -6, marginBottom: -6 }}
137+
color={theme.dark ? '#ffffff40' : '#00000040'}
138+
/>
139+
</View>
140+
)}
141+
</View>
142+
</TouchableNativeFeedback>
143+
</View>
144+
) : (
145+
<TouchableNativeFeedback
86146
onPress={onPressActive}
87-
onLongPress={() => onLongPress?.()}
147+
onLongPress={onLongPress}
148+
background={TouchableNativeFeedback.Ripple(
149+
theme.colors.surfaceDisabled,
150+
true
151+
)}
88152
>
89153
<View
90154
style={[
91-
styles.listItem,
155+
styles.listItemContainer,
92156
{
93-
backgroundColor: bgColor,
157+
backgroundColor: bgMaterial,
94158
borderColor: theme.dark ? '#191919' : '#e5e5e5',
95159
marginHorizontal: width ? 0 : 14,
96-
flex: width ? 1 : void 0,
97-
alignItems: center ? 'center' : void 0,
160+
flex: width ? 1 : undefined,
161+
alignItems: center ? 'center' : undefined,
98162
},
99163
style,
100164
]}
101165
>
102166
{left && <View style={styles.left}>{left}</View>}
103-
104167
{icon && (
105168
<View
106169
style={[
@@ -111,33 +174,28 @@ const ListItem: React.FC<Props> = ({
111174
{icon}
112175
</View>
113176
)}
114-
115177
<View style={[styles.listItemText, { gap: isLarge ? 8 : 2 }]}>
116178
{title && (
117179
<Text style={[styles.listItemTextTitle, { color: textColor }]}>
118180
{title}
119181
</Text>
120182
)}
121-
122183
{subtitle && (
123184
<Text
124185
style={[styles.listItemTextSubtitle, { color: textColor }]}
125-
numberOfLines={trimSubtitle ? 1 : void 0}
186+
numberOfLines={trimSubtitle ? 1 : undefined}
126187
ellipsizeMode="tail"
127188
>
128189
{subtitle}
129190
</Text>
130191
)}
131-
132192
{underTitle && (
133193
<Text style={[styles.listItemTextUnderTitle, { color: textColor }]}>
134194
{underTitle}
135195
</Text>
136196
)}
137197
</View>
138-
139198
{right && <View style={styles.right}>{right}</View>}
140-
141199
{chevron && (
142200
<View style={styles.right}>
143201
<ChevronRight
@@ -149,93 +207,24 @@ const ListItem: React.FC<Props> = ({
149207
</View>
150208
)}
151209
</View>
152-
</PressableScale>
153-
) : (
154-
<View
155-
style={[
156-
styles.listItemContainer,
157-
{ flex: 1, borderRadius: 10, overflow: 'hidden' },
158-
{
159-
backgroundColor: bgMaterial,
160-
borderColor: theme.dark ? '#191919' : '#e5e5e5',
161-
marginHorizontal: width ? 0 : 14,
162-
flex: width ? 1 : void 0,
163-
alignItems: center ? 'center' : void 0,
164-
},
165-
style,
166-
]}
167-
>
168-
<TouchableNativeFeedback
169-
style={{ flex: 1, borderRadius: 12, overflow: 'hidden' }}
170-
onPress={onPressActive}
171-
onLongPress={() => onLongPress?.()}
172-
background={TouchableNativeFeedback.Ripple(
173-
theme.colors.surfaceDisabled,
174-
true
175-
)}
176-
>
177-
<View style={styles.listItemChild}>
178-
{left && <View style={styles.left}>{left}</View>}
179-
180-
{icon && (
181-
<View
182-
style={[
183-
styles.icon,
184-
{ backgroundColor: theme.dark ? '#ffffff10' : `${color}10` },
185-
]}
186-
>
187-
{icon}
188-
</View>
189-
)}
190-
191-
<View style={[styles.listItemText, { gap: isLarge ? 8 : 2 }]}>
192-
{title && (
193-
<Text style={[styles.listItemTextTitle, { color: textColor }]}>
194-
{title}
195-
</Text>
196-
)}
197-
198-
{subtitle && (
199-
<Text
200-
style={[styles.listItemTextSubtitle, { color: textColor }]}
201-
numberOfLines={trimSubtitle ? 1 : void 0}
202-
ellipsizeMode="tail"
203-
>
204-
{subtitle}
205-
</Text>
206-
)}
207-
208-
{bottom && <View>{bottom}</View>}
209-
</View>
210-
211-
{right && <View style={styles.right}>{right}</View>}
212-
</View>
213-
</TouchableNativeFeedback>
214-
</View>
210+
</TouchableNativeFeedback>
215211
);
216212
};
217213

218214
const styles = StyleSheet.create({
219215
listItem: {
220216
flexDirection: 'row',
221-
222217
padding: 14,
223218
marginHorizontal: 14,
224-
225219
borderRadius: 12,
226220
borderCurve: 'continuous',
227221
borderWidth: 0,
228222
},
229223
listItemContainer: {
230224
marginHorizontal: 14,
231-
232225
borderRadius: 10,
233226
borderWidth: 0,
234227
},
235-
listItemChild: {
236-
padding: 14,
237-
flexDirection: 'row',
238-
},
239228
listItemText: {
240229
gap: 2,
241230
flex: 1,
@@ -263,11 +252,9 @@ const styles = StyleSheet.create({
263252
},
264253
icon: {
265254
marginRight: 14,
266-
267255
width: 38,
268256
height: 38,
269257
borderRadius: 30,
270-
271258
justifyContent: 'center',
272259
alignItems: 'center',
273260
},

‎components/NativeItem.ios.tsx‎

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,19 @@
1-
import React, { memo } from 'react';
2-
3-
import { View, StyleSheet, Platform, type ViewStyle } from 'react-native';
4-
1+
import React, { memo, ReactNode } from 'react';
2+
import { View, StyleSheet, Platform } from 'react-native';
53
import { Cell } from 'react-native-tableview-simple';
64
import { SFSymbol } from 'react-native-sfsymbols';
7-
85
import GetUIColors from '../utils/GetUIColors';
96

107
interface Props {
11-
children: React.ReactNode
12-
leading?: React.ReactNode
13-
trailing?: React.ReactNode
14-
onPress?: () => unknown
15-
chevron?: boolean
16-
cellProps?: Partial<React.ComponentProps<typeof Cell>>
17-
style?: ViewStyle
18-
innerStyle?: ViewStyle
19-
backgroundColor?: string
8+
children: ReactNode;
9+
leading?: ReactNode;
10+
trailing?: ReactNode;
11+
onPress?: (() => false | void) | undefined;
12+
chevron?: boolean;
13+
cellProps?: Partial<React.ComponentProps<typeof Cell>>;
14+
style?: View['props']['style'];
15+
innerStyle?: View['props']['style'];
16+
backgroundColor?: string;
2017
}
2118

2219
const NativeItem = memo(({
@@ -26,7 +23,7 @@ const NativeItem = memo(({
2623
onPress,
2724
chevron,
2825
backgroundColor,
29-
}) => {
26+
}: Props) => {
3027
const UIColors = GetUIColors();
3128

3229
const cellImageView = leading && (
@@ -51,7 +48,7 @@ const NativeItem = memo(({
5148
weight="semibold"
5249
size={16}
5350
color={UIColors.text + '40'}
54-
style={{marginRight: 4}}
51+
style={{ marginRight: 4 }}
5552
/>
5653
)}
5754
</View>

0 commit comments

Comments
 (0)