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
|
import React from 'react'
import {
Image,
StyleSheet,
Text,
TouchableOpacity,
TouchableWithoutFeedback,
View,
} from 'react-native'
import RootSiblings from 'react-native-root-siblings'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {AVIS} from '../../lib/assets'
import {s, colors} from '../../lib/styles'
export function createAccountsMenu({
debug_onPressItem,
}: {
debug_onPressItem: () => void
}): RootSiblings {
const onPressItem = (_index: number) => {
sibling.destroy()
debug_onPressItem() // TODO
}
const onOuterPress = () => sibling.destroy()
const sibling = new RootSiblings(
(
<>
<TouchableWithoutFeedback onPress={onOuterPress}>
<View style={styles.bg} />
</TouchableWithoutFeedback>
<View style={[styles.menu]}>
<TouchableOpacity
style={[styles.menuItem]}
onPress={() => onPressItem(0)}>
<Image style={styles.avi} source={AVIS['alice.com']} />
<Text style={[styles.label, s.bold]}>Alice</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.menuItem, styles.menuItemBorder]}
onPress={() => onPressItem(0)}>
<FontAwesomeIcon style={styles.icon} icon="plus" />
<Text style={styles.label}>New Account</Text>
</TouchableOpacity>
</View>
</>
),
)
return sibling
}
const styles = StyleSheet.create({
bg: {
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
backgroundColor: '#000',
opacity: 0.1,
},
menu: {
position: 'absolute',
left: 4,
top: 70,
backgroundColor: '#fff',
borderRadius: 14,
opacity: 1,
paddingVertical: 2,
},
menuItem: {
flexDirection: 'row',
alignItems: 'center',
paddingVertical: 8,
paddingLeft: 10,
paddingRight: 30,
},
menuItemBorder: {
borderTopWidth: 1,
borderTopColor: colors.gray1,
},
avi: {
width: 28,
height: 28,
marginRight: 8,
borderRadius: 14,
},
icon: {
marginLeft: 6,
marginRight: 6,
},
label: {
fontSize: 16,
},
})
|
