Migrate DragNDrop

src/components/DragAndDrop/DropZone/index.js

@@ -12,7 +12,7 @@ const propTypes = {
     children: PropTypes.node.isRequired,
 
     /** Required for drag and drop to properly detect dropzone */
-    dropZoneId: PropTypes.string.isRequired,
+    dropZoneID: PropTypes.string.isRequired,
 };
 
 function DropZone(props) {
@@ -21,7 +21,7 @@ function DropZone(props) {
             <View style={[styles.fullScreenTransparentOverlay, styles.alignItemsCenter, styles.justifyContentCenter]}>{props.children}</View>
             {/* Necessary for blocking events on content which can publish unwanted dragleave even if we are inside dropzone  */}
             <View
-                nativeID={props.dropZoneId}
+                nativeID={props.dropZoneID}
                 style={styles.dropZoneTopInvisibleOverlay}
             />
         </Portal>

src/components/DragAndDrop/dragAndDropPropTypes.js

@@ -17,8 +17,14 @@ export default {
     shouldAcceptDrop: PropTypes.func,
 
     /** Id of the element on which we want to detect drag */
-    dropZoneId: PropTypes.string.isRequired,
+    dropZoneID: PropTypes.string.isRequired,
 
     /** Id of the element which is shown while drag is active */
-    activeDropZoneId: PropTypes.string.isRequired,
+    activeDropZoneID: PropTypes.string.isRequired,
+
+    /** Whether drag & drop should be disabled */
+    isDisabled: PropTypes.bool,
+
+    /** Rendered child component */
+    children: PropTypes.node.isRequired,
 };

src/components/DragAndDrop/index.js

@@ -1,197 +1,145 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import {useEffect, useRef, useCallback} from 'react';
 import _ from 'underscore';
-
-import variables from '../../styles/variables';
+import {useIsFocused} from '@react-navigation/native';
 import DragAndDropPropTypes from './dragAndDropPropTypes';
-import withNavigationFocus from '../withNavigationFocus';
+import useEffectOnPageLoad from '../../hooks/useEffectOnPageLoad';
+import useWindowDimensions from '../../hooks/useWindowDimensions';
 
 const COPY_DROP_EFFECT = 'copy';
 const NONE_DROP_EFFECT = 'none';
+const DRAG_ENTER_EVENT = 'dragenter';
+const DRAG_OVER_EVENT = 'dragover';
+const DRAG_LEAVE_EVENT = 'dragleave';
+const DROP_EVENT = 'drop';
+
+/**
+ * @param {Event} event – drag event
+ * @returns {Boolean}
+ */
+function shouldAcceptDrop(event) {
+    return _.some(event.dataTransfer.types, (type) => type === 'Files');
+}
 
-const propTypes = {
-    ...DragAndDropPropTypes,
-
-    /** Callback to fire when a file has being dragged over the text input & report body. This prop is necessary to be inlined to satisfy the linter */
-    onDragOver: DragAndDropPropTypes.onDragOver,
-
-    /** Guard for accepting drops in drop zone. Drag event is passed to this function as first parameter. This prop is necessary to be inlined to satisfy the linter */
-    shouldAcceptDrop: PropTypes.func,
-
-    /** Whether drag & drop should be disabled */
-    disabled: PropTypes.bool,
-
-    /** Rendered child component */
-    children: PropTypes.node.isRequired,
-};
-
-const defaultProps = {
-    onDragOver: () => {},
-    shouldAcceptDrop: (e) => {
-        if (e.dataTransfer.types) {
-            for (let i = 0; i < e.dataTransfer.types.length; i++) {
-                if (e.dataTransfer.types[i] === 'Files') {
-                    return true;
-                }
-            }
-        }
-        return false;
-    },
-    disabled: false,
-};
-
-class DragAndDrop extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.throttledDragOverHandler = _.throttle(this.dragOverHandler.bind(this), 100);
-        this.throttledDragNDropWindowResizeListener = _.throttle(this.dragNDropWindowResizeListener.bind(this), 100);
-        this.dropZoneDragHandler = this.dropZoneDragHandler.bind(this);
-        this.dropZoneDragListener = this.dropZoneDragListener.bind(this);
-
-        /*
-        Last detected drag state on the dropzone -> we start with dragleave since user is not dragging initially.
-        This state is updated when drop zone is left/entered entirely(not taking the children in the account) or entire window is left
-        */
-        this.dropZoneDragState = 'dragleave';
-    }
-
-    componentDidMount() {
-        if (this.props.disabled) {
-            return;
-        }
-        this.addEventListeners();
-    }
+function DragAndDrop({onDragEnter, onDragLeave, onDrop, dropZoneID, activeDropZoneID, children, isDisabled = false}) {
+    const isFocused = useIsFocused();
+    const {windowWidth, isSmallScreenWidth} = useWindowDimensions();
 
-    componentDidUpdate(prevProps) {
-        const isDisabled = this.props.disabled;
-        if (this.props.isFocused === prevProps.isFocused && isDisabled === prevProps.disabled) {
-            return;
-        }
-        if (!this.props.isFocused || isDisabled) {
-            this.removeEventListeners();
-        } else {
-            this.addEventListeners();
-        }
-    }
+    const dropZone = useRef(null);
+    const dropZoneRect = useRef(null);
 
-    componentWillUnmount() {
-        if (this.props.disabled) {
-            return;
+    useEffect(() => {
+        const dropZoneElement = document.getElementById(dropZoneID);
+        if (!dropZoneElement) {
+            throw new Error('Error: element specified by dropZoneID not found');
         }
-        this.removeEventListeners();
-    }
-
-    addEventListeners() {
-        this.dropZone = document.getElementById(this.props.dropZoneId);
-        this.dropZoneRect = this.calculateDropZoneClientReact();
-        document.addEventListener('dragover', this.dropZoneDragListener);
-        document.addEventListener('dragenter', this.dropZoneDragListener);
-        document.addEventListener('dragleave', this.dropZoneDragListener);
-        document.addEventListener('drop', this.dropZoneDragListener);
-        window.addEventListener('resize', this.throttledDragNDropWindowResizeListener);
-    }
-
-    removeEventListeners() {
-        document.removeEventListener('dragover', this.dropZoneDragListener);
-        document.removeEventListener('dragenter', this.dropZoneDragListener);
-        document.removeEventListener('dragleave', this.dropZoneDragListener);
-        document.removeEventListener('drop', this.dropZoneDragListener);
-        window.removeEventListener('resize', this.throttledDragNDropWindowResizeListener);
-    }
-
-    /**
-     * @param {Object} event native Event
+        dropZone.current = dropZoneElement;
+    }, [dropZoneID]);
+
+    useEffectOnPageLoad(
+        _.throttle(() => {
+            const boundingClientRect = dropZone.current.getBoundingClientRect();
+            dropZoneRect.current = {
+                width: boundingClientRect.width,
+                left: isSmallScreenWidth ? 0 : boundingClientRect.left,
+                right: isSmallScreenWidth ? windowWidth : boundingClientRect.right,
+                top: boundingClientRect.top,
+                bottom: boundingClientRect.bottom,
+            };
+        }, 100),
+        [windowWidth, isSmallScreenWidth],
+    );
+
+    /*
+     * Last detected drag state on the dropzone -> we start with dragleave since user is not dragging initially.
+     * This state is updated when drop zone is left/entered entirely(not taking the children in the account) or entire window is left
      */
-    dragOverHandler(event) {
-        this.props.onDragOver(event);
-    }
-
-    dragNDropWindowResizeListener() {
-        // Update bounding client rect on window resize
-        this.dropZoneRect = this.calculateDropZoneClientReact();
-    }
-
-    calculateDropZoneClientReact() {
-        const boundingClientRect = this.dropZone.getBoundingClientRect();
+    const dropZoneDragState = useRef(DRAG_LEAVE_EVENT);
 
-        // Handle edge case when we are under responsive breakpoint the browser doesn't normalize rect.left to 0 and rect.right to window.innerWidth
-        return {
-            width: boundingClientRect.width,
-            left: window.innerWidth <= variables.mobileResponsiveWidthBreakpoint ? 0 : boundingClientRect.left,
-            right: window.innerWidth <= variables.mobileResponsiveWidthBreakpoint ? window.innerWidth : boundingClientRect.right,
-            top: boundingClientRect.top,
-            bottom: boundingClientRect.bottom,
-        };
-    }
-
-    /**
-     * @param {Object} event native Event
-     */
-    dropZoneDragHandler(event) {
-        // Setting dropEffect for dragover is required for '+' icon on certain platforms/browsers (eg. Safari)
-        switch (event.type) {
-            case 'dragover':
-                // Continuous event -> can hurt performance, be careful when subscribing
-                // eslint-disable-next-line no-param-reassign
-                event.dataTransfer.dropEffect = COPY_DROP_EFFECT;
-                this.throttledDragOverHandler(event);
-                break;
-            case 'dragenter':
-                // Avoid reporting onDragEnter for children views -> not performant
-                if (this.dropZoneDragState === 'dragleave') {
-                    this.dropZoneDragState = 'dragenter';
-                    // eslint-disable-next-line no-param-reassign
-                    event.dataTransfer.dropEffect = COPY_DROP_EFFECT;
-                    this.props.onDragEnter(event);
-                }
-                break;
-            case 'dragleave':
-                if (this.dropZoneDragState === 'dragenter') {
-                    if (
-                        event.clientY <= this.dropZoneRect.top ||
-                        event.clientY >= this.dropZoneRect.bottom ||
-                        event.clientX <= this.dropZoneRect.left ||
-                        event.clientX >= this.dropZoneRect.right ||
-                        // Cancel drag when file manager is on top of the drop zone area - works only on chromium
-                        (event.target.getAttribute('id') === this.props.activeDropZoneId && !event.relatedTarget)
-                    ) {
-                        this.dropZoneDragState = 'dragleave';
-                        this.props.onDragLeave(event);
-                    }
-                }
-                break;
-            case 'drop':
-                this.dropZoneDragState = 'dragleave';
-                this.props.onDrop(event);
-                break;
-            default:
-                break;
+    // If this component is out of focus or disabled, reset the drag state back to the default
+    useEffect(() => {
+        if (isFocused && !isDisabled) {
+            return;
         }
-    }
+        dropZoneDragState.current = DRAG_LEAVE_EVENT;
+    }, [isFocused, isDisabled]);
 
     /**
      * Handles all types of drag-N-drop events on the drop zone associated with composer
      *
      * @param {Object} event native Event
      */
-    dropZoneDragListener(event) {
-        event.preventDefault();
+    const dropZoneDragHandler = useCallback(
+        (event) => {
+            if (!isFocused || isDisabled) {
+                return;
+            }
 
-        if (this.dropZone.contains(event.target) && this.props.shouldAcceptDrop(event)) {
-            this.dropZoneDragHandler(event);
-        } else {
-            // eslint-disable-next-line no-param-reassign
-            event.dataTransfer.dropEffect = NONE_DROP_EFFECT;
-        }
-    }
+            event.preventDefault();
+
+            if (dropZone.current.contains(event.target) && shouldAcceptDrop(event)) {
+                switch (event.type) {
+                    case DRAG_OVER_EVENT:
+                        // Nothing needed here, just needed to preventDefault in order for the drop event to fire later
+                        break;
+                    case DRAG_ENTER_EVENT:
+                        // Avoid reporting onDragEnter for children views -> not performant
+                        if (dropZoneDragState.current === DRAG_LEAVE_EVENT) {
+                            dropZoneDragState.current = DRAG_ENTER_EVENT;
+                            // eslint-disable-next-line no-param-reassign
+                            event.dataTransfer.dropEffect = COPY_DROP_EFFECT;
+                            onDragEnter(event);
+                        }
+                        break;
+                    case DRAG_LEAVE_EVENT:
+                        if (dropZoneDragState.current === DRAG_ENTER_EVENT) {
+                            if (
+                                event.clientY <= dropZoneRect.current.top ||
+                                event.clientY >= dropZoneRect.current.bottom ||
+                                event.clientX <= dropZoneRect.current.left ||
+                                event.clientX >= dropZoneRect.current.right ||
+                                // Cancel drag when file manager is on top of the drop zone area - works only on chromium
+                                (event.target.getAttribute('id') === activeDropZoneID && !event.relatedTarget)
+                            ) {
+                                dropZoneDragState.current = DRAG_LEAVE_EVENT;
+                                onDragLeave(event);
+                            }
+                        }
+                        break;
+                    case DROP_EVENT:
+                        dropZoneDragState.current = DRAG_LEAVE_EVENT;
+                        onDrop(event);
+                        break;
+                    default:
+                        break;
+                }
+            } else {
+                // eslint-disable-next-line no-param-reassign
+                event.dataTransfer.dropEffect = NONE_DROP_EFFECT;
+            }
+        },
+        [isFocused, isDisabled, onDragEnter, onDragLeave, activeDropZoneID, onDrop],
+    );
+
+    useEffect(() => {
+        // Note that the dragover event needs to be called with `event.preventDefault` in order for the drop event to be fired:
+        // https://stackoverflow.com/questions/21339924/drop-event-not-firing-in-chrome
+        document.addEventListener(DRAG_OVER_EVENT, dropZoneDragHandler);
+        document.addEventListener(DRAG_ENTER_EVENT, dropZoneDragHandler);
+        document.addEventListener(DRAG_LEAVE_EVENT, dropZoneDragHandler);
+        document.addEventListener(DROP_EVENT, dropZoneDragHandler);
+        return () => {
+            document.removeEventListener(DRAG_OVER_EVENT, dropZoneDragHandler);
+            document.removeEventListener(DRAG_ENTER_EVENT, dropZoneDragHandler);
+            document.removeEventListener(DRAG_ENTER_EVENT, dropZoneDragHandler);
+            document.removeEventListener(DRAG_LEAVE_EVENT, dropZoneDragHandler);
+            document.removeEventListener(DROP_EVENT, dropZoneDragHandler);
+        };
+    }, [dropZoneDragHandler]);
 
-    render() {
-        return this.props.children;
-    }
+    return children;
 }
 
-DragAndDrop.propTypes = propTypes;
-DragAndDrop.defaultProps = defaultProps;
+DragAndDrop.propTypes = DragAndDropPropTypes;
+DragAndDrop.displayName = 'DragAndDrop';
 
-export default withNavigationFocus(DragAndDrop);
+export default DragAndDrop;

src/components/DragAndDrop/index.native.js

@@ -1,5 +1,8 @@
+import DragAndDropPropTypes from './dragAndDropPropTypes';
+
 const DragAndDrop = (props) => props.children;
 
+DragAndDrop.propTypes = DragAndDropPropTypes;
 DragAndDrop.displayName = 'DragAndDrop';
 
 export default DragAndDrop;

src/hooks/useEffectOnPageLoad/index.js

@@ -0,0 +1,20 @@
+import {useEffect, useRef} from 'react';
+
+export default function useEffectOnPageLoad(onPageLoad, dependencies = []) {
+    const onPageLoadRef = useRef(onPageLoad);
+    onPageLoadRef.current = onPageLoad;
+
+    useEffect(() => {
+        function onPageLoadCallback() {
+            onPageLoadRef.current();
+        }
+
+        if (document.readyState === 'complete') {
+            onPageLoadCallback();
+        } else {
+            window.addEventListener('load', onPageLoadCallback);
+            return () => window.removeEventListener('load', onPageLoadCallback);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, dependencies);
+}

src/hooks/useEffectOnPageLoad/index.native.js

@@ -0,0 +1,3 @@
+import {useEffect} from 'react';
+
+export default useEffect;