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
85
86
87
88
89
90
91
92
93
94
95
|
import React from 'react';
import {
GestureResponderEvent,
StyleSheet,
Text,
TextStyle,
TouchableOpacity,
View,
ViewProps,
ViewStyle,
} from 'react-native';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import {TAGG_LIGHT_BLUE} from '../../constants';
import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
import BottomDrawer from './BottomDrawer';
// conforms the JSX onPress attribute type
type OnPressHandler = (event: GestureResponderEvent) => void;
interface GenericMoreInfoDrawerProps extends ViewProps {
isOpen: boolean;
setIsOpen: (visible: boolean) => void;
showIcons: boolean;
// An array of title, onPressHandler, and icon component
buttons: [string, OnPressHandler, JSX.Element?, TextStyle?][];
}
const GenericMoreInfoDrawer: React.FC<GenericMoreInfoDrawerProps> = (props) => {
const {buttons, showIcons} = props;
// each button is 80px high, cancel button is always there
const initialSnapPosition =
(buttons.length + 1) * 80 + useSafeAreaInsets().bottom;
let panelButtonStyle: ViewStyle[] = [
{
height: 80,
flexDirection: 'row',
alignItems: 'center',
},
showIcons ? {} : {justifyContent: 'center'},
];
return (
<BottomDrawer
{...props}
showHeader={false}
initialSnapPosition={initialSnapPosition}>
<View style={styles.panel}>
{buttons.map(([title, action, icon, textStyle], index) => (
<View key={index}>
<TouchableOpacity style={panelButtonStyle} onPress={action}>
{showIcons && <View style={styles.icon}>{icon}</View>}
<Text style={[styles.panelButtonTitle, textStyle]}>{title}</Text>
</TouchableOpacity>
<View style={styles.divider} />
</View>
))}
<TouchableOpacity
style={panelButtonStyle}
onPress={() => props.setIsOpen(false)}>
{/* a dummy icon for aligning the cancel button */}
{showIcons && <View style={styles.icon} />}
<Text style={styles.panelButtonTitleCancel}>Cancel</Text>
</TouchableOpacity>
</View>
</BottomDrawer>
);
};
const styles = StyleSheet.create({
panel: {
height: SCREEN_HEIGHT,
backgroundColor: 'white',
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
},
panelButtonTitle: {
fontSize: 17,
fontWeight: '600',
lineHeight: normalize(20),
letterSpacing: normalize(0.1),
},
icon: {
height: 25,
width: 25,
marginLeft: SCREEN_WIDTH * 0.3,
marginRight: 25,
},
panelButtonTitleCancel: {
fontSize: 18,
fontWeight: 'bold',
color: TAGG_LIGHT_BLUE,
},
divider: {height: 1, borderWidth: 1, borderColor: '#e7e7e7'},
});
export default GenericMoreInfoDrawer;
|
