forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import {useState} from 'react'
2import {Modal, Pressable, View} from 'react-native'
3import {SafeAreaView} from 'react-native-safe-area-context'
4import {msg, Trans} from '@lingui/macro'
5import {useLingui} from '@lingui/react'
6
7import {atoms as a, useTheme} from '#/alf'
8import {Button, ButtonIcon} from '#/components/Button'
9import {TimesLarge_Stroke2_Corner0_Rounded as CloseIcon} from '#/components/icons/Times'
10import {Text} from '#/components/Typography'
11import {EmojiPicker} from '../../../modules/expo-emoji-picker'
12
13export function EmojiPopup({
14 children,
15 onEmojiSelected,
16}: {
17 children: React.ReactNode
18 onEmojiSelected: (emoji: string) => void
19}) {
20 const [modalVisible, setModalVisible] = useState(false)
21 const {_} = useLingui()
22 const t = useTheme()
23
24 return (
25 <>
26 <Pressable
27 accessibilityLabel={_(msg`Open full emoji list`)}
28 accessibilityHint=""
29 accessibilityRole="button"
30 onPress={() => setModalVisible(true)}>
31 {children}
32 </Pressable>
33
34 <Modal
35 animationType="slide"
36 visible={modalVisible}
37 onRequestClose={() => setModalVisible(false)}
38 transparent
39 statusBarTranslucent
40 navigationBarTranslucent>
41 <SafeAreaView style={[a.flex_1, t.atoms.bg]}>
42 <View
43 style={[
44 a.pl_lg,
45 a.pr_md,
46 a.py_sm,
47 a.w_full,
48 a.align_center,
49 a.flex_row,
50 a.justify_between,
51 a.border_b,
52 t.atoms.border_contrast_low,
53 ]}>
54 <Text style={[a.font_semi_bold, a.text_md]}>
55 <Trans>Add Reaction</Trans>
56 </Text>
57 <Button
58 label={_(msg`Close`)}
59 onPress={() => setModalVisible(false)}
60 size="small"
61 variant="ghost"
62 color="secondary"
63 shape="round">
64 <ButtonIcon icon={CloseIcon} />
65 </Button>
66 </View>
67 <EmojiPicker
68 onEmojiSelected={emoji => {
69 setModalVisible(false)
70 onEmojiSelected(emoji)
71 }}
72 />
73 </SafeAreaView>
74 </Modal>
75 </>
76 )
77}