refactor: Tabs use items instead of jsx node (#562)

* chore: basic refactor

* docs: more example

* docs: more example

* docs: more and more

* docs: rest demo

* chore: connect props

* test: All test case convert

* chore: adjust ts comiple

* test: coverage

docs/examples/basic.tsx

@@ -1,19 +1,26 @@
 import React from 'react';
-import Tabs, { TabPane } from 'rc-tabs';
+import Tabs from 'rc-tabs';
 import '../../assets/index.less';
 
 export default () => {
   const [destroy, setDestroy] = React.useState(false);
-  const [children, setChildren] = React.useState([
-    <TabPane key="light" tab="light">
-      Light
-    </TabPane>,
-    <TabPane key="bamboo" tab="bamboo">
-      Bamboo
-    </TabPane>,
-    <TabPane key="cute" tab="cute" disabled>
-      Cute
-    </TabPane>,
+  const [items, setItems] = React.useState([
+    {
+      label: 'Light',
+      key: 'light',
+      children: 'Light!',
+    },
+    {
+      label: 'Bamboo',
+      key: 'bamboo',
+      children: 'Bamboo!',
+    },
+    {
+      label: 'Cute',
+      key: 'cute',
+      children: 'Cute!',
+      disabled: true,
+    },
   ]);
 
   if (destroy) {
@@ -22,16 +29,16 @@ export default () => {
 
   return (
     <React.StrictMode>
-      <Tabs tabBarExtraContent="extra">
-        {children}
-      </Tabs>
+      <Tabs tabBarExtraContent="extra" items={items} />
       <button
         type="button"
         onClick={() => {
-          setChildren([
-            <TabPane key="Yo" tab="yo">
-              Yo!
-            </TabPane>,
+          setItems([
+            {
+              key: 'yo',
+              label: 'Yo',
+              children: 'Yo!',
+            },
           ]);
         }}
       >

docs/examples/editable.tsx

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import Tabs, { TabPane } from 'rc-tabs';
+import Tabs from 'rc-tabs';
 import '../../assets/index.less';
 
 export default () => {
@@ -37,15 +37,16 @@ export default () => {
 
   return (
     <div style={{ maxWidth: 550 }}>
-      <Tabs editable={editable} defaultActiveKey="8" moreIcon="...">
-        {tabs.map(({ key, content }) => {
-          return (
-            <TabPane key={key} tab={`Tab ${key}`}>
-              {content}
-            </TabPane>
-          );
-        })}
-      </Tabs>
+      <Tabs
+        editable={editable}
+        defaultActiveKey="8"
+        moreIcon="..."
+        items={tabs.map(({ key, content }) => ({
+          key,
+          label: `tab ${key}`,
+          children: content,
+        }))}
+      />
     </div>
   );
 };

docs/examples/extra.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
-import Tabs, { TabPane } from 'rc-tabs';
+import Tabs from 'rc-tabs';
+import type { TabsProps } from 'rc-tabs';
 import '../../assets/index.less';
 
-const tabs: React.ReactElement[] = [];
+const items: TabsProps['items'] = [];
 
 for (let i = 0; i < 50; i += 1) {
-  tabs.push(
-    <TabPane key={i} tab={`Tab ${i}`}>
-      Content of {i}
-    </TabPane>,
-  );
+  items.push({
+    key: String(i),
+    label: `Tab ${i}`,
+    children: `Content of ${i}`,
+  });
 }
 
 type P = 'default' | 'left' | 'right';
@@ -103,9 +104,7 @@ export default () => {
 
   return (
     <div style={{ maxWidth: 550 }}>
-      <Tabs tabBarExtraContent={extra} defaultActiveKey="8" moreIcon="...">
-        {tabs}
-      </Tabs>
+      <Tabs tabBarExtraContent={extra} defaultActiveKey="8" moreIcon="..." items={items} />
       <div style={{ display: 'flex' }}>
         <div>
           <input

docs/examples/mix.tsx

@@ -1,17 +1,20 @@
 import React from 'react';
-import Tabs, { TabPane } from 'rc-tabs';
+import Tabs from 'rc-tabs';
+import type { TabsProps } from 'rc-tabs';
 import '../../assets/index.less';
 
 function getTabPanes(count = 50) {
-  const tabs: React.ReactElement[] = [];
+  const items: TabsProps['items'] = [];
   for (let i = 0; i < count; i += 1) {
-    tabs.push(
-      <TabPane key={i} tab={`Tab ${i}`} disabled={i === 3} closable={i === 5 ? false : undefined}>
-        Content of {i}
-      </TabPane>,
-    );
+    items.push({
+      key: String(i),
+      label: `Tab ${i}`,
+      disabled: i === 3,
+      closable: i === 5 ? false : undefined,
+      children: `Content of ${i}`,
+    });
   }
-  return tabs;
+  return items;
 }
 
 export default () => {
@@ -40,9 +43,11 @@ export default () => {
               const num = Number(lastTab.key) + 1;
               return [
                 ...tabs,
-                <TabPane key={num} tab={`Tab ${num}`}>
-                  Content of {num}
-                </TabPane>,
+                {
+                  key: String(num),
+                  label: `Tab ${num}`,
+                  children: `Content of ${num}`,
+                },
               ];
             });
           }
@@ -161,9 +166,8 @@ export default () => {
             moreIcon="..."
             // moreTransitionName="233"
             style={{ height: fixHeight ? 300 : null }}
-          >
-            {tabPanes}
-          </Tabs>
+            items={tabPanes}
+          />
         </React.StrictMode>
       )}
     </div>

docs/examples/overflow.tsx

@@ -1,15 +1,12 @@
 import React from 'react';
-import Tabs, { TabPane } from 'rc-tabs';
+import Tabs from 'rc-tabs';
+import type { TabsProps } from 'rc-tabs';
 import '../../assets/index.less';
 
-const tabs: React.ReactElement[] = [];
+const items: TabsProps['items'] = [];
 
 for (let i = 0; i < 200; i += 1) {
-  tabs.push(
-    <TabPane key={i} tab={`Tab ${i}`}>
-      Content of {i}
-    </TabPane>,
-  );
+  items.push({ key: String(i), label: `Tab ${i}`, children: `Content of ${i}` });
 }
 
 export default () => {
@@ -29,9 +26,8 @@ export default () => {
             tabBarExtraContent="extra"
             defaultActiveKey="8"
             moreIcon="..."
-          >
-            {tabs}
-          </Tabs>
+            items={items}
+          />
         </div>
       </React.StrictMode>
 

docs/examples/position.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Tabs, { TabPane } from 'rc-tabs';
+import Tabs from 'rc-tabs';
 import '../../assets/index.less';
 
 export default () => {
@@ -32,26 +32,39 @@ export default () => {
         tabPosition={position}
         style={{ height: fixedHeight ? 180 : undefined }}
         tabBarGutter={gutter ? 16 : null}
-      >
-        <TabPane key="light" tab="light">
-          Light
-        </TabPane>
-        <TabPane key="bamboo" tab="bamboo">
-          Bamboo
-        </TabPane>
-        <TabPane key="cat" tab="cat">
-          Cat
-        </TabPane>
-        <TabPane key="miu" tab="miu">
-          Miu
-        </TabPane>
-        <TabPane key="333" tab="333">
-          3333
-        </TabPane>
-        <TabPane key="4444" tab="4444">
-          4444
-        </TabPane>
-      </Tabs>
+        items={[
+          {
+            key: 'light',
+            label: 'Light',
+            children: 'Light!',
+          },
+          {
+            key: 'bamboo',
+            label: 'Bamboo',
+            children: 'Bamboo!',
+          },
+          {
+            key: 'cat',
+            label: 'Cat',
+            children: 'Cat!',
+          },
+          {
+            key: 'miu',
+            label: 'Miu',
+            children: 'Miu!',
+          },
+          {
+            key: '333',
+            label: '333',
+            children: '333!',
+          },
+          {
+            key: '444',
+            label: '444',
+            children: '444!',
+          },
+        ]}
+      />
     </React.StrictMode>
   );
 };

docs/examples/renderTabBar-dragable.tsx

@@ -2,10 +2,9 @@ import React from 'react';
 import { DndProvider, DragSource, DropTarget } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
 import Tabs from 'rc-tabs';
+import type { TabsProps } from 'rc-tabs';
 import '../../assets/index.less';
 
-const { TabPane } = Tabs;
-
 // Drag & Drop node
 class TabNode extends React.Component<any, any> {
   render() {
@@ -47,18 +46,18 @@ const WrapTabNode = DropTarget('DND_NODE', cardTarget, connect => ({
   }))(TabNode),
 );
 
-class DraggableTabs extends React.Component {
+class DraggableTabs extends React.Component<TabsProps> {
   state = {
     order: [],
   };
 
   moveTabNode = (dragKey, hoverKey) => {
     const newOrder = this.state.order.slice();
-    const { children } = this.props;
+    const { items } = this.props;
 
-    React.Children.forEach(children, (c: React.ReactElement) => {
-      if (newOrder.indexOf(c.key) === -1) {
-        newOrder.push(c.key);
+    items.forEach(item => {
+      if (newOrder.indexOf(item.key) === -1) {
+        newOrder.push(item.key);
       }
     });
 
@@ -87,12 +86,9 @@ class DraggableTabs extends React.Component {
 
   render() {
     const { order } = this.state;
-    const { children } = this.props;
+    const { items } = this.props;
 
-    const tabs = [];
-    React.Children.forEach(children, c => {
-      tabs.push(c);
-    });
+    const tabs = [...items];
 
     const orderTabs = tabs.slice().sort((a, b) => {
       const orderA = order.indexOf(a.key);
@@ -116,24 +112,30 @@ class DraggableTabs extends React.Component {
 
     return (
       <DndProvider backend={HTML5Backend}>
-        <Tabs renderTabBar={this.renderTabBar} {...this.props}>
-          {orderTabs}
-        </Tabs>
+        <Tabs renderTabBar={this.renderTabBar} {...this.props} items={orderTabs} />
       </DndProvider>
     );
   }
 }
 
 export default () => (
-  <DraggableTabs>
-    <TabPane tab="tab 1" key="1">
-      Content of Tab Pane 1
-    </TabPane>
-    <TabPane tab="tab 2" key="2">
-      Content of Tab Pane 2
-    </TabPane>
-    <TabPane tab="tab 3" key="3">
-      Content of Tab Pane 3
-    </TabPane>
-  </DraggableTabs>
+  <DraggableTabs
+    items={[
+      {
+        key: '1',
+        label: 'tab 1',
+        children: 'Content of Tab Pane 1',
+      },
+      {
+        key: '2',
+        label: 'tab 2',
+        children: 'Content of Tab Pane 2',
+      },
+      {
+        key: '3',
+        label: 'tab 3',
+        children: 'Content of Tab Pane 3',
+      },
+    ]}
+  />
 );