diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index 873d8c4d5079..78f6edcf7dd3 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -440,7 +440,7 @@ function ReportScreen({ policies={policies} /> ) : ( - + )} diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js index 6e103f77c068..a4777556dda7 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js @@ -90,7 +90,7 @@ function ComposerWithSuggestions({ isFullComposerAvailable, setIsFullComposerAvailable, setIsCommentEmpty, - submitForm, + handleSendMessage, shouldShowComposeInput, measureParentContainer, // Refs @@ -328,7 +328,7 @@ function ComposerWithSuggestions({ // Submit the form when Enter is pressed if (e.key === CONST.KEYBOARD_SHORTCUTS.ENTER.shortcutKey && !e.shiftKey) { e.preventDefault(); - submitForm(); + handleSendMessage(); } // Trigger the edit box for last sent message if ArrowUp is pressed and the comment is empty and Chronos is not in the participants @@ -347,7 +347,7 @@ function ComposerWithSuggestions({ } } }, - [isKeyboardShown, isSmallScreenWidth, parentReportActions, report, reportActions, reportID, submitForm, suggestionsRef, valueRef], + [isKeyboardShown, isSmallScreenWidth, parentReportActions, report, reportActions, reportID, handleSendMessage, suggestionsRef, valueRef], ); const onSelectionChange = useCallback( diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js index dedccc65a390..b43400287269 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js @@ -4,7 +4,7 @@ import {View} from 'react-native'; import _ from 'underscore'; import lodashGet from 'lodash/get'; import {withOnyx} from 'react-native-onyx'; -import {useAnimatedRef} from 'react-native-reanimated'; +import {runOnJS, useAnimatedRef} from 'react-native-reanimated'; import {PortalHost} from '@gorhom/portal'; import styles from '../../../../styles/styles'; import ONYXKEYS from '../../../../ONYXKEYS'; @@ -37,6 +37,7 @@ import getModalState from '../../../../libs/getModalState'; import useWindowDimensions from '../../../../hooks/useWindowDimensions'; import * as EmojiPickerActions from '../../../../libs/actions/EmojiPickerAction'; import getDraftComment from '../../../../libs/ComposerUtils/getDraftComment'; +import updatePropsPaperWorklet from '../../../../libs/updatePropsPaperWorklet'; const propTypes = { /** A method to call when the form is submitted */ @@ -72,6 +73,8 @@ const propTypes = { /** The type of action that's pending */ pendingAction: PropTypes.oneOf(['add', 'update', 'delete']), + /** /** Whetjer the report is ready for display */ + isReportReadyForDisplay: PropTypes.bool, ...withCurrentUserPersonalDetailsPropTypes, }; @@ -83,6 +86,7 @@ const defaultProps = { isComposerFullSize: false, pendingAction: null, shouldShowComposeInput: true, + isReportReadyForDisplay: true, ...withCurrentUserPersonalDetailsDefaultProps, }; @@ -105,6 +109,7 @@ function ReportActionCompose({ reportID, reportActions, shouldShowComposeInput, + isReportReadyForDisplay, }) { const {translate} = useLocalize(); const {isMediumScreenWidth, isSmallScreenWidth} = useWindowDimensions(); @@ -314,6 +319,23 @@ function ReportActionCompose({ const isSendDisabled = isCommentEmpty || isBlockedFromConcierge || disabled || hasExceededMaxCommentLength; + const handleSendMessage = useCallback(() => { + 'worklet'; + + if (isSendDisabled || !isReportReadyForDisplay) { + return; + } + + const viewTag = animatedRef(); + const viewName = 'RCTMultilineTextInputView'; + 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(resetFullComposerSize)(); + updatePropsPaperWorklet(viewTag, viewName, updates); // clears native text input on the UI thread + runOnJS(submitForm)(); + }, [isSendDisabled, resetFullComposerSize, submitForm, animatedRef, isReportReadyForDisplay]); + return ( { - 'worklet'; - - const viewTag = animatedRef(); - const viewName = 'RCTMultilineTextInputView'; - 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(resetFullComposerSize)(); - updatePropsPaperWorklet(viewTag, viewName, updates); // clears native text input on the UI thread - runOnJS(submitForm)(); + handleSendMessage(); }); return ( diff --git a/src/pages/home/report/ReportActionCompose/composerWithSuggestionsProps.js b/src/pages/home/report/ReportActionCompose/composerWithSuggestionsProps.js index 0c8f36114c44..017b5aecb4ae 100644 --- a/src/pages/home/report/ReportActionCompose/composerWithSuggestionsProps.js +++ b/src/pages/home/report/ReportActionCompose/composerWithSuggestionsProps.js @@ -72,7 +72,7 @@ const propTypes = { setIsCommentEmpty: PropTypes.func.isRequired, /** A method to call when the form is submitted */ - submitForm: PropTypes.func.isRequired, + handleSendMessage: PropTypes.func.isRequired, /** Whether the compose input is shown or not */ shouldShowComposeInput: PropTypes.bool.isRequired, diff --git a/src/pages/home/report/ReportFooter.js b/src/pages/home/report/ReportFooter.js index 51a8490162e5..04e444a73c6b 100644 --- a/src/pages/home/report/ReportFooter.js +++ b/src/pages/home/report/ReportFooter.js @@ -38,6 +38,9 @@ const propTypes = { /** Whether user interactions should be disabled */ shouldDisableCompose: PropTypes.bool, + /** Whetjer the report is ready for display */ + isReportReadyForDisplay: PropTypes.bool, + ...windowDimensionsPropTypes, }; @@ -48,6 +51,7 @@ const defaultProps = { pendingAction: null, shouldShowComposeInput: true, shouldDisableCompose: false, + isReportReadyForDisplay: true, }; function ReportFooter(props) { @@ -86,6 +90,7 @@ function ReportFooter(props) { pendingAction={props.pendingAction} isComposerFullSize={props.isComposerFullSize} disabled={props.shouldDisableCompose} + isReportReadyForDisplay={props.isReportReadyForDisplay} />