diff --git a/package-lock.json b/package-lock.json index f0dc2afdde..d241efd953 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3183,19 +3183,19 @@ "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==" }, "@react-dnd/asap": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-4.0.0.tgz", - "integrity": "sha512-0XhqJSc6pPoNnf8DhdsPHtUhRzZALVzYMTzRwV4VI6DJNJ/5xxfL9OQUwb8IH5/2x7lSf7nAZrnzUD+16VyOVQ==" + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-5.0.2.tgz", + "integrity": "sha512-WLyfoHvxhs0V9U+GTsGilGgf2QsPl6ZZ44fnv0/b8T3nQyvzxidxsg/ZltbWssbsRDlYW8UKSQMTGotuTotZ6A==" }, "@react-dnd/invariant": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/@react-dnd/invariant/-/invariant-2.0.0.tgz", - "integrity": "sha512-xL4RCQBCBDJ+GRwKTFhGUW8GXa4yoDfJrPbLblc3U09ciS+9ZJXJ3Qrcs/x2IODOdIE5kQxvMmE2UKyqUictUw==" + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/@react-dnd/invariant/-/invariant-4.0.2.tgz", + "integrity": "sha512-xKCTqAK/FFauOM9Ta2pswIyT3D8AQlfrYdOi/toTPEhqCuAs1v5tcJ3Y08Izh1cJ5Jchwy9SeAXmMg6zrKs2iw==" }, "@react-dnd/shallowequal": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-2.0.0.tgz", - "integrity": "sha512-Pc/AFTdwZwEKJxFJvlxrSmGe/di+aAOBn60sremrpLo6VI/6cmiUYNNwlI5KNYttg7uypzA3ILPMPgxB2GYZEg==" + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz", + "integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA==" }, "@saithodev/semantic-release-backmerge": { "version": "2.1.2", @@ -6339,13 +6339,13 @@ } }, "dnd-core": { - "version": "10.0.2", - "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-10.0.2.tgz", - "integrity": "sha512-PrxEjxF0+6Y1n1n1Z9hSWZ1tvnDXv9syL+BccV1r1RC08uWNsyetf8AnWmUF3NgYPwy0HKQJwTqGkZK+1NlaFA==", + "version": "16.0.1", + "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-16.0.1.tgz", + "integrity": "sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng==", "requires": { - "@react-dnd/asap": "^4.0.0", - "@react-dnd/invariant": "^2.0.0", - "redux": "^4.0.4" + "@react-dnd/asap": "^5.0.1", + "@react-dnd/invariant": "^4.0.1", + "redux": "^4.2.0" } }, "doctrine": { @@ -7363,8 +7363,7 @@ "fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", - "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", - "dev": true + "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" }, "fast-glob": { "version": "3.2.7", @@ -15564,22 +15563,23 @@ } }, "react-dnd": { - "version": "10.0.2", - "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-10.0.2.tgz", - "integrity": "sha512-SC2Ymvntynhoqtf5zaFhZscm9xenCoMofilxPdlwUlaelAzmbl9fw82C4ZJ//+lNm3kWAKXjGDZg2/aWjKEAtg==", + "version": "16.0.1", + "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-16.0.1.tgz", + "integrity": "sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==", "requires": { - "@react-dnd/shallowequal": "^2.0.0", - "@types/hoist-non-react-statics": "^3.3.1", - "dnd-core": "^10.0.2", - "hoist-non-react-statics": "^3.3.0" + "@react-dnd/invariant": "^4.0.1", + "@react-dnd/shallowequal": "^4.0.1", + "dnd-core": "^16.0.1", + "fast-deep-equal": "^3.1.3", + "hoist-non-react-statics": "^3.3.2" } }, "react-dnd-html5-backend": { - "version": "10.0.2", - "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-10.0.2.tgz", - "integrity": "sha512-ny17gUdInZ6PIGXdzfwPhoztRdNVVvjoJMdG80hkDBamJBeUPuNF2Wv4D3uoQJLjXssX1+i9PhBqc7EpogClwQ==", + "version": "16.0.1", + "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-16.0.1.tgz", + "integrity": "sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==", "requires": { - "dnd-core": "^10.0.2" + "dnd-core": "^16.0.1" } }, "react-dom": { @@ -15887,9 +15887,9 @@ } }, "redux": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/redux/-/redux-4.1.1.tgz", - "integrity": "sha512-hZQZdDEM25UY2P493kPYuKqviVwZ58lEmGQNeQ+gXa+U0gYPUBf7NKYazbe3m+bs/DzM/ahN12DbF+NG8i0CWw==", + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.0.tgz", + "integrity": "sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==", "requires": { "@babel/runtime": "^7.9.2" } diff --git a/package.json b/package.json index b93e51e45a..f6e6e99382 100644 --- a/package.json +++ b/package.json @@ -62,8 +62,8 @@ "qrcode": "1.5.1", "react": "16.14.0", "react-ace": "10.1.0", - "react-dnd": "10.0.2", - "react-dnd-html5-backend": "10.0.2", + "react-dnd": "16.0.1", + "react-dnd-html5-backend": "16.0.1", "react-dom": "16.14.0", "react-helmet": "6.1.0", "react-json-view": "1.21.3", diff --git a/src/components/ColumnsConfiguration/ColumnConfigurationItem.react.js b/src/components/ColumnsConfiguration/ColumnConfigurationItem.react.js index 279beb1926..c21c7d34a0 100644 --- a/src/components/ColumnsConfiguration/ColumnConfigurationItem.react.js +++ b/src/components/ColumnsConfiguration/ColumnConfigurationItem.react.js @@ -7,12 +7,13 @@ import styles from 'components/ColumnsConfiguration/ColumnConfigurationItem.scss const DND_TYPE = 'ColumnConfigurationItem'; export default ({ name, handleColumnDragDrop, index, onChangeVisible, visible }) => { - const [ { isDragging}, drag ] = useDrag({ - item: { type: DND_TYPE, index }, - collect: monitor => ({ isDragging: !!monitor.isDragging() }) - }); + const [ { isDragging}, drag ] = useDrag(() => ({ + type: DND_TYPE, + item: { index }, + collect: monitor => ({ isDragging: monitor.isDragging() }) + })); - const [ { canDrop, isOver }, drop ] = useDrop({ + const [ { canDrop, isOver }, drop ] = useDrop(() => ({ accept: DND_TYPE, drop: item => handleColumnDragDrop(item.index, index), canDrop: item => item.index !== index, @@ -20,7 +21,7 @@ export default ({ name, handleColumnDragDrop, index, onChangeVisible, visible }) isOver: !!monitor.isOver(), canDrop: !!monitor.canDrop() }) - }); + })); return drag(drop(
({ + type: Types.DATA_BROWSER_HEADER, + item: { + index, + }, + collect: (monitor) => ({ + isDragging: monitor.isDragging(), + }), + })); - if (!item) { - return; - } + const [{ isOver }, drop] = useDrop(() => ({ + accept: Types.DATA_BROWSER_HEADER, + collect: (monitor) => ({ + isOver: monitor.isOver(), + }), + drop: item => moveDataBrowserHeader(item.index, index), + canDrop: item => item.index !== index, + })) - const dragIndex = item.index; - const hoverIndex = props.index; - - // Don't replace items with themselves - if (dragIndex === hoverIndex) { - return; - } - - props.moveDataBrowserHeader(dragIndex, hoverIndex); - }, -} - -const dataBrowserHeaderSource = { - beginDrag(props) { - return { - name: props.name, - index: props.index, - }; + let classes = [styles.header, baseStyles.unselectable]; + if (order) { + classes.push(styles[order]); } -}; - -@DropTarget(Types.DATA_BROWSER_HEADER, dataBrowserHeaderTarget, (connect, monitor) => ({ - connectDropTarget: connect.dropTarget(), - isOver: monitor.isOver() -})) -@DragSource(Types.DATA_BROWSER_HEADER, dataBrowserHeaderSource, (connect, monitor) => ({ - connectDragSource: connect.dragSource(), - isDragging: monitor.isDragging() -})) -class DataBrowserHeader extends React.Component { - render() { - let { connectDragSource, connectDropTarget, name, type, targetClass, order, style, isDragging, isOver } = this.props; - let classes = [styles.header, baseStyles.unselectable]; - if (order) { - classes.push(styles[order]); - } - if (isOver && !isDragging) { - classes.push(styles.over); - } - if (isDragging) { - classes.push(styles.dragging); - } - return connectDragSource(connectDropTarget( -
-
{name}
-
{targetClass ? `${type} <${targetClass}>` : type}
-
- )); + if (isOver && !isDragging) { + classes.push(styles.over); + } + if (isDragging) { + classes.push(styles.dragging); } + return drag(drop( +
+
{name}
+
{targetClass ? `${type} <${targetClass}>` : type}
+
+ )); } export default DataBrowserHeader; diff --git a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js index d021924386..96519edcb8 100644 --- a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js +++ b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js @@ -7,7 +7,7 @@ */ import DataBrowserHeader from 'components/DataBrowserHeader/DataBrowserHeader.react'; import DragHandle from 'components/DragHandle/DragHandle.react'; -import HTML5Backend from 'react-dnd-html5-backend'; +import { HTML5Backend } from 'react-dnd-html5-backend'; import React from 'react'; import styles from 'components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss'; import { DndProvider } from 'react-dnd' diff --git a/src/components/DragHandle/DragHandle.example.js b/src/components/DragHandle/DragHandle.example.js index cb0571f2b6..c52a17af12 100644 --- a/src/components/DragHandle/DragHandle.example.js +++ b/src/components/DragHandle/DragHandle.example.js @@ -7,7 +7,7 @@ */ import DataBrowserHeader from 'components/DataBrowserHeader/DataBrowserHeader.react'; import DragHandle from 'components/DragHandle/DragHandle.react'; -import HTML5Backend from 'react-dnd-html5-backend'; +import { HTML5Backend } from 'react-dnd-html5-backend'; import React from 'react'; import { DndProvider } from 'react-dnd'