chore(deps): update dependency react-dnd to v15 (ant-design#33940)

* chore(deps): update dependency react-dnd to v15 * fix: Tabs demo * fix: demo Co-authored-by: Renovate Bot <bot@renovateapp.com> Co-authored-by: afc163 <afc163@gmail.com>
heiyu4585 · Feb 24, 2022 · 348bb70 · 348bb70
1 parent b07a5fd
commit 348bb70
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 80 deletions.
diff --git a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -945,39 +945,54 @@ exports[`renders ./components/tabs/demo/custom-tab-bar-node.md extend context co
         style="transform:translate(0px, 0px)"
       >
         <div
-          class="ant-tabs-tab ant-tabs-tab-active"
+          class=""
+          style="margin-right:24px"
         >
           <div
-            aria-selected="true"
-            class="ant-tabs-tab-btn"
-            role="tab"
-            tabindex="0"
+            class="ant-tabs-tab ant-tabs-tab-active"
           >
-            tab 1
+            <div
+              aria-selected="true"
+              class="ant-tabs-tab-btn"
+              role="tab"
+              tabindex="0"
+            >
+              tab 1
+            </div>
           </div>
         </div>
         <div
-          class="ant-tabs-tab"
+          class=""
+          style="margin-right:24px"
         >
           <div
-            aria-selected="false"
-            class="ant-tabs-tab-btn"
-            role="tab"
-            tabindex="0"
+            class="ant-tabs-tab"
           >
-            tab 2
+            <div
+              aria-selected="false"
+              class="ant-tabs-tab-btn"
+              role="tab"
+              tabindex="0"
+            >
+              tab 2
+            </div>
           </div>
         </div>
         <div
-          class="ant-tabs-tab"
+          class=""
+          style="margin-right:24px"
         >
           <div
-            aria-selected="false"
-            class="ant-tabs-tab-btn"
-            role="tab"
-            tabindex="0"
+            class="ant-tabs-tab"
           >
-            tab 3
+            <div
+              aria-selected="false"
+              class="ant-tabs-tab-btn"
+              role="tab"
+              tabindex="0"
+            >
+              tab 3
+            </div>
           </div>
         </div>
         <div

diff --git a/components/tabs/__tests__/__snapshots__/demo.test.js.snap b/components/tabs/__tests__/__snapshots__/demo.test.js.snap
@@ -831,39 +831,54 @@ exports[`renders ./components/tabs/demo/custom-tab-bar-node.md correctly 1`] = `
         style="transform:translate(0px, 0px)"
       >
         <div
-          class="ant-tabs-tab ant-tabs-tab-active"
+          class=""
+          style="margin-right:24px"
         >
           <div
-            aria-selected="true"
-            class="ant-tabs-tab-btn"
-            role="tab"
-            tabindex="0"
+            class="ant-tabs-tab ant-tabs-tab-active"
           >
-            tab 1
+            <div
+              aria-selected="true"
+              class="ant-tabs-tab-btn"
+              role="tab"
+              tabindex="0"
+            >
+              tab 1
+            </div>
           </div>
         </div>
         <div
-          class="ant-tabs-tab"
+          class=""
+          style="margin-right:24px"
         >
           <div
-            aria-selected="false"
-            class="ant-tabs-tab-btn"
-            role="tab"
-            tabindex="0"
+            class="ant-tabs-tab"
           >
-            tab 2
+            <div
+              aria-selected="false"
+              class="ant-tabs-tab-btn"
+              role="tab"
+              tabindex="0"
+            >
+              tab 2
+            </div>
           </div>
         </div>
         <div
-          class="ant-tabs-tab"
+          class=""
+          style="margin-right:24px"
         >
           <div
-            aria-selected="false"
-            class="ant-tabs-tab-btn"
-            role="tab"
-            tabindex="0"
+            class="ant-tabs-tab"
           >
-            tab 3
+            <div
+              aria-selected="false"
+              class="ant-tabs-tab-btn"
+              role="tab"
+              tabindex="0"
+            >
+              tab 3
+            </div>
           </div>
         </div>
         <div

diff --git a/components/tabs/demo/custom-tab-bar-node.md b/components/tabs/demo/custom-tab-bar-node.md
@@ -7,60 +7,55 @@ 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;
-    }
-
-    props.moveTabNode(dragKey, hoverKey);
-    monitor.getItem().index = hoverKey;
-  },
-};
+const type = 'DraggableTabNode';
 
-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(),
+        dropClassName: 'dropping',
+      };
+    },
+    drop: item => {
+      moveNode(item.index, index);
+    },
+  });
+  const [, drag] = useDrag({
+    type,
+    item: { index },
+    collect: monitor => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
+  drop(drag(ref));
+  return (
+    <div ref={ref} style={{ marginRight: 24 }} className={isOver ? dropClassName : ''}>
+      {children}
+    </div>
+  );
 };
 
-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 +85,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>
   );
@@ -151,3 +146,10 @@ ReactDOM.render(
   mountNode,
 );
 ```
+
+```css
+.dropping {
+  background: #fefefe;
+  transition: all 0.3s;
+}
+```
diff --git a/package.json b/package.json
@@ -247,7 +247,7 @@
     "react": "^17.0.1",
     "react-color": "^2.17.3",
     "react-copy-to-clipboard": "^5.0.1",
-    "react-dnd": "^14.0.1",
+    "react-dnd": "^15.0.0",
     "react-dnd-html5-backend": "^15.0.0",
     "react-dom": "^17.0.1",
     "react-draggable": "^4.4.3",