refactor: upgrade React DND to v16

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

src/components/ColumnsConfiguration/ColumnConfigurationItem.react.js

@@ -7,20 +7,21 @@ 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,
     collect: monitor => ({
       isOver: !!monitor.isOver(),
       canDrop: !!monitor.canDrop()
     })
-  });
+  }));
 
   return drag(drop(
     <section

src/components/ColumnsConfiguration/ColumnsConfiguration.react.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { DndProvider } from 'react-dnd'
-import HTML5Backend from 'react-dnd-html5-backend'
+import { HTML5Backend } from 'react-dnd-html5-backend'
 import ReactDOM from 'react-dom';
 
 import Button from 'components/Button/Button.react';

src/components/DataBrowserHeader/DataBrowserHeader.example.js

@@ -6,7 +6,7 @@
  * the root directory of this source tree.
  */
 import DataBrowserHeader   from 'components/DataBrowserHeader/DataBrowserHeader.react';
-import HTML5Backend        from 'react-dnd-html5-backend';
+import { HTML5Backend }    from 'react-dnd-html5-backend';
 import React               from 'react';
 import { DndProvider }     from 'react-dnd'
 

src/components/DataBrowserHeader/DataBrowserHeader.react.js

@@ -9,69 +9,48 @@ import PropTypes                  from 'lib/PropTypes';
 import React                      from 'react';
 import styles                     from 'components/DataBrowserHeader/DataBrowserHeader.scss';
 import baseStyles                 from 'stylesheets/base.scss';
-import { DragSource, DropTarget } from 'react-dnd';
+import { useDrop, useDrag }       from 'react-dnd';
 
 const Types = {
   DATA_BROWSER_HEADER: 'dataBrowserHeader'
 };
 
-const dataBrowserHeaderTarget = {
-  drop(props, monitor) {
-    const item = monitor.getItem();
+function DataBrowserHeader({ name, type, index, targetClass, order, style, moveDataBrowserHeader }) {
+  const [{ isDragging }, drag] = useDrag(() => ({
+    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(
-      <div className={classes.join(' ')} style={style}>
-        <div className={styles.name}>{name}</div>
-        <div className={styles.type}>{targetClass ? `${type} <${targetClass}>` : type}</div>
-      </div>
-    ));
+  if (isOver && !isDragging) {
+    classes.push(styles.over);
+  }
+  if (isDragging) {
+    classes.push(styles.dragging);
   }
+  return drag(drop(
+    <div  className={classes.join(' ')} style={style}>
+      <div className={styles.name}>{name}</div>
+      <div className={styles.type}>{targetClass ? `${type} <${targetClass}>` : type}</div>
+    </div>
+  ));
 }
 
 export default DataBrowserHeader;

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'

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'