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

fix: Use HTML5Backend for drag-drop if the device does not support touch (#927)

Browse Source 
* fix: Use HTML5Backend for drag-drop if the device does not support touch, since it's less buggy

* Forgot React when using jsx
This commit is contained in:
Erik Ziegler 2019-09-19 14:57:04 +02:00 committed by GitHub
parent 6192502fe0
commit 6fdac4d605
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 39 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
platform/ui/package.json
View File

@ -48,8 +48,9 @@
"prop-types": "15.6.2",
"react-bootstrap-modal": "4.2.0",
"react-dates": "18.4.1",
"react-dnd": "8.0.3",
"react-dnd-touch-backend": "^0.8.3",
"react-dnd": "9.3.4",
"react-dnd-html5-backend": "^9.3.4",
"react-dnd-touch-backend": "^9.3.4",
"react-i18next": "^10.11.0",
"react-with-direction": "1.3.0"
},

17
platform/ui/src/utils/viewerbaseDragDropContext.js
View File

@ -1,13 +1,20 @@
import { DragDropContext } from 'react-dnd';
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 = !!('ontouchstart' in window || navigator.maxTouchPoints);
// See https://github.com/react-dnd/react-dnd/issues/186#issuecomment-335429067
// https://github.com/react-dnd/react-dnd/issues/186#issuecomment-282789420
// TODO: Find a way for this context to be used in the parent application as well.
//
// http://react-dnd.github.io/react-dnd/docs/api/drag-drop-context
export default function viewerbaseDragDropContext(DecoratedClass) {
return DragDropContext(TouchBackend({ enableMouseEvents: true }), null, true)(
DecoratedClass
const backend = isTouchDevice ? TouchBackend({ enableMouseEvents: true }) : HTML5Backend;
return (props) => (
<DndProvider backend={backend}>
<DecoratedClass {...props}/>
</DndProvider>
);
}

49
yarn.lock
View File

@ -2526,7 +2526,7 @@
"@types/react" "*"
hoist-non-react-statics "^3.3.0"
"@types/invariant@^2.2.29":
"@types/invariant@^2.2.30":
version "2.2.30"
resolved "https://registry.yarnpkg.com/@types/invariant/-/invariant-2.2.30.tgz#20efa342807606ada5483731a8137cb1561e5fe9"
integrity sha512-98fB+yo7imSD2F7PF7GIpELNgtLNgo5wjivu0W5V4jx+KVVJxo6p/qN4zdzSTBWy4/sN3pPyXwnhRSD28QX+ag==
@ -6212,22 +6212,13 @@ direction@^1.0.1, direction@^1.0.2:
resolved "https://registry.yarnpkg.com/direction/-/direction-1.0.3.tgz#5030e1e091e923904067d015dbaafd08f4d27d26"
integrity sha512-8bHRqMt4w/kND19KBksE4NOJo+gIOPuiZfxQvbd6xikfKbuNBYBdLIw0hA/4lWzBaDpwpW+Olmg1BjD9+0LU2w==
dnd-core@^7.4.4:
version "7.7.0"
resolved "https://registry.yarnpkg.com/dnd-core/-/dnd-core-7.7.0.tgz#3166aefc8c5b85ca4ade4ae836712a3108975fab"
integrity sha512-+YqwflWEY1MEAEl2QiEiRaglYkCwIZryyQwximQGuTOm/ns7fS6Lg/i7OCkrtjM10D5FhArf/VUHIL4ZaRBK0g==
dependencies:
asap "^2.0.6"
invariant "^2.2.4"
redux "^4.0.1"
dnd-core@^8.0.3:
version "8.0.3"
resolved "https://registry.yarnpkg.com/dnd-core/-/dnd-core-8.0.3.tgz#96fdaae0f53ca86996ed50075000ebd758169682"
integrity sha512-jffgwAMsv5g6TRDmvjBW0EUntVXO8+X184zBRFnOmCfhFU8EV7/Aq+wPpJCeRAMge8fMYJGrjlm1xeH0wMrHYQ==
dnd-core@^9.3.4:
version "9.3.4"
resolved "https://registry.yarnpkg.com/dnd-core/-/dnd-core-9.3.4.tgz#56b5fdc165aa7d102506d3d5a08ec1fa789e0775"
integrity sha512-sDzBiGXgpj9bQhs8gtPWFIKMg4WY8ywI9RI81rRAUWI4oNj/Sm/ztjS67UjCvMa+fWoQ2WNIV3U9oDqeBN0+2g==
dependencies:
"@types/asap" "^2.0.0"
"@types/invariant" "^2.2.29"
"@types/invariant" "^2.2.30"
asap "^2.0.6"
invariant "^2.2.4"
redux "^4.0.1"
@ -14646,22 +14637,30 @@ react-dev-utils@^9.0.1:
strip-ansi "5.2.0"
text-table "0.2.0"
react-dnd-touch-backend@^0.8.3:
version "0.8.3"
resolved "https://registry.yarnpkg.com/react-dnd-touch-backend/-/react-dnd-touch-backend-0.8.3.tgz#85d961ec8578dc9efa5b78000ea904d37e01e60f"
integrity sha512-LLJlpeJftRreP9ixm3yfd1JEXf+6BeKo5dkfJFHvNSOEOu+FDSwNl5l8uAG0FeD4z2ZVi7RDQ/jUxdjkBV3zBg==
react-dnd-html5-backend@^9.3.4:
version "9.3.4"
resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-9.3.4.tgz#5d1f5ac608206d7b294b7407b9e1a336589eedd7"
integrity sha512-s+Xu0j7fHV9bLMSaOCuX76baQKcZfycAx0EzDmkxcFXPBiiFlI8l6rzwURdSJCjNcvLYXd8MLb4VkSNSq5ISZQ==
dependencies:
dnd-core "^7.4.4"
dnd-core "^9.3.4"
react-dnd-touch-backend@^9.3.4:
version "9.3.4"
resolved "https://registry.yarnpkg.com/react-dnd-touch-backend/-/react-dnd-touch-backend-9.3.4.tgz#6a93d06967a400dad2154b49e273f93aeee1cdfe"
integrity sha512-AREEmbttYY2c8y8lPYilzQksskArkbP0eCSrmilyxmUqQ1pzTRaYFl/5e0t3YKNBjgR47l44KFAHl37pTs81Pw==
dependencies:
"@types/invariant" "^2.2.30"
dnd-core "^9.3.4"
invariant "^2.2.4"
react-dnd@8.0.3:
version "8.0.3"
resolved "https://registry.yarnpkg.com/react-dnd/-/react-dnd-8.0.3.tgz#6226e1a6476bc7f9593b98def86fdab7d45100f8"
integrity sha512-wsdpZLJj8XqEl04GE1fd45/eNB+cZWEx0ZQC7PgrQ/URD2BfbwyQ5RiT23Cl/BPKJBUkTh1FltZ88LTUd7yGeg==
react-dnd@9.3.4:
version "9.3.4"
resolved "https://registry.yarnpkg.com/react-dnd/-/react-dnd-9.3.4.tgz#ebab4b5b430b72f3580c058a29298054e1f9d2b8"
integrity sha512-UUtyoHFRrryMxVMEGYa3EdZIdibnys/ax7ZRs6CKpETHlnJQOFhHE3rpI+ManvKS0o3MFc1DZ+aoudAFtrOvFA==
dependencies:
"@types/hoist-non-react-statics" "^3.3.1"
"@types/shallowequal" "^1.1.1"
dnd-core "^8.0.3"
dnd-core "^9.3.4"
hoist-non-react-statics "^3.3.0"
shallowequal "^1.1.0"