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

Commit

Permalink
Merge pull request #274 from Sacha338/types
Browse files Browse the repository at this point in the history 
Ajout des types manquant dans la totalité du projet et améliorations
  • Loading branch information
@LeGeek01
LeGeek01 authored Jul 2, 2024
2 parents b070a3c + 812e4a5 commit 0550b47
Show file tree
Hide file tree
Showing 65 changed files with 1,369 additions and 1,689 deletions.
219 changes: 103 additions & 116 deletions components/ListItem.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,35 @@
import React from 'react';

import {
View,
StyleSheet,
TouchableNativeFeedback,
Platform,
type ViewStyle,
} from 'react-native';

import { PressableScale } from 'react-native-pressable-scale';
import { useTheme, Text } from 'react-native-paper';
import * as Haptics from 'expo-haptics';

import { ChevronRight } from 'lucide-react-native';

interface Props {
title?: string
subtitle?: string
underTitle?: string
left?: React.ReactElement
right?: React.ReactElement
/** Most likely an icon component from `lucide-react-native`. */
icon?: React.ReactElement
style?: ViewStyle
color: string
/** Add more space between `title` and `subtitle`. */
isLarge?: boolean
onPress?: () => unknown
onLongPress?: () => unknown
fill?: boolean
/** Should take all the width from the parent. */
width?: boolean
center?: boolean
chevron?: boolean
trimSubtitle?: boolean
bottom?: React.ReactElement
title?: string;
subtitle?: string;
underTitle?: string;
left?: React.ReactNode;
right?: React.ReactNode;
icon?: React.ReactNode;
style?: any;
color: string;
isLarge?: boolean;
onPress?: () => void;
onLongPress?: () => void;
fill?: boolean;
width?: boolean;
center?: boolean;
chevron?: boolean;
trimSubtitle?: boolean;
bottom?: React.ReactNode;
}

