Samuel Newman
79 lines
2.2 KiB
TypeScript
79 lines
2.2 KiB
TypeScript
import {useState} from 'react'
|
|
import {Modal, Pressable, View} from 'react-native'
|
|
import {SafeAreaView} from 'react-native-safe-area-context'
|
|
import {msg} from '@lingui/core/macro'
|
|
import {useLingui} from '@lingui/react'
|
|
import {Trans} from '@lingui/react/macro'
|
|
|
|
import {atoms as a, useTheme} from '#/alf'
|
|
import {Button, ButtonIcon} from '#/components/Button'
|
|
import {TimesLarge_Stroke2_Corner0_Rounded as CloseIcon} from '#/components/icons/Times'
|
|
import {Text} from '#/components/Typography'
|
|
import {EmojiPicker} from '../../../modules/expo-emoji-picker'
|
|
|
|
export function EmojiPopup({
|
|
children,
|
|
onEmojiSelected,
|
|
}: {
|
|
children: React.ReactNode
|
|
onEmojiSelected: (emoji: string) => void
|
|
}) {
|
|
const [modalVisible, setModalVisible] = useState(false)
|
|
const {_} = useLingui()
|
|
const t = useTheme()
|
|
|
|
return (
|
|
<>
|
|
<Pressable
|
|
accessibilityLabel={_(msg`Open full emoji list`)}
|
|
accessibilityHint=""
|
|
accessibilityRole="button"
|
|
onPress={() => setModalVisible(true)}>
|
|
{children}
|
|
</Pressable>
|
|
|
|
<Modal
|
|
animationType="slide"
|
|
visible={modalVisible}
|
|
onRequestClose={() => setModalVisible(false)}
|
|
transparent
|
|
statusBarTranslucent
|
|
navigationBarTranslucent>
|
|
<SafeAreaView style={[a.flex_1, t.atoms.bg]}>
|
|
<View
|
|
style={[
|
|
a.pl_lg,
|
|
a.pr_md,
|
|
a.py_sm,
|
|
a.w_full,
|
|
a.align_center,
|
|
a.flex_row,
|
|
a.justify_between,
|
|
a.border_b,
|
|
t.atoms.border_contrast_low,
|
|
]}>
|
|
<Text style={[a.font_semi_bold, a.text_md]}>
|
|
<Trans>Add Reaction</Trans>
|
|
</Text>
|
|
<Button
|
|
label={_(msg`Close`)}
|
|
onPress={() => setModalVisible(false)}
|
|
size="small"
|
|
variant="ghost"
|
|
color="secondary"
|
|
shape="round">
|
|
<ButtonIcon icon={CloseIcon} />
|
|
</Button>
|
|
</View>
|
|
<EmojiPicker
|
|
onEmojiSelected={emoji => {
|
|
setModalVisible(false)
|
|
onEmojiSelected(emoji)
|
|
}}
|
|
/>
|
|
</SafeAreaView>
|
|
</Modal>
|
|
</>
|
|
)
|
|
}
|