Upgrade react-dnd

components/table/demo/drag-sorting.md

@@ -36,47 +36,49 @@ function dragDirection(
   }
 }
 
-let BodyRow = (props) => {
-  const {
-    isOver,
-    connectDragSource,
-    connectDropTarget,
-    moveRow,
-    dragRow,
-    clientOffset,
-    sourceClientOffset,
-    initialClientOffset,
-    ...restProps
-  } = props;
-  const style = { ...restProps.style, cursor: 'move' };
-
-  let className = restProps.className;
-  if (isOver && initialClientOffset) {
-    const direction = dragDirection(
-      dragRow.index,
-      restProps.index,
-      initialClientOffset,
+class BodyRow extends React.Component {
+  render() {
+    const {
+      isOver,
+      connectDragSource,
+      connectDropTarget,
+      moveRow,
+      dragRow,
       clientOffset,
-      sourceClientOffset
-    );
-    if (direction === 'downward') {
-      className += ' drop-over-downward';
-    }
-    if (direction === 'upward') {
-      className += ' drop-over-upward';
-    }
-  }
+      sourceClientOffset,
+      initialClientOffset,
+      ...restProps
+    } = this.props;
+    const style = { ...restProps.style, cursor: 'move' };
 
-  return connectDragSource(
-    connectDropTarget(
-      <tr
-        {...restProps}
-        className={className}
-        style={style}
-      />
-    )
-  );
-};
+    let className = restProps.className;
+    if (isOver && initialClientOffset) {
+      const direction = dragDirection(
+        dragRow.index,
+        restProps.index,
+        initialClientOffset,
+        clientOffset,
+        sourceClientOffset
+      );
+      if (direction === 'downward') {
+        className += ' drop-over-downward';
+      }
+      if (direction === 'upward') {
+        className += ' drop-over-upward';
+      }
+    }
+
+    return connectDragSource(
+      connectDropTarget(
+        <tr
+          {...restProps}
+          className={className}
+          style={style}
+        />
+      )
+    );
+  }
+}
 
 const rowSource = {
   beginDrag(props) {
@@ -107,7 +109,7 @@ const rowTarget = {
   },
 };
 
-BodyRow = DropTarget('row', rowTarget, (connect, monitor) => ({
+const DragableBodyRow = DropTarget('row', rowTarget, (connect, monitor) => ({
   connectDropTarget: connect.dropTarget(),
   isOver: monitor.isOver(),
   sourceClientOffset: monitor.getSourceClientOffset(),
@@ -156,7 +158,7 @@ class DragSortingTable extends React.Component {
 
   components = {
     body: {
-      row: BodyRow,
+      row: DragableBodyRow,
     },
   }
 
@@ -188,7 +190,7 @@ class DragSortingTable extends React.Component {
   }
 }
 
-const Demo = DragDropContext(HTML5Backend)(DragSortingTable);
+const Demo = DragDropContext(HTML5Backend, { window })(DragSortingTable);
 
 ReactDOM.render(<Demo />, mountNode);
 ````

package.json

@@ -146,8 +146,8 @@
     "react": "^16.3.2",
     "react-color": "^2.11.7",
     "react-copy-to-clipboard": "^5.0.0",
-    "react-dnd": "^2.5.4",
-    "react-dnd-html5-backend": "^2.5.4",
+    "react-dnd": "^3.0.2",
+    "react-dnd-html5-backend": "^3.0.2",
     "react-document-title": "^2.0.1",
     "react-dom": "^16.3.2",
     "react-github-button": "^0.1.1",