Add drag and drop provider

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 */

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",

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',

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';
 
 <Playground>
   <div className="p-4 h-56">
-    <ViewportGrid>
+    <DragAndDropContext>
-      <ViewportPane><h3>Hello</h3></ViewportPane>
+      <ViewportGrid numRows={1} numCols={2}>
-      <ViewportPane><h3>World</h3></ViewportPane>
+        <ViewportPane onDrop={() => {}} isActive={true}><h3>Hello</h3></ViewportPane>
-    </ViewportGrid>
+        <ViewportPane onDrop={() => {}} isActive={false}><h3>World</h3></ViewportPane>
+      </ViewportGrid>
+    </DragAndDropContext>
   </div>
 </Playground>
 

platform/ui/src/components/ViewportPane/index.js

@@ -1,2 +1,2 @@
-import ViewportPane from './ViewportPane.jsx';
+import ViewportPane from './ViewportPane';
 export default ViewportPane;

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 (
+    <DndProvider backend={backend} opts={opts}>
+      {children}
+    </DndProvider>
+  );
+}

platform/ui/src/contextProviders/index.js

@@ -9,3 +9,5 @@ export {
   default as ViewportDialogProvider,
   useViewportDialog,
 } from './ViewportDialogProvider';
+
+export { default as DragAndDropContext } from './DragAndDropContext';

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"