Skip to content

Commit

Permalink
Merge branch 'master' into fix-unableswitch
Browse files Browse the repository at this point in the history
  • Loading branch information
afc163 authored Sep 29, 2024
2 parents 2f526f7 + 18ae22c commit 6511de9
Show file tree
Hide file tree
Showing 38 changed files with 953 additions and 551 deletions.
2 changes: 1 addition & 1 deletion .dumirc.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,4 @@ export default defineConfig({
name: 'Tabs',
},
mfsu: false,
});
});
15 changes: 15 additions & 0 deletions .github/FUNDING.yml
Original file line number Diff line number Diff line change
@@ -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']
92 changes: 92 additions & 0 deletions .github/workflows/codeql.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
# For most projects, this workflow file will not need changing; you simply need
# to commit it to your repository.
#
# You may wish to alter this file to override the set of languages analyzed,
# or to provide custom queries or build logic.
#
# ******** NOTE ********
# We have attempted to detect the languages in your repository. Please check
# the `language` matrix defined below to confirm you have the correct set of
# supported CodeQL languages.
#
name: "CodeQL Advanced"

on:
push:
branches: [ "master" ]
pull_request:
branches: [ "master" ]
schedule:
- cron: '43 5 * * 2'

jobs:
analyze:
name: Analyze (${{ matrix.language }})
# Runner size impacts CodeQL analysis time. To learn more, please see:
# - https://gh.io/recommended-hardware-resources-for-running-codeql
# - https://gh.io/supported-runners-and-hardware-resources
# - https://gh.io/using-larger-runners (GitHub.com only)
# Consider using larger runners or machines with greater resources for possible analysis time improvements.
runs-on: ${{ (matrix.language == 'swift' && 'macos-latest') || 'ubuntu-latest' }}
permissions:
# required for all workflows
security-events: write

# required to fetch internal or private CodeQL packs
packages: read

# only required for workflows in private repositories
actions: read
contents: read

strategy:
fail-fast: false
matrix:
include:
- language: javascript-typescript
build-mode: none
# CodeQL supports the following values keywords for 'language': 'c-cpp', 'csharp', 'go', 'java-kotlin', 'javascript-typescript', 'python', 'ruby', 'swift'
# Use `c-cpp` to analyze code written in C, C++ or both
# Use 'java-kotlin' to analyze code written in Java, Kotlin or both
# Use 'javascript-typescript' to analyze code written in JavaScript, TypeScript or both
# To learn more about changing the languages that are analyzed or customizing the build mode for your analysis,
# see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/customizing-your-advanced-setup-for-code-scanning.
# If you are analyzing a compiled language, you can modify the 'build-mode' for that language to customize how
# your codebase is analyzed, see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/codeql-code-scanning-for-compiled-languages
steps:
- name: Checkout repository
uses: actions/checkout@v4

# Initializes the CodeQL tools for scanning.
- name: Initialize CodeQL
uses: github/codeql-action/init@v3
with:
languages: ${{ matrix.language }}
build-mode: ${{ matrix.build-mode }}
# If you wish to specify custom queries, you can do so here or in a config file.
# By default, queries listed here will override any specified in a config file.
# Prefix the list here with "+" to use these queries and those in the config file.

# For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
# queries: security-extended,security-and-quality

# If the analyze step fails for one of the languages you are analyzing with
# "We were unable to automatically build your code", modify the matrix above
# to set the build mode to "manual" for that language. Then modify this step
# to build your code.
# ℹ️ Command-line programs to run using the OS shell.
# 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
- if: matrix.build-mode == 'manual'
shell: bash
run: |
echo 'If you are using a "manual" build mode for one or more of the' \
'languages you are analyzing, replace this with the commands to build' \
'your code, for example:'
echo ' make bootstrap'
echo ' make release'
exit 1
- name: Perform CodeQL Analysis
uses: github/codeql-action/analyze@v3
with:
category: "/language:${{matrix.language}}"
118 changes: 5 additions & 113 deletions .github/workflows/main.yml
Original file line number Diff line number Diff line change
@@ -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
4 changes: 3 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -38,4 +38,6 @@ pnpm-lock.yaml
.umi-production
.umi-test
.env.local
.dumi
.dumi

bun.lockb
119 changes: 88 additions & 31 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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,
);
```

Expand All @@ -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 |
Expand Down Expand Up @@ -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).
Expand Down
Loading

0 comments on commit 6511de9

Please sign in to comment.