From e572f6dff82408ce0bfb0571bc8d8bba9f2c4642 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= Date: Thu, 11 Apr 2024 15:04:58 +0200 Subject: [PATCH 01/14] Fix jumping composer issue --- ios/Podfile.lock | 4 +- src/components/Composer/index.tsx | 70 +++++++------------ src/components/Composer/types.ts | 6 -- .../ComposerWithSuggestions.tsx | 25 ------- 4 files changed, 26 insertions(+), 79 deletions(-) diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 32a8bca75bcd..67216d60f3ba 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -1921,8 +1921,8 @@ SPEC CHECKSUMS: SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17 Turf: 13d1a92d969ca0311bbc26e8356cca178ce95da2 VisionCamera: 9f26224fce1233ffdad9fa4e56863e3de2190dc0 - Yoga: e64aa65de36c0832d04e8c7bd614396c77a80047 + Yoga: 13c8ef87792450193e117976337b8527b49e8c03 PODFILE CHECKSUM: a431c146e1501391834a2f299a74093bac53b530 -COCOAPODS: 1.13.0 +COCOAPODS: 1.15.2 diff --git a/src/components/Composer/index.tsx b/src/components/Composer/index.tsx index 69cc6b208652..f3a73288161d 100755 --- a/src/components/Composer/index.tsx +++ b/src/components/Composer/index.tsx @@ -60,12 +60,10 @@ function Composer( autoFocus = false, isFullComposerAvailable = false, shouldCalculateCaretPosition = false, - numberOfLines: numberOfLinesProp = 0, isDisabled = false, onClear = () => {}, onPasteFile = () => {}, onSelectionChange = () => {}, - onNumberOfLinesChange = () => {}, setIsFullComposerAvailable = () => {}, checkComposerVisibility = () => false, selection: selectionProp = { @@ -82,11 +80,9 @@ function Composer( const theme = useTheme(); const styles = useThemeStyles(); const markdownStyle = useMarkdownStyle(); - const StyleUtils = useStyleUtils(); const {windowWidth} = useWindowDimensions(); const textRef = useRef(null); const textInput = useRef(null); - const [numberOfLines, setNumberOfLines] = useState(numberOfLinesProp); const [selection, setSelection] = useState< | { start: number; @@ -103,13 +99,13 @@ function Composer( const [isRendered, setIsRendered] = useState(false); const isScrollBarVisible = useIsScrollBarVisible(textInput, value ?? ''); const [prevScroll, setPrevScroll] = useState(); + const StyleUtils = useStyleUtils(); useEffect(() => { if (!shouldClear) { return; } textInput.current?.clear(); - setNumberOfLines(1); onClear(); }, [shouldClear, onClear]); @@ -244,33 +240,21 @@ function Composer( if (!textInput.current) { return; } + + const textInputHeight = textInput.current.clientHeight; // we reset the height to 0 to get the correct scrollHeight textInput.current.style.height = '0'; const computedStyle = window.getComputedStyle(textInput.current); - const lineHeight = parseInt(computedStyle.lineHeight, 10) || 20; - const paddingTopAndBottom = parseInt(computedStyle.paddingBottom, 10) + parseInt(computedStyle.paddingTop, 10); setTextInputWidth(computedStyle.width); - - const computedNumberOfLines = ComposerUtils.getNumberOfLines(lineHeight, paddingTopAndBottom, textInput.current.scrollHeight, maxLines); - const generalNumberOfLines = computedNumberOfLines === 0 ? numberOfLinesProp : computedNumberOfLines; - - onNumberOfLinesChange(generalNumberOfLines); - updateIsFullComposerAvailable({isFullComposerAvailable, setIsFullComposerAvailable}, generalNumberOfLines); - setNumberOfLines(generalNumberOfLines); + // updateIsFullComposerAvailable({isFullComposerAvailable, setIsFullComposerAvailable}, textInputHeight >= 70 ? 3 : 1); textInput.current.style.height = 'auto'; // eslint-disable-next-line react-hooks/exhaustive-deps - }, [value, maxLines, numberOfLinesProp, onNumberOfLinesChange, isFullComposerAvailable, setIsFullComposerAvailable, windowWidth]); + }, [value, maxLines, isFullComposerAvailable, setIsFullComposerAvailable, windowWidth]); useEffect(() => { updateNumberOfLines(); }, [updateNumberOfLines]); - const currentNumberOfLines = useMemo( - () => (isComposerFullSize ? undefined : numberOfLines), - - [isComposerFullSize, numberOfLines], - ); - useEffect(() => { if (!textInput.current) { return; @@ -333,7 +317,13 @@ function Composer( opacity: 0, }} > - + {`${valueBeforeCaret} `} [ StyleSheet.flatten([style, {outline: 'none'}]), - StyleUtils.getComposeTextAreaPadding(numberOfLines, isComposerFullSize), Browser.isMobileSafari() || Browser.isSafari() ? styles.rtlTextRenderForSafari : {}, scrollStyleMemo, + StyleUtils.getComposerMaxHeightStyle(maxLines, isComposerFullSize), isComposerFullSize ? ({height: '100%', maxHeight: 'none' as DimensionValue} as TextStyle) : undefined, ], - [numberOfLines, scrollStyleMemo, styles.rtlTextRenderForSafari, style, StyleUtils, isComposerFullSize], + [style, styles.rtlTextRenderForSafari, scrollStyleMemo, StyleUtils, maxLines, isComposerFullSize], ); return ( @@ -376,7 +362,7 @@ function Composer( placeholderTextColor={theme.placeholderText} ref={(el) => (textInput.current = el)} selection={selection} - style={inputStyleMemo} + style={[inputStyleMemo]} markdownStyle={markdownStyle} value={value} defaultValue={defaultValue} @@ -384,24 +370,16 @@ function Composer( /* eslint-disable-next-line react/jsx-props-no-spreading */ {...props} onSelectionChange={addCursorPositionToSelectionChange} - numberOfLines={currentNumberOfLines} disabled={isDisabled} onKeyPress={handleKeyPress} onFocus={(e) => { - if (isReportActionCompose) { - ReportActionComposeFocusManager.onComposerFocus(null); - } else { - // While a user edits a comment, if they open the LHN menu, we want to ensure that - // the focus returns to the message edit composer after they click on a menu item (e.g. mark as read). - // To achieve this, we re-assign the focus callback here. - ReportActionComposeFocusManager.onComposerFocus(() => { - if (!textInput.current) { - return; - } - - textInput.current.focus(); - }); - } + ReportActionComposeFocusManager.onComposerFocus(() => { + if (!textInput.current) { + return; + } + + textInput.current.focus(); + }); props.onFocus?.(e); }} diff --git a/src/components/Composer/types.ts b/src/components/Composer/types.ts index 6bc44aba69cd..531bcd03f8bf 100644 --- a/src/components/Composer/types.ts +++ b/src/components/Composer/types.ts @@ -21,15 +21,9 @@ type ComposerProps = TextInputProps & { /** The value of the comment box */ value?: string; - /** Number of lines for the comment */ - numberOfLines?: number; - /** Callback method handle when the input is changed */ onChangeText?: (numberOfLines: string) => void; - /** Callback method to update number of lines for the comment */ - onNumberOfLinesChange?: (numberOfLines: number) => void; - /** Callback method to handle pasting a file */ onPasteFile?: (file: File) => void; diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx index f8147dfda81d..a985ea3c57b3 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx @@ -63,9 +63,6 @@ type AnimatedRef = ReturnType; type NewlyAddedChars = {startIndex: number; endIndex: number; diff: string}; type ComposerWithSuggestionsOnyxProps = { - /** The number of lines the comment should take up */ - numberOfLines: OnyxEntry; - /** The parent report actions for the report */ parentReportActions: OnyxEntry; @@ -209,7 +206,6 @@ function ComposerWithSuggestions( modal, preferredSkinTone = CONST.EMOJI_DEFAULT_SKIN_TONE, parentReportActions, - numberOfLines, // Props: Report reportID, @@ -451,19 +447,6 @@ function ComposerWithSuggestions( ], ); - /** - * Update the number of lines for a comment in Onyx - */ - const updateNumberOfLines = useCallback( - (newNumberOfLines: number) => { - if (newNumberOfLines === numberOfLines) { - return; - } - Report.saveReportCommentNumberOfLines(reportID, newNumberOfLines); - }, - [reportID, numberOfLines], - ); - const prepareCommentAndResetComposer = useCallback((): string => { const trimmedComment = commentRef.current.trim(); const commentLength = ReportUtils.getCommentLength(trimmedComment); @@ -752,8 +735,6 @@ function ComposerWithSuggestions( isComposerFullSize={isComposerFullSize} value={value} testID="composer" - numberOfLines={numberOfLines ?? undefined} - onNumberOfLinesChange={updateNumberOfLines} shouldCalculateCaretPosition onLayout={onLayout} onScroll={hideSuggestionMenu} @@ -798,12 +779,6 @@ ComposerWithSuggestions.displayName = 'ComposerWithSuggestions'; const ComposerWithSuggestionsWithRef = forwardRef(ComposerWithSuggestions); export default withOnyx, ComposerWithSuggestionsOnyxProps>({ - numberOfLines: { - key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT_NUMBER_OF_LINES}${reportID}`, - // We might not have number of lines in onyx yet, for which the composer would be rendered as null - // during the first render, which we want to avoid: - initWithStoredValues: false, - }, modal: { key: ONYXKEYS.MODAL, }, From d871f7ed766b9452c8575a62818d78fb2698bc45 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= Date: Thu, 11 Apr 2024 17:52:00 +0200 Subject: [PATCH 02/14] Clear Composer component --- src/components/Composer/index.native.tsx | 2 -- src/components/Composer/index.tsx | 15 ++++++-------- .../updateNumberOfLines/index.native.ts | 20 ------------------- .../updateNumberOfLines/index.ts | 17 +++++++++++++++- 4 files changed, 22 insertions(+), 32 deletions(-) delete mode 100644 src/libs/ComposerUtils/updateNumberOfLines/index.native.ts diff --git a/src/components/Composer/index.native.tsx b/src/components/Composer/index.native.tsx index 6691c068eb3a..1c4f4344b27e 100644 --- a/src/components/Composer/index.native.tsx +++ b/src/components/Composer/index.native.tsx @@ -21,7 +21,6 @@ function Composer( isComposerFullSize = false, setIsFullComposerAvailable = () => {}, autoFocus = false, - isFullComposerAvailable = false, style, // On native layers we like to have the Text Input not focused so the // user can read new chats without the keyboard in the way of the view. @@ -80,7 +79,6 @@ function Composer( style={[composerStyle, maxHeightStyle]} markdownStyle={markdownStyle} autoFocus={autoFocus} - isFullComposerAvailable={isFullComposerAvailable} /* eslint-disable-next-line react/jsx-props-no-spreading */ {...props} readOnly={isDisabled} diff --git a/src/components/Composer/index.tsx b/src/components/Composer/index.tsx index f3a73288161d..fcc7ca41386e 100755 --- a/src/components/Composer/index.tsx +++ b/src/components/Composer/index.tsx @@ -17,7 +17,6 @@ import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import * as Browser from '@libs/Browser'; import * as ComposerUtils from '@libs/ComposerUtils'; -import updateIsFullComposerAvailable from '@libs/ComposerUtils/updateIsFullComposerAvailable'; import * as FileUtils from '@libs/fileDownload/FileUtils'; import isEnterWhileComposition from '@libs/KeyboardShortcut/isEnterWhileComposition'; import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager'; @@ -126,7 +125,6 @@ function Composer( return; } const webEvent = event as BaseSyntheticEvent; - if (shouldCalculateCaretPosition) { // we do flushSync to make sure that the valueBeforeCaret is updated before we calculate the caret position to receive a proper position otherwise we will calculate position for the previous state flushSync(() => { @@ -236,24 +234,22 @@ function Composer( * Check the current scrollHeight of the textarea (minus any padding) and * divide by line height to get the total number of rows for the textarea. */ - const updateNumberOfLines = useCallback(() => { + const updateTextInputWidth = useCallback(() => { if (!textInput.current) { return; } - - const textInputHeight = textInput.current.clientHeight; + const textInputHeight = textInput.current.style.height; // we reset the height to 0 to get the correct scrollHeight textInput.current.style.height = '0'; const computedStyle = window.getComputedStyle(textInput.current); setTextInputWidth(computedStyle.width); - // updateIsFullComposerAvailable({isFullComposerAvailable, setIsFullComposerAvailable}, textInputHeight >= 70 ? 3 : 1); - textInput.current.style.height = 'auto'; + textInput.current.style.height = textInputHeight; // eslint-disable-next-line react-hooks/exhaustive-deps }, [value, maxLines, isFullComposerAvailable, setIsFullComposerAvailable, windowWidth]); useEffect(() => { - updateNumberOfLines(); - }, [updateNumberOfLines]); + updateTextInputWidth(); + }, [updateTextInputWidth]); useEffect(() => { if (!textInput.current) { @@ -370,6 +366,7 @@ function Composer( /* eslint-disable-next-line react/jsx-props-no-spreading */ {...props} onSelectionChange={addCursorPositionToSelectionChange} + onContentSizeChange={(e) => ComposerUtils.updateNumberOfLines({maxLines, isComposerFullSize, isDisabled, setIsFullComposerAvailable}, e, styles)} disabled={isDisabled} onKeyPress={handleKeyPress} onFocus={(e) => { diff --git a/src/libs/ComposerUtils/updateNumberOfLines/index.native.ts b/src/libs/ComposerUtils/updateNumberOfLines/index.native.ts deleted file mode 100644 index 5a7676d8bfbd..000000000000 --- a/src/libs/ComposerUtils/updateNumberOfLines/index.native.ts +++ /dev/null @@ -1,20 +0,0 @@ -import getNumberOfLines from '@libs/ComposerUtils/getNumberOfLines'; -import updateIsFullComposerAvailable from '@libs/ComposerUtils/updateIsFullComposerAvailable'; -import type UpdateNumberOfLines from './types'; - -/** - * Check the current scrollHeight of the textarea (minus any padding) and - * divide by line height to get the total number of rows for the textarea. - */ -const updateNumberOfLines: UpdateNumberOfLines = (props, event, styles) => { - const lineHeight = styles.textInputCompose.lineHeight ?? 0; - const paddingTopAndBottom = styles.textInputComposeSpacing.paddingVertical * 2; - const inputHeight = event?.nativeEvent?.contentSize?.height ?? null; - if (!inputHeight) { - return; - } - const numberOfLines = getNumberOfLines(lineHeight, paddingTopAndBottom, inputHeight); - updateIsFullComposerAvailable(props, numberOfLines); -}; - -export default updateNumberOfLines; diff --git a/src/libs/ComposerUtils/updateNumberOfLines/index.ts b/src/libs/ComposerUtils/updateNumberOfLines/index.ts index 3037fb99c8b1..5a7676d8bfbd 100644 --- a/src/libs/ComposerUtils/updateNumberOfLines/index.ts +++ b/src/libs/ComposerUtils/updateNumberOfLines/index.ts @@ -1,5 +1,20 @@ +import getNumberOfLines from '@libs/ComposerUtils/getNumberOfLines'; +import updateIsFullComposerAvailable from '@libs/ComposerUtils/updateIsFullComposerAvailable'; import type UpdateNumberOfLines from './types'; -const updateNumberOfLines: UpdateNumberOfLines = () => {}; +/** + * Check the current scrollHeight of the textarea (minus any padding) and + * divide by line height to get the total number of rows for the textarea. + */ +const updateNumberOfLines: UpdateNumberOfLines = (props, event, styles) => { + const lineHeight = styles.textInputCompose.lineHeight ?? 0; + const paddingTopAndBottom = styles.textInputComposeSpacing.paddingVertical * 2; + const inputHeight = event?.nativeEvent?.contentSize?.height ?? null; + if (!inputHeight) { + return; + } + const numberOfLines = getNumberOfLines(lineHeight, paddingTopAndBottom, inputHeight); + updateIsFullComposerAvailable(props, numberOfLines); +}; export default updateNumberOfLines; From 10038d38a40b074f1e0d54c7c920485d7989faf8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= Date: Thu, 11 Apr 2024 17:53:16 +0200 Subject: [PATCH 03/14] Change updateTextInputWidth function comment --- src/components/Composer/index.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Composer/index.tsx b/src/components/Composer/index.tsx index fcc7ca41386e..3817c386c729 100755 --- a/src/components/Composer/index.tsx +++ b/src/components/Composer/index.tsx @@ -231,8 +231,7 @@ function Composer( ); /** - * Check the current scrollHeight of the textarea (minus any padding) and - * divide by line height to get the total number of rows for the textarea. + * Check the current text input width and update the state with the new width. */ const updateTextInputWidth = useCallback(() => { if (!textInput.current) { From f889f818b980d65fa78680330dfc6debb39b8463 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= Date: Fri, 12 Apr 2024 10:51:20 +0200 Subject: [PATCH 04/14] Add review changes --- ios/Podfile.lock | 4 ++-- src/components/Composer/index.tsx | 4 ---- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 67216d60f3ba..32a8bca75bcd 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -1921,8 +1921,8 @@ SPEC CHECKSUMS: SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17 Turf: 13d1a92d969ca0311bbc26e8356cca178ce95da2 VisionCamera: 9f26224fce1233ffdad9fa4e56863e3de2190dc0 - Yoga: 13c8ef87792450193e117976337b8527b49e8c03 + Yoga: e64aa65de36c0832d04e8c7bd614396c77a80047 PODFILE CHECKSUM: a431c146e1501391834a2f299a74093bac53b530 -COCOAPODS: 1.15.2 +COCOAPODS: 1.13.0 diff --git a/src/components/Composer/index.tsx b/src/components/Composer/index.tsx index 3817c386c729..ae8ab69cef0d 100755 --- a/src/components/Composer/index.tsx +++ b/src/components/Composer/index.tsx @@ -237,12 +237,8 @@ function Composer( if (!textInput.current) { return; } - const textInputHeight = textInput.current.style.height; - // we reset the height to 0 to get the correct scrollHeight - textInput.current.style.height = '0'; const computedStyle = window.getComputedStyle(textInput.current); setTextInputWidth(computedStyle.width); - textInput.current.style.height = textInputHeight; // eslint-disable-next-line react-hooks/exhaustive-deps }, [value, maxLines, isFullComposerAvailable, setIsFullComposerAvailable, windowWidth]); From fd404290c183b54e7fbe45349181f1a09c3dbe32 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= Date: Fri, 12 Apr 2024 11:04:55 +0200 Subject: [PATCH 05/14] Bump react-native-live-markdown version --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index d58118b7d268..9b71088ac2e6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "license": "MIT", "dependencies": { "@dotlottie/react-player": "^1.6.3", - "@expensify/react-native-live-markdown": "0.1.38", + "@expensify/react-native-live-markdown": "0.1.53", "@expo/metro-runtime": "~3.1.1", "@formatjs/intl-datetimeformat": "^6.10.0", "@formatjs/intl-listformat": "^7.2.2", @@ -3097,9 +3097,9 @@ } }, "node_modules/@expensify/react-native-live-markdown": { - "version": "0.1.38", - "resolved": "https://registry.npmjs.org/@expensify/react-native-live-markdown/-/react-native-live-markdown-0.1.38.tgz", - "integrity": "sha512-0EcXvK/eqeJdesX8DBibJ+V2KX9n5Gbmg0fWTk93mGOUA70h3W6lO68nuch40X+RgQdOgIf50BMfzbBzzVdJwA==", + "version": "0.1.53", + "resolved": "https://registry.npmjs.org/@expensify/react-native-live-markdown/-/react-native-live-markdown-0.1.53.tgz", + "integrity": "sha512-E4nn3v2zz+0C9eLJfqOeJFebDHovvrNiSEgSbe3thFVgV25lTfPEJiuIXP1IT/zwzp0UadhDNhUGOV3m0ISNkA==", "engines": { "node": ">= 18.0.0" }, diff --git a/package.json b/package.json index 5c03af2be2f7..0e6cae7e93b0 100644 --- a/package.json +++ b/package.json @@ -62,7 +62,7 @@ }, "dependencies": { "@dotlottie/react-player": "^1.6.3", - "@expensify/react-native-live-markdown": "0.1.38", + "@expensify/react-native-live-markdown": "0.1.53", "@expo/metro-runtime": "~3.1.1", "@formatjs/intl-datetimeformat": "^6.10.0", "@formatjs/intl-listformat": "^7.2.2", From 535ffbbbb440dba07cc1806cbb37057c5ca1776b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= Date: Mon, 15 Apr 2024 10:54:42 +0200 Subject: [PATCH 06/14] Update Podfile --- ios/Podfile.lock | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/ios/Podfile.lock b/ios/Podfile.lock index f9244c515a2c..2ec4f671c529 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -1836,7 +1836,7 @@ PODS: - RNGoogleSignin (10.0.1): - GoogleSignIn (~> 7.0) - React-Core - - RNLiveMarkdown (0.1.47): + - RNLiveMarkdown (0.1.53): - glog - hermes-engine - RCT-Folly (= 2022.05.16.00) @@ -1854,9 +1854,9 @@ PODS: - React-utils - ReactCommon/turbomodule/bridging - ReactCommon/turbomodule/core - - RNLiveMarkdown/common (= 0.1.47) + - RNLiveMarkdown/common (= 0.1.53) - Yoga - - RNLiveMarkdown/common (0.1.47): + - RNLiveMarkdown/common (0.1.53): - glog - hermes-engine - RCT-Folly (= 2022.05.16.00) @@ -2565,7 +2565,7 @@ SPEC CHECKSUMS: RNFS: 4ac0f0ea233904cb798630b3c077808c06931688 RNGestureHandler: 1190c218cdaaf029ee1437076a3fbbc3297d89fb RNGoogleSignin: ccaa4a81582cf713eea562c5dd9dc1961a715fd0 - RNLiveMarkdown: f172c7199283dc9d21bccf7e21ea10741fd19e1d + RNLiveMarkdown: e49132a5e1b6e40fa4485f13f5d9846ae4936a93 RNLocalize: d4b8af4e442d4bcca54e68fc687a2129b4d71a81 rnmapbox-maps: 3e273e0e867a079ec33df9ee33bb0482434b897d RNPermissions: 8990fc2c10da3640938e6db1647cb6416095b729 From 9731697f372d94facb58f838a514a0db04d88458 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= Date: Mon, 15 Apr 2024 17:28:34 +0200 Subject: [PATCH 07/14] Fix composer collapsing --- ios/Podfile.lock | 8 ++++---- package-lock.json | 8 ++++---- package.json | 2 +- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 2ec4f671c529..5adf6fc47cd6 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -1836,7 +1836,7 @@ PODS: - RNGoogleSignin (10.0.1): - GoogleSignIn (~> 7.0) - React-Core - - RNLiveMarkdown (0.1.53): + - RNLiveMarkdown (0.1.61): - glog - hermes-engine - RCT-Folly (= 2022.05.16.00) @@ -1854,9 +1854,9 @@ PODS: - React-utils - ReactCommon/turbomodule/bridging - ReactCommon/turbomodule/core - - RNLiveMarkdown/common (= 0.1.53) + - RNLiveMarkdown/common (= 0.1.61) - Yoga - - RNLiveMarkdown/common (0.1.53): + - RNLiveMarkdown/common (0.1.61): - glog - hermes-engine - RCT-Folly (= 2022.05.16.00) @@ -2565,7 +2565,7 @@ SPEC CHECKSUMS: RNFS: 4ac0f0ea233904cb798630b3c077808c06931688 RNGestureHandler: 1190c218cdaaf029ee1437076a3fbbc3297d89fb RNGoogleSignin: ccaa4a81582cf713eea562c5dd9dc1961a715fd0 - RNLiveMarkdown: e49132a5e1b6e40fa4485f13f5d9846ae4936a93 + RNLiveMarkdown: feecddf153470be3d8b1207970cd51df19be6778 RNLocalize: d4b8af4e442d4bcca54e68fc687a2129b4d71a81 rnmapbox-maps: 3e273e0e867a079ec33df9ee33bb0482434b897d RNPermissions: 8990fc2c10da3640938e6db1647cb6416095b729 diff --git a/package-lock.json b/package-lock.json index f6dd8c79bff2..ea21355ea132 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,7 @@ "@babel/plugin-proposal-private-methods": "^7.18.6", "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@dotlottie/react-player": "^1.6.3", - "@expensify/react-native-live-markdown": "0.1.53", + "@expensify/react-native-live-markdown": "0.1.61", "@expo/metro-runtime": "~3.1.1", "@formatjs/intl-datetimeformat": "^6.10.0", "@formatjs/intl-listformat": "^7.2.2", @@ -3570,9 +3570,9 @@ } }, "node_modules/@expensify/react-native-live-markdown": { - "version": "0.1.53", - "resolved": "https://registry.npmjs.org/@expensify/react-native-live-markdown/-/react-native-live-markdown-0.1.53.tgz", - "integrity": "sha512-E4nn3v2zz+0C9eLJfqOeJFebDHovvrNiSEgSbe3thFVgV25lTfPEJiuIXP1IT/zwzp0UadhDNhUGOV3m0ISNkA==", + "version": "0.1.61", + "resolved": "https://registry.npmjs.org/@expensify/react-native-live-markdown/-/react-native-live-markdown-0.1.61.tgz", + "integrity": "sha512-WGLN20P1OFkICtdjZYdMS6xFKUHDhdBETtIY9ReBTH43nZP1HiXWCivSz9+TewG/bZmxC95PmUaLwhwJ7sk1xQ==", "engines": { "node": ">= 18.0.0" }, diff --git a/package.json b/package.json index df95665c0b34..c39b6c7a2d26 100644 --- a/package.json +++ b/package.json @@ -64,7 +64,7 @@ "@babel/plugin-proposal-private-methods": "^7.18.6", "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@dotlottie/react-player": "^1.6.3", - "@expensify/react-native-live-markdown": "0.1.53", + "@expensify/react-native-live-markdown": "0.1.61", "@expo/metro-runtime": "~3.1.1", "@formatjs/intl-datetimeformat": "^6.10.0", "@formatjs/intl-listformat": "^7.2.2", From 326ef862cfbb654d7cf3d438b46ddf63264cb6cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= Date: Mon, 15 Apr 2024 17:39:28 +0200 Subject: [PATCH 08/14] Change text input width updating --- src/components/Composer/index.tsx | 24 ++++-------------------- 1 file changed, 4 insertions(+), 20 deletions(-) diff --git a/src/components/Composer/index.tsx b/src/components/Composer/index.tsx index 80aed2cb3e4f..a8737fdac47a 100755 --- a/src/components/Composer/index.tsx +++ b/src/components/Composer/index.tsx @@ -14,7 +14,6 @@ import useMarkdownStyle from '@hooks/useMarkdownStyle'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; -import useWindowDimensions from '@hooks/useWindowDimensions'; import * as Browser from '@libs/Browser'; import * as ComposerUtils from '@libs/ComposerUtils'; import * as FileUtils from '@libs/fileDownload/FileUtils'; @@ -57,7 +56,6 @@ function Composer( style, shouldClear = false, autoFocus = false, - isFullComposerAvailable = false, shouldCalculateCaretPosition = false, isDisabled = false, onClear = () => {}, @@ -80,7 +78,6 @@ function Composer( const styles = useThemeStyles(); const markdownStyle = useMarkdownStyle(value); const StyleUtils = useStyleUtils(); - const {windowWidth} = useWindowDimensions(); const textRef = useRef(null); const textInput = useRef(null); const [selection, setSelection] = useState< @@ -230,22 +227,6 @@ function Composer( [onPasteFile, checkComposerVisibility], ); - /** - * Check the current text input width and update the state with the new width. - */ - const updateTextInputWidth = useCallback(() => { - if (!textInput.current) { - return; - } - const computedStyle = window.getComputedStyle(textInput.current); - setTextInputWidth(computedStyle.width); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [value, maxLines, isFullComposerAvailable, setIsFullComposerAvailable, windowWidth]); - - useEffect(() => { - updateTextInputWidth(); - }, [updateTextInputWidth]); - useEffect(() => { if (!textInput.current) { return; @@ -361,7 +342,10 @@ function Composer( /* eslint-disable-next-line react/jsx-props-no-spreading */ {...props} onSelectionChange={addCursorPositionToSelectionChange} - onContentSizeChange={(e) => ComposerUtils.updateNumberOfLines({maxLines, isComposerFullSize, isDisabled, setIsFullComposerAvailable}, e, styles)} + onContentSizeChange={(e) => { + setTextInputWidth(`${e.nativeEvent.contentSize.width}px`); + ComposerUtils.updateNumberOfLines({maxLines, isComposerFullSize, isDisabled, setIsFullComposerAvailable}, e, styles); + }} disabled={isDisabled} onKeyPress={handleKeyPress} onFocus={(e) => { From 7a13ae3e44fc50e05432badaf9b3db0025275ce3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= Date: Wed, 17 Apr 2024 16:01:32 +0200 Subject: [PATCH 09/14] Change caret position styles --- src/components/Composer/index.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/components/Composer/index.tsx b/src/components/Composer/index.tsx index a8737fdac47a..59f7333433bb 100755 --- a/src/components/Composer/index.tsx +++ b/src/components/Composer/index.tsx @@ -289,13 +289,7 @@ function Composer( opacity: 0, }} > - + {`${valueBeforeCaret} `} Date: Mon, 22 Apr 2024 14:05:47 +0200 Subject: [PATCH 10/14] Remove unused code --- src/ONYXKEYS.ts | 2 -- src/libs/actions/Report.ts | 12 ------------ 2 files changed, 14 deletions(-) diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts index 7c9247bcdbd7..622ab31a6300 100755 --- a/src/ONYXKEYS.ts +++ b/src/ONYXKEYS.ts @@ -336,7 +336,6 @@ const ONYXKEYS = { REPORT_ACTIONS_DRAFTS: 'reportActionsDrafts_', REPORT_ACTIONS_REACTIONS: 'reportActionsReactions_', REPORT_DRAFT_COMMENT: 'reportDraftComment_', - REPORT_DRAFT_COMMENT_NUMBER_OF_LINES: 'reportDraftCommentNumberOfLines_', REPORT_IS_COMPOSER_FULL_SIZE: 'reportIsComposerFullSize_', REPORT_USER_IS_TYPING: 'reportUserIsTyping_', REPORT_USER_IS_LEAVING_ROOM: 'reportUserIsLeavingRoom_', @@ -539,7 +538,6 @@ type OnyxCollectionValuesMapping = { [ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS]: OnyxTypes.ReportActionsDrafts; [ONYXKEYS.COLLECTION.REPORT_ACTIONS_REACTIONS]: OnyxTypes.ReportActionReactions; [ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT]: string; - [ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT_NUMBER_OF_LINES]: number; [ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE]: boolean; [ONYXKEYS.COLLECTION.REPORT_USER_IS_TYPING]: OnyxTypes.ReportUserIsTyping; [ONYXKEYS.COLLECTION.REPORT_USER_IS_LEAVING_ROOM]: boolean; diff --git a/src/libs/actions/Report.ts b/src/libs/actions/Report.ts index 41079d20a982..4f6c010dabb8 100644 --- a/src/libs/actions/Report.ts +++ b/src/libs/actions/Report.ts @@ -1109,11 +1109,6 @@ function saveReportDraftComment(reportID: string, comment: string | null) { Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`, prepareDraftComment(comment)); } -/** Saves the number of lines for the comment */ -function saveReportCommentNumberOfLines(reportID: string, numberOfLines: number) { - Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT_NUMBER_OF_LINES}${reportID}`, numberOfLines); -} - /** Broadcasts whether or not a user is typing on a report over the report's private pusher channel. */ function broadcastUserIsTyping(reportID: string) { const privateReportChannelName = getReportChannelName(reportID); @@ -1440,11 +1435,6 @@ function saveReportActionDraft(reportID: string, reportAction: ReportAction, dra Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${originalReportID}`, {[reportAction.reportActionID]: {message: draftMessage}}); } -/** Saves the number of lines for the report action draft */ -function saveReportActionDraftNumberOfLines(reportID: string, reportActionID: string, numberOfLines: number) { - Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT_NUMBER_OF_LINES}${reportID}_${reportActionID}`, numberOfLines); -} - function updateNotificationPreference( reportID: string, previousValue: NotificationPreference | undefined, @@ -3263,7 +3253,6 @@ export { unsubscribeFromReportChannel, unsubscribeFromLeavingRoomReportChannel, saveReportDraftComment, - saveReportCommentNumberOfLines, broadcastUserIsTyping, broadcastUserIsLeavingRoom, togglePinnedState, @@ -3271,7 +3260,6 @@ export { handleUserDeletedLinksInHtml, deleteReportActionDraft, saveReportActionDraft, - saveReportActionDraftNumberOfLines, deleteReportComment, navigateToConciergeChat, addPolicyReport, From 0b6c1d61e1fa9fdc23574ce646f551fbaa476357 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= Date: Mon, 22 Apr 2024 18:18:25 +0200 Subject: [PATCH 11/14] Remove numberOfLines calculations and fix composer padding --- src/CONST.ts | 5 ++--- src/components/Composer/index.native.tsx | 4 ++-- src/components/Composer/index.tsx | 5 +++-- .../getNumberOfLines/index.native.ts | 8 -------- .../ComposerUtils/getNumberOfLines/index.ts | 12 ----------- .../ComposerUtils/getNumberOfLines/types.ts | 3 --- src/libs/ComposerUtils/index.ts | 4 +--- .../updateIsFullComposerAvailable.ts | 12 +++++++++-- .../updateNumberOfLines/index.ts | 20 ------------------- .../updateNumberOfLines/types.ts | 7 ------- src/styles/utils/index.ts | 10 ++-------- 11 files changed, 20 insertions(+), 70 deletions(-) delete mode 100644 src/libs/ComposerUtils/getNumberOfLines/index.native.ts delete mode 100644 src/libs/ComposerUtils/getNumberOfLines/index.ts delete mode 100644 src/libs/ComposerUtils/getNumberOfLines/types.ts delete mode 100644 src/libs/ComposerUtils/updateNumberOfLines/index.ts delete mode 100644 src/libs/ComposerUtils/updateNumberOfLines/types.ts diff --git a/src/CONST.ts b/src/CONST.ts index ab5a67274955..bf009a48a77c 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -848,9 +848,8 @@ const CONST = { MAX_LINES: 16, MAX_LINES_SMALL_SCREEN: 6, MAX_LINES_FULL: -1, - - // The minimum number of typed lines needed to enable the full screen composer - FULL_COMPOSER_MIN_LINES: 3, + // The minimum height needed to enable the full screen composer + FULL_COMPOSER_MIN_HEIGHT: 66, }, MODAL: { MODAL_TYPE: { diff --git a/src/components/Composer/index.native.tsx b/src/components/Composer/index.native.tsx index 3abb88a6cb26..4d135cdd88e2 100644 --- a/src/components/Composer/index.native.tsx +++ b/src/components/Composer/index.native.tsx @@ -9,7 +9,7 @@ import useResetComposerFocus from '@hooks/useResetComposerFocus'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; -import * as ComposerUtils from '@libs/ComposerUtils'; +import updateIsFullComposerAvailable from '@libs/ComposerUtils/updateIsFullComposerAvailable'; import type {ComposerProps} from './types'; function Composer( @@ -74,7 +74,7 @@ function Composer( placeholderTextColor={theme.placeholderText} ref={setTextInputRef} value={value} - onContentSizeChange={(e) => ComposerUtils.updateNumberOfLines({maxLines, isComposerFullSize, isDisabled, setIsFullComposerAvailable}, e, styles)} + onContentSizeChange={(e) => updateIsFullComposerAvailable({maxLines, isComposerFullSize, isDisabled, setIsFullComposerAvailable}, e, styles, true)} rejectResponderTermination={false} smartInsertDelete={false} textAlignVertical="center" diff --git a/src/components/Composer/index.tsx b/src/components/Composer/index.tsx index 59f7333433bb..43a100cf3c90 100755 --- a/src/components/Composer/index.tsx +++ b/src/components/Composer/index.tsx @@ -15,7 +15,7 @@ import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import * as Browser from '@libs/Browser'; -import * as ComposerUtils from '@libs/ComposerUtils'; +import updateIsFullComposerAvailable from '@libs/ComposerUtils/updateIsFullComposerAvailable'; import * as FileUtils from '@libs/fileDownload/FileUtils'; import isEnterWhileComposition from '@libs/KeyboardShortcut/isEnterWhileComposition'; import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager'; @@ -311,6 +311,7 @@ function Composer( const inputStyleMemo = useMemo( () => [ StyleSheet.flatten([style, {outline: 'none'}]), + StyleUtils.getComposeTextAreaPadding(isComposerFullSize), Browser.isMobileSafari() || Browser.isSafari() ? styles.rtlTextRenderForSafari : {}, scrollStyleMemo, StyleUtils.getComposerMaxHeightStyle(maxLines, isComposerFullSize), @@ -338,7 +339,7 @@ function Composer( onSelectionChange={addCursorPositionToSelectionChange} onContentSizeChange={(e) => { setTextInputWidth(`${e.nativeEvent.contentSize.width}px`); - ComposerUtils.updateNumberOfLines({maxLines, isComposerFullSize, isDisabled, setIsFullComposerAvailable}, e, styles); + updateIsFullComposerAvailable({maxLines, isComposerFullSize, isDisabled, setIsFullComposerAvailable}, e, styles); }} disabled={isDisabled} onKeyPress={handleKeyPress} diff --git a/src/libs/ComposerUtils/getNumberOfLines/index.native.ts b/src/libs/ComposerUtils/getNumberOfLines/index.native.ts deleted file mode 100644 index 0cbfb6c7f517..000000000000 --- a/src/libs/ComposerUtils/getNumberOfLines/index.native.ts +++ /dev/null @@ -1,8 +0,0 @@ -import type GetNumberOfLines from './types'; - -/** - * Get the current number of lines in the composer - */ -const getNumberOfLines: GetNumberOfLines = (lineHeight, paddingTopAndBottom, scrollHeight) => Math.ceil((scrollHeight - paddingTopAndBottom) / lineHeight); - -export default getNumberOfLines; diff --git a/src/libs/ComposerUtils/getNumberOfLines/index.ts b/src/libs/ComposerUtils/getNumberOfLines/index.ts deleted file mode 100644 index e80744d41c69..000000000000 --- a/src/libs/ComposerUtils/getNumberOfLines/index.ts +++ /dev/null @@ -1,12 +0,0 @@ -import type GetNumberOfLines from './types'; - -/** - * Get the current number of lines in the composer - */ -const getNumberOfLines: GetNumberOfLines = (lineHeight, paddingTopAndBottom, scrollHeight, maxLines = 0) => { - let newNumberOfLines = Math.ceil((scrollHeight - paddingTopAndBottom) / lineHeight); - newNumberOfLines = maxLines <= 0 ? newNumberOfLines : Math.min(newNumberOfLines, maxLines); - return newNumberOfLines; -}; - -export default getNumberOfLines; diff --git a/src/libs/ComposerUtils/getNumberOfLines/types.ts b/src/libs/ComposerUtils/getNumberOfLines/types.ts deleted file mode 100644 index 67bb790f726b..000000000000 --- a/src/libs/ComposerUtils/getNumberOfLines/types.ts +++ /dev/null @@ -1,3 +0,0 @@ -type GetNumberOfLines = (lineHeight: number, paddingTopAndBottom: number, scrollHeight: number, maxLines?: number) => number; - -export default GetNumberOfLines; diff --git a/src/libs/ComposerUtils/index.ts b/src/libs/ComposerUtils/index.ts index f2e940abeb73..04d857a8faeb 100644 --- a/src/libs/ComposerUtils/index.ts +++ b/src/libs/ComposerUtils/index.ts @@ -1,6 +1,4 @@ import * as DeviceCapabilities from '@libs/DeviceCapabilities'; -import getNumberOfLines from './getNumberOfLines'; -import updateNumberOfLines from './updateNumberOfLines'; type Selection = { start: number; @@ -49,5 +47,5 @@ function findCommonSuffixLength(str1: string, str2: string, cursorPosition: numb return commonSuffixLength; } -export {getNumberOfLines, updateNumberOfLines, insertText, canSkipTriggerHotkeys, insertWhiteSpaceAtIndex, findCommonSuffixLength}; +export {insertText, canSkipTriggerHotkeys, insertWhiteSpaceAtIndex, findCommonSuffixLength}; export type {Selection}; diff --git a/src/libs/ComposerUtils/updateIsFullComposerAvailable.ts b/src/libs/ComposerUtils/updateIsFullComposerAvailable.ts index 580908fc3805..c10635f1c491 100644 --- a/src/libs/ComposerUtils/updateIsFullComposerAvailable.ts +++ b/src/libs/ComposerUtils/updateIsFullComposerAvailable.ts @@ -1,12 +1,20 @@ +import type {NativeSyntheticEvent, TextInputContentSizeChangeEventData} from 'react-native'; import type {ComposerProps} from '@components/Composer/types'; +import type {ThemeStyles} from '@styles/index'; import CONST from '@src/CONST'; /** * Update isFullComposerAvailable if needed * @param numberOfLines The number of lines in the text input */ -function updateIsFullComposerAvailable(props: ComposerProps, numberOfLines: number) { - const isFullComposerAvailable = numberOfLines >= CONST.COMPOSER.FULL_COMPOSER_MIN_LINES; +function updateIsFullComposerAvailable(props: ComposerProps, event: NativeSyntheticEvent, styles: ThemeStyles, shouldIncludePadding = false) { + const paddingTopAndBottom = shouldIncludePadding ? styles.textInputComposeSpacing.paddingVertical * 2 : 0; + const inputHeight = event?.nativeEvent?.contentSize?.height ?? null; + if (!inputHeight) { + return; + } + const totalHeight = inputHeight + paddingTopAndBottom; + const isFullComposerAvailable = totalHeight >= CONST.COMPOSER.FULL_COMPOSER_MIN_HEIGHT; if (isFullComposerAvailable !== props.isFullComposerAvailable) { props.setIsFullComposerAvailable?.(isFullComposerAvailable); } diff --git a/src/libs/ComposerUtils/updateNumberOfLines/index.ts b/src/libs/ComposerUtils/updateNumberOfLines/index.ts deleted file mode 100644 index 5a7676d8bfbd..000000000000 --- a/src/libs/ComposerUtils/updateNumberOfLines/index.ts +++ /dev/null @@ -1,20 +0,0 @@ -import getNumberOfLines from '@libs/ComposerUtils/getNumberOfLines'; -import updateIsFullComposerAvailable from '@libs/ComposerUtils/updateIsFullComposerAvailable'; -import type UpdateNumberOfLines from './types'; - -/** - * Check the current scrollHeight of the textarea (minus any padding) and - * divide by line height to get the total number of rows for the textarea. - */ -const updateNumberOfLines: UpdateNumberOfLines = (props, event, styles) => { - const lineHeight = styles.textInputCompose.lineHeight ?? 0; - const paddingTopAndBottom = styles.textInputComposeSpacing.paddingVertical * 2; - const inputHeight = event?.nativeEvent?.contentSize?.height ?? null; - if (!inputHeight) { - return; - } - const numberOfLines = getNumberOfLines(lineHeight, paddingTopAndBottom, inputHeight); - updateIsFullComposerAvailable(props, numberOfLines); -}; - -export default updateNumberOfLines; diff --git a/src/libs/ComposerUtils/updateNumberOfLines/types.ts b/src/libs/ComposerUtils/updateNumberOfLines/types.ts deleted file mode 100644 index 06daee56a707..000000000000 --- a/src/libs/ComposerUtils/updateNumberOfLines/types.ts +++ /dev/null @@ -1,7 +0,0 @@ -import type {NativeSyntheticEvent, TextInputContentSizeChangeEventData} from 'react-native'; -import type {ComposerProps} from '@components/Composer/types'; -import type {ThemeStyles} from '@styles/index'; - -type UpdateNumberOfLines = (props: ComposerProps, event: NativeSyntheticEvent, styles: ThemeStyles) => void; - -export default UpdateNumberOfLines; diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index e9efc84e8807..760f43064a0e 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -940,17 +940,11 @@ function getEmojiPickerListHeight(isRenderingShortcutRow: boolean, windowHeight: /** * Returns padding vertical based on number of lines */ -function getComposeTextAreaPadding(numberOfLines: number, isComposerFullSize: boolean): TextStyle { +function getComposeTextAreaPadding(isComposerFullSize: boolean): TextStyle { let paddingValue = 5; // Issue #26222: If isComposerFullSize paddingValue will always be 5 to prevent padding jumps when adding multiple lines. if (!isComposerFullSize) { - if (numberOfLines === 1) { - paddingValue = 9; - } - // In case numberOfLines = 3, there will be a Expand Icon appearing at the top left, so it has to be recalculated so that the textArea can be full height - else if (numberOfLines === 3) { - paddingValue = 8; - } + paddingValue = 8; } return { paddingTop: paddingValue, From bd31b1e4de8a0c0e243c1feeb5a0c82bda77fb63 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= Date: Thu, 25 Apr 2024 10:32:48 +0200 Subject: [PATCH 12/14] Fix Podfile --- ios/Podfile.lock | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ios/Podfile.lock b/ios/Podfile.lock index ed387a8d522f..b59f4ef01158 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -2558,7 +2558,7 @@ SPEC CHECKSUMS: SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17 Turf: 13d1a92d969ca0311bbc26e8356cca178ce95da2 VisionCamera: 3033e0dd5272d46e97bcb406adea4ae0e6907abf - Yoga: 64cd2a583ead952b0315d5135bf39e053ae9be70 + Yoga: 1b901a6d6eeba4e8a2e8f308f708691cdb5db312 PODFILE CHECKSUM: a25a81f2b50270f0c0bd0aff2e2ebe4d0b4ec06d From c6d37397d36ab75dea2ebdbae28ca745a4d97a22 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= Date: Thu, 25 Apr 2024 12:44:06 +0200 Subject: [PATCH 13/14] Change FULL_COMPOSER_MIN_HEIGHT variable --- src/CONST.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/CONST.ts b/src/CONST.ts index 7e0b3281ef74..0942a55b5f5e 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -850,7 +850,7 @@ const CONST = { MAX_LINES_SMALL_SCREEN: 6, MAX_LINES_FULL: -1, // The minimum height needed to enable the full screen composer - FULL_COMPOSER_MIN_HEIGHT: 66, + FULL_COMPOSER_MIN_HEIGHT: 60, }, MODAL: { MODAL_TYPE: { From f11aa539c5f8d9f589c9e51e46d3d6d82c37d2c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= Date: Fri, 26 Apr 2024 14:02:38 +0200 Subject: [PATCH 14/14] Fix cursor positioning on focus --- src/components/Composer/index.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/Composer/index.tsx b/src/components/Composer/index.tsx index 43a100cf3c90..4bc54d13b056 100755 --- a/src/components/Composer/index.tsx +++ b/src/components/Composer/index.tsx @@ -118,11 +118,8 @@ function Composer( * Adds the cursor position to the selection change event. */ const addCursorPositionToSelectionChange = (event: NativeSyntheticEvent) => { - if (!isRendered) { - return; - } const webEvent = event as BaseSyntheticEvent; - if (shouldCalculateCaretPosition) { + if (shouldCalculateCaretPosition && isRendered) { // we do flushSync to make sure that the valueBeforeCaret is updated before we calculate the caret position to receive a proper position otherwise we will calculate position for the previous state flushSync(() => { setValueBeforeCaret(webEvent.target.value.slice(0, webEvent.nativeEvent.selection.start));