card.tsx
1.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
import React, { PropsWithChildren } from 'react';
import {
DynamicStyleSheet,
useDynamicStyleSheet,
useDarkMode,
} from 'react-native-dark-mode';
import { ViewProps, View, TouchableOpacity, ViewStyle } from 'react-native';
import { colorPreset } from '../../design';
const dynamicStyles = new DynamicStyleSheet({
containerStyle: {
backgroundColor: colorPreset.groupedBackgroundColor.secondary,
margin: 16,
marginBottom: 8,
},
wrapperStyle: { minHeight: 44 },
shadowContainer: {
elevation: 5,
shadowColor: 'rgba(51,51,51,0.1)',
shadowOpacity: 1,
shadowOffset: {
width: 0,
height: 4,
},
shadowRadius: 16,
},
roundContainer: {
borderRadius: 8,
},
roundWrapper: {
borderRadius: 8,
overflow: 'hidden',
},
});
export type CardProps = ViewProps & {
onPress?: () => void;
disabled?: boolean;
shadow?: boolean;
round?: boolean;
containerStyle?: ViewStyle;
wrapperStyle?: ViewStyle;
};
export const Card = ({
style,
children,
onPress,
disabled,
shadow,
round,
containerStyle,
wrapperStyle,
...props
}: PropsWithChildren<CardProps>) => {
const styles = useDynamicStyleSheet(dynamicStyles);
const inDarkMode = useDarkMode();
const InnerComponent: React.ComponentClass<any> = onPress
? TouchableOpacity
: View;
return (
<View
style={[
styles.containerStyle,
shadow && !inDarkMode && styles.shadowContainer,
(round || shadow) && styles.roundContainer,
containerStyle,
]}
{...props}
>
<InnerComponent
style={[
(round || shadow) && styles.roundWrapper,
styles.wrapperStyle,
wrapperStyle,
]}
onPress={onPress}
disabled={disabled}
>
{children}
</InnerComponent>
</View>
);
};