bas.sh
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 {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
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 const enableSquareButtons = useEnableSquareButtons()
26
27 return (
28 <>
29 <Pressable
30 accessibilityLabel={_(msg`Open full emoji list`)}
31 accessibilityHint=""
32 accessibilityRole="button"
33 onPress={() => setModalVisible(true)}>
34 {children}
35 </Pressable>
36
37 <Modal
38 animationType="slide"
39 visible={modalVisible}
40 onRequestClose={() => setModalVisible(false)}
41 transparent
42 statusBarTranslucent
43 navigationBarTranslucent>
44 <SafeAreaView style={[a.flex_1, t.atoms.bg]}>
45 <View
46 style={[
47 a.pl_lg,
48 a.pr_md,
49 a.py_sm,
50 a.w_full,
51 a.align_center,
52 a.flex_row,
53 a.justify_between,
54 a.border_b,
55 t.atoms.border_contrast_low,
56 ]}>
57 <Text style={[a.font_semi_bold, a.text_md]}>
58 <Trans>Add Reaction</Trans>
59 </Text>
60 <Button
61 label={_(msg`Close`)}
62 onPress={() => setModalVisible(false)}
63 size="small"
64 variant="ghost"
65 color="secondary"
66 shape={enableSquareButtons ? 'square' : 'round'}>
67 <ButtonIcon icon={CloseIcon} />
68 </Button>
69 </View>
70 <EmojiPicker
71 onEmojiSelected={emoji => {
72 setModalVisible(false)
73 onEmojiSelected(emoji)
74 }}
75 />
76 </SafeAreaView>
77 </Modal>
78 </>
79 )
80}