* fix emoji picker scroll on firefox and chrome * click outside emoji picker to dismiss * dynamically position emoji picker * dynamically placing pickerzio/stable
parent
04992f14f1
commit
4bec7c1d85
|
@ -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,
|
||||
},
|
||||
})
|
||||
|
|
Loading…
Reference in New Issue