othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add drag and drop provider

Browse Source
This commit is contained in:
dannyrb 2020-05-14 22:01:34 -04:00 committed by James A. Petts
parent fe57becb2c
commit 599204176c
8 changed files with 57 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
platform/ui/index.js
View File

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

2
platform/ui/package.json
View File

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

3
platform/ui/src/components/ViewportPane/ViewportPane.jsx
View File

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

12
platform/ui/src/components/ViewportPane/ViewportPane.mdx
View File

@ -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>
<ViewportPane><h3>Hello</h3></ViewportPane>
<ViewportPane><h3>World</h3></ViewportPane>
</ViewportGrid>
<DragAndDropContext>
<ViewportGrid numRows={1} numCols={2}>
<ViewportPane onDrop={() => {}} isActive={true}><h3>Hello</h3></ViewportPane>
<ViewportPane onDrop={() => {}} isActive={false}><h3>World</h3></ViewportPane>
</ViewportGrid>
</DragAndDropContext>
</div>
</Playground>

2
platform/ui/src/components/ViewportPane/index.js
View File

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

25
platform/ui/src/contextProviders/DragAndDropContext.js Normal file
View File

@ -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>
);
}

2
platform/ui/src/contextProviders/index.js
View File

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

15
yarn.lock
View File

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