Merge pull request #26849 from tienifr/fix/25709

fix: 25709 drop container does not add opacity to entire height of the drawer

src/components/DragAndDrop/Provider/dragAndDropProviderPropTypes.js

@@ -6,4 +6,7 @@ export default {
 
     /** Should this dropZone be disabled? */
     isDisabled: PropTypes.bool,
+
+    /** Indicate that users are dragging file or not */
+    setIsDraggingOver: PropTypes.func,
 };

src/components/DragAndDrop/Provider/index.js

@@ -1,5 +1,5 @@
 import _ from 'underscore';
-import React, {useRef, useCallback} from 'react';
+import React, {useRef, useCallback, useEffect} from 'react';
 import {View} from 'react-native';
 import {PortalHost} from '@gorhom/portal';
 import Str from 'expensify-common/lib/str';
@@ -17,7 +17,7 @@ function shouldAcceptDrop(event) {
     return _.some(event.dataTransfer.types, (type) => type === 'Files');
 }
 
-function DragAndDropProvider({children, isDisabled = false}) {
+function DragAndDropProvider({children, isDisabled = false, setIsDraggingOver = () => {}}) {
     const dropZone = useRef(null);
     const dropZoneID = useRef(Str.guid('drag-n-drop'));
 
@@ -33,6 +33,10 @@ function DragAndDropProvider({children, isDisabled = false}) {
         isDisabled,
     });
 
+    useEffect(() => {
+        setIsDraggingOver(isDraggingOver);
+    }, [isDraggingOver, setIsDraggingOver]);
+
     return (
         <DragAndDropContext.Provider value={{isDraggingOver, setOnDropHandler, dropZoneID: dropZoneID.current}}>
             <View

src/components/HeaderGap/index.desktop.js

@@ -1,9 +1,22 @@
 import React, {PureComponent} from 'react';
 import {View} from 'react-native';
+import PropTypes from 'prop-types';
 import styles from '../../styles/styles';
 
-export default class HeaderGap extends PureComponent {
+const propTypes = {
+    /** Styles to apply to the HeaderGap */
+    // eslint-disable-next-line react/forbid-prop-types
+    styles: PropTypes.arrayOf(PropTypes.object),
+};
+
+class HeaderGap extends PureComponent {
     render() {
-        return <View style={styles.headerGap} />;
+        return <View style={[styles.headerGap, ...this.props.styles]} />;
     }
 }
+
+HeaderGap.propTypes = propTypes;
+HeaderGap.defaultProps = {
+    styles: [],
+};
+export default HeaderGap;

src/components/ScreenWrapper/index.js

@@ -124,7 +124,7 @@ class ScreenWrapper extends React.Component {
                                         style={styles.flex1}
                                         enabled={this.props.shouldEnablePickerAvoiding}
                                     >
-                                        <HeaderGap />
+                                        <HeaderGap styles={this.props.headerGapStyles} />
                                         {this.props.environment === CONST.ENVIRONMENT.DEV && <TestToolsModal />}
                                         {this.props.environment === CONST.ENVIRONMENT.DEV && <CustomDevMenu />}
                                         {

src/components/ScreenWrapper/propTypes.js

@@ -36,6 +36,9 @@ const propTypes = {
     /** Whether to use the maxHeight (true) or use the 100% of the height (false) */
     shouldEnableMaxHeight: PropTypes.bool,
 
+    /** Array of additional styles for header gap */
+    headerGapStyles: PropTypes.arrayOf(PropTypes.object),
+
     ...windowDimensionsPropTypes,
 
     ...environmentPropTypes,
@@ -59,6 +62,7 @@ const defaultProps = {
     shouldEnablePickerAvoiding: true,
     shouldShowOfflineIndicator: true,
     offlineIndicatorStyle: [],
+    headerGapStyles: [],
 };
 
 export {propTypes, defaultProps};

src/pages/iou/MoneyRequestSelectorPage.js

@@ -1,6 +1,6 @@
 import {withOnyx} from 'react-native-onyx';
 import {View} from 'react-native';
-import React from 'react';
+import React, {useState} from 'react';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import ONYXKEYS from '../../ONYXKEYS';
@@ -21,6 +21,7 @@ import OnyxTabNavigator, {TopTab} from '../../libs/Navigation/OnyxTabNavigator';
 import NewRequestAmountPage from './steps/NewRequestAmountPage';
 import reportPropTypes from '../reportPropTypes';
 import * as ReportUtils from '../../libs/ReportUtils';
+import themeColors from '../../styles/themes/default';
 
 const propTypes = {
     /** React Navigation route */
@@ -48,6 +49,8 @@ const defaultProps = {
 };
 
 function MoneyRequestSelectorPage(props) {
+    const [isDraggingOver, setIsDraggingOver] = useState(false);
+
     const iouType = lodashGet(props.route, 'params.iouType', '');
     const reportID = lodashGet(props.route, 'params.reportID', '');
     const {translate} = useLocalize();
@@ -70,10 +73,22 @@ function MoneyRequestSelectorPage(props) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableKeyboardAvoidingView={false}
+            headerGapStyles={
+                isDraggingOver
+                    ? [
+                          {
+                              backgroundColor: themeColors.receiptDropUIBG,
+                          },
+                      ]
+                    : []
+            }
         >
             {({safeAreaPaddingBottomStyle}) => (
                 <FullPageNotFoundView shouldShow={!IOUUtils.isValidMoneyRequestType(iouType)}>
-                    <DragAndDropProvider isDisabled={props.selectedTab !== CONST.TAB.SCAN}>
+                    <DragAndDropProvider
+                        isDisabled={props.selectedTab !== CONST.TAB.SCAN}
+                        setIsDraggingOver={setIsDraggingOver}
+                    >
                         <View style={[styles.flex1, safeAreaPaddingBottomStyle]}>
                             <HeaderWithBackButton
                                 title={title[iouType]}