/**
* @see https://i.imgur.com/rshTN7n.png
*/
const ListItem: React.FC<Props> = ({
title,
subtitle,
Expand Down Expand Up @@ -68,7 +58,7 @@ const ListItem: React.FC<Props> = ({
textColor = '#fff';
}

const bgMaterial = theme.colors.elevation.level1;
const bgMaterial = theme.colors.elevation?.level1;

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

return Platform.OS === 'ios' ? (
<PressableScale
style={{ flex: 1 }}
weight="light"
activeScale={pressScale}
<View style={[styles.listItem, style]}>
<TouchableNativeFeedback
onPress={onPressActive}
onLongPress={onLongPress}
background={TouchableNativeFeedback.Ripple(
theme.colors.surfaceDisabled,
true
)}
>
<View
style={[
{
backgroundColor: bgColor,
borderColor: theme.dark ? '#191919' : '#e5e5e5',
marginHorizontal: width ? 0 : 14,
flex: width ? 1 : undefined,
alignItems: center ? 'center' : undefined,
flexDirection: 'row',
padding: 14,
borderRadius: 12,
borderWidth: 0,
},
]}
>
{left && <View style={styles.left}>{left}</View>}
{icon && (
<View
style={[
styles.icon,
{ backgroundColor: theme.dark ? '#ffffff10' : `${color}10` },
]}
>
{icon}
</View>
)}
<View style={[styles.listItemText, { gap: isLarge ? 8 : 2 }]}>
{title && (
<Text style={[styles.listItemTextTitle, { color: textColor }]}>
{title}
</Text>
)}
{subtitle && (
<Text
style={[styles.listItemTextSubtitle, { color: textColor }]}
numberOfLines={trimSubtitle ? 1 : undefined}
ellipsizeMode="tail"
>
{subtitle}
</Text>
)}
{underTitle && (
<Text
style={[styles.listItemTextUnderTitle, { color: textColor }]}
>
{underTitle}
</Text>
)}
</View>
{right && <View style={styles.right}>{right}</View>}
{chevron && (
<View style={styles.right}>
<ChevronRight
size={24}
strokeWidth={2.5}
style={{ marginTop: -6, marginBottom: -6 }}
color={theme.dark ? '#ffffff40' : '#00000040'}
/>
</View>
)}
</View>
</TouchableNativeFeedback>
</View>
) : (
<TouchableNativeFeedback
onPress={onPressActive}
onLongPress={() => onLongPress?.()}
onLongPress={onLongPress}
background={TouchableNativeFeedback.Ripple(
theme.colors.surfaceDisabled,
true
)}
>
<View
style={[
styles.listItem,
styles.listItemContainer,
{
backgroundColor: bgColor,
backgroundColor: bgMaterial,
borderColor: theme.dark ? '#191919' : '#e5e5e5',
marginHorizontal: width ? 0 : 14,
flex: width ? 1 : void 0,
alignItems: center ? 'center' : void 0,
flex: width ? 1 : undefined,
alignItems: center ? 'center' : undefined,
},
style,
]}
>
{left && <View style={styles.left}>{left}</View>}

{icon && (
<View
style={[
Expand All @@ -111,33 +174,28 @@ const ListItem: React.FC<Props> = ({
{icon}
</View>
)}

<View style={[styles.listItemText, { gap: isLarge ? 8 : 2 }]}>
{title && (
<Text style={[styles.listItemTextTitle, { color: textColor }]}>
{title}
</Text>
)}

{subtitle && (
<Text
style={[styles.listItemTextSubtitle, { color: textColor }]}
numberOfLines={trimSubtitle ? 1 : void 0}
numberOfLines={trimSubtitle ? 1 : undefined}
ellipsizeMode="tail"
>
{subtitle}
</Text>
)}

{underTitle && (
<Text style={[styles.listItemTextUnderTitle, { color: textColor }]}>
{underTitle}
</Text>
)}
</View>

{right && <View style={styles.right}>{right}</View>}

{chevron && (
<View style={styles.right}>
<ChevronRight
Expand All @@ -149,93 +207,24 @@ const ListItem: React.FC<Props> = ({
</View>
)}
</View>
</PressableScale>
) : (
<View
style={[
styles.listItemContainer,
{ flex: 1, borderRadius: 10, overflow: 'hidden' },
{
backgroundColor: bgMaterial,
borderColor: theme.dark ? '#191919' : '#e5e5e5',
marginHorizontal: width ? 0 : 14,
flex: width ? 1 : void 0,
alignItems: center ? 'center' : void 0,
},
style,
]}
>
<TouchableNativeFeedback
style={{ flex: 1, borderRadius: 12, overflow: 'hidden' }}
onPress={onPressActive}
onLongPress={() => onLongPress?.()}
background={TouchableNativeFeedback.Ripple(
theme.colors.surfaceDisabled,
true
)}
>
<View style={styles.listItemChild}>
{left && <View style={styles.left}>{left}</View>}

{icon && (
<View
style={[
styles.icon,
{ backgroundColor: theme.dark ? '#ffffff10' : `${color}10` },
]}
>
{icon}
</View>
)}

<View style={[styles.listItemText, { gap: isLarge ? 8 : 2 }]}>
{title && (
<Text style={[styles.listItemTextTitle, { color: textColor }]}>
{title}
</Text>
)}

{subtitle && (
<Text
style={[styles.listItemTextSubtitle, { color: textColor }]}
numberOfLines={trimSubtitle ? 1 : void 0}
ellipsizeMode="tail"
>
{subtitle}
</Text>
)}

{bottom && <View>{bottom}</View>}
</View>

{right && <View style={styles.right}>{right}</View>}
</View>
</TouchableNativeFeedback>
</View>
</TouchableNativeFeedback>
);
};

const styles = StyleSheet.create({
listItem: {
flexDirection: 'row',

padding: 14,
marginHorizontal: 14,

borderRadius: 12,
borderCurve: 'continuous',
borderWidth: 0,
},
listItemContainer: {
marginHorizontal: 14,

borderRadius: 10,
borderWidth: 0,
},
listItemChild: {
padding: 14,
flexDirection: 'row',
},
listItemText: {
gap: 2,
flex: 1,
Expand Down Expand Up @@ -263,11 +252,9 @@ const styles = StyleSheet.create({
},
icon: {
marginRight: 14,

width: 38,
height: 38,
borderRadius: 30,

justifyContent: 'center',
alignItems: 'center',
},
Expand Down
29 changes: 13 additions & 16 deletions components/NativeItem.ios.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,19 @@
import React, { memo } from 'react';

import { View, StyleSheet, Platform, type ViewStyle } from 'react-native';

import React, { memo, ReactNode } from 'react';
import { View, StyleSheet, Platform } from 'react-native';
import { Cell } from 'react-native-tableview-simple';
import { SFSymbol } from 'react-native-sfsymbols';

import GetUIColors from '../utils/GetUIColors';

interface Props {
children: React.ReactNode
leading?: React.ReactNode
trailing?: React.ReactNode
onPress?: () => unknown
chevron?: boolean
cellProps?: Partial<React.ComponentProps<typeof Cell>>
style?: ViewStyle
innerStyle?: ViewStyle
backgroundColor?: string
children: ReactNode;
leading?: ReactNode;
trailing?: ReactNode;
onPress?: (() => false | void) | undefined;
chevron?: boolean;
cellProps?: Partial<React.ComponentProps<typeof Cell>>;
style?: View['props']['style'];
innerStyle?: View['props']['style'];
backgroundColor?: string;
}

const NativeItem = memo(({
Expand All @@ -26,7 +23,7 @@ const NativeItem = memo(({
onPress,
chevron,
backgroundColor,
}) => {
}: Props) => {
const UIColors = GetUIColors();

const cellImageView = leading && (
Expand All @@ -51,7 +48,7 @@ const NativeItem = memo(({
weight="semibold"
size={16}
color={UIColors.text + '40'}
style={{marginRight: 4}}
style={{ marginRight: 4 }}
/>
)}
</View>
Expand Down
Loading

0 comments on commit 0550b47

Please sign in to comment.