Merge branch 'master' into master

.dumirc.ts

@@ -5,4 +5,4 @@ export default defineConfig({
     name: 'Tabs',
   },
   mfsu: false,
-});
+});

.gitignore

@@ -31,6 +31,7 @@ es
 coverage
 yarn.lock
 package-lock.json
+pnpm-lock.yaml
 
 # umi
 .umi

README.md

@@ -41,51 +41,53 @@ online example: https://tabs.react-component.now.sh/
 
 ## Usage
 
-```js
+```tsx
 import Tabs from 'rc-tabs';
+import ReactDom from 'react-dom';
 
-var callback = function(key) {
-console.log(key);
+const callback = (key) => {
+  console.log(key);
 };
 
-const z = [
+const items = [
   {
-    key: "1",
-    label: "Google",
+    key: '1',
+    label: 'Google',
     children: (
       <div className="text-xl">
         <p>Lorem Ipsum is simply dummy text of the printing and typesetting</p>
       </div>
     ),
   },
   {
-    key: "2",
+    key: '2',
     label: <p>Amazon</p>,
     children:
-      "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...",
-    disabled: true
+      'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...',
+    disabled: true,
   },
   {
-    key: "3",
+    key: '3',
     label: <p>Twitter</p>,
     children: (
       <div>
-        "There is no one who loves pain itself, who seeks after it and wants to
-        have it, simply because it is pain..."
+        "There is no one who loves pain itself, who seeks after it and wants to have it, simply
+        because it is pain..."
       </div>
     ),
   },
 ];
 
-React.render(
-    <Tabs
-      tabPosition="bottom"
-      items={z}
-      defaultActiveKey="1"
-      className="md:w-[70%] w-full mx-auto p-2 border-0"
-      onChange={callback}
-      style={{color:"yellow"}}
-    />
+ReactDom.render(
+  <Tabs
+    tabPosition="bottom"
+    items={items}
+    defaultActiveKey="1"
+    className="md:w-[70%] w-full mx-auto p-2 border-0"
+    onChange={callback}
+    style={{ color: 'yellow' }}
+  />,
+  root,
 );
 ```
 
@@ -107,6 +109,7 @@ React.render(
 | renderTabBar | (props, TabBarComponent) => ReactElement | - | How to render tab bar |
 | tabBarExtraContent | ReactNode \| `{ left: ReactNode, right: ReactNode }` | - | config extra content |
 | tabBarGutter | number | 0 | config tab bar gutter |
+| tabBarPosition | `'left' \| 'right' \| 'top' \| 'bottom'` | `'top'` | tab nav 's position |
 | tabBarStyle | style | - | tab nav style |
 | tabPosition | `'left' or 'right' or 'top' or 'bottom'` | `'top'` | tab nav 's position |
 | destroyInactiveTabPane | boolean | false | whether destroy inactive TabPane when change tab |
@@ -143,6 +146,7 @@ React.render(
 
 | name | type | default | description |
 | --- | --- | --- | --- |
+| destroyInactiveTabPane | boolean | false | whether destroy inactive TabPane when change tab |
 | key | string | - | corresponding to activeKey, should be unique |
 | forceRender | boolean | false | forced render of content in tabs, not lazy render after clicking on tabs |
 | tab | ReactNode | - | current tab's title corresponding to current tabPane |
@@ -176,9 +180,9 @@ rc-tabs is released under the MIT license.
 
 ## FAQ
 
-### Resposive Tabs
+### Responsive Tabs
 
-There are 3 cases when handling resposive tabs:
+There are 3 cases when handling responsive tabs:
 ![image](https://user-images.githubusercontent.com/27722486/156315099-7e6eda9d-ab77-4b16-9b49-1727c5ec8b26.png)
 
 We get hidden tabs through [useVisibleRange.ts](https://github.com/react-component/tabs/blob/master/src/hooks/useVisibleRange.ts).

assets/position.less

@@ -52,7 +52,8 @@
       flex-direction: column;
       min-width: 50px;
 
-      &-list, &-operations {
+      &-list,
+      &-operations {
         flex: 1 0 auto; // fix safari scroll problem
         flex-direction: column;
       }

docs/demo/dynamic-extra.md

@@ -0,0 +1,8 @@
+---
+title: dynamic-extra
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/dynamic-extra.tsx"></code>

docs/demo/indicator.md

@@ -0,0 +1,8 @@
+---
+title: Indicator
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/indicator.tsx"></code>

docs/examples/basic.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import Tabs from'../../src';
 import '../../assets/index.less';
+import Tabs from '../../src';
 
 export default () => {
   const [destroy, setDestroy] = React.useState(false);
@@ -9,17 +9,20 @@ export default () => {
       label: 'Light',
       key: 'light',
       children: 'Light!',
+      icon: <span>🌞</span>,
     },
     {
       label: 'Bamboo',
       key: 'bamboo',
       children: 'Bamboo!',
+      icon: <span>🎋</span>,
     },
     {
       label: 'Cute',
       key: 'cute',
       children: 'Cute!',
       disabled: true,
+      icon: <span>🐼</span>,
     },
   ]);
 
@@ -38,6 +41,7 @@ export default () => {
               key: 'yo',
               label: 'Yo',
               children: 'Yo!',
+              icon: <span>👋</span>,
             },
           ]);
         }}

docs/examples/dynamic-extra.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import Tabs from '../../src';
+import type { TabsProps } from '../../src';
+import '../../assets/index.less';
+
+const items: TabsProps['items'] = [];
+for (let i = 0; i < 50; i += 1) {
+  items.push({
+    key: String(i),
+    label: `Tab ${i}`,
+    children: `Content of ${i}`,
+  });
+}
+export default () => {
+  const [key, setKey] = React.useState('0');
+
+  const extra = React.useMemo(() => {
+    if (key === '0') {
+      return (
+        <div>额外内容</div>
+      )
+    } 
+    return null
+  }, [key])
+
+  return (
+    <div style={{ maxWidth: 550 }}>
+      <Tabs 
+        activeKey={key}
+        onChange={(curKey) => setKey(curKey)}
+        tabBarExtraContent={extra} 
+        defaultActiveKey="8" 
+        moreIcon="..." 
+        items={items} 
+      />
+    </div>
+  );
+};

docs/examples/indicator.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import '../../assets/index.less';
+import type { TabsProps } from '../../src';
+import Tabs from '../../src';
+
+const items: TabsProps['items'] = [
+  {
+    label: 'Light',
+    key: 'light',
+    children: 'Light!',
+  },
+  {
+    label: 'Bamboo',
+    key: 'bamboo',
+    children: 'Bamboo!',
+  },
+  {
+    label: 'Cute',
+    key: 'cute',
+    children: 'Cute!',
+  },
+];
+
+export default () => (
+  <>
+    <Tabs
+      tabPosition="top"
+      items={items}
+      indicatorSize={origin => origin - 20}
+      indicatorAlign="start"
+    />
+    <Tabs
+      tabPosition="top"
+      items={items}
+      indicatorSize={origin => origin - 20}
+      indicatorAlign="center"
+    />
+    <Tabs
+      tabPosition="top"
+      items={items}
+      indicatorSize={origin => origin - 20}
+      indicatorAlign="end"
+    />
+    <Tabs
+      tabPosition="left"
+      items={items}
+      indicatorSize={origin => origin - 20}
+      indicatorAlign="start"
+    />
+    <Tabs
+      tabPosition="left"
+      items={items}
+      indicatorSize={origin => origin - 20}
+      indicatorAlign="center"
+    />
+    <Tabs
+      tabPosition="left"
+      items={items}
+      indicatorSize={origin => origin - 20}
+      indicatorAlign="end"
+    />
+  </>
+);