[🐴] Make message input layout resizing synchronous (#4123)

* make input resizing synchronous

* remove a log

* make scroll enable/disable sync

* lint

* start as undefined
zio/stable
Hailey 2024-05-20 13:01:21 -07:00 committed by GitHub
parent 994af1454f
commit 52a885ad19
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 46 additions and 26 deletions

View File

@ -1,13 +1,16 @@
import React from 'react' import React from 'react'
import {Pressable, TextInput, useWindowDimensions, View} from 'react-native'
import { import {
Dimensions, useFocusedInputHandler,
Keyboard, useReanimatedKeyboardAnimation,
NativeSyntheticEvent, } from 'react-native-keyboard-controller'
Pressable, import Animated, {
TextInput, measure,
TextInputContentSizeChangeEventData, useAnimatedProps,
View, useAnimatedRef,
} from 'react-native' useAnimatedStyle,
useSharedValue,
} from 'react-native-reanimated'
import {useSafeAreaInsets} from 'react-native-safe-area-context' import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {msg} from '@lingui/macro' import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
@ -25,6 +28,8 @@ import {atoms as a, useTheme} from '#/alf'
import {useSharedInputStyles} from '#/components/forms/TextField' import {useSharedInputStyles} from '#/components/forms/TextField'
import {PaperPlane_Stroke2_Corner0_Rounded as PaperPlane} from '#/components/icons/PaperPlane' import {PaperPlane_Stroke2_Corner0_Rounded as PaperPlane} from '#/components/icons/PaperPlane'
const AnimatedTextInput = Animated.createAnimatedComponent(TextInput)
export function MessageInput({ export function MessageInput({
onSendMessage, onSendMessage,
}: { }: {
@ -34,15 +39,19 @@ export function MessageInput({
const t = useTheme() const t = useTheme()
const playHaptic = useHaptics() const playHaptic = useHaptics()
const {getDraft, clearDraft} = useMessageDraft() const {getDraft, clearDraft} = useMessageDraft()
const [message, setMessage] = React.useState(getDraft)
const [maxHeight, setMaxHeight] = React.useState<number | undefined>()
const [isInputScrollable, setIsInputScrollable] = React.useState(false)
// Input layout
const {top: topInset} = useSafeAreaInsets() const {top: topInset} = useSafeAreaInsets()
const {height: windowHeight} = useWindowDimensions()
const {height: keyboardHeight} = useReanimatedKeyboardAnimation()
const maxHeight = useSharedValue<undefined | number>(undefined)
const isInputScrollable = useSharedValue(false)
// const [isInputScrollable, setIsInputScrollable] = React.useState(false)
const inputStyles = useSharedInputStyles() const inputStyles = useSharedInputStyles()
const [isFocused, setIsFocused] = React.useState(false) const [isFocused, setIsFocused] = React.useState(false)
const inputRef = React.useRef<TextInput>(null) const [message, setMessage] = React.useState(getDraft)
const inputRef = useAnimatedRef<TextInput>()
useSaveMessageDraft(message) useSaveMessageDraft(message)
@ -64,22 +73,33 @@ export function MessageInput({
setTimeout(() => { setTimeout(() => {
inputRef.current?.focus() inputRef.current?.focus()
}, 100) }, 100)
}, [message, onSendMessage, playHaptic, _, clearDraft]) }, [message, clearDraft, onSendMessage, playHaptic, _, inputRef])
const onInputLayout = React.useCallback( useFocusedInputHandler(
(e: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => { {
const keyboardHeight = Keyboard.metrics()?.height ?? 0 onChangeText: () => {
const windowHeight = Dimensions.get('window').height 'worklet'
const measurement = measure(inputRef)
if (!measurement) return
const max = windowHeight - keyboardHeight - topInset - 150 const max = windowHeight - -keyboardHeight.value - topInset - 150
const availableSpace = max - e.nativeEvent.contentSize.height const availableSpace = max - measurement.height
setMaxHeight(max) maxHeight.value = max
setIsInputScrollable(availableSpace < 30) isInputScrollable.value = availableSpace < 30
},
}, },
[topInset], [windowHeight, topInset],
) )
const animatedStyle = useAnimatedStyle(() => ({
maxHeight: maxHeight.value,
}))
const animatedProps = useAnimatedProps(() => ({
scrollEnabled: isInputScrollable.value,
}))
return ( return (
<View style={[a.px_md, a.pb_sm, a.pt_xs]}> <View style={[a.px_md, a.pb_sm, a.pt_xs]}>
<View <View
@ -96,7 +116,7 @@ export function MessageInput({
}, },
isFocused && inputStyles.chromeFocus, isFocused && inputStyles.chromeFocus,
]}> ]}>
<TextInput <AnimatedTextInput
accessibilityLabel={_(msg`Message input field`)} accessibilityLabel={_(msg`Message input field`)}
accessibilityHint={_(msg`Type your message here`)} accessibilityHint={_(msg`Type your message here`)}
placeholder={_(msg`Write a message`)} placeholder={_(msg`Write a message`)}
@ -109,16 +129,16 @@ export function MessageInput({
a.text_md, a.text_md,
a.px_sm, a.px_sm,
t.atoms.text, t.atoms.text,
{maxHeight, paddingBottom: isIOS ? 5 : 0}, {paddingBottom: isIOS ? 5 : 0},
animatedStyle,
]} ]}
keyboardAppearance={t.name === 'light' ? 'light' : 'dark'} keyboardAppearance={t.name === 'light' ? 'light' : 'dark'}
scrollEnabled={isInputScrollable}
blurOnSubmit={false} blurOnSubmit={false}
onFocus={() => setIsFocused(true)} onFocus={() => setIsFocused(true)}
onBlur={() => setIsFocused(false)} onBlur={() => setIsFocused(false)}
onContentSizeChange={onInputLayout}
ref={inputRef} ref={inputRef}
hitSlop={HITSLOP_10} hitSlop={HITSLOP_10}
animatedProps={animatedProps}
/> />
<Pressable <Pressable
accessibilityRole="button" accessibilityRole="button"