[🐴] Make message input layout resizing synchronous (#4123)
* make input resizing synchronous * remove a log * make scroll enable/disable sync * lint * start as undefinedzio/stable
parent
994af1454f
commit
52a885ad19
|
@ -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"
|
||||||
|
|
Loading…
Reference in New Issue