docs: rewrite drag-drop demo by react-dnd hooks (#21836)

components/table/__tests__/__snapshots__/demo.test.js.snap

@@ -1460,7 +1460,6 @@ exports[`renders ./components/table/demo/drag-sorting.md correctly 1`] = `
                 <tr
                   class="ant-table-row ant-table-row-level-0"
                   data-row-key="1"
-                  index="0"
                   style="cursor:move"
                 >
                   <td
@@ -1482,7 +1481,6 @@ exports[`renders ./components/table/demo/drag-sorting.md correctly 1`] = `
                 <tr
                   class="ant-table-row ant-table-row-level-0"
                   data-row-key="2"
-                  index="1"
                   style="cursor:move"
                 >
                   <td
@@ -1504,7 +1502,6 @@ exports[`renders ./components/table/demo/drag-sorting.md correctly 1`] = `
                 <tr
                   class="ant-table-row ant-table-row-level-0"
                   data-row-key="3"
-                  index="2"
                   style="cursor:move"
                 >
                   <td

components/table/demo/drag-sorting.md

@@ -15,72 +15,47 @@ By using custom components, we can integrate table with react-dnd to implement d
 
 ```jsx
 import { Table } from 'antd';
-import { DndProvider, DragSource, DropTarget } from 'react-dnd';
+import { DndProvider, useDrag, useDrop } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
 import update from 'immutability-helper';
 
-let dragingIndex = -1;
+const type = 'DragbleBodyRow';
 
-class BodyRow extends React.Component {
-  render() {
-    const { isOver, connectDragSource, connectDropTarget, moveRow, ...restProps } = this.props;
-    const style = { ...restProps.style, cursor: 'move' };
-
-    let { className } = restProps;
-    if (isOver) {
-      if (restProps.index > dragingIndex) {
-        className += ' drop-over-downward';
+const DragableBodyRow = ({ index, moveRow, className, style, ...restProps }) => {
+  const ref = React.useRef();
+  const [{ isOver, dropClassName }, drop] = useDrop({
+    accept: type,
+    collect: monitor => {
+      const { index: dragIndex } = monitor.getItem() || {};
+      if (dragIndex === index) {
+        return {};
       }
-      if (restProps.index < dragingIndex) {
-        className += ' drop-over-upward';
-      }
-    }
-
-    return connectDragSource(
-      connectDropTarget(<tr {...restProps} className={className} style={style} />),
-    );
-  }
-}
-
-const rowSource = {
-  beginDrag(props) {
-    dragingIndex = props.index;
-    return {
-      index: props.index,
-    };
-  },
+      return {
+        isOver: monitor.isOver(),
+        dropClassName: dragIndex < index ? ' drop-over-downward' : ' drop-over-upward',
+      };
+    },
+    drop: item => {
+      moveRow(item.index, index);
+    },
+  });
+  const [, drag] = useDrag({
+    item: { type, index },
+    collect: monitor => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
+  drop(drag(ref));
+  return (
+    <tr
+      ref={ref}
+      className={`${className}${isOver ? dropClassName : ''}`}
+      style={{ cursor: 'move', ...style }}
+      {...restProps}
+    />
+  );
 };
 
-const rowTarget = {
-  drop(props, monitor) {
-    const dragIndex = monitor.getItem().index;
-    const hoverIndex = props.index;
-
-    // Don't replace items with themselves
-    if (dragIndex === hoverIndex) {
-      return;
-    }
-
-    // Time to actually perform the action
-    props.moveRow(dragIndex, hoverIndex);
-
-    // Note: we're mutating the monitor item here!
-    // Generally it's better to avoid mutations,
-    // but it's good here for the sake of performance
-    // to avoid expensive index searches.
-    monitor.getItem().index = hoverIndex;
-  },
-};
-
-const DragableBodyRow = DropTarget('row', rowTarget, (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver(),
-}))(
-  DragSource('row', rowSource, connect => ({
-    connectDragSource: connect.dragSource(),
-  }))(BodyRow),
-);
-
 const columns = [
   {
     title: 'Name',