fix: demo

ant-design · Feb 10, 2022 · 769c60b · 769c60b
1 parent d1ed592
commit 769c60b
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 37 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
@@ -34,6 +34,7 @@ const DraggableTabNode = ({ index, children, moveNode }) => {
       }
       return {
         isOver: monitor.isOver(),
+        dropClassName: 'dropping',
       };
     },
     drop: item => {
@@ -48,7 +49,11 @@ const DraggableTabNode = ({ index, children, moveNode }) => {
     }),
   });
   drop(drag(ref));
-  return cloneElement(children, { ref });
+  return (
+    <div ref={ref} style={{ marginRight: 24 }} className={isOver ? dropClassName : ''}>
+      {children}
+    </div>
+  );
 };
 
 class DraggableTabs extends React.Component {
@@ -141,3 +146,10 @@ ReactDOM.render(
   mountNode,
 );
 ```
+
+```css
+.dropping {
+  background: #fefefe;
+  transition: all 0.3s;
+}
+```