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