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