Merge pull request Expensify#28681 from DylanDylann/fix/27779-expand-…

…button-disappear-after-clicking Fix/27779: Expand button disappear after clicking send
abdel-h66 · Oct 6, 2023 · 01ef03f · 01ef03f
2 parents e5914f1 + af95ab6
commit 01ef03f
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 35 deletions.
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
@@ -440,7 +440,7 @@ function ReportScreen({
                                         policies={policies}
                                     />
                                 ) : (
-                                    <ReportFooter shouldDisableCompose />
+                                    <ReportFooter isReportReadyForDisplay={false} />
                                 )}
                             </View>
                         </DragAndDropProvider>

diff --git 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
@@ -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 (
         <View
             ref={containerRef}
@@ -381,7 +403,7 @@ function ReportActionCompose({
                                     isFullComposerAvailable={isFullComposerAvailable}
                                     setIsFullComposerAvailable={setIsFullComposerAvailable}
                                     setIsCommentEmpty={setIsCommentEmpty}
-                                    submitForm={submitForm}
+                                    handleSendMessage={handleSendMessage}
                                     shouldShowComposeInput={shouldShowComposeInput}
                                     onFocus={onFocus}
                                     onBlur={onBlur}
@@ -409,10 +431,7 @@ function ReportActionCompose({
                     )}
                     <SendButton
                         isDisabled={isSendDisabled}
-                        setIsCommentEmpty={setIsCommentEmpty}
-                        resetFullComposerSize={resetFullComposerSize}
-                        submitForm={submitForm}
-                        animatedRef={animatedRef}
+                        handleSendMessage={handleSendMessage}
                     />
                 </View>
                 <View

diff --git a/src/pages/home/report/ReportActionCompose/SendButton.js b/src/pages/home/report/ReportActionCompose/SendButton.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import {View} from 'react-native';
-import {runOnJS} from 'react-native-reanimated';
 import {Gesture, GestureDetector} from 'react-native-gesture-handler';
 import PropTypes from 'prop-types';
 import styles from '../../../../styles/styles';
@@ -10,42 +9,23 @@ import * as Expensicons from '../../../../components/Icon/Expensicons';
 import CONST from '../../../../CONST';
 import Tooltip from '../../../../components/Tooltip';
 import PressableWithFeedback from '../../../../components/Pressable/PressableWithFeedback';
-import updatePropsPaperWorklet from '../../../../libs/updatePropsPaperWorklet';
 import useLocalize from '../../../../hooks/useLocalize';
 
 const propTypes = {
     /** Whether the button is disabled */
     isDisabled: PropTypes.bool.isRequired,
 
-    /** Reference to the animated view */
-    animatedRef: PropTypes.func.isRequired,
-
-    /** Sets the isCommentEmpty flag to true */
-    setIsCommentEmpty: PropTypes.func.isRequired,
-
-    /** resets the composer to normal size */
-    resetFullComposerSize: PropTypes.func.isRequired,
-
-    /** Submits the form */
-    submitForm: PropTypes.func.isRequired,
+    /** Handle clicking on send button */
+    handleSendMessage: PropTypes.func.isRequired,
 };
 
-function SendButton({isDisabled: isDisabledProp, animatedRef, setIsCommentEmpty, resetFullComposerSize, submitForm}) {
+function SendButton({isDisabled: isDisabledProp, handleSendMessage}) {
     const {translate} = useLocalize();
 
     const Tap = Gesture.Tap()
         .enabled()
         .onEnd(() => {
-            '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
@@ -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
@@ -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}
                         />
                     </SwipeableView>
                 </View>