From 599204176c49c18bd13b381e573bc9f1bc9a2578 Mon Sep 17 00:00:00 2001 From: dannyrb Date: Thu, 14 May 2020 22:01:34 -0400 Subject: [PATCH] Add drag and drop provider --- platform/ui/index.js | 2 ++ platform/ui/package.json | 2 ++ .../components/ViewportPane/ViewportPane.jsx | 3 +++ .../components/ViewportPane/ViewportPane.mdx | 12 +++++---- .../ui/src/components/ViewportPane/index.js | 2 +- .../contextProviders/DragAndDropContext.js | 25 +++++++++++++++++++ platform/ui/src/contextProviders/index.js | 2 ++ yarn.lock | 15 +++++++++++ 8 files changed, 57 insertions(+), 6 deletions(-) create mode 100644 platform/ui/src/contextProviders/DragAndDropContext.js diff --git a/platform/ui/index.js b/platform/ui/index.js index 49fd61f4b..432fa5b22 100644 --- a/platform/ui/index.js +++ b/platform/ui/index.js @@ -4,6 +4,7 @@ export { utils }; /** CONTEXT/HOOKS */ export { + DragAndDropContext, ModalProvider, ModalConsumer, useModal, @@ -60,6 +61,7 @@ export { Viewport, ViewportActionBar, ViewportGrid, + ViewportPane, } from './src/components'; /** VIEWS */ diff --git a/platform/ui/package.json b/platform/ui/package.json index 192af5f58..fc9d0045a 100644 --- a/platform/ui/package.json +++ b/platform/ui/package.json @@ -38,6 +38,8 @@ "react": "16.11.0", "react-dates": "^21.8.0", "react-dnd": "^10.0.2", + "react-dnd-html5-backend": "^10.0.2", + "react-dnd-touch-backend": "^10.0.2", "react-dom": "16.11.0", "react-powerplug": "1.0.0", "react-select": "^3.0.8", diff --git a/platform/ui/src/components/ViewportPane/ViewportPane.jsx b/platform/ui/src/components/ViewportPane/ViewportPane.jsx index bbe01cbc2..661d2e927 100644 --- a/platform/ui/src/components/ViewportPane/ViewportPane.jsx +++ b/platform/ui/src/components/ViewportPane/ViewportPane.jsx @@ -3,6 +3,9 @@ import PropTypes from 'prop-types'; import classnames from 'classnames'; import { useDrop } from 'react-dnd'; +// NOTE: If we found a way to make `useDrop` conditional, +// Or we provided a HOC of this component, we could provide +// this UI without the DragAndDropContext dependency. function ViewportPane({ children, isActive, onDrop }) { const [{ isHovered, isHighlighted }, drop] = useDrop({ accept: 'displayset', diff --git a/platform/ui/src/components/ViewportPane/ViewportPane.mdx b/platform/ui/src/components/ViewportPane/ViewportPane.mdx index feadf2525..be301cfec 100644 --- a/platform/ui/src/components/ViewportPane/ViewportPane.mdx +++ b/platform/ui/src/components/ViewportPane/ViewportPane.mdx @@ -5,7 +5,7 @@ route: components/viewport-pane --- import { Playground, Props } from 'docz'; -import { ViewportGrid, ViewportPane } from '@ohif/ui'; +import { DragAndDropContext, ViewportGrid, ViewportPane } from '@ohif/ui'; # ViewportPane @@ -21,10 +21,12 @@ import { ViewportPane } from '@ohif/ui';
- -

Hello

 -

World

 - + + + {}} isActive={true}>

Hello

 + {}} isActive={false}>

World

 + +
diff --git a/platform/ui/src/components/ViewportPane/index.js b/platform/ui/src/components/ViewportPane/index.js index d15888c80..ecee161e7 100644 --- a/platform/ui/src/components/ViewportPane/index.js +++ b/platform/ui/src/components/ViewportPane/index.js @@ -1,2 +1,2 @@ -import ViewportPane from './ViewportPane.jsx'; +import ViewportPane from './ViewportPane'; export default ViewportPane; diff --git a/platform/ui/src/contextProviders/DragAndDropContext.js b/platform/ui/src/contextProviders/DragAndDropContext.js new file mode 100644 index 000000000..75bc48351 --- /dev/null +++ b/platform/ui/src/contextProviders/DragAndDropContext.js @@ -0,0 +1,25 @@ +import React from 'react'; +import { DndProvider } from "react-dnd"; +import HTML5Backend from 'react-dnd-html5-backend'; +import TouchBackend from 'react-dnd-touch-backend'; + +const isTouchDevice = typeof window !== `undefined` && !!('ontouchstart' in window || navigator.maxTouchPoints); + +/** + * Relevant: + * https://github.com/react-dnd/react-dnd/issues/186#issuecomment-335429067 + * https://github.com/react-dnd/react-dnd/issues/186#issuecomment-282789420 + * + * Docs: + * http://react-dnd.github.io/react-dnd/docs/api/drag-drop-context + */ +export default function DragAndDropContext({children}) { + const backend = isTouchDevice ? TouchBackend : HTML5Backend; + const opts = isTouchDevice ? { enableMouseEvents: true } : {}; + + return ( + + {children} + + ); +} diff --git a/platform/ui/src/contextProviders/index.js b/platform/ui/src/contextProviders/index.js index 177d456af..ebe36349c 100644 --- a/platform/ui/src/contextProviders/index.js +++ b/platform/ui/src/contextProviders/index.js @@ -9,3 +9,5 @@ export { default as ViewportDialogProvider, useViewportDialog, } from './ViewportDialogProvider'; + +export { default as DragAndDropContext } from './DragAndDropContext'; diff --git a/yarn.lock b/yarn.lock index 0ecc470b6..5f114ffea 100644 --- a/yarn.lock +++ b/yarn.lock @@ -16532,6 +16532,13 @@ react-dev-utils@^4.2.3: strip-ansi "3.0.1" text-table "0.2.0" +react-dnd-html5-backend@^10.0.2: + version "10.0.2" + resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-10.0.2.tgz#15cb9d2b923f43576a136df854e288cb5969784c" + integrity sha512-ny17gUdInZ6PIGXdzfwPhoztRdNVVvjoJMdG80hkDBamJBeUPuNF2Wv4D3uoQJLjXssX1+i9PhBqc7EpogClwQ== + dependencies: + dnd-core "^10.0.2" + react-dnd-html5-backend@^9.4.0: version "9.5.1" resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-9.5.1.tgz#e6a0aed3ece800c1abe004f9ed9991513e2e644c" @@ -16539,6 +16546,14 @@ react-dnd-html5-backend@^9.4.0: dependencies: dnd-core "^9.5.1" +react-dnd-touch-backend@^10.0.2: + version "10.0.2" + resolved "https://registry.yarnpkg.com/react-dnd-touch-backend/-/react-dnd-touch-backend-10.0.2.tgz#90cb916655539b838d49b8895e1813f8b874b3b4" + integrity sha512-+lW/Ern0dKyHToD0oP+Wc/ZD6l7qJazosLqbjzL7OnPlig6WxdlrHkJylOLkeAdZj41fIJJ551Lb57pIL0CcPw== + dependencies: + "@react-dnd/invariant" "^2.0.0" + dnd-core "^10.0.2" + react-dnd-touch-backend@^9.4.0: version "9.5.1" resolved "https://registry.yarnpkg.com/react-dnd-touch-backend/-/react-dnd-touch-backend-9.5.1.tgz#cc0a35f61acc920d91aad267a415db5f702129a3"