From a5fbd66320902c57d9b99c40000b5cd3c74e185c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Espino=20Garc=C3=ADa?= Date: Tue, 13 May 2025 17:09:25 +0200 Subject: [PATCH] Fix edit post scroll (#8845) * Fix edit post scroll * Minor improvement on readability --- app/screens/edit_post/edit_post.tsx | 65 ++++++++++--------- .../edit_post/edit_post_input/index.tsx | 29 ++++++--- 2 files changed, 57 insertions(+), 37 deletions(-) diff --git a/app/screens/edit_post/edit_post.tsx b/app/screens/edit_post/edit_post.tsx index 3c3b336b9..f2bc7141b 100644 --- a/app/screens/edit_post/edit_post.tsx +++ b/app/screens/edit_post/edit_post.tsx @@ -8,6 +8,7 @@ import {Alert, Keyboard, type LayoutChangeEvent, Platform, SafeAreaView, View, S import {deletePost, editPost} from '@actions/remote/post'; import Autocomplete from '@components/autocomplete'; import Loading from '@components/loading'; +import {ExtraKeyboardProvider} from '@context/extra_keyboard'; import {useServerUrl} from '@context/server'; import {useTheme} from '@context/theme'; import useAndroidHardwareBackHandler from '@hooks/android_back_handler'; @@ -40,6 +41,9 @@ const styles = StyleSheet.create({ alignItems: 'center', justifyContent: 'center', }, + inputContainer: { + flex: 1, + }, }); const RIGHT_BUTTON = buildNavigationButton('edit-post', 'edit_post.save.button'); @@ -69,6 +73,8 @@ const EditPost = ({componentId, maxPostSize, post, closeButtonId, hasFilesAttach const intl = useIntl(); const serverUrl = useServerUrl(); + const shouldDeleteOnSave = !postMessage && canDelete && !hasFilesAttached; + useEffect(() => { toggleSaveButton(false); }, []); @@ -93,11 +99,11 @@ const EditPost = ({componentId, maxPostSize, post, closeButtonId, hasFilesAttach const onClose = useCallback(() => { Keyboard.dismiss(); dismissModal({componentId}); - }, []); + }, [componentId]); const onTextSelectionChange = useCallback((curPos: number = cursorPosition) => { setCursorPosition(curPos); - }, [cursorPosition, postMessage]); + }, [cursorPosition]); const toggleSaveButton = useCallback((enabled = true) => { setButtons(componentId, { @@ -128,7 +134,7 @@ const EditPost = ({componentId, maxPostSize, post, closeButtonId, hasFilesAttach setPostMessage(message); propagateValue(message); onChangeTextCommon(message); - }, [onChangeTextCommon]); + }, [onChangeTextCommon, propagateValue]); const onInputChangeText = useCallback((message: string) => { if (!shouldProcessEvent(message)) { @@ -136,7 +142,7 @@ const EditPost = ({componentId, maxPostSize, post, closeButtonId, hasFilesAttach } setPostMessage(message); onChangeTextCommon(message); - }, [onChangeTextCommon]); + }, [onChangeTextCommon, shouldProcessEvent]); const handleUIUpdates = useCallback((res: {error?: unknown}) => { if (res.error) { @@ -148,7 +154,7 @@ const EditPost = ({componentId, maxPostSize, post, closeButtonId, hasFilesAttach setIsUpdating(false); onClose(); } - }, []); + }, [intl, onClose]); const handleDeletePost = useCallback(async () => { Alert.alert( @@ -174,21 +180,21 @@ const EditPost = ({componentId, maxPostSize, post, closeButtonId, hasFilesAttach }, }], ); - }, [serverUrl, editingMessage]); + }, [intl, toggleSaveButton, editingMessage, serverUrl, post, handleUIUpdates]); const onSavePostMessage = useCallback(async () => { setIsUpdating(true); setErrorLine(undefined); setErrorExtra(undefined); toggleSaveButton(false); - if (!postMessage && canDelete && !hasFilesAttached) { + if (shouldDeleteOnSave) { handleDeletePost(); return; } const res = await editPost(serverUrl, post.id, postMessage); handleUIUpdates(res); - }, [toggleSaveButton, serverUrl, post.id, postMessage, onClose]); + }, [toggleSaveButton, shouldDeleteOnSave, serverUrl, post.id, postMessage, handleUIUpdates, handleDeletePost]); const onLayout = useCallback((e: LayoutChangeEvent) => { setContainerHeight(e.nativeEvent.layout.height); @@ -202,8 +208,6 @@ const EditPost = ({componentId, maxPostSize, post, closeButtonId, hasFilesAttach const autocompletePosition = overlap + AUTOCOMPLETE_SEPARATION; const autocompleteAvailableSpace = containerHeight - autocompletePosition; - const inputHeight = containerHeight - overlap; - const [animatedAutocompletePosition, animatedAutocompleteAvailableSpace] = useAutocompleteDefaultAnimatedValues(autocompletePosition, autocompleteAvailableSpace); if (isUpdating) { @@ -225,25 +229,28 @@ const EditPost = ({componentId, maxPostSize, post, closeButtonId, hasFilesAttach onLayout={onLayout} nativeID={SecurityManager.getShieldScreenId(componentId)} > - - {Boolean((errorLine || errorExtra)) && - - } - - + + + {Boolean((errorLine || errorExtra)) && + + } + + + + + ({ color: theme.centerChannelColor, padding: 15, textAlignVertical: 'top', + flex: 1, ...typography('Body', 200), }, inputContainer: { backgroundColor: theme.centerChannelBg, marginTop: 2, + flex: 1, }, })); @@ -30,7 +33,6 @@ export type EditPostInputRef = { } type PostInputProps = { - inputHeight: number; message: string; hasError: boolean; onTextSelectionChange: (curPos: number) => void; @@ -38,7 +40,6 @@ type PostInputProps = { } const EditPostInput = forwardRef(({ - inputHeight, message, onChangeText, onTextSelectionChange, @@ -52,9 +53,19 @@ const EditPostInput = forwardRef(({ const inputRef = useRef(); + const keyboardContext = useExtraKeyboardContext(); + + const onFocus = useCallback(() => { + keyboardContext?.registerTextInputFocus(); + }, [keyboardContext]); + + const onBlur = useCallback(() => { + keyboardContext?.registerTextInputBlur(); + }, [keyboardContext]); + const inputStyle = useMemo(() => { - return [styles.input, {height: inputHeight}]; - }, [inputHeight, styles]); + return [styles.input]; + }, [styles]); const onSelectionChange = useCallback((event: NativeSyntheticEvent) => { const curPos = event.nativeEvent.selection.end; @@ -64,12 +75,11 @@ const EditPostInput = forwardRef(({ const containerStyle = useMemo(() => [ styles.inputContainer, hasError && {marginTop: 0}, - {height: inputHeight}, - ], [styles, inputHeight]); + ], [styles, hasError]); useImperativeHandle(ref, () => ({ focus: () => inputRef.current?.focus(), - }), [inputRef.current]); + }), []); return ( @@ -91,7 +101,10 @@ const EditPostInput = forwardRef(({ testID='edit_post.message.input' underlineColorAndroid='transparent' value={message} + onFocus={onFocus} + onBlur={onBlur} /> + {Platform.select({ios: })} ); });