mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

chore: merge feature

Browse Source
This commit is contained in:
二货机器人 2022-08-08 19:08:43 +08:00
commit 6c4a25a1e9
15 changed files with 3633 additions and 1174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
components/card/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -851,13 +851,6 @@ Array [
role="tabpanel"
tabindex="0"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
</div>
</div>
</div>
@ -1007,26 +1000,12 @@ Array [
<div
class="ant-tabs-content ant-tabs-content-top"
>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="false"
class="ant-tabs-tabpane ant-tabs-tabpane-active"
role="tabpanel"
tabindex="0"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
</div>
</div>
</div>

21
components/card/__tests__/__snapshots__/demo.test.js.snap
View File

@ -832,13 +832,6 @@ Array [
role="tabpanel"
tabindex="0"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
</div>
</div>
</div>
@ -969,26 +962,12 @@ Array [
<div
class="ant-tabs-content ant-tabs-content-top"
>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="false"
class="ant-tabs-tabpane ant-tabs-tabpane-active"
role="tabpanel"
tabindex="0"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
</div>
</div>
</div>

1645
components/page-header/__tests__/__snapshots__/demo-extend.test.ts.snap Normal file
View File

File diff suppressed because it is too large Load Diff

1424
components/page-header/__tests__/__snapshots__/demo.test.js.snap Normal file
View File

File diff suppressed because it is too large Load Diff

729
components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -1,5 +1,181 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/tabs/demo/animated.md extend context correctly 1`] = `
Array [
<div
class="ant-space ant-space-horizontal ant-space-align-center"
>
<div
class="ant-space-item"
style="margin-right:8px"
>
<button
aria-checked="true"
class="ant-switch ant-switch-checked"
role="switch"
type="button"
>
<div
class="ant-switch-handle"
/>
<span
class="ant-switch-inner"
>
inkBar
</span>
</button>
</div>
<div
class="ant-space-item"
>
<button
aria-checked="true"
class="ant-switch ant-switch-checked"
role="switch"
type="button"
>
<div
class="ant-switch-handle"
/>
<span
class="ant-switch-inner"
>
tabPane
</span>
</button>
</div>
</div>,
<div
class="ant-tabs ant-tabs-top"
>
<div
class="ant-tabs-nav"
role="tablist"
>
<div
class="ant-tabs-nav-wrap"
>
<div
class="ant-tabs-nav-list"
style="transform:translate(0px, 0px)"
>
<div
class="ant-tabs-tab ant-tabs-tab-active"
>
<div
aria-selected="true"
class="ant-tabs-tab-btn"
role="tab"
tabindex="0"
>
Bamboo
</div>
</div>
<div
class="ant-tabs-tab"
>
<div
aria-selected="false"
class="ant-tabs-tab-btn"
role="tab"
tabindex="0"
>
Little
</div>
</div>
<div
class="ant-tabs-tab"
>
<div
aria-selected="false"
class="ant-tabs-tab-btn"
role="tab"
tabindex="0"
>
Light
</div>
</div>
<div
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
/>
</div>
</div>
<div
class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
>
<button
aria-controls="null-more-popup"
aria-expanded="false"
aria-haspopup="listbox"
aria-hidden="true"
class="ant-tabs-nav-more"
id="null-more"
style="visibility:hidden;order:1"
tabindex="-1"
type="button"
>
<span
aria-label="ellipsis"
class="anticon anticon-ellipsis"
role="img"
>
<svg
aria-hidden="true"
data-icon="ellipsis"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
/>
</svg>
</span>
</button>
<div>
<div
class="ant-tabs-dropdown"
style="opacity:0"
>
<ul
aria-label="expanded dropdown"
class="ant-tabs-dropdown-menu ant-tabs-dropdown-menu-root ant-tabs-dropdown-menu-vertical"
data-menu-list="true"
id="null-more-popup"
role="listbox"
tabindex="-1"
/>
<div
aria-hidden="true"
style="display:none"
/>
</div>
</div>
</div>
</div>
<div
class="ant-tabs-content-holder"
>
<div
class="ant-tabs-content ant-tabs-content-top ant-tabs-content-animated"
>
<div
aria-hidden="false"
class="ant-tabs-tabpane ant-tabs-tabpane-active"
role="tabpanel"
style="height:200px;box-shadow:0 0 3px rgba(255, 0, 0, 0.5)"
tabindex="0"
>
Hello Bamboo!
</div>
</div>
</div>
</div>,
]
`;
exports[`renders ./components/tabs/demo/basic.md extend context correctly 1`] = `
<div
class="ant-tabs ant-tabs-top"
@ -125,20 +301,6 @@ exports[`renders ./components/tabs/demo/basic.md extend context correctly 1`] =
>
Content of Tab Pane 1
</div>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
</div>
</div>
</div>
@ -269,20 +431,6 @@ exports[`renders ./components/tabs/demo/card.md extend context correctly 1`] = `
>
Content of Tab Pane 1
</div>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
</div>
</div>
</div>
@ -424,20 +572,6 @@ exports[`renders ./components/tabs/demo/card-top.md extend context correctly 1`]
Content of Tab Pane 1
</p>
</div>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
</div>
</div>
</div>
@ -569,20 +703,6 @@ exports[`renders ./components/tabs/demo/centered.md extend context correctly 1`]
>
Content of Tab Pane 1
</div>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
</div>
</div>
</div>
@ -766,13 +886,6 @@ exports[`renders ./components/tabs/demo/custom-add-trigger.md extend context cor
>
Content of Tab Pane 1
</div>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
</div>
</div>
</div>
@ -909,20 +1022,6 @@ exports[`renders ./components/tabs/demo/custom-tab-bar.md extend context correct
>
Content of Tab Pane 1
</div>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
</div>
</div>
</div>
@ -1069,20 +1168,6 @@ exports[`renders ./components/tabs/demo/custom-tab-bar-node.md extend context co
>
Content of Tab Pane 1
</div>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
</div>
</div>
</div>
@ -1213,20 +1298,6 @@ exports[`renders ./components/tabs/demo/deprecated.md extend context correctly 1
>
Content of Tab Pane 1
</div>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
</div>
</div>
</div>
@ -1357,20 +1428,6 @@ exports[`renders ./components/tabs/demo/disabled.md extend context correctly 1`]
>
Tab 1
</div>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
</div>
</div>
</div>
@ -1611,20 +1668,6 @@ exports[`renders ./components/tabs/demo/editable-card.md extend context correctl
>
Content of Tab 1
</div>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
</div>
</div>
</div>
@ -1768,20 +1811,6 @@ Array [
>
Content of tab 1
</div>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
</div>
</div>
</div>,
@ -1989,20 +2018,6 @@ Array [
>
Content of tab 1
</div>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
</div>
</div>
</div>,
@ -2156,13 +2171,6 @@ exports[`renders ./components/tabs/demo/icon.md extend context correctly 1`] = `
<div
class="ant-tabs-content ant-tabs-content-top"
>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="false"
class="ant-tabs-tabpane ant-tabs-tabpane-active"
@ -3255,13 +3263,6 @@ exports[`renders ./components/tabs/demo/nest.md extend context correctly 1`] = `
<div
class="ant-tabs-content ant-tabs-content-top"
>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="false"
class="ant-tabs-tabpane ant-tabs-tabpane-active"
@ -3270,143 +3271,10 @@ exports[`renders ./components/tabs/demo/nest.md extend context correctly 1`] = `
>
TTTT 1
</div>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
</div>
</div>
</div>
</div>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
</div>
</div>
</div>
@ -3635,20 +3503,6 @@ Array [
>
Content of Tab 1
</div>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
</div>
</div>
</div>,
@ -3845,20 +3699,6 @@ exports[`renders ./components/tabs/demo/size.md extend context correctly 1`] = `
>
Content of tab 1
</div>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
</div>
</div>
</div>
@ -3986,20 +3826,6 @@ exports[`renders ./components/tabs/demo/size.md extend context correctly 1`] = `
>
Content of card tab 1
</div>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
</div>
</div>
</div>
@ -4522,13 +4348,6 @@ exports[`renders ./components/tabs/demo/slide.md extend context correctly 1`] =
<div
class="ant-tabs-content ant-tabs-content-top"
>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="false"
class="ant-tabs-tabpane ant-tabs-tabpane-active"
@ -4537,202 +4356,6 @@ exports[`renders ./components/tabs/demo/slide.md extend context correctly 1`] =
>
Content of tab 1
</div>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
</div>
</div>
</div>

710
components/tabs/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1,5 +1,162 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/tabs/demo/animated.md correctly 1`] = `
Array [
<div
class="ant-space ant-space-horizontal ant-space-align-center"
>
<div
class="ant-space-item"
style="margin-right:8px"
>
<button
aria-checked="true"
class="ant-switch ant-switch-checked"
role="switch"
type="button"
>
<div
class="ant-switch-handle"
/>
<span
class="ant-switch-inner"
>
inkBar
</span>
</button>
</div>
<div
class="ant-space-item"
>
<button
aria-checked="true"
class="ant-switch ant-switch-checked"
role="switch"
type="button"
>
<div
class="ant-switch-handle"
/>
<span
class="ant-switch-inner"
>
tabPane
</span>
</button>
</div>
</div>,
<div
class="ant-tabs ant-tabs-top"
>
<div
class="ant-tabs-nav"
role="tablist"
>
<div
class="ant-tabs-nav-wrap"
>
<div
class="ant-tabs-nav-list"
style="transform:translate(0px, 0px)"
>
<div
class="ant-tabs-tab ant-tabs-tab-active"
>
<div
aria-selected="true"
class="ant-tabs-tab-btn"
role="tab"
tabindex="0"
>
Bamboo
</div>
</div>
<div
class="ant-tabs-tab"
>
<div
aria-selected="false"
class="ant-tabs-tab-btn"
role="tab"
tabindex="0"
>
Little
</div>
</div>
<div
class="ant-tabs-tab"
>
<div
aria-selected="false"
class="ant-tabs-tab-btn"
role="tab"
tabindex="0"
>
Light
</div>
</div>
<div
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
/>
</div>
</div>
<div
class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
>
<button
aria-controls="null-more-popup"
aria-expanded="false"
aria-haspopup="listbox"
aria-hidden="true"
class="ant-tabs-nav-more"
id="null-more"
style="visibility:hidden;order:1"
tabindex="-1"
type="button"
>
<span
aria-label="ellipsis"
class="anticon anticon-ellipsis"
role="img"
>
<svg
aria-hidden="true"
data-icon="ellipsis"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
/>
</svg>
</span>
</button>
</div>
</div>
<div
class="ant-tabs-content-holder"
>
<div
class="ant-tabs-content ant-tabs-content-top ant-tabs-content-animated"
>
<div
aria-hidden="false"
class="ant-tabs-tabpane ant-tabs-tabpane-active"
role="tabpanel"
style="height:200px;box-shadow:0 0 3px rgba(255, 0, 0, 0.5)"
tabindex="0"
>
Hello Bamboo!
</div>
</div>
</div>
</div>,
]
`;
exports[`renders ./components/tabs/demo/basic.md correctly 1`] = `
<div
class="ant-tabs ant-tabs-top"
@ -106,20 +263,6 @@ exports[`renders ./components/tabs/demo/basic.md correctly 1`] = `
>
Content of Tab Pane 1
</div>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
</div>
</div>
</div>
@ -231,20 +374,6 @@ exports[`renders ./components/tabs/demo/card.md correctly 1`] = `
>
Content of Tab Pane 1
</div>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
</div>
</div>
</div>
@ -367,20 +496,6 @@ exports[`renders ./components/tabs/demo/card-top.md correctly 1`] = `
Content of Tab Pane 1
</p>
</div>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
</div>
</div>
</div>
@ -493,20 +608,6 @@ exports[`renders ./components/tabs/demo/centered.md correctly 1`] = `
>
Content of Tab Pane 1
</div>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
</div>
</div>
</div>
@ -671,13 +772,6 @@ exports[`renders ./components/tabs/demo/custom-add-trigger.md correctly 1`] = `
>
Content of Tab Pane 1
</div>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
</div>
</div>
</div>
@ -795,20 +889,6 @@ exports[`renders ./components/tabs/demo/custom-tab-bar.md correctly 1`] = `
>
Content of Tab Pane 1
</div>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
</div>
</div>
</div>
@ -936,20 +1016,6 @@ exports[`renders ./components/tabs/demo/custom-tab-bar-node.md correctly 1`] = `
>
Content of Tab Pane 1
</div>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
</div>
</div>
</div>
@ -1061,20 +1127,6 @@ exports[`renders ./components/tabs/demo/deprecated.md correctly 1`] = `
>
Content of Tab Pane 1
</div>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
</div>
</div>
</div>
@ -1186,20 +1238,6 @@ exports[`renders ./components/tabs/demo/disabled.md correctly 1`] = `
>
Tab 1
</div>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
</div>
</div>
</div>
@ -1421,20 +1459,6 @@ exports[`renders ./components/tabs/demo/editable-card.md correctly 1`] = `
>
Content of Tab 1
</div>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
</div>
</div>
</div>
@ -1559,20 +1583,6 @@ Array [
>
Content of tab 1
</div>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
</div>
</div>
</div>,
@ -1761,20 +1771,6 @@ Array [
>
Content of tab 1
</div>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
</div>
</div>
</div>,
@ -1909,13 +1905,6 @@ exports[`renders ./components/tabs/demo/icon.md correctly 1`] = `
<div
class="ant-tabs-content ant-tabs-content-top"
>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="false"
class="ant-tabs-tabpane ant-tabs-tabpane-active"
@ -2552,13 +2541,6 @@ exports[`renders ./components/tabs/demo/nest.md correctly 1`] = `
<div
class="ant-tabs-content ant-tabs-content-top"
>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="false"
class="ant-tabs-tabpane ant-tabs-tabpane-active"
@ -2567,143 +2549,10 @@ exports[`renders ./components/tabs/demo/nest.md correctly 1`] = `
>
TTTT 1
</div>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
</div>
</div>
</div>
</div>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
</div>
</div>
</div>
@ -2913,20 +2762,6 @@ Array [
>
Content of Tab 1
</div>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
</div>
</div>
</div>,
@ -3104,20 +2939,6 @@ exports[`renders ./components/tabs/demo/size.md correctly 1`] = `
>
Content of tab 1
</div>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
</div>
</div>
</div>
@ -3226,20 +3047,6 @@ exports[`renders ./components/tabs/demo/size.md correctly 1`] = `
>
Content of card tab 1
</div>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
</div>
</div>
</div>
@ -3743,13 +3550,6 @@ exports[`renders ./components/tabs/demo/slide.md correctly 1`] = `
<div
class="ant-tabs-content ant-tabs-content-top"
>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="false"
class="ant-tabs-tabpane ant-tabs-tabpane-active"
@ -3758,202 +3558,6 @@ exports[`renders ./components/tabs/demo/slide.md correctly 1`] = `
>
Content of tab 1
</div>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane"
role="tabpanel"
style="display:none"
tabindex="-1"
/>
</div>
</div>
</div>

34
components/tabs/__tests__/animated.test.tsx Normal file
View File

@ -0,0 +1,34 @@
import { renderHook } from '../../../tests/utils';
import useAnimateConfig from '../hooks/useAnimateConfig';
describe('Tabs.Animated', () => {
it('boolean: false', () => {
const { result } = renderHook(() => useAnimateConfig('test', false));
expect(result.current).toEqual({
inkBar: false,
tabPane: false,
});
});
it('boolean: true', () => {
const { result } = renderHook(() => useAnimateConfig('test', true));
expect(result.current).toEqual({
inkBar: true,
tabPane: false,
});
});
it('config', () => {
const { result } = renderHook(() => useAnimateConfig('test', { inkBar: false, tabPane: true }));
expect(result.current).toEqual({
inkBar: false,
tabPane: true,
tabPaneMotion: expect.objectContaining({
motionName: 'test-switch',
}),
});
});
});

79
components/tabs/demo/animated.md Normal file
View File

@ -0,0 +1,79 @@
---
order: 99
title:
zh-CN: 动画
en-US: Animated
debug: true
---
## zh-CN
动画切换。
## en-US
Animated of Tab Pane.
```tsx
import { Tabs, Switch, Space } from 'antd';
import React from 'react';
const App: React.FC = () => {
const [inkBar, setInkBar] = React.useState(true);
const [tabPane, setTabPane] = React.useState(true);
return (
<>
<Space>
<Switch
checkedChildren="inkBar"
unCheckedChildren="inkBar"
checked={inkBar}
onChange={() => setInkBar(!inkBar)}
/>
<Switch
checkedChildren="tabPane"
unCheckedChildren="tabPane"
checked={tabPane}
onChange={() => setTabPane(!tabPane)}
/>
</Space>
<Tabs
animated={{ inkBar, tabPane }}
items={[
{
label: `Bamboo`,
key: '1',
children: `Hello Bamboo!`,
style: {
height: 200,
boxShadow: '0 0 3px rgba(255, 0, 0, 0.5)',
},
},
{
label: `Little`,
key: '2',
children: `Hi Little!`,
style: {
height: 300,
boxShadow: '0 0 3px rgba(0, 255, 0, 0.5)',
},
},
{
label: `Light`,
key: '3',
children: `Welcome Light!`,
style: {
height: 100,
boxShadow: '0 0 3px rgba(0, 0, 255, 0.5)',
},
},
]}
/>
</>
);
};
export default App;
```

46
components/tabs/hooks/useAnimateConfig.ts Normal file
View File

@ -0,0 +1,46 @@
import type { CSSMotionProps } from 'rc-motion';
import type { AnimatedConfig } from 'rc-tabs/lib/interface';
import type { TabsProps } from '..';
import { getTransitionName } from '../../_util/motion';
const motion: CSSMotionProps = {
motionAppear: false,
motionEnter: true,
motionLeave: true,
};
export default function useAnimateConfig(
prefixCls: string,
animated: TabsProps['animated'] = {
inkBar: true,
tabPane: false,
},
): AnimatedConfig {
let mergedAnimated: AnimatedConfig;
if (animated === false) {
mergedAnimated = {
inkBar: false,
tabPane: false,
};
} else if (animated === true) {
mergedAnimated = {
inkBar: true,
tabPane: false,
};
} else {
mergedAnimated = {
inkBar: true,
...(typeof animated === 'object' ? animated : {}),
};
}
if (mergedAnimated.tabPane) {
mergedAnimated.tabPaneMotion = {
...motion,
motionName: getTransitionName(prefixCls, 'switch'),
};
}
return mergedAnimated;
}

5
components/tabs/index.tsx
View File

@ -11,6 +11,7 @@ import { ConfigContext } from '../config-provider';
import type { SizeType } from '../config-provider/SizeContext';
import SizeContext from '../config-provider/SizeContext';
import warning from '../_util/warning';
import useAnimateConfig from './hooks/useAnimateConfig';
import useLegacyItems from './hooks/useLegacyItems';
import TabPane, { TabPaneProps } from './TabPane';
@ -42,6 +43,7 @@ function Tabs({
popupClassName,
children,
items,
animated,
...props
}: TabsProps) {
const { prefixCls: customizePrefixCls, moreIcon = <EllipsisOutlined /> } = props;
@ -70,6 +72,8 @@ function Tabs({
const mergedItems = useLegacyItems(items, children);
const mergedAnimated = useAnimateConfig(prefixCls, animated);
return wrapSSR(
<SizeContext.Consumer>
{contextSize => {
@ -94,6 +98,7 @@ function Tabs({
editable={editable}
moreIcon={moreIcon}
prefixCls={prefixCls}
animated={mergedAnimated}
/>
);
}}

16
components/tabs/style/index.tsx
View File

@ -2,12 +2,13 @@ import type { CSSObject } from '@ant-design/cssinjs';
import type { FullToken, GenerateStyle } from '../../theme';
import { genComponentStyleHook, mergeToken } from '../../theme';
import { resetComponent } from '../../style';
import genMotionStyle from './motion';
export interface ComponentToken {
zIndexPopup: number;
}
interface TabsToken extends FullToken<'Tabs'> {
export interface TabsToken extends FullToken<'Tabs'> {
tabsCardHorizontalPadding: string;
tabsCardHeight: number;
tabsCardGutter: number;
@ -804,7 +805,7 @@ const genTabsStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject =>
// =========================== TabPanes ===========================
[`${componentCls}-content`]: {
display: 'flex',
position: 'relative',
width: '100%',
},
@ -814,14 +815,10 @@ const genTabsStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject =>
minHeight: 0,
},
[`${componentCls}-content-animated`]: {
transition: `margin ${token.motionDurationSlow}`,
},
[`${componentCls}-tabpane`]: {
flex: 'none',
width: '100%',
outline: 'none',
'&-hidden': {
display: 'none',
},
},
},
@ -868,6 +865,7 @@ export default genComponentStyleHook(
genDropdownStyle(tabsToken),
genCardStyle(tabsToken),
genTabsStyle(tabsToken),
genMotionStyle(tabsToken),
];
},
token => ({

40
components/tabs/style/motion.tsx Normal file
View File

@ -0,0 +1,40 @@
import type { TabsToken } from '.';
import type { GenerateStyle } from '../../theme';
const genMotionStyle: GenerateStyle<TabsToken> = token => {
const { componentCls, motionDurationSlow } = token;
return {
[componentCls]: {
[`${componentCls}-switch`]: {
'&-appear, &-enter': {
transition: 'none',
'&-start': {
opacity: 0,
},
'&-active': {
opacity: 1,
transition: `opacity ${motionDurationSlow}`,
},
},
'&-leave': {
position: 'absolute',
transition: 'none',
inset: 0,
'&-start': {
opacity: 1,
},
'&-active': {
opacity: 0,
transition: `opacity ${motionDurationSlow}`,
},
},
},
},
};
};
export default genMotionStyle;

8
components/theme/__tests__/token.test.tsx
View File

@ -8,11 +8,11 @@ const { useToken } = theme;
describe('Theme', () => {
it('useTheme', () => {
const result = renderHook(() => useToken());
const { result } = renderHook(() => useToken());
expect(result.current.theme instanceof Theme).toBeTruthy();
expect(result.current.hashId).toBeFalsy();
expect(result.current.token).toEqual(
expect(result.current!.theme instanceof Theme).toBeTruthy();
expect(result.current!.hashId).toBeFalsy();
expect(result.current!.token).toEqual(
expect.objectContaining({
colorPrimary: '#1890ff',
}),

2
package.json
View File

@ -145,7 +145,7 @@
"rc-steps": "~4.1.0",
"rc-switch": "~3.2.0",
"rc-table": "~7.26.0",
"rc-tabs": "~12.0.0-alpha.1",
"rc-tabs": "~12.1.0-alpha.0",
"rc-textarea": "~0.3.0",
"rc-tooltip": "~5.2.0",
"rc-tree": "~5.6.5",

27
tests/utils.tsx
View File

@ -28,6 +28,21 @@ const customRender = (ui: ReactElement, options?: Omit<RenderOptions, 'wrapper'>
render(ui, { wrapper: StrictMode, ...options });
export * from '@testing-library/react';
export function renderHook<T>(func: () => T): { result: React.RefObject<T> } {
const result = React.createRef<T>();
const Demo = () => {
(result as any).current = func();
return null;
};
customRender(<Demo />);
return { result };
}
export { customRender as render };
export const triggerResize = (target: Element) => {
@ -42,15 +57,3 @@ export const triggerResize = (target: Element) => {
target.getBoundingClientRect = originGetBoundingClientRect;
};
export function renderHook<T>(func: () => T): { current: T } {
const outerRef = React.createRef<T>();
const Demo = React.forwardRef((_, ref: any) => {
ref.current = func();
return null;
});
render(<Demo ref={outerRef} />);
return outerRef as any;
}