From aa9c074b5be5c5803b9a5f9b742e3ba8384285a8 Mon Sep 17 00:00:00 2001 From: Hezekiel Tamire Date: Fri, 8 Sep 2023 14:04:27 +0300 Subject: [PATCH 1/6] use isCommentEmpty flag to hide expand Icon of composer --- .../ReportActionCompose/AttachmentPickerWithMenuItems.js | 8 ++++++-- .../report/ReportActionCompose/ReportActionCompose.js | 3 ++- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js index 5864b9b05023..effe19d6ea58 100644 --- a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js +++ b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js @@ -43,6 +43,9 @@ const propTypes = { /** Whether or not the full size composer is available */ isFullComposerAvailable: PropTypes.bool.isRequired, + /** Whether or not the text input is empty */ + isCommentEmpty: PropTypes.bool.isRequired, + /** Whether or not the composer is full size */ isComposerFullSize: PropTypes.bool.isRequired, @@ -101,6 +104,7 @@ function AttachmentPickerWithMenuItems({ displayFileInModal, isFullComposerAvailable, isComposerFullSize, + isCommentEmpty, updateShouldShowSuggestionMenuToFalse, reportID, isBlockedFromConcierge, @@ -193,7 +197,7 @@ function AttachmentPickerWithMenuItems({ return ( <> - {isComposerFullSize && ( + {isComposerFullSize && !isCommentEmpty && ( { @@ -212,7 +216,7 @@ function AttachmentPickerWithMenuItems({ )} - {!isComposerFullSize && isFullComposerAvailable && ( + {!isComposerFullSize && isFullComposerAvailable && !isCommentEmpty && ( { diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js index c7517977aa27..aaf0e1de0eae 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js @@ -296,7 +296,7 @@ function ReportActionCompose({ // eslint-disable-next-line react-hooks/exhaustive-deps [], ); - + const reportRecipientAcountIDs = ReportUtils.getReportRecipientAccountIDs(report, currentUserPersonalDetails.accountID); const reportRecipient = personalDetails[reportRecipientAcountIDs[0]]; const shouldUseFocusedColor = !isBlockedFromConcierge && !disabled && isFocused; @@ -340,6 +340,7 @@ function ReportActionCompose({ reportParticipantIDs={reportParticipantIDs} isFullComposerAvailable={isFullComposerAvailable} isComposerFullSize={isComposerFullSize} + isCommentEmpty={isCommentEmpty} updateShouldShowSuggestionMenuToFalse={updateShouldShowSuggestionMenuToFalse} isBlockedFromConcierge={isBlockedFromConcierge} disabled={disabled} From a501d5e922d042503132f90dfdb5e560b5d504e9 Mon Sep 17 00:00:00 2001 From: Hezekiel Tamire Date: Fri, 8 Sep 2023 14:05:44 +0300 Subject: [PATCH 2/6] remove indentation --- .../home/report/ReportActionCompose/ReportActionCompose.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js index aaf0e1de0eae..d4630e78f3e3 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js @@ -296,7 +296,7 @@ function ReportActionCompose({ // eslint-disable-next-line react-hooks/exhaustive-deps [], ); - + const reportRecipientAcountIDs = ReportUtils.getReportRecipientAccountIDs(report, currentUserPersonalDetails.accountID); const reportRecipient = personalDetails[reportRecipientAcountIDs[0]]; const shouldUseFocusedColor = !isBlockedFromConcierge && !disabled && isFocused; From d8adf782db2cdb039e2d922dc23231a330c4e59a Mon Sep 17 00:00:00 2001 From: Hezekiel Tamire Date: Fri, 8 Sep 2023 23:17:58 +0300 Subject: [PATCH 3/6] reset isComposerFullSize to false in SendButton --- .../ReportActionCompose/AttachmentPickerWithMenuItems.js | 8 ++------ .../report/ReportActionCompose/ReportActionCompose.js | 9 ++++++++- src/pages/home/report/ReportActionCompose/SendButton.js | 6 +++++- 3 files changed, 15 insertions(+), 8 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js index effe19d6ea58..5864b9b05023 100644 --- a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js +++ b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js @@ -43,9 +43,6 @@ const propTypes = { /** Whether or not the full size composer is available */ isFullComposerAvailable: PropTypes.bool.isRequired, - /** Whether or not the text input is empty */ - isCommentEmpty: PropTypes.bool.isRequired, - /** Whether or not the composer is full size */ isComposerFullSize: PropTypes.bool.isRequired, @@ -104,7 +101,6 @@ function AttachmentPickerWithMenuItems({ displayFileInModal, isFullComposerAvailable, isComposerFullSize, - isCommentEmpty, updateShouldShowSuggestionMenuToFalse, reportID, isBlockedFromConcierge, @@ -197,7 +193,7 @@ function AttachmentPickerWithMenuItems({ return ( <> - {isComposerFullSize && !isCommentEmpty && ( + {isComposerFullSize && ( { @@ -216,7 +212,7 @@ function AttachmentPickerWithMenuItems({ )} - {!isComposerFullSize && isFullComposerAvailable && !isCommentEmpty && ( + {!isComposerFullSize && isFullComposerAvailable && ( { diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js index d4630e78f3e3..13d7943b579d 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js @@ -285,6 +285,13 @@ function ReportActionCompose({ setIsFocused(true); }, []); + const resetFullComposerToFalse = useCallback(() => { + if (isComposerFullSize) { + Report.setIsComposerFullSize(reportID, false); + } + setIsFullComposerAvailable(false); + }, [isComposerFullSize, reportID]); + // We are returning a callback here as we want to incoke the method on unmount only useEffect( () => () => { @@ -340,7 +347,6 @@ function ReportActionCompose({ reportParticipantIDs={reportParticipantIDs} isFullComposerAvailable={isFullComposerAvailable} isComposerFullSize={isComposerFullSize} - isCommentEmpty={isCommentEmpty} updateShouldShowSuggestionMenuToFalse={updateShouldShowSuggestionMenuToFalse} isBlockedFromConcierge={isBlockedFromConcierge} disabled={disabled} @@ -401,6 +407,7 @@ function ReportActionCompose({ diff --git a/src/pages/home/report/ReportActionCompose/SendButton.js b/src/pages/home/report/ReportActionCompose/SendButton.js index 4f1dc5fff191..258a1859379d 100644 --- a/src/pages/home/report/ReportActionCompose/SendButton.js +++ b/src/pages/home/report/ReportActionCompose/SendButton.js @@ -23,11 +23,14 @@ const propTypes = { /** Sets the isCommentEmpty flag to true */ setIsCommentEmpty: PropTypes.func.isRequired, + /** Sets the isComposerFullSize to false */ + resetFullComposerToFalse: PropTypes.func.isRequired, + /** Submits the form */ submitForm: PropTypes.func.isRequired, }; -function SendButton({isDisabled: isDisabledProp, animatedRef, setIsCommentEmpty, submitForm}) { +function SendButton({isDisabled: isDisabledProp, animatedRef, setIsCommentEmpty, resetFullComposerToFalse, submitForm}) { const {translate} = useLocalize(); const Tap = Gesture.Tap() @@ -40,6 +43,7 @@ function SendButton({isDisabled: isDisabledProp, animatedRef, setIsCommentEmpty, const updates = {text: ''}; // We are setting the isCommentEmpty flag to true so the status of it will be in sync of the native text input state runOnJS(setIsCommentEmpty)(true); + runOnJS(resetFullComposerToFalse)(); updatePropsPaperWorklet(viewTag, viewName, updates); // clears native text input on the UI thread runOnJS(submitForm)(); }); From 1116ace9b1e4faac51dbc28ee510c7a30d46ae96 Mon Sep 17 00:00:00 2001 From: Hezekiel Tamire Date: Sat, 9 Sep 2023 14:23:24 +0300 Subject: [PATCH 4/6] added extra check and renamed the function to make it more descriptive --- .../report/ReportActionCompose/ReportActionCompose.js | 8 +++++--- src/pages/home/report/ReportActionCompose/SendButton.js | 8 ++++---- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js index 13d7943b579d..3ad92fa5c769 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js @@ -285,7 +285,9 @@ function ReportActionCompose({ setIsFocused(true); }, []); - const resetFullComposerToFalse = useCallback(() => { + // resets the composer to normal size when + // the send button is pressed. + const resetFullComposerSize = useCallback(() => { if (isComposerFullSize) { Report.setIsComposerFullSize(reportID, false); } @@ -345,7 +347,7 @@ function ReportActionCompose({ reportID={reportID} report={report} reportParticipantIDs={reportParticipantIDs} - isFullComposerAvailable={isFullComposerAvailable} + isFullComposerAvailable={isFullComposerAvailable && !isCommentEmpty} isComposerFullSize={isComposerFullSize} updateShouldShowSuggestionMenuToFalse={updateShouldShowSuggestionMenuToFalse} isBlockedFromConcierge={isBlockedFromConcierge} @@ -407,7 +409,7 @@ function ReportActionCompose({ diff --git a/src/pages/home/report/ReportActionCompose/SendButton.js b/src/pages/home/report/ReportActionCompose/SendButton.js index 258a1859379d..8128b5a6b39d 100644 --- a/src/pages/home/report/ReportActionCompose/SendButton.js +++ b/src/pages/home/report/ReportActionCompose/SendButton.js @@ -23,14 +23,14 @@ const propTypes = { /** Sets the isCommentEmpty flag to true */ setIsCommentEmpty: PropTypes.func.isRequired, - /** Sets the isComposerFullSize to false */ - resetFullComposerToFalse: PropTypes.func.isRequired, + /** resets the composer to normal size */ + resetFullComposerSize: PropTypes.func.isRequired, /** Submits the form */ submitForm: PropTypes.func.isRequired, }; -function SendButton({isDisabled: isDisabledProp, animatedRef, setIsCommentEmpty, resetFullComposerToFalse, submitForm}) { +function SendButton({isDisabled: isDisabledProp, animatedRef, setIsCommentEmpty, resetFullComposerSize, submitForm}) { const {translate} = useLocalize(); const Tap = Gesture.Tap() @@ -43,7 +43,7 @@ function SendButton({isDisabled: isDisabledProp, animatedRef, setIsCommentEmpty, const updates = {text: ''}; // We are setting the isCommentEmpty flag to true so the status of it will be in sync of the native text input state runOnJS(setIsCommentEmpty)(true); - runOnJS(resetFullComposerToFalse)(); + runOnJS(resetFullComposerSize)(); updatePropsPaperWorklet(viewTag, viewName, updates); // clears native text input on the UI thread runOnJS(submitForm)(); }); From a17dec6cc9aef8c49c6bf582b9f6c404338ae85b Mon Sep 17 00:00:00 2001 From: Hezekiel Tamire Date: Sat, 9 Sep 2023 14:51:53 +0300 Subject: [PATCH 5/6] remove redundant code --- .../report/ReportActionCompose/ComposerWithSuggestions.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js index 36b0af156ae5..7929e0ae8b97 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js @@ -243,12 +243,8 @@ function ComposerWithSuggestions({ updateComment(''); setTextInputShouldClear(true); - if (isComposerFullSize) { - Report.setIsComposerFullSize(reportID, false); - } - setIsFullComposerAvailable(false); return trimmedComment; - }, [updateComment, setTextInputShouldClear, isComposerFullSize, setIsFullComposerAvailable, reportID]); + }, [updateComment, setTextInputShouldClear]); /** * Callback to add whatever text is chosen into the main input (used f.e as callback for the emoji picker) From 6232d7ee7df8d4cd53b773c17e1570f9339686fa Mon Sep 17 00:00:00 2001 From: Hezekiel Tamire Date: Sat, 9 Sep 2023 16:43:53 +0300 Subject: [PATCH 6/6] revert change --- .../report/ReportActionCompose/ComposerWithSuggestions.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js index 7929e0ae8b97..36b0af156ae5 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js @@ -243,8 +243,12 @@ function ComposerWithSuggestions({ updateComment(''); setTextInputShouldClear(true); + if (isComposerFullSize) { + Report.setIsComposerFullSize(reportID, false); + } + setIsFullComposerAvailable(false); return trimmedComment; - }, [updateComment, setTextInputShouldClear]); + }, [updateComment, setTextInputShouldClear, isComposerFullSize, setIsFullComposerAvailable, reportID]); /** * Callback to add whatever text is chosen into the main input (used f.e as callback for the emoji picker)