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 buttonzio/stable
parent
e460b304fc
commit
c1dc0b7ee0
|
@ -30,6 +30,7 @@ export interface ComposerOpts {
|
||||||
onPost?: () => void
|
onPost?: () => void
|
||||||
quote?: ComposerOptsQuote
|
quote?: ComposerOptsQuote
|
||||||
mention?: string // handle of user to mention
|
mention?: string // handle of user to mention
|
||||||
|
openPicker?: (pos: DOMRect | undefined) => void
|
||||||
}
|
}
|
||||||
|
|
||||||
type StateContext = ComposerOpts | undefined
|
type StateContext = ComposerOpts | undefined
|
||||||
|
|
|
@ -6,6 +6,7 @@ import {
|
||||||
Keyboard,
|
Keyboard,
|
||||||
KeyboardAvoidingView,
|
KeyboardAvoidingView,
|
||||||
Platform,
|
Platform,
|
||||||
|
Pressable,
|
||||||
ScrollView,
|
ScrollView,
|
||||||
StyleSheet,
|
StyleSheet,
|
||||||
TouchableOpacity,
|
TouchableOpacity,
|
||||||
|
@ -46,7 +47,6 @@ import {Gallery} from './photos/Gallery'
|
||||||
import {MAX_GRAPHEME_LENGTH} from 'lib/constants'
|
import {MAX_GRAPHEME_LENGTH} from 'lib/constants'
|
||||||
import {LabelsBtn} from './labels/LabelsBtn'
|
import {LabelsBtn} from './labels/LabelsBtn'
|
||||||
import {SelectLangBtn} from './select-language/SelectLangBtn'
|
import {SelectLangBtn} from './select-language/SelectLangBtn'
|
||||||
import {EmojiPickerButton} from './text-input/web/EmojiPicker.web'
|
|
||||||
import {insertMentionAt} from 'lib/strings/mention-manip'
|
import {insertMentionAt} from 'lib/strings/mention-manip'
|
||||||
import {Trans, msg} from '@lingui/macro'
|
import {Trans, msg} from '@lingui/macro'
|
||||||
import {useLingui} from '@lingui/react'
|
import {useLingui} from '@lingui/react'
|
||||||
|
@ -70,6 +70,7 @@ export const ComposePost = observer(function ComposePost({
|
||||||
onPost,
|
onPost,
|
||||||
quote: initQuote,
|
quote: initQuote,
|
||||||
mention: initMention,
|
mention: initMention,
|
||||||
|
openPicker,
|
||||||
}: Props) {
|
}: Props) {
|
||||||
const {currentAccount} = useSession()
|
const {currentAccount} = useSession()
|
||||||
const {data: currentProfile} = useProfileQuery({did: currentAccount!.did})
|
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 canSelectImages = useMemo(() => gallery.size < 4, [gallery.size])
|
||||||
const hasMedia = gallery.size > 0 || Boolean(extLink)
|
const hasMedia = gallery.size > 0 || Boolean(extLink)
|
||||||
|
|
||||||
|
const onEmojiButtonPress = useCallback(() => {
|
||||||
|
openPicker?.(textInput.current?.getCursorPosition())
|
||||||
|
}, [openPicker])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<KeyboardAvoidingView
|
<KeyboardAvoidingView
|
||||||
testID="composePostView"
|
testID="composePostView"
|
||||||
|
@ -456,7 +461,19 @@ export const ComposePost = observer(function ComposePost({
|
||||||
<OpenCameraBtn gallery={gallery} />
|
<OpenCameraBtn gallery={gallery} />
|
||||||
</>
|
</>
|
||||||
) : null}
|
) : 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} />
|
<View style={s.flex1} />
|
||||||
<SelectLangBtn />
|
<SelectLangBtn />
|
||||||
<CharProgress count={graphemeLength} />
|
<CharProgress count={graphemeLength} />
|
||||||
|
|
|
@ -32,6 +32,7 @@ import {POST_IMG_MAX} from 'lib/constants'
|
||||||
export interface TextInputRef {
|
export interface TextInputRef {
|
||||||
focus: () => void
|
focus: () => void
|
||||||
blur: () => void
|
blur: () => void
|
||||||
|
getCursorPosition: () => DOMRect | undefined
|
||||||
}
|
}
|
||||||
|
|
||||||
interface TextInputProps extends ComponentProps<typeof RNTextInput> {
|
interface TextInputProps extends ComponentProps<typeof RNTextInput> {
|
||||||
|
@ -74,6 +75,7 @@ export const TextInput = forwardRef(function TextInputImpl(
|
||||||
blur: () => {
|
blur: () => {
|
||||||
textInput.current?.blur()
|
textInput.current?.blur()
|
||||||
},
|
},
|
||||||
|
getCursorPosition: () => undefined, // Not implemented on native
|
||||||
}))
|
}))
|
||||||
|
|
||||||
const onChangeText = useCallback(
|
const onChangeText = useCallback(
|
||||||
|
|
|
@ -22,6 +22,7 @@ import {useActorAutocompleteFn} from '#/state/queries/actor-autocomplete'
|
||||||
export interface TextInputRef {
|
export interface TextInputRef {
|
||||||
focus: () => void
|
focus: () => void
|
||||||
blur: () => void
|
blur: () => void
|
||||||
|
getCursorPosition: () => DOMRect | undefined
|
||||||
}
|
}
|
||||||
|
|
||||||
interface TextInputProps {
|
interface TextInputProps {
|
||||||
|
@ -169,6 +170,10 @@ export const TextInput = React.forwardRef(function TextInputImpl(
|
||||||
React.useImperativeHandle(ref, () => ({
|
React.useImperativeHandle(ref, () => ({
|
||||||
focus: () => {}, // TODO
|
focus: () => {}, // TODO
|
||||||
blur: () => {}, // TODO
|
blur: () => {}, // TODO
|
||||||
|
getCursorPosition: () => {
|
||||||
|
const pos = editor?.state.selection.$anchor.pos
|
||||||
|
return pos ? editor?.view.coordsAtPos(pos) : undefined
|
||||||
|
},
|
||||||
}))
|
}))
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -1,11 +1,17 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import Picker from '@emoji-mart/react'
|
import Picker from '@emoji-mart/react'
|
||||||
import {StyleSheet, TouchableWithoutFeedback, View} from 'react-native'
|
import {
|
||||||
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
|
StyleSheet,
|
||||||
|
TouchableWithoutFeedback,
|
||||||
|
useWindowDimensions,
|
||||||
|
View,
|
||||||
|
} from 'react-native'
|
||||||
import {textInputWebEmitter} from '../TextInput.web'
|
import {textInputWebEmitter} from '../TextInput.web'
|
||||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
|
||||||
import {usePalette} from 'lib/hooks/usePalette'
|
const HEIGHT_OFFSET = 40
|
||||||
import {useMediaQuery} from 'react-responsive'
|
const WIDTH_OFFSET = 100
|
||||||
|
const PICKER_HEIGHT = 435 + HEIGHT_OFFSET
|
||||||
|
const PICKER_WIDTH = 350 + WIDTH_OFFSET
|
||||||
|
|
||||||
export type Emoji = {
|
export type Emoji = {
|
||||||
aliases?: string[]
|
aliases?: string[]
|
||||||
|
@ -18,59 +24,87 @@ export type Emoji = {
|
||||||
unified: string
|
unified: string
|
||||||
}
|
}
|
||||||
|
|
||||||
export function EmojiPickerButton() {
|
export interface EmojiPickerState {
|
||||||
const pal = usePalette('default')
|
isOpen: boolean
|
||||||
const [open, setOpen] = React.useState(false)
|
pos: {top: number; left: number; right: number; bottom: number}
|
||||||
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 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) => {
|
const onInsert = (emoji: Emoji) => {
|
||||||
textInputWebEmitter.emit('emoji-inserted', 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)'})
|
if (!state.isOpen) return null
|
||||||
const noPicker = useMediaQuery({query: '(max-height: 350px)'})
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
// eslint-disable-next-line react-native-a11y/has-valid-accessibility-descriptors
|
<TouchableWithoutFeedback
|
||||||
<TouchableWithoutFeedback onPress={close} accessibilityViewIsModal>
|
accessibilityRole="button"
|
||||||
|
onPress={close}
|
||||||
|
accessibilityViewIsModal>
|
||||||
<View style={styles.mask}>
|
<View style={styles.mask}>
|
||||||
{/* eslint-disable-next-line react-native-a11y/has-valid-accessibility-descriptors */}
|
{/* eslint-disable-next-line react-native-a11y/has-valid-accessibility-descriptors */}
|
||||||
<TouchableWithoutFeedback
|
<TouchableWithoutFeedback onPress={e => e.stopPropagation()}>
|
||||||
onPress={e => {
|
<View style={[{position: 'absolute'}, position]}>
|
||||||
e.stopPropagation() // prevent event from bubbling up to the mask
|
|
||||||
}}>
|
|
||||||
<View
|
|
||||||
style={[
|
|
||||||
styles.picker,
|
|
||||||
{
|
|
||||||
paddingTop: noPadding ? 0 : reducedPadding ? 150 : 325,
|
|
||||||
display: noPicker ? 'none' : 'flex',
|
|
||||||
},
|
|
||||||
]}>
|
|
||||||
<Picker
|
<Picker
|
||||||
data={async () => {
|
data={async () => {
|
||||||
return (await import('./EmojiPickerData.json')).default
|
return (await import('./EmojiPickerData.json')).default
|
||||||
|
@ -93,15 +127,7 @@ const styles = StyleSheet.create({
|
||||||
right: 0,
|
right: 0,
|
||||||
width: '100%',
|
width: '100%',
|
||||||
height: '100%',
|
height: '100%',
|
||||||
},
|
alignItems: 'center',
|
||||||
trigger: {
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
// @ts-ignore web only -prf
|
|
||||||
border: 'none',
|
|
||||||
paddingTop: 4,
|
|
||||||
paddingLeft: 12,
|
|
||||||
paddingRight: 12,
|
|
||||||
cursor: 'pointer',
|
|
||||||
},
|
},
|
||||||
picker: {
|
picker: {
|
||||||
marginHorizontal: 'auto',
|
marginHorizontal: 'auto',
|
||||||
|
|
|
@ -5,6 +5,10 @@ import {ComposePost} from '../com/composer/Composer'
|
||||||
import {useComposerState} from 'state/shell/composer'
|
import {useComposerState} from 'state/shell/composer'
|
||||||
import {usePalette} from 'lib/hooks/usePalette'
|
import {usePalette} from 'lib/hooks/usePalette'
|
||||||
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
||||||
|
import {
|
||||||
|
EmojiPicker,
|
||||||
|
EmojiPickerState,
|
||||||
|
} from 'view/com/composer/text-input/web/EmojiPicker.web.tsx'
|
||||||
|
|
||||||
const BOTTOM_BAR_HEIGHT = 61
|
const BOTTOM_BAR_HEIGHT = 61
|
||||||
|
|
||||||
|
@ -13,6 +17,26 @@ export function Composer({}: {winHeight: number}) {
|
||||||
const {isMobile} = useWebMediaQueries()
|
const {isMobile} = useWebMediaQueries()
|
||||||
const state = useComposerState()
|
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
|
// rendering
|
||||||
// =
|
// =
|
||||||
|
|
||||||
|
@ -41,8 +65,10 @@ export function Composer({}: {winHeight: number}) {
|
||||||
quote={state.quote}
|
quote={state.quote}
|
||||||
onPost={state.onPost}
|
onPost={state.onPost}
|
||||||
mention={state.mention}
|
mention={state.mention}
|
||||||
|
openPicker={onOpenPicker}
|
||||||
/>
|
/>
|
||||||
</Animated.View>
|
</Animated.View>
|
||||||
|
<EmojiPicker state={pickerState} close={onClosePicker} />
|
||||||
</Animated.View>
|
</Animated.View>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue