diff options
| -rw-r--r-- | src/view/com/composer/text-input/web/EmojiPicker.web.tsx | 52 |
1 files changed, 36 insertions, 16 deletions
diff --git a/src/view/com/composer/text-input/web/EmojiPicker.web.tsx b/src/view/com/composer/text-input/web/EmojiPicker.web.tsx index 6c7d890a4..a0d1f67d6 100644 --- a/src/view/com/composer/text-input/web/EmojiPicker.web.tsx +++ b/src/view/com/composer/text-input/web/EmojiPicker.web.tsx @@ -1,10 +1,11 @@ import React from 'react' import Picker from '@emoji-mart/react' -import {StyleSheet, View} from 'react-native' +import {StyleSheet, TouchableWithoutFeedback, View} from 'react-native' import * as DropdownMenu from '@radix-ui/react-dropdown-menu' import {textInputWebEmitter} from '../TextInput.web' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {usePalette} from 'lib/hooks/usePalette' +import {useMediaQuery} from 'react-responsive' export type Emoji = { aliases?: string[] @@ -23,6 +24,9 @@ export function EmojiPickerButton() { const onOpenChange = (o: boolean) => { setOpen(o) } + const close = () => { + setOpen(false) + } return ( <DropdownMenu.Root open={open} onOpenChange={onOpenChange}> @@ -35,13 +39,7 @@ export function EmojiPickerButton() { </DropdownMenu.Trigger> <DropdownMenu.Portal> - <DropdownMenu.Content> - <EmojiPicker - close={() => { - setOpen(false) - }} - /> - </DropdownMenu.Content> + <EmojiPicker close={close} /> </DropdownMenu.Portal> </DropdownMenu.Root> ) @@ -52,15 +50,31 @@ export function EmojiPicker({close}: {close: () => void}) { textInputWebEmitter.emit('emoji-inserted', emoji) close() } + const reducedPadding = useMediaQuery({query: '(max-height: 750px)'}) + const noPadding = useMediaQuery({query: '(max-height: 550px)'}) + const noPicker = useMediaQuery({query: '(max-height: 350px)'}) + return ( - <View style={styles.mask}> - <Picker - // @ts-ignore we set emojiMartData in `emoji-mart-data.js` file - data={window.emojiMartData} - onEmojiSelect={onInsert} - autoFocus={false} - /> - </View> + // eslint-disable-next-line react-native-a11y/has-valid-accessibility-descriptors + <TouchableWithoutFeedback onPress={close} accessibilityViewIsModal> + <View style={styles.mask}> + <View + style={[ + styles.picker, + { + paddingTop: noPadding ? 0 : reducedPadding ? 150 : 325, + display: noPicker ? 'none' : 'flex', + }, + ]}> + <Picker + // @ts-ignore we set emojiMartData in `emoji-mart-data.js` file + data={window.emojiMartData} + onEmojiSelect={onInsert} + autoFocus={false} + /> + </View> + </View> + </TouchableWithoutFeedback> ) } @@ -70,6 +84,8 @@ const styles = StyleSheet.create({ top: 0, left: 0, right: 0, + width: '100%', + height: '100%', }, trigger: { backgroundColor: 'transparent', @@ -78,4 +94,8 @@ const styles = StyleSheet.create({ paddingHorizontal: 10, cursor: 'pointer', }, + picker: { + marginHorizontal: 'auto', + paddingRight: 50, + }, }) |