Fix #1328 fix emoji picker scroll on firefox and chrome (#1332)

* fix emoji picker scroll on firefox and chrome

* click outside emoji picker to dismiss

* dynamically position emoji picker

* dynamically placing picker
zio/stable
Ansh 2023-08-30 17:58:24 -07:00 committed by GitHub
parent 04992f14f1
commit 4bec7c1d85
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 36 additions and 16 deletions

View File

@ -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,
},
})