Merge pull request #41879 from bernhardoj/fix/40897-text-behind-drag-…

…and-drop-instruction-doesnt-hide-when-dragging Fix the scan receipt instruction still shows when dragging a file over the page
Expensify · May 11, 2024 · c70609b · c70609b
2 parents ada489f + 8f500dd
commit c70609b
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 26 deletions.
diff --git a/src/pages/iou/request/step/IOURequestStepScan/index.tsx b/src/pages/iou/request/step/IOURequestStepScan/index.tsx
@@ -654,28 +654,30 @@ function IOURequestStepScan({
             shouldShowWrapper={Boolean(backTo)}
             testID={IOURequestStepScan.displayName}
         >
-            <View style={[styles.flex1, !Browser.isMobile() && styles.uploadReceiptView(isSmallScreenWidth)]}>
-                {!isDraggingOver && (Browser.isMobile() ? mobileCameraView() : desktopUploadView())}
-                <ReceiptDropUI
-                    onDrop={(e) => {
-                        const file = e?.dataTransfer?.files[0];
-                        if (file) {
-                            file.uri = URL.createObjectURL(file);
-                            setReceiptAndNavigate(file);
-                        }
-                    }}
-                    receiptImageTopPosition={receiptImageTopPosition}
-                />
-                <ConfirmModal
-                    title={attachmentInvalidReasonTitle ? translate(attachmentInvalidReasonTitle) : ''}
-                    onConfirm={hideRecieptModal}
-                    onCancel={hideRecieptModal}
-                    isVisible={isAttachmentInvalid}
-                    prompt={attachmentInvalidReason ? translate(attachmentInvalidReason) : ''}
-                    confirmText={translate('common.close')}
-                    shouldShowCancelButton={false}
-                />
-            </View>
+            {(isDraggingOverWrapper) => (
+                <View style={[styles.flex1, !Browser.isMobile() && styles.uploadReceiptView(isSmallScreenWidth)]}>
+                    {!(isDraggingOver ?? isDraggingOverWrapper) && (Browser.isMobile() ? mobileCameraView() : desktopUploadView())}
+                    <ReceiptDropUI
+                        onDrop={(e) => {
+                            const file = e?.dataTransfer?.files[0];
+                            if (file) {
+                                file.uri = URL.createObjectURL(file);
+                                setReceiptAndNavigate(file);
+                            }
+                        }}
+                        receiptImageTopPosition={receiptImageTopPosition}
+                    />
+                    <ConfirmModal
+                        title={attachmentInvalidReasonTitle ? translate(attachmentInvalidReasonTitle) : ''}
+                        onConfirm={hideRecieptModal}
+                        onCancel={hideRecieptModal}
+                        isVisible={isAttachmentInvalid}
+                        prompt={attachmentInvalidReason ? translate(attachmentInvalidReason) : ''}
+                        confirmText={translate('common.close')}
+                        shouldShowCancelButton={false}
+                    />
+                </View>
+            )}
         </StepScreenDragAndDropWrapper>
     );
 }

diff --git a/src/pages/iou/request/step/StepScreenDragAndDropWrapper.tsx b/src/pages/iou/request/step/StepScreenDragAndDropWrapper.tsx
@@ -1,11 +1,12 @@
-import type {PropsWithChildren} from 'react';
+import type {ReactNode} from 'react';
 import React, {useState} from 'react';
 import {View} from 'react-native';
 import DragAndDropProvider from '@components/DragAndDrop/Provider';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
+import callOrReturn from '@src/types/utils/callOrReturn';
 
 type StepScreenDragAndDropWrapperProps = {
     /** The title to show in the header (should be translated already) */
@@ -22,15 +23,18 @@ type StepScreenDragAndDropWrapperProps = {
 
     /** An ID used for unit testing */
     testID: string;
+
+    /** The children to render */
+    children: ((isDraggingOver: boolean) => ReactNode) | ReactNode;
 };
 
-function StepScreenDragAndDropWrapper({testID, headerTitle, onBackButtonPress, onEntryTransitionEnd, children, shouldShowWrapper}: PropsWithChildren<StepScreenDragAndDropWrapperProps>) {
+function StepScreenDragAndDropWrapper({testID, headerTitle, onBackButtonPress, onEntryTransitionEnd, children, shouldShowWrapper}: StepScreenDragAndDropWrapperProps) {
     const styles = useThemeStyles();
 
     const [isDraggingOver, setIsDraggingOver] = useState(false);
 
     if (!shouldShowWrapper) {
-        return children;
+        return callOrReturn(children, false);
     }
 
     return (
@@ -49,7 +53,7 @@ function StepScreenDragAndDropWrapper({testID, headerTitle, onBackButtonPress, o
                             title={headerTitle}
                             onBackButtonPress={onBackButtonPress}
                         />
-                        {children}
+                        {callOrReturn(children, isDraggingOver)}
                     </View>
                 </DragAndDropProvider>
             )}