Merge branch 'master' into patch-1

Author: xiefenga

.dumirc.ts

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

.github/FUNDING.yml

@@ -0,0 +1,15 @@
+# These are supported funding model platforms
+
+github: ant-design # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: # Replace with a single Patreon username
+open_collective: ant-design # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+polar: # Replace with a single Polar username
+buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
+thanks_dev: # Replace with a single thanks.dev username
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.github/workflows/main.yml

@@ -1,114 +1,6 @@
-name: CI
-
-on:
-  push:
-    branches: [ master ]
-  pull_request:
-    branches: [ master ]
-
+name: ✅ test
+on: [push, pull_request]
 jobs:
-  setup:
-    runs-on: ubuntu-latest
-    steps:
-      - name: checkout
-        uses: actions/checkout@master
-
-      - uses: actions/setup-node@v1
-        with:
-          node-version: '12'
-
-      - name: cache package-lock.json
-        uses: actions/cache@v2
-        with:
-          path: package-temp-dir
-          key: lock-${{ github.sha }}
-
-      - name: create package-lock.json
-        run: npm i --package-lock-only
-
-      - name: hack for singe file
-        run: |
-          if [ ! -d "package-temp-dir" ]; then
-            mkdir package-temp-dir
-          fi
-          cp package-lock.json package-temp-dir
-
-      - name: cache node_modules
-        id: node_modules_cache_id
-        uses: actions/cache@v2
-        with:
-          path: node_modules
-          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
-
-      - name: install
-        if: steps.node_modules_cache_id.outputs.cache-hit != 'true'
-        run: npm ci
-  
-  lint:
-    runs-on: ubuntu-latest
-    steps:
-      - name: checkout
-        uses: actions/checkout@master
-
-      - name: restore cache from package-lock.json
-        uses: actions/cache@v2
-        with:
-          path: package-temp-dir
-          key: lock-${{ github.sha }}
-
-      - name: restore cache from node_modules
-        uses: actions/cache@v2
-        with:
-          path: node_modules
-          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
-
-      - name: lint
-        run: npm run lint
-
-    needs: setup
-  
-  compile:
-    runs-on: ubuntu-latest
-    steps:
-      - name: checkout
-        uses: actions/checkout@master
-
-      - name: restore cache from package-lock.json
-        uses: actions/cache@v2
-        with:
-          path: package-temp-dir
-          key: lock-${{ github.sha }}
-
-      - name: restore cache from node_modules
-        uses: actions/cache@v2
-        with:
-          path: node_modules
-          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
-
-      - name: compile
-        run: npm run compile
-
-    needs: setup
-  
-  coverage:
-    runs-on: ubuntu-latest
-    steps:
-      - name: checkout
-        uses: actions/checkout@master
-
-      - name: restore cache from package-lock.json
-        uses: actions/cache@v2
-        with:
-          path: package-temp-dir
-          key: lock-${{ github.sha }}
-
-      - name: restore cache from node_modules
-        uses: actions/cache@v2
-        with:
-          path: node_modules
-          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
-
-      - name: coverage
-        run: npm test -- --coverage && bash <(curl -s https://codecov.io/bash)
-
-    needs: setup
+  test:
+    uses: react-component/rc-test/.github/workflows/test.yml@main
+    secrets: inherit

.gitignore

@@ -31,10 +31,13 @@ es
 coverage
 yarn.lock
 package-lock.json
+pnpm-lock.yaml
 
 # umi
 .umi
 .umi-production
 .umi-test
 .env.local
-.dumi
+.dumi
+
+bun.lockb

README.md

@@ -41,24 +41,53 @@ online example: https://tabs.react-component.now.sh/
 
 ## Usage
 
-```js
-import Tabs, { TabPane } from 'rc-tabs';
-
-var callback = function(key) {};
-
-React.render(
-  <Tabs defaultActiveKey="2" onChange={callback}>
-    <TabPane tab="tab 1" key="1">
-      first
-    </TabPane>
-    <TabPane tab="tab 2" key="2">
-      second
-    </TabPane>
-    <TabPane tab="tab 3" key="3">
-      third
-    </TabPane>
-  </Tabs>,
-  document.getElementById('t2'),
+```tsx | pure
+import Tabs from 'rc-tabs';
+import ReactDom from 'react-dom';
+
+const callback = (key) => {
+  console.log(key);
+};
+
+const items = [
+  {
+    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',
+    label: <p>Amazon</p>,
+    children:
+      'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...',
+    disabled: true,
+  },
+  {
+    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..."
+      </div>
+    ),
+  },
+];
+
+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,
 );
 ```
 
@@ -68,29 +97,57 @@ React.render(
 
 | name | type | default | description |
 | --- | --- | --- | --- |
+| prefixCls | string | `'rc-tabs'` | prefix class name, use to custom style |
+| className | string | - | to define a class name for an element |
+| style | CSS properties | - | object with css properties for styling |
+| items | TabItem[] | [] | configure tab content |
+| id | string | - | unique identifier |
+| defaultActiveKey | string | - | initial active tabPanel's key if activeKey is absent |
 | activeKey | string | - | current active tabPanel's key |
+| direction | `'ltr' or 'rtl'` | `'ltr'` | Layout direction of tabs component |
 | animated | boolean \| { inkBar: boolean, tabPane: boolean } | `{ inkBar: true, tabPane: false }` | config animation |
-| defaultActiveKey | string | - | initial active tabPanel's key if activeKey is absent |
-| destroyInactiveTabPane | boolean | false | whether destroy inactive TabPane when change tab |
-| direction | `'ltr' | 'rlt'` | `'ltr'` | Layout direction of tabs component |
-| editable | { onEdit(type: 'add' | 'remove', info: { key, event }), showAdd: boolean, removeIcon: ReactNode, addIcon: ReactNode } | - | config tab editable |
-| locale | { dropdownAriaLabel: string, removeAriaLabel: string, addAriaLabel: string } | - | Accessibility locale help text |
-| moreIcon | ReactNode | - | collapse icon |
+| 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 |
+| tabBarPosition | `'left' \| 'right' \| 'top' \| 'bottom'` | `'top'` | tab nav 's position |
 | tabBarStyle | style | - | tab nav style |
-| tabBarExtraContent | ReactNode \| `{ left: ReactNode, right: ReactNode }` | - | config extra content |
-| renderTabBar | (props, TabBarComponent) => ReactElement | - | How to render tab bar |
-| prefixCls | string | `'rc-tabs'` | prefix class name, use to custom style |
+| tabPosition | `'left' or 'right' or 'top' or 'bottom'` | `'top'` | tab nav 's position |
+| destroyInactiveTabPane | boolean | false | whether destroy inactive TabPane when change tab |
 | onChange | (key) => void | - | called when tabPanel is changed |
 | onTabClick | (key) => void | - | called when tab click |
 | onTabScroll | ({ direction }) => void | - | called when tab scroll |
+| editable | { onEdit(type: 'add' \| 'remove', info: { key, event }), showAdd: boolean, removeIcon: ReactNode, addIcon: ReactNode } | - | config tab editable |
+| locale | { dropdownAriaLabel: string, removeAriaLabel: string, addAriaLabel: string } | - | Accessibility locale help text |
+| moreIcon | ReactNode | - | collapse icon |
 
-### TabPane
+### TabItem
 
 | name | type | default | description |
 | --- | --- | --- | --- |
 | key | string | - | corresponding to activeKey, should be unique |
+| label | string | - | TabPane's head display text |
+| tab | ReactNode | - | current tab's title corresponding to current tabPane |
+| className | string | - | to define a class name for an element |
+| style | CSS properties | - | object with css properties for styling |
+| disabled | boolean | false | set TabPane disabled |
+| children | ReactNode | - | TabPane's head display content |
+| forceRender | boolean | false | forced render of content in tabs, not lazy render after clicking on tabs |
+| closable | boolean | false | closable feature of tab item |
+| closeIcon | ReactNode | - | Config close icon |
+| prefixCls | string | `'rc-tabs-tab'` | prefix class name, use to custom style |
+| id | string | - | unique identifier |
+| animated | boolean \| { inkBar: boolean, tabPane: boolean } | `{ inkBar: true, tabPane: false }` | config animation |
+| destroyInactiveTabPane | boolean | false | whether destroy inactive TabPane when change tab |
+| active | boolean | false | active feature of tab item |
+| tabKey | string | - | key linked to tab |
+
+
+### TabPane(support in older versions)
+
+| 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 |
 | closeIcon | ReactNode | - | Config close icon |
@@ -123,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>,
             },
           ]);
         }}