From ca83e138eedfe0ca3ca57f55299e5b8ab7495e36 Mon Sep 17 00:00:00 2001 From: ginsuma <13113013+ginsuma@users.noreply.github.com> Date: Fri, 4 Aug 2023 14:57:26 +0700 Subject: [PATCH 1/6] Fix drop drag zone --- src/hooks/useDragAndDrop.js | 1 + .../ThreePaneView.js | 40 +++++++++---------- web/index.html | 10 +++++ 3 files changed, 30 insertions(+), 21 deletions(-) diff --git a/src/hooks/useDragAndDrop.js b/src/hooks/useDragAndDrop.js index 98df70085a72..bc8ab517731b 100644 --- a/src/hooks/useDragAndDrop.js +++ b/src/hooks/useDragAndDrop.js @@ -58,6 +58,7 @@ export default function useDragAndDrop({dropZone, onDrop = () => {}, shouldAllow } event.preventDefault(); + event.stopPropagation(); switch (event.type) { case DRAG_OVER_EVENT: diff --git a/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js b/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js index 2f9a899191bf..14b78752e62f 100644 --- a/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js +++ b/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js @@ -53,28 +53,26 @@ function ThreePaneView(props) { ); } if (route.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR) { - const Wrapper = props.state.index === i ? NoDropZone : React.Fragment; return ( - - - props.navigation.goBack()} - accessibilityLabel={translate('common.close')} - accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} - /> - {props.descriptors[route.key].render()} - - + + props.navigation.goBack()} + accessibilityLabel={translate('common.close')} + accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} + /> + {props.descriptors[route.key].render()} + ); } return ( diff --git a/web/index.html b/web/index.html index d207fa54b97a..16c907fe441b 100644 --- a/web/index.html +++ b/web/index.html @@ -136,4 +136,14 @@ + From abb3964f1766e89ebc732889870a89852f2c205e Mon Sep 17 00:00:00 2001 From: ginsuma <13113013+ginsuma@users.noreply.github.com> Date: Mon, 14 Aug 2023 20:40:08 +0700 Subject: [PATCH 2/6] Clean import --- .../AppNavigator/createResponsiveStackNavigator/ThreePaneView.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js b/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js index 14b78752e62f..75a5a1f514f7 100644 --- a/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js +++ b/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js @@ -11,7 +11,6 @@ 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 */ From b7be1f207ca3f6bd025bc29dd23e91f7c1c5e5fa Mon Sep 17 00:00:00 2001 From: ginsuma <13113013+ginsuma@users.noreply.github.com> Date: Wed, 16 Aug 2023 00:51:53 +0700 Subject: [PATCH 3/6] Move to App.js --- src/App.js | 21 ++++++++++++++++++++- web/index.html | 10 ---------- 2 files changed, 20 insertions(+), 11 deletions(-) diff --git a/src/App.js b/src/App.js index d8faa911f86b..bb6473587e1d 100644 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,5 @@ import '../wdyr'; -import React from 'react'; +import React, {useEffect} from 'react'; import {LogBox} from 'react-native'; import {GestureHandlerRootView} from 'react-native-gesture-handler'; import {SafeAreaProvider} from 'react-native-safe-area-context'; @@ -23,6 +23,8 @@ import ThemeStylesProvider from './styles/ThemeStylesProvider'; import {CurrentReportIDContextProvider} from './components/withCurrentReportID'; import {EnvironmentProvider} from './components/withEnvironment'; import * as Session from './libs/actions/Session'; +import getPlatform from './libs/getPlatform'; +import CONST from './CONST'; // For easier debugging and development, when we are in web we expose Onyx to the window, so you can more easily set data into Onyx if (window && Environment.isDevelopment()) { @@ -40,6 +42,23 @@ LogBox.ignoreLogs([ const fill = {flex: 1}; function App() { + const dropDragListener = (event) => { + event.preventDefault(); + // eslint-disable-next-line no-param-reassign + event.dataTransfer.dropEffect = 'none'; + }; + + useEffect(() => { + const platform = getPlatform(); + if (platform !== CONST.PLATFORM.WEB && platform !== CONST.PLATFORM.DESKTOP) { + return; + } + document.addEventListener('dragover', dropDragListener); + document.addEventListener('dragenter', dropDragListener); + document.addEventListener('dragleave', dropDragListener); + document.addEventListener('drop', dropDragListener); + }, []); + return ( - From 018a53d5ab1cd6bed68771568c0ce61589bef841 Mon Sep 17 00:00:00 2001 From: ginsuma <13113013+ginsuma@users.noreply.github.com> Date: Wed, 16 Aug 2023 01:13:54 +0700 Subject: [PATCH 4/6] Add setDefaultDragDropEvent --- src/App.js | 18 ++---------------- src/libs/setDefaultDragDropEvent/index.js | 13 +++++++++++++ .../setDefaultDragDropEvent/index.native.js | 1 + 3 files changed, 16 insertions(+), 16 deletions(-) create mode 100644 src/libs/setDefaultDragDropEvent/index.js create mode 100644 src/libs/setDefaultDragDropEvent/index.native.js diff --git a/src/App.js b/src/App.js index bb6473587e1d..d4944bbc6a0a 100644 --- a/src/App.js +++ b/src/App.js @@ -23,8 +23,7 @@ import ThemeStylesProvider from './styles/ThemeStylesProvider'; import {CurrentReportIDContextProvider} from './components/withCurrentReportID'; import {EnvironmentProvider} from './components/withEnvironment'; import * as Session from './libs/actions/Session'; -import getPlatform from './libs/getPlatform'; -import CONST from './CONST'; +import setDefaultDragDropEvent from './libs/setDefaultDragDropEvent'; // For easier debugging and development, when we are in web we expose Onyx to the window, so you can more easily set data into Onyx if (window && Environment.isDevelopment()) { @@ -42,21 +41,8 @@ LogBox.ignoreLogs([ const fill = {flex: 1}; function App() { - const dropDragListener = (event) => { - event.preventDefault(); - // eslint-disable-next-line no-param-reassign - event.dataTransfer.dropEffect = 'none'; - }; - useEffect(() => { - const platform = getPlatform(); - if (platform !== CONST.PLATFORM.WEB && platform !== CONST.PLATFORM.DESKTOP) { - return; - } - document.addEventListener('dragover', dropDragListener); - document.addEventListener('dragenter', dropDragListener); - document.addEventListener('dragleave', dropDragListener); - document.addEventListener('drop', dropDragListener); + setDefaultDragDropEvent(); }, []); return ( diff --git a/src/libs/setDefaultDragDropEvent/index.js b/src/libs/setDefaultDragDropEvent/index.js new file mode 100644 index 000000000000..b0e411a5fb7b --- /dev/null +++ b/src/libs/setDefaultDragDropEvent/index.js @@ -0,0 +1,13 @@ +function dragDropListener(event) { + event.preventDefault(); + // eslint-disable-next-line no-param-reassign + event.dataTransfer.dropEffect = 'none'; +} + +function setDefaultDragDropEvent() { + document.addEventListener('dragover', dragDropListener); + document.addEventListener('dragenter', dragDropListener); + document.addEventListener('dragleave', dragDropListener); + document.addEventListener('drop', dragDropListener); +} +export default setDefaultDragDropEvent; diff --git a/src/libs/setDefaultDragDropEvent/index.native.js b/src/libs/setDefaultDragDropEvent/index.native.js new file mode 100644 index 000000000000..2d1ec238274a --- /dev/null +++ b/src/libs/setDefaultDragDropEvent/index.native.js @@ -0,0 +1 @@ +export default () => {}; From ced727a73aa6057062d17775b1dca2ab57b2dae6 Mon Sep 17 00:00:00 2001 From: ginsuma <13113013+ginsuma@users.noreply.github.com> Date: Wed, 16 Aug 2023 01:34:42 +0700 Subject: [PATCH 5/6] Add useDefaultDragAndDrop --- src/App.js | 9 +++------ src/hooks/useDefaultDragAndDrop/index.js | 16 ++++++++++++++++ .../useDefaultDragAndDrop}/index.native.js | 0 src/libs/setDefaultDragDropEvent/index.js | 13 ------------- 4 files changed, 19 insertions(+), 19 deletions(-) create mode 100644 src/hooks/useDefaultDragAndDrop/index.js rename src/{libs/setDefaultDragDropEvent => hooks/useDefaultDragAndDrop}/index.native.js (100%) delete mode 100644 src/libs/setDefaultDragDropEvent/index.js diff --git a/src/App.js b/src/App.js index d4944bbc6a0a..c432a0b666c8 100644 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,5 @@ import '../wdyr'; -import React, {useEffect} from 'react'; +import React from 'react'; import {LogBox} from 'react-native'; import {GestureHandlerRootView} from 'react-native-gesture-handler'; import {SafeAreaProvider} from 'react-native-safe-area-context'; @@ -23,7 +23,7 @@ import ThemeStylesProvider from './styles/ThemeStylesProvider'; import {CurrentReportIDContextProvider} from './components/withCurrentReportID'; import {EnvironmentProvider} from './components/withEnvironment'; import * as Session from './libs/actions/Session'; -import setDefaultDragDropEvent from './libs/setDefaultDragDropEvent'; +import useDefaultDragAndDrop from './hooks/useDefaultDragAndDrop'; // For easier debugging and development, when we are in web we expose Onyx to the window, so you can more easily set data into Onyx if (window && Environment.isDevelopment()) { @@ -41,10 +41,7 @@ LogBox.ignoreLogs([ const fill = {flex: 1}; function App() { - useEffect(() => { - setDefaultDragDropEvent(); - }, []); - + useDefaultDragAndDrop(); return ( { + event.preventDefault(); + // eslint-disable-next-line no-param-reassign + event.dataTransfer.dropEffect = 'none'; + }; + + useEffect(() => { + document.addEventListener('dragover', dropDragListener); + document.addEventListener('dragenter', dropDragListener); + document.addEventListener('dragleave', dropDragListener); + document.addEventListener('drop', dropDragListener); + }, []); +} diff --git a/src/libs/setDefaultDragDropEvent/index.native.js b/src/hooks/useDefaultDragAndDrop/index.native.js similarity index 100% rename from src/libs/setDefaultDragDropEvent/index.native.js rename to src/hooks/useDefaultDragAndDrop/index.native.js diff --git a/src/libs/setDefaultDragDropEvent/index.js b/src/libs/setDefaultDragDropEvent/index.js deleted file mode 100644 index b0e411a5fb7b..000000000000 --- a/src/libs/setDefaultDragDropEvent/index.js +++ /dev/null @@ -1,13 +0,0 @@ -function dragDropListener(event) { - event.preventDefault(); - // eslint-disable-next-line no-param-reassign - event.dataTransfer.dropEffect = 'none'; -} - -function setDefaultDragDropEvent() { - document.addEventListener('dragover', dragDropListener); - document.addEventListener('dragenter', dragDropListener); - document.addEventListener('dragleave', dragDropListener); - document.addEventListener('drop', dragDropListener); -} -export default setDefaultDragDropEvent; From 7db1ba678b01602cfb184a668acc7270b79240ca Mon Sep 17 00:00:00 2001 From: ginsuma <13113013+ginsuma@users.noreply.github.com> Date: Wed, 16 Aug 2023 01:53:38 +0700 Subject: [PATCH 6/6] Update useDefaultDragAndDrop --- src/hooks/useDefaultDragAndDrop/index.js | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/src/hooks/useDefaultDragAndDrop/index.js b/src/hooks/useDefaultDragAndDrop/index.js index f677209afeca..34005c9de2b3 100644 --- a/src/hooks/useDefaultDragAndDrop/index.js +++ b/src/hooks/useDefaultDragAndDrop/index.js @@ -1,16 +1,21 @@ import {useEffect} from 'react'; export default function useDefaultDragAndDrop() { - const dropDragListener = (event) => { - event.preventDefault(); - // eslint-disable-next-line no-param-reassign - event.dataTransfer.dropEffect = 'none'; - }; - useEffect(() => { + const dropDragListener = (event) => { + event.preventDefault(); + // eslint-disable-next-line no-param-reassign + event.dataTransfer.dropEffect = 'none'; + }; document.addEventListener('dragover', dropDragListener); document.addEventListener('dragenter', dropDragListener); document.addEventListener('dragleave', dropDragListener); document.addEventListener('drop', dropDragListener); + return () => { + document.removeEventListener('dragover', dropDragListener); + document.removeEventListener('dragenter', dropDragListener); + document.removeEventListener('dragleave', dropDragListener); + document.removeEventListener('drop', dropDragListener); + }; }, []); }