fix: Tabs demo

ant-design · Feb 10, 2022 · d1ed592 · d1ed592
1 parent 7210fd8
commit d1ed592
Showing 1 changed file with 33 additions and 43 deletions.
diff --git a/components/tabs/demo/custom-tab-bar-node.md b/components/tabs/demo/custom-tab-bar-node.md
@@ -7,60 +7,50 @@ title:
 
 ## zh-CN
 
-使用 `react-dnd` 实现标签可拖拽。
+使用 `react-dnd@15+` 实现标签可拖拽。
 
 ## en-US
 
-Use `react-dnd` to make tabs draggable.
+Use `react-dnd@15+` to make tabs draggable.
 
 ```jsx
+import React, { useRef, cloneElement } from 'react';
 import { Tabs } from 'antd';
-import { DndProvider, DragSource, DropTarget } from 'react-dnd';
+import { DndProvider, useDrag, useDrop } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 
 const { TabPane } = Tabs;
 
-// Drag & Drop node
-class TabNode extends React.Component {
-  render() {
-    const { connectDragSource, connectDropTarget, children } = this.props;
-
-    return connectDragSource(connectDropTarget(children));
-  }
-}
-
-const cardTarget = {
-  drop(props, monitor) {
-    const dragKey = monitor.getItem().index;
-    const hoverKey = props.index;
-
-    if (dragKey === hoverKey) {
-      return;
-    }
+const type = 'DraggableTabNode';
 
-    props.moveTabNode(dragKey, hoverKey);
-    monitor.getItem().index = hoverKey;
-  },
-};
-
-const cardSource = {
-  beginDrag(props) {
-    return {
-      id: props.id,
-      index: props.index,
-    };
-  },
+const DraggableTabNode = ({ index, children, moveNode }) => {
+  const ref = useRef();
+  const [{ isOver, dropClassName }, drop] = useDrop({
+    accept: type,
+    collect: monitor => {
+      const { index: dragIndex } = monitor.getItem() || {};
+      if (dragIndex === index) {
+        return {};
+      }
+      return {
+        isOver: monitor.isOver(),
+      };
+    },
+    drop: item => {
+      moveNode(item.index, index);
+    },
+  });
+  const [, drag] = useDrag({
+    type,
+    item: { index },
+    collect: monitor => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
+  drop(drag(ref));
+  return cloneElement(children, { ref });
 };
 
-const WrapTabNode = DropTarget('DND_NODE', cardTarget, connect => ({
-  connectDropTarget: connect.dropTarget(),
-}))(
-  DragSource('DND_NODE', cardSource, (connect, monitor) => ({
-    connectDragSource: connect.dragSource(),
-    isDragging: monitor.isDragging(),
-  }))(TabNode),
-);
-
 class DraggableTabs extends React.Component {
   state = {
     order: [],
@@ -90,9 +80,9 @@ class DraggableTabs extends React.Component {
   renderTabBar = (props, DefaultTabBar) => (
     <DefaultTabBar {...props}>
       {node => (
-        <WrapTabNode key={node.key} index={node.key} moveTabNode={this.moveTabNode}>
+        <DraggableTabNode key={node.key} index={node.key} moveNode={this.moveTabNode}>
           {node}
-        </WrapTabNode>
+        </DraggableTabNode>
       )}
     </DefaultTabBar>
   );