Migrate DragNDrop

.storybook/preview.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import Onyx from 'react-native-onyx';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
+import {PortalProvider} from '@gorhom/portal';
 import './fonts.css';
 import ComposeProviders from '../src/components/ComposeProviders';
 import HTMLEngineProvider from '../src/components/HTMLEngineProvider';
@@ -14,7 +15,7 @@ Onyx.init({
 
 const decorators = [
     (Story) => (
-        <ComposeProviders components={[OnyxProvider, LocaleContextProvider, HTMLEngineProvider, SafeAreaProvider]}>
+        <ComposeProviders components={[OnyxProvider, LocaleContextProvider, HTMLEngineProvider, SafeAreaProvider, PortalProvider]}>
             <Story />
         </ComposeProviders>
     ),

.storybook/webpack.config.js

@@ -27,6 +27,7 @@ module.exports = ({config}) => {
         'react-native$': '@expensify/react-native-web',
         'react-native-web': '@expensify/react-native-web',
         '@react-native-community/netinfo': path.resolve(__dirname, '../__mocks__/@react-native-community/netinfo.js'),
+        '@react-navigation/native': path.resolve(__dirname, '../__mocks__/@react-navigation/native'),
     };
 
     // Necessary to overwrite the values in the existing DefinePlugin hardcoded to the Config staging values

__mocks__/@react-navigation/native/index.js

@@ -0,0 +1,8 @@
+import {useIsFocused as realUseIsFocused} from '@react-navigation/native';
+
+// We only want this mocked for storybook, not jest
+const useIsFocused = process.env.NODE_ENV === 'test' ? realUseIsFocused : () => true;
+
+export * from '@react-navigation/core';
+export * from '@react-navigation/native';
+export {useIsFocused};

src/CONST.js

@@ -480,9 +480,6 @@ const CONST = {
         PERSONAL_DETAIL: 'personalDetail',
     },
     REPORT: {
-        DROP_HOST_NAME: 'ReportDropZone',
-        DROP_NATIVE_ID: 'report-dropzone',
-        ACTIVE_DROP_NATIVE_ID: 'report-dropzone',
         MAXIMUM_PARTICIPANTS: 8,
         SPLIT_REPORTID: '-2',
         ACTIONS: {

src/components/DragAndDrop/Consumer/dragAndDropConsumerPropTypes.js

@@ -0,0 +1,9 @@
+import PropTypes from 'prop-types';
+
+export default {
+    /** Children to render inside this component. */
+    children: PropTypes.node.isRequired,
+
+    /** Function to execute when an item is dropped in the drop zone. */
+    onDrop: PropTypes.func.isRequired,
+};

src/components/DragAndDrop/Consumer/index.js

@@ -0,0 +1,23 @@
+import React, {useContext, useEffect} from 'react';
+import {Portal} from '@gorhom/portal';
+import dragAndDropConsumerPropTypes from './dragAndDropConsumerPropTypes';
+import {DragAndDropContext} from '../Provider';
+
+function DragAndDropConsumer({children, onDrop}) {
+    const {isDraggingOver, setOnDropHandler, dropZoneID} = useContext(DragAndDropContext);
+
+    useEffect(() => {
+        setOnDropHandler(onDrop);
+    }, [onDrop, setOnDropHandler]);
+
+    if (!isDraggingOver) {
+        return null;
+    }
+
+    return <Portal hostName={dropZoneID}>{children}</Portal>;
+}
+
+DragAndDropConsumer.propTypes = dragAndDropConsumerPropTypes;
+DragAndDropConsumer.displayName = 'DragAndDropConsumer';
+
+export default DragAndDropConsumer;

src/components/DragAndDrop/Consumer/index.native.js

@@ -0,0 +1,10 @@
+import dragAndDropConsumerPropTypes from './dragAndDropConsumerPropTypes';
+
+function DragAndDropConsumer({children}) {
+    return children;
+}
+
+DragAndDropConsumer.propTypes = dragAndDropConsumerPropTypes;
+DragAndDropConsumer.displayName = 'DragAndDropConsumer';
+
+export default DragAndDropConsumer;

src/components/DragAndDrop/NoDropZone/index.js

@@ -1,29 +1,28 @@
-import {useEffect} from 'react';
+import React, {useRef} from 'react';
+import {View} from 'react-native';
 import PropTypes from 'prop-types';
+import styles from '../../../styles/styles';
+import useDragAndDrop from '../../../hooks/useDragAndDrop';
 
 const propTypes = {
     /** Content */
     children: PropTypes.node.isRequired,
 };
 
-function NoDropZone(props) {
-    function handleDrag(event) {
-        event.preventDefault();
-        // eslint-disable-next-line no-param-reassign
-        event.dataTransfer.dropEffect = 'none';
-    }
-
-    useEffect(() => {
-        document.addEventListener('dragenter', handleDrag);
-        document.addEventListener('dragover', handleDrag);
-
-        return () => {
-            document.removeEventListener('dragenter', handleDrag);
-            document.removeEventListener('dragover', handleDrag);
-        };
-    }, []);
-
-    return props.children;
+function NoDropZone({children}) {
+    const noDropZone = useRef(null);
+    useDragAndDrop({
+        dropZone: noDropZone,
+        shouldAllowDrop: false,
+    });
+    return (
+        <View
+            ref={(e) => (noDropZone.current = e)}
+            style={[styles.fullScreen]}
+        >
+            {children}
+        </View>
+    );
 }
 
 NoDropZone.displayName = 'NoDropZone';

src/components/DragAndDrop/Provider/dragAndDropProviderPropTypes.js

@@ -0,0 +1,9 @@
+import PropTypes from 'prop-types';
+
+export default {
+    /** Children to render inside this component. */
+    children: PropTypes.node.isRequired,
+
+    /** Should this dropZone be disabled? */
+    isDisabled: PropTypes.bool,
+};

src/components/DragAndDrop/Provider/index.js

@@ -0,0 +1,57 @@
+import _ from 'underscore';
+import React, {useRef, useCallback} from 'react';
+import {View} from 'react-native';
+import {PortalHost} from '@gorhom/portal';
+import Str from 'expensify-common/lib/str';
+import dragAndDropProviderPropTypes from './dragAndDropProviderPropTypes';
+import styles from '../../../styles/styles';
+import useDragAndDrop from '../../../hooks/useDragAndDrop';
+
+const DragAndDropContext = React.createContext({});
+
+/**
+ * @param {Event} event – drag event
+ * @returns {Boolean}
+ */
+function shouldAcceptDrop(event) {
+    return _.some(event.dataTransfer.types, (type) => type === 'Files');
+}
+
+function DragAndDropProvider({children, isDisabled = false}) {
+    const dropZone = useRef(null);
+    const dropZoneID = useRef(Str.guid('drag-n-drop'));
+
+    const onDropHandler = useRef(() => {});
+    const setOnDropHandler = useCallback((callback) => {
+        onDropHandler.current = callback;
+    }, []);
+
+    const {isDraggingOver} = useDragAndDrop({
+        dropZone,
+        onDrop: onDropHandler.current,
+        shouldAcceptDrop,
+        isDisabled,
+    });
+
+    return (
+        <DragAndDropContext.Provider value={{isDraggingOver, setOnDropHandler, dropZoneID: dropZoneID.current}}>
+            <View
+                ref={(e) => (dropZone.current = e)}
+                style={[styles.flex1, styles.w100, styles.h100]}
+            >
+                {isDraggingOver && (
+                    <View style={[styles.fullScreen, styles.invisibleOverlay]}>
+                        <PortalHost name={dropZoneID.current} />
+                    </View>
+                )}
+                {children}
+            </View>
+        </DragAndDropContext.Provider>
+    );
+}
+
+DragAndDropProvider.propTypes = dragAndDropProviderPropTypes;
+DragAndDropProvider.displayName = 'DragAndDropProvider';
+
+export default DragAndDropProvider;
+export {DragAndDropContext};

src/components/DragAndDrop/Provider/index.native.js

@@ -0,0 +1,13 @@
+import dragAndDropProviderPropTypes from './dragAndDropProviderPropTypes';
+
+const DragAndDropContext = {};
+
+function DragAndDropProvider({children}) {
+    return children;
+}
+
+DragAndDropProvider.propTypes = dragAndDropProviderPropTypes;
+DragAndDropProvider.displayName = 'DragAndDropProvider';
+
+export default DragAndDropProvider;
+export {DragAndDropContext};