Merge pull request #23528 from ishpaul777/ishpaul777/RHN-no-dropzone

Author: dangrous

src/components/DragAndDrop/NoDropZone/index.js

@@ -0,0 +1,32 @@
+import {useEffect} from 'react';
+import PropTypes from 'prop-types';
+
+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;
+}
+
+NoDropZone.displayName = 'NoDropZone';
+NoDropZone.propTypes = propTypes;
+
+export default NoDropZone;

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

@@ -0,0 +1,5 @@
+const NoDropZone = (props) => props.children;
+
+NoDropZone.displayName = 'NoDropZone';
+
+export default NoDropZone;

src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js

@@ -11,6 +11,7 @@ import styles from '../../../../styles/styles';
 import CONST from '../../../../CONST';
 import PressableWithoutFeedback from '../../../../components/Pressable/PressableWithoutFeedback';
 import useLocalize from '../../../../hooks/useLocalize';
+import NoDropZone from '../../../../components/DragAndDrop/NoDropZone';
 
 const propTypes = {
     /* State from useNavigationBuilder */
@@ -53,25 +54,26 @@ function ThreePaneView(props) {
                 }
                 if (route.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR) {
                     return (
-                        <View
-                            key={route.key}
-                            style={[
-                                styles.flexRow,
-                                styles.pAbsolute,
-                                styles.w100,
-                                styles.h100,
-                                StyleUtils.getBackgroundColorWithOpacityStyle(themeColors.shadow, CONST.RIGHT_MODAL_BACKGROUND_OVERLAY_OPACITY),
-                                StyleUtils.displayIfTrue(props.state.index === i),
-                            ]}
-                        >
-                            <PressableWithoutFeedback
-                                style={[styles.flex1]}
-                                onPress={() => props.navigation.goBack()}
-                                accessibilityLabel={translate('common.close')}
-                                accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
-                            />
-                            <View style={styles.rightPanelContainer}>{props.descriptors[route.key].render()}</View>
-                        </View>
+                        <NoDropZone key={route.key}>
+                            <View
+                                style={[
+                                    styles.flexRow,
+                                    styles.pAbsolute,
+                                    styles.w100,
+                                    styles.h100,
+                                    StyleUtils.getBackgroundColorWithOpacityStyle(themeColors.shadow, CONST.RIGHT_MODAL_BACKGROUND_OVERLAY_OPACITY),
+                                    StyleUtils.displayIfTrue(props.state.index === i),
+                                ]}
+                            >
+                                <PressableWithoutFeedback
+                                    style={[styles.flex1]}
+                                    onPress={() => props.navigation.goBack()}
+                                    accessibilityLabel={translate('common.close')}
+                                    accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                                />
+                                <View style={styles.rightPanelContainer}>{props.descriptors[route.key].render()}</View>
+                            </View>
+                        </NoDropZone>
                     );
                 }
                 return (