From dc6ce8a0e0a253b3bb6d3791aeee2676ee7687af Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Tue, 6 Feb 2024 08:54:30 +0700 Subject: [PATCH 1/7] fix composer is not shrinked --- src/components/Composer/index.tsx | 5 +++++ src/components/Composer/types.ts | 3 +++ .../ComposerWithSuggestions/ComposerWithSuggestions.js | 2 ++ .../home/report/ReportActionCompose/ReportActionCompose.js | 1 + 4 files changed, 11 insertions(+) diff --git a/src/components/Composer/index.tsx b/src/components/Composer/index.tsx index 516de55c73ba..6c90da26ee35 100755 --- a/src/components/Composer/index.tsx +++ b/src/components/Composer/index.tsx @@ -19,6 +19,7 @@ import updateIsFullComposerAvailable from '@libs/ComposerUtils/updateIsFullCompo import * as FileUtils from '@libs/fileDownload/FileUtils'; import isEnterWhileComposition from '@libs/KeyboardShortcut/isEnterWhileComposition'; import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager'; +import * as ReportUtils from '@libs/ReportUtils'; import CONST from '@src/CONST'; import type {ComposerProps} from './types'; @@ -70,6 +71,7 @@ function Composer( start: 0, end: 0, }, + resetFullComposerSize = () => {}, isReportActionCompose = false, isComposerFullSize = false, shouldContainScroll = false, @@ -248,6 +250,9 @@ function Composer( onNumberOfLinesChange(generalNumberOfLines); updateIsFullComposerAvailable({isFullComposerAvailable, setIsFullComposerAvailable}, generalNumberOfLines); setNumberOfLines(generalNumberOfLines); + if (generalNumberOfLines === 1 && ReportUtils.getCommentLength(value ?? '') === 0) { + resetFullComposerSize(); + } textInput.current.style.height = 'auto'; // eslint-disable-next-line react-hooks/exhaustive-deps }, [value, maxLines, numberOfLinesProp, onNumberOfLinesChange, isFullComposerAvailable, setIsFullComposerAvailable, windowWidth]); diff --git a/src/components/Composer/types.ts b/src/components/Composer/types.ts index d8d88970ea78..65e5da963dcc 100644 --- a/src/components/Composer/types.ts +++ b/src/components/Composer/types.ts @@ -80,6 +80,9 @@ type ComposerProps = { onBlur?: (event: NativeSyntheticEvent) => void; + /** Function to reset the full composer size */ + resetFullComposerSize?: () => void; + /** Should make the input only scroll inside the element avoid scroll out to parent */ shouldContainScroll?: boolean; }; diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js index 4b5a54a6c428..ea6238a70d53 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js @@ -100,6 +100,7 @@ function ComposerWithSuggestions({ listHeight, isScrollLikelyLayoutTriggered, raiseIsScrollLikelyLayoutTriggered, + resetFullComposerSize, // Refs suggestionsRef, animatedRef, @@ -624,6 +625,7 @@ function ComposerWithSuggestions({ onLayout={onLayout} onScroll={hideSuggestionMenu} shouldContainScroll={Browser.isMobileSafari()} + resetFullComposerSize={resetFullComposerSize} /> diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js index cc07716209a2..fbf12ab36cde 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js @@ -444,6 +444,7 @@ function ReportActionCompose({ measureParentContainer={measureContainer} listHeight={listHeight} onValueChange={validateCommentMaxLength} + resetFullComposerSize={resetFullComposerSize} /> { From 3d76e1cc6c177cec34752c27616f4700e3f13012 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Tue, 6 Feb 2024 10:44:44 +0700 Subject: [PATCH 2/7] fix native device --- src/components/Composer/index.native.tsx | 5 ++++- src/libs/ComposerUtils/updateNumberOfLines/index.native.ts | 4 ++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/Composer/index.native.tsx b/src/components/Composer/index.native.tsx index a3c037211d4c..8a0a26bd208f 100644 --- a/src/components/Composer/index.native.tsx +++ b/src/components/Composer/index.native.tsx @@ -27,6 +27,7 @@ function Composer( // user can read new chats without the keyboard in the way of the view. // On Android the selection prop is required on the TextInput but this prop has issues on IOS selection, + resetFullComposerSize = () => {}, ...props }: ComposerProps, ref: ForwardedRef, @@ -73,7 +74,9 @@ function Composer( autoComplete="off" placeholderTextColor={theme.placeholderText} ref={setTextInputRef} - onContentSizeChange={(e) => ComposerUtils.updateNumberOfLines({maxLines, isComposerFullSize, isDisabled, setIsFullComposerAvailable}, e, styles)} + onContentSizeChange={(e) => + ComposerUtils.updateNumberOfLines({maxLines, isComposerFullSize, isDisabled, setIsFullComposerAvailable, resetFullComposerSize, value: props.value}, e, styles) + } rejectResponderTermination={false} smartInsertDelete={false} textAlignVertical="center" diff --git a/src/libs/ComposerUtils/updateNumberOfLines/index.native.ts b/src/libs/ComposerUtils/updateNumberOfLines/index.native.ts index 5a7676d8bfbd..10f85fa4ed37 100644 --- a/src/libs/ComposerUtils/updateNumberOfLines/index.native.ts +++ b/src/libs/ComposerUtils/updateNumberOfLines/index.native.ts @@ -1,5 +1,6 @@ import getNumberOfLines from '@libs/ComposerUtils/getNumberOfLines'; import updateIsFullComposerAvailable from '@libs/ComposerUtils/updateIsFullComposerAvailable'; +import * as ReportUtils from '@libs/ReportUtils'; import type UpdateNumberOfLines from './types'; /** @@ -14,6 +15,9 @@ const updateNumberOfLines: UpdateNumberOfLines = (props, event, styles) => { return; } const numberOfLines = getNumberOfLines(lineHeight, paddingTopAndBottom, inputHeight); + if (numberOfLines === 1 && ReportUtils.getCommentLength(props.value ?? '') === 0) { + props.resetFullComposerSize && props.resetFullComposerSize(); + } updateIsFullComposerAvailable(props, numberOfLines); }; From dd02378a03873f5c0d8174809a8a476281f7a8a3 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Tue, 6 Feb 2024 11:00:22 +0700 Subject: [PATCH 3/7] fix lint issue --- src/libs/ComposerUtils/updateNumberOfLines/index.native.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/ComposerUtils/updateNumberOfLines/index.native.ts b/src/libs/ComposerUtils/updateNumberOfLines/index.native.ts index 10f85fa4ed37..60b4c57de7af 100644 --- a/src/libs/ComposerUtils/updateNumberOfLines/index.native.ts +++ b/src/libs/ComposerUtils/updateNumberOfLines/index.native.ts @@ -16,7 +16,7 @@ const updateNumberOfLines: UpdateNumberOfLines = (props, event, styles) => { } const numberOfLines = getNumberOfLines(lineHeight, paddingTopAndBottom, inputHeight); if (numberOfLines === 1 && ReportUtils.getCommentLength(props.value ?? '') === 0) { - props.resetFullComposerSize && props.resetFullComposerSize(); + props.resetFullComposerSize?.(); } updateIsFullComposerAvailable(props, numberOfLines); }; From 43733bff4020c162c19d98cbb5e9cec4efafad57 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Wed, 7 Feb 2024 18:28:04 +0700 Subject: [PATCH 4/7] fix native --- src/libs/ComposerUtils/updateNumberOfLines/index.native.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/ComposerUtils/updateNumberOfLines/index.native.ts b/src/libs/ComposerUtils/updateNumberOfLines/index.native.ts index 60b4c57de7af..cd39e349f002 100644 --- a/src/libs/ComposerUtils/updateNumberOfLines/index.native.ts +++ b/src/libs/ComposerUtils/updateNumberOfLines/index.native.ts @@ -15,7 +15,7 @@ const updateNumberOfLines: UpdateNumberOfLines = (props, event, styles) => { return; } const numberOfLines = getNumberOfLines(lineHeight, paddingTopAndBottom, inputHeight); - if (numberOfLines === 1 && ReportUtils.getCommentLength(props.value ?? '') === 0) { + if (numberOfLines === 1) { props.resetFullComposerSize?.(); } updateIsFullComposerAvailable(props, numberOfLines); From 59302b6a109cfcc3a538af1a67b6cfb78eb42ffb Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Mon, 19 Feb 2024 16:57:18 +0700 Subject: [PATCH 5/7] fix shrink composer once value is cleared --- src/components/Composer/index.native.tsx | 5 +---- src/components/Composer/index.tsx | 5 ----- src/components/Composer/types.ts | 3 --- .../ComposerUtils/updateNumberOfLines/index.native.ts | 1 - .../ComposerWithSuggestions/ComposerWithSuggestions.js | 1 - .../report/ReportActionCompose/ReportActionCompose.js | 8 ++++++-- 6 files changed, 7 insertions(+), 16 deletions(-) diff --git a/src/components/Composer/index.native.tsx b/src/components/Composer/index.native.tsx index 8a0a26bd208f..a3c037211d4c 100644 --- a/src/components/Composer/index.native.tsx +++ b/src/components/Composer/index.native.tsx @@ -27,7 +27,6 @@ function Composer( // user can read new chats without the keyboard in the way of the view. // On Android the selection prop is required on the TextInput but this prop has issues on IOS selection, - resetFullComposerSize = () => {}, ...props }: ComposerProps, ref: ForwardedRef, @@ -74,9 +73,7 @@ function Composer( autoComplete="off" placeholderTextColor={theme.placeholderText} ref={setTextInputRef} - onContentSizeChange={(e) => - ComposerUtils.updateNumberOfLines({maxLines, isComposerFullSize, isDisabled, setIsFullComposerAvailable, resetFullComposerSize, value: props.value}, e, styles) - } + onContentSizeChange={(e) => ComposerUtils.updateNumberOfLines({maxLines, isComposerFullSize, isDisabled, setIsFullComposerAvailable}, e, styles)} rejectResponderTermination={false} smartInsertDelete={false} textAlignVertical="center" diff --git a/src/components/Composer/index.tsx b/src/components/Composer/index.tsx index 6c90da26ee35..516de55c73ba 100755 --- a/src/components/Composer/index.tsx +++ b/src/components/Composer/index.tsx @@ -19,7 +19,6 @@ import updateIsFullComposerAvailable from '@libs/ComposerUtils/updateIsFullCompo import * as FileUtils from '@libs/fileDownload/FileUtils'; import isEnterWhileComposition from '@libs/KeyboardShortcut/isEnterWhileComposition'; import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager'; -import * as ReportUtils from '@libs/ReportUtils'; import CONST from '@src/CONST'; import type {ComposerProps} from './types'; @@ -71,7 +70,6 @@ function Composer( start: 0, end: 0, }, - resetFullComposerSize = () => {}, isReportActionCompose = false, isComposerFullSize = false, shouldContainScroll = false, @@ -250,9 +248,6 @@ function Composer( onNumberOfLinesChange(generalNumberOfLines); updateIsFullComposerAvailable({isFullComposerAvailable, setIsFullComposerAvailable}, generalNumberOfLines); setNumberOfLines(generalNumberOfLines); - if (generalNumberOfLines === 1 && ReportUtils.getCommentLength(value ?? '') === 0) { - resetFullComposerSize(); - } textInput.current.style.height = 'auto'; // eslint-disable-next-line react-hooks/exhaustive-deps }, [value, maxLines, numberOfLinesProp, onNumberOfLinesChange, isFullComposerAvailable, setIsFullComposerAvailable, windowWidth]); diff --git a/src/components/Composer/types.ts b/src/components/Composer/types.ts index 65e5da963dcc..d8d88970ea78 100644 --- a/src/components/Composer/types.ts +++ b/src/components/Composer/types.ts @@ -80,9 +80,6 @@ type ComposerProps = { onBlur?: (event: NativeSyntheticEvent) => void; - /** Function to reset the full composer size */ - resetFullComposerSize?: () => void; - /** Should make the input only scroll inside the element avoid scroll out to parent */ shouldContainScroll?: boolean; }; diff --git a/src/libs/ComposerUtils/updateNumberOfLines/index.native.ts b/src/libs/ComposerUtils/updateNumberOfLines/index.native.ts index cd39e349f002..198bcc4ae6ef 100644 --- a/src/libs/ComposerUtils/updateNumberOfLines/index.native.ts +++ b/src/libs/ComposerUtils/updateNumberOfLines/index.native.ts @@ -1,6 +1,5 @@ import getNumberOfLines from '@libs/ComposerUtils/getNumberOfLines'; import updateIsFullComposerAvailable from '@libs/ComposerUtils/updateIsFullComposerAvailable'; -import * as ReportUtils from '@libs/ReportUtils'; import type UpdateNumberOfLines from './types'; /** diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js index 0b9869982709..eea758aee3f8 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js @@ -625,7 +625,6 @@ function ComposerWithSuggestions({ onLayout={onLayout} onScroll={hideSuggestionMenu} shouldContainScroll={Browser.isMobileSafari()} - resetFullComposerSize={resetFullComposerSize} /> diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js index 93b10f923a11..686790e4da55 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js @@ -446,8 +446,12 @@ function ReportActionCompose({ onBlur={onBlur} measureParentContainer={measureContainer} listHeight={listHeight} - onValueChange={validateCommentMaxLength} - resetFullComposerSize={resetFullComposerSize} + onValueChange={(value) => { + if (value.length === 0) { + ReportUtils.setIsComposerFullSize(reportID, false); + } + validateCommentMaxLength(value); + }} /> { From 8f6d59760b74a1f9b9f1b1b24eab82e8c92c2bc1 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Mon, 19 Feb 2024 16:59:24 +0700 Subject: [PATCH 6/7] fix remove redundant code --- src/libs/ComposerUtils/updateNumberOfLines/index.native.ts | 3 --- .../ComposerWithSuggestions/ComposerWithSuggestions.js | 1 - 2 files changed, 4 deletions(-) diff --git a/src/libs/ComposerUtils/updateNumberOfLines/index.native.ts b/src/libs/ComposerUtils/updateNumberOfLines/index.native.ts index 198bcc4ae6ef..5a7676d8bfbd 100644 --- a/src/libs/ComposerUtils/updateNumberOfLines/index.native.ts +++ b/src/libs/ComposerUtils/updateNumberOfLines/index.native.ts @@ -14,9 +14,6 @@ const updateNumberOfLines: UpdateNumberOfLines = (props, event, styles) => { return; } const numberOfLines = getNumberOfLines(lineHeight, paddingTopAndBottom, inputHeight); - if (numberOfLines === 1) { - props.resetFullComposerSize?.(); - } updateIsFullComposerAvailable(props, numberOfLines); }; diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js index eea758aee3f8..12e31495af2b 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js @@ -100,7 +100,6 @@ function ComposerWithSuggestions({ listHeight, isScrollLikelyLayoutTriggered, raiseIsScrollLikelyLayoutTriggered, - resetFullComposerSize, // Refs suggestionsRef, animatedRef, From cbc6cf6cc4ef34fc3ca83e4ae9872d5a095e361a Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Wed, 21 Feb 2024 21:11:05 +0700 Subject: [PATCH 7/7] fix only shrink if the composer is expanding --- .../home/report/ReportActionCompose/ReportActionCompose.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js index 686790e4da55..4bbf3d393213 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js @@ -447,8 +447,8 @@ function ReportActionCompose({ measureParentContainer={measureContainer} listHeight={listHeight} onValueChange={(value) => { - if (value.length === 0) { - ReportUtils.setIsComposerFullSize(reportID, false); + if (value.length === 0 && isComposerFullSize) { + Report.setIsComposerFullSize(reportID, false); } validateCommentMaxLength(value); }}