diff options
| author | Michał Gołda <michal.golda@hotmail.com> | 2024-07-12 04:42:41 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-07-11 19:42:41 -0700 |
| commit | cd9bba4b69d1b5eeebae15544bb2aaa55f42873f (patch) | |
| tree | 54a3dbdde64181f4b08fe08351790b65d515d9aa /src/view/com/composer | |
| parent | a71134f467449bc4c74967ca3958416feac6b91d (diff) | |
| download | voidsky-cd9bba4b69d1b5eeebae15544bb2aaa55f42873f.tar.zst | |
Co-authored-by: Hailey <me@haileyok.com>
Diffstat (limited to 'src/view/com/composer')
| -rw-r--r-- | src/view/com/composer/text-input/web/EmojiPicker.web.tsx | 44 |
1 files changed, 23 insertions, 21 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 149362116..1f4178f7f 100644 --- a/src/view/com/composer/text-input/web/EmojiPicker.web.tsx +++ b/src/view/com/composer/text-input/web/EmojiPicker.web.tsx @@ -1,11 +1,13 @@ import React from 'react' -import Picker from '@emoji-mart/react' import { - StyleSheet, + GestureResponderEvent, TouchableWithoutFeedback, useWindowDimensions, View, } from 'react-native' +import Picker from '@emoji-mart/react' + +import {atoms as a} from '#/alf' import {textInputWebEmitter} from '../TextInput.web' const HEIGHT_OFFSET = 40 @@ -96,12 +98,29 @@ export function EmojiPicker({state, close}: IProps) { if (!state.isOpen) return null + const onPressBackdrop = (e: GestureResponderEvent) => { + // @ts-ignore web only + if (e.nativeEvent?.pointerId === -1) return + close() + } + return ( <TouchableWithoutFeedback accessibilityRole="button" - onPress={close} + onPress={onPressBackdrop} accessibilityViewIsModal> - <View style={styles.mask}> + <View + style={[ + a.fixed, + a.w_full, + a.h_full, + a.align_center, + { + top: 0, + left: 0, + right: 0, + }, + ]}> {/* eslint-disable-next-line react-native-a11y/has-valid-accessibility-descriptors */} <TouchableWithoutFeedback onPress={e => e.stopPropagation()}> <View style={[{position: 'absolute'}, position]}> @@ -118,20 +137,3 @@ export function EmojiPicker({state, close}: IProps) { </TouchableWithoutFeedback> ) } - -const styles = StyleSheet.create({ - mask: { - // @ts-ignore web ony - position: 'fixed', - top: 0, - left: 0, - right: 0, - width: '100%', - height: '100%', - alignItems: 'center', - }, - picker: { - marginHorizontal: 'auto', - paddingRight: 50, - }, -}) |