emoji picker improvements (#2392)

* rework emoji picker

* dynamic position

* always prefer the left if it will fit

* add accessibility label

* Update EmojiPicker.web.tsx

oops. remove accessibility from fake button
zio/stable
Hailey 2024-01-02 12:16:28 -08:00 committed by GitHub
parent e460b304fc
commit c1dc0b7ee0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 137 additions and 60 deletions

View File

@ -30,6 +30,7 @@ export interface ComposerOpts {
onPost?: () => void
quote?: ComposerOptsQuote
mention?: string // handle of user to mention
openPicker?: (pos: DOMRect | undefined) => void
}
type StateContext = ComposerOpts | undefined

View File

@ -6,6 +6,7 @@ import {
Keyboard,
KeyboardAvoidingView,
Platform,
Pressable,
ScrollView,
StyleSheet,
TouchableOpacity,
@ -46,7 +47,6 @@ import {Gallery} from './photos/Gallery'
import {MAX_GRAPHEME_LENGTH} from 'lib/constants'
import {LabelsBtn} from './labels/LabelsBtn'
import {SelectLangBtn} from './select-language/SelectLangBtn'
import {EmojiPickerButton} from './text-input/web/EmojiPicker.web'
import {insertMentionAt} from 'lib/strings/mention-manip'
import {Trans, msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
@ -70,6 +70,7 @@ export const ComposePost = observer(function ComposePost({
onPost,
quote: initQuote,
mention: initMention,
openPicker,
}: Props) {
const {currentAccount} = useSession()
const {data: currentProfile} = useProfileQuery({did: currentAccount!.did})
@ -274,6 +275,10 @@ export const ComposePost = observer(function ComposePost({
const canSelectImages = useMemo(() => gallery.size < 4, [gallery.size])
const hasMedia = gallery.size > 0 || Boolean(extLink)
const onEmojiButtonPress = useCallback(() => {
openPicker?.(textInput.current?.getCursorPosition())
}, [openPicker])
return (
<KeyboardAvoidingView
testID="composePostView"
@ -456,7 +461,19 @@ export const ComposePost = observer(function ComposePost({
<OpenCameraBtn gallery={gallery} />
</>
) : null}
{!isMobile ? <EmojiPickerButton /> : null}
{!isMobile ? (
<Pressable
onPress={onEmojiButtonPress}
accessibilityRole="button"
accessibilityLabel={_(msg`Open emoji picker`)}
accessibilityHint={_(msg`Open emoji picker`)}>
<FontAwesomeIcon
icon={['far', 'face-smile']}
color={pal.colors.link}
size={22}
/>
</Pressable>
) : null}
<View style={s.flex1} />
<SelectLangBtn />
<CharProgress count={graphemeLength} />

View File

@ -32,6 +32,7 @@ import {POST_IMG_MAX} from 'lib/constants'
export interface TextInputRef {
focus: () => void
blur: () => void
getCursorPosition: () => DOMRect | undefined
}
interface TextInputProps extends ComponentProps<typeof RNTextInput> {
@ -74,6 +75,7 @@ export const TextInput = forwardRef(function TextInputImpl(
blur: () => {
textInput.current?.blur()
},
getCursorPosition: () => undefined, // Not implemented on native
}))
const onChangeText = useCallback(

View File

@ -22,6 +22,7 @@ import {useActorAutocompleteFn} from '#/state/queries/actor-autocomplete'
export interface TextInputRef {
focus: () => void
blur: () => void
getCursorPosition: () => DOMRect | undefined
}
interface TextInputProps {
@ -169,6 +170,10 @@ export const TextInput = React.forwardRef(function TextInputImpl(
React.useImperativeHandle(ref, () => ({
focus: () => {}, // TODO
blur: () => {}, // TODO
getCursorPosition: () => {
const pos = editor?.state.selection.$anchor.pos
return pos ? editor?.view.coordsAtPos(pos) : undefined
},
}))
return (

View File

@ -1,11 +1,17 @@
import React from 'react'
import Picker from '@emoji-mart/react'
import {StyleSheet, TouchableWithoutFeedback, View} from 'react-native'
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
import {
StyleSheet,
TouchableWithoutFeedback,
useWindowDimensions,
View,
} from 'react-native'
import {textInputWebEmitter} from '../TextInput.web'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {usePalette} from 'lib/hooks/usePalette'
import {useMediaQuery} from 'react-responsive'
const HEIGHT_OFFSET = 40
const WIDTH_OFFSET = 100
const PICKER_HEIGHT = 435 + HEIGHT_OFFSET
const PICKER_WIDTH = 350 + WIDTH_OFFSET
export type Emoji = {
aliases?: string[]
@ -18,59 +24,87 @@ export type Emoji = {
unified: string
}
export function EmojiPickerButton() {
const pal = usePalette('default')
const [open, setOpen] = React.useState(false)
const onOpenChange = (o: boolean) => {
setOpen(o)
}
const close = () => {
setOpen(false)
}
return (
<DropdownMenu.Root open={open} onOpenChange={onOpenChange}>
<DropdownMenu.Trigger style={styles.trigger}>
<FontAwesomeIcon
icon={['far', 'face-smile']}
color={pal.colors.link}
size={22}
/>
</DropdownMenu.Trigger>
<DropdownMenu.Portal>
<EmojiPicker close={close} />
</DropdownMenu.Portal>
</DropdownMenu.Root>
)
export interface EmojiPickerState {
isOpen: boolean
pos: {top: number; left: number; right: number; bottom: number}
}
export function EmojiPicker({close}: {close: () => void}) {
interface IProps {
state: EmojiPickerState
close: () => void
}
export function EmojiPicker({state, close}: IProps) {
const {height, width} = useWindowDimensions()
const isShiftDown = React.useRef(false)
const position = React.useMemo(() => {
const fitsBelow = state.pos.top + PICKER_HEIGHT < height
const fitsAbove = PICKER_HEIGHT < state.pos.top
const placeOnLeft = PICKER_WIDTH < state.pos.left
const screenYMiddle = height / 2 - PICKER_HEIGHT / 2
if (fitsBelow) {
return {
top: state.pos.top + HEIGHT_OFFSET,
}
} else if (fitsAbove) {
return {
bottom: height - state.pos.bottom + HEIGHT_OFFSET,
}
} else {
return {
top: screenYMiddle,
left: placeOnLeft ? state.pos.left - PICKER_WIDTH : undefined,
right: !placeOnLeft
? width - state.pos.right - PICKER_WIDTH
: undefined,
}
}
}, [state.pos, height, width])
React.useEffect(() => {
if (!state.isOpen) return
const onKeyDown = (e: KeyboardEvent) => {
if (e.key === 'Shift') {
isShiftDown.current = true
}
}
const onKeyUp = (e: KeyboardEvent) => {
if (e.key === 'Shift') {
isShiftDown.current = false
}
}
window.addEventListener('keydown', onKeyDown, true)
window.addEventListener('keyup', onKeyUp, true)
return () => {
window.removeEventListener('keydown', onKeyDown, true)
window.removeEventListener('keyup', onKeyUp, true)
}
}, [state.isOpen])
const onInsert = (emoji: Emoji) => {
textInputWebEmitter.emit('emoji-inserted', emoji)
close()
if (!isShiftDown.current) {
close()
}
}
const reducedPadding = useMediaQuery({query: '(max-height: 750px)'})
const noPadding = useMediaQuery({query: '(max-height: 550px)'})
const noPicker = useMediaQuery({query: '(max-height: 350px)'})
if (!state.isOpen) return null
return (
// eslint-disable-next-line react-native-a11y/has-valid-accessibility-descriptors
<TouchableWithoutFeedback onPress={close} accessibilityViewIsModal>
<TouchableWithoutFeedback
accessibilityRole="button"
onPress={close}
accessibilityViewIsModal>
<View style={styles.mask}>
{/* eslint-disable-next-line react-native-a11y/has-valid-accessibility-descriptors */}
<TouchableWithoutFeedback
onPress={e => {
e.stopPropagation() // prevent event from bubbling up to the mask
}}>
<View
style={[
styles.picker,
{
paddingTop: noPadding ? 0 : reducedPadding ? 150 : 325,
display: noPicker ? 'none' : 'flex',
},
]}>
<TouchableWithoutFeedback onPress={e => e.stopPropagation()}>
<View style={[{position: 'absolute'}, position]}>
<Picker
data={async () => {
return (await import('./EmojiPickerData.json')).default
@ -93,15 +127,7 @@ const styles = StyleSheet.create({
right: 0,
width: '100%',
height: '100%',
},
trigger: {
backgroundColor: 'transparent',
// @ts-ignore web only -prf
border: 'none',
paddingTop: 4,
paddingLeft: 12,
paddingRight: 12,
cursor: 'pointer',
alignItems: 'center',
},
picker: {
marginHorizontal: 'auto',

View File

@ -5,6 +5,10 @@ import {ComposePost} from '../com/composer/Composer'
import {useComposerState} from 'state/shell/composer'
import {usePalette} from 'lib/hooks/usePalette'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {
EmojiPicker,
EmojiPickerState,
} from 'view/com/composer/text-input/web/EmojiPicker.web.tsx'
const BOTTOM_BAR_HEIGHT = 61
@ -13,6 +17,26 @@ export function Composer({}: {winHeight: number}) {
const {isMobile} = useWebMediaQueries()
const state = useComposerState()
const [pickerState, setPickerState] = React.useState<EmojiPickerState>({
isOpen: false,
pos: {top: 0, left: 0, right: 0, bottom: 0},
})
const onOpenPicker = React.useCallback((pos: DOMRect | undefined) => {
if (!pos) return
setPickerState({
isOpen: true,
pos,
})
}, [])
const onClosePicker = React.useCallback(() => {
setPickerState(prev => ({
...prev,
isOpen: false,
}))
}, [])
// rendering
// =
@ -41,8 +65,10 @@ export function Composer({}: {winHeight: number}) {
quote={state.quote}
onPost={state.onPost}
mention={state.mention}
openPicker={onOpenPicker}
/>
</Animated.View>
<EmojiPicker state={pickerState} close={onClosePicker} />
</Animated.View>
)
}