diff --git a/src/packages/address/__test__/__snapshots__/address.spec.tsx.snap b/src/packages/address/__test__/__snapshots__/address.spec.tsx.snap index 6411be1560..2bc3b6fea9 100644 --- a/src/packages/address/__test__/__snapshots__/address.spec.tsx.snap +++ b/src/packages/address/__test__/__snapshots__/address.spec.tsx.snap @@ -2,6 +2,6 @@ exports[`Address: exist defaultIcon & selectIcon 1`] = `"
请选择地址
"`; -exports[`Address: show custom 1`] = `"
选择地址
请选择
浙江
湖南
福建
"`; +exports[`Address: show custom 1`] = `"
选择地址
请选择
浙江
湖南
福建
"`; exports[`Address: show exist 1`] = `"
选择地址
"`; diff --git a/src/packages/cascader/__tests__/__snapshots__/cascader.spec.tsx.snap b/src/packages/cascader/__tests__/__snapshots__/cascader.spec.tsx.snap index db50b5b19b..38332c347d 100644 --- a/src/packages/cascader/__tests__/__snapshots__/cascader.spec.tsx.snap +++ b/src/packages/cascader/__tests__/__snapshots__/cascader.spec.tsx.snap @@ -25,7 +25,7 @@ exports[`Cascader > visible true 1`] = ` class="nut-tabs nut-tabs-horizontal" >
{!disabled && children}
- ) : null + return children && {!disabled && children} } diff --git a/src/packages/tabpane/tabpane.tsx b/src/packages/tabpane/tabpane.tsx index 45c000ae0f..2759b54435 100644 --- a/src/packages/tabpane/tabpane.tsx +++ b/src/packages/tabpane/tabpane.tsx @@ -37,7 +37,5 @@ export const TabPane: FunctionComponent< className ) - return children ? ( -
{!disabled && children}
- ) : null + return children &&
{!disabled && children}
} diff --git a/src/packages/tabs/__test__/tabs.spec.tsx b/src/packages/tabs/__test__/tabs.spec.tsx index 466c1c068e..ab4cf73f94 100644 --- a/src/packages/tabs/__test__/tabs.spec.tsx +++ b/src/packages/tabs/__test__/tabs.spec.tsx @@ -7,7 +7,7 @@ import { TabPane } from '../../tabpane/tabpane' test('base Tabs', () => { const { getByTestId } = render( - Tab 1 + Tab longitem ) expect(getByTestId('tabs1')).toHaveClass('nut-tabs') @@ -16,8 +16,8 @@ test('base Tabs', () => { test('base tabs props', () => { const { container } = render( - - Tab 1 + + Tab longitem ) @@ -26,14 +26,13 @@ test('base tabs props', () => { expect(el2.length > 0).toBe(true) expect(el3).toHaveClass('nut-tabs-titles-smile') - expect(el3).toHaveClass('nut-tabs-titles-scrollable') }) test('base tabs props', () => { const { container } = render( - - Tab 1 + + Tab longitem ) @@ -44,7 +43,7 @@ test('base tabs props', () => { test('base other props', async () => { const { container } = render( - Tab 1 + Tab longitem Tab 2 ) @@ -71,8 +70,8 @@ test('base other props', async () => { test('base Tabpane Props', () => { const { container } = render( - - Tab 1 + + Tab longitem Tab 2 @@ -87,14 +86,14 @@ test('base Tabpane Props', () => { expect(el.length === 3).toBe(true) expect(el[0]).toHaveClass('nut-tabs-titles-item-active') expect(el[1]).toHaveClass('nut-tabs-titles-item-disabled') - expect(el2[0]).toHaveTextContent('Tab 1') + expect(el2[0]).toHaveTextContent('Tab longitem') }) test('base Tabpane autoHeight Props', () => { const { container } = render( - - Tab 1 + + Tab longitem Tab 2 @@ -120,8 +119,8 @@ test('base click', () => { const handleClick = vi.fn(() => {}) const { container } = render( - - Tab 1 + + Tab longitem Tab 2 @@ -145,8 +144,8 @@ test('click tab when have many tabs', async () => { const handleClick = vi.fn(() => {}) const { container } = render( - - Tab 1 + + Tab longitem Tab 2 @@ -154,8 +153,8 @@ test('click tab when have many tabs', async () => { Tab 3 - - Tab 11 + + Tab longitem1 Tab 22 diff --git a/src/packages/tabs/demos/h5/demo1.tsx b/src/packages/tabs/demos/h5/demo1.tsx index 4c99db304d..6dd7500c59 100644 --- a/src/packages/tabs/demos/h5/demo1.tsx +++ b/src/packages/tabs/demos/h5/demo1.tsx @@ -11,7 +11,7 @@ const Demo1 = () => { setTab1value(value) }} > - Tab 1 + Tab longitem Tab 2 Tab 3 diff --git a/src/packages/tabs/demos/h5/demo10.tsx b/src/packages/tabs/demos/h5/demo10.tsx index ad6c8d1e78..ee55a278cd 100644 --- a/src/packages/tabs/demos/h5/demo10.tsx +++ b/src/packages/tabs/demos/h5/demo10.tsx @@ -13,7 +13,7 @@ const Demo10 = () => { setTab1value(value) }} > - Tab 1 + Tab longitem Tab 2 Tab 3 diff --git a/src/packages/tabs/demos/h5/demo11.tsx b/src/packages/tabs/demos/h5/demo11.tsx index da81377081..eeb5e367f8 100644 --- a/src/packages/tabs/demos/h5/demo11.tsx +++ b/src/packages/tabs/demos/h5/demo11.tsx @@ -11,8 +11,8 @@ const Demo11 = () => { setTab2value(value) }} > - - Tab 1 + + Tab longitem Tab 2 diff --git a/src/packages/tabs/demos/h5/demo12.tsx b/src/packages/tabs/demos/h5/demo12.tsx index 2090a35f27..c5f1168519 100644 --- a/src/packages/tabs/demos/h5/demo12.tsx +++ b/src/packages/tabs/demos/h5/demo12.tsx @@ -14,7 +14,7 @@ const Demo12 = () => { setTabIndex(page) }} > - + @@ -28,7 +28,7 @@ const Demo12 = () => { }} > -
Tab 1
+
Tab longitem
Tab 2
diff --git a/src/packages/tabs/demos/h5/demo13.tsx b/src/packages/tabs/demos/h5/demo13.tsx index 83d87c7662..fcb028e5f5 100644 --- a/src/packages/tabs/demos/h5/demo13.tsx +++ b/src/packages/tabs/demos/h5/demo13.tsx @@ -13,16 +13,16 @@ const Demo13 = () => { setTab2value(value) }} > - -

Tab 1

-

Tab 1

-

Tab 1

-

Tab 1

-

Tab 1

-

Tab 1

-

Tab 1

-

Tab 1

-

Tab 1

+ +

Tab longitem

+

Tab longitem

+

Tab longitem

+

Tab longitem

+

Tab longitem

+

Tab longitem

+

Tab longitem

+

Tab longitem

+

Tab longitem

Tab 2

diff --git a/src/packages/tabs/demos/h5/demo14.tsx b/src/packages/tabs/demos/h5/demo14.tsx index b1a544f802..e070e667ce 100644 --- a/src/packages/tabs/demos/h5/demo14.tsx +++ b/src/packages/tabs/demos/h5/demo14.tsx @@ -12,11 +12,11 @@ const Demo14 = () => { setTab2value(value) }} > - -

Tab 1

-

Tab 1

-

Tab 1

-

Tab 1

+ +

Tab longitem

+

Tab longitem

+

Tab longitem

+

Tab longitem

 Tab 2 Tab 3 diff --git a/src/packages/tabs/demos/h5/demo16.tsx b/src/packages/tabs/demos/h5/demo16.tsx index e0f10247c6..56b255e2d2 100644 --- a/src/packages/tabs/demos/h5/demo16.tsx +++ b/src/packages/tabs/demos/h5/demo16.tsx @@ -11,6 +11,7 @@ const Demo16 = () => { setTab4value(value) }} > + 第一名top1 低阶特卖 上新日 百亿补贴 diff --git a/src/packages/tabs/demos/h5/demo2.tsx b/src/packages/tabs/demos/h5/demo2.tsx index e24c074c52..b4f9f56a42 100644 --- a/src/packages/tabs/demos/h5/demo2.tsx +++ b/src/packages/tabs/demos/h5/demo2.tsx @@ -12,7 +12,7 @@ const Demo2 = () => { }} activeType="smile" > - Tab 1 + Tab longitem Tab 2 Tab 3 diff --git a/src/packages/tabs/demos/h5/demo20.tsx b/src/packages/tabs/demos/h5/demo20.tsx index 2b2c7c458c..5c74767808 100644 --- a/src/packages/tabs/demos/h5/demo20.tsx +++ b/src/packages/tabs/demos/h5/demo20.tsx @@ -13,7 +13,7 @@ const Demo20 = () => { }} direction="vertical" > - + { @@ -21,7 +21,7 @@ const Demo20 = () => { }} direction="horizontal" > - Tab 1 + Tab longitem Tab 2 Tab 3 diff --git a/src/packages/tabs/demos/h5/demo21.tsx b/src/packages/tabs/demos/h5/demo21.tsx index df3f25c65e..891d1c8c7b 100644 --- a/src/packages/tabs/demos/h5/demo21.tsx +++ b/src/packages/tabs/demos/h5/demo21.tsx @@ -13,7 +13,7 @@ const Demo21 = () => { }} autoHeight > - + { @@ -21,7 +21,7 @@ const Demo21 = () => { }} direction="vertical" > - Tab 1 + Tab longitem Tab 2 Tab 3 diff --git a/src/packages/tabs/demos/h5/demo22.tsx b/src/packages/tabs/demos/h5/demo22.tsx index 915423fc59..79f20072eb 100644 --- a/src/packages/tabs/demos/h5/demo22.tsx +++ b/src/packages/tabs/demos/h5/demo22.tsx @@ -13,7 +13,7 @@ const Demo22 = () => { }} style={{ '--nutui-tabs-titles-font-size': '20px' }} > - Tab 1 + Tab longitem Tab 2 Tab 3 @@ -24,7 +24,7 @@ const Demo22 = () => { }} style={{ '--nutui-tabs-titles-font-size': '12px' }} > - Tab 1 + Tab longitem Tab 2 Tab 3 diff --git a/src/packages/tabs/demos/h5/demo3.tsx b/src/packages/tabs/demos/h5/demo3.tsx index 4fd622f780..d3f508523c 100644 --- a/src/packages/tabs/demos/h5/demo3.tsx +++ b/src/packages/tabs/demos/h5/demo3.tsx @@ -12,7 +12,7 @@ const Demo3 = () => { }} activeType="simple" > - Tab 1 + Tab longitem Tab 2 Tab 3 diff --git a/src/packages/tabs/demos/h5/demo4.tsx b/src/packages/tabs/demos/h5/demo4.tsx index 969e5d2c10..f96d63072e 100644 --- a/src/packages/tabs/demos/h5/demo4.tsx +++ b/src/packages/tabs/demos/h5/demo4.tsx @@ -12,7 +12,7 @@ const Demo4 = () => { }} activeType="card" > - Tab 1 + Tab longitem Tab 2 Tab 3 diff --git a/src/packages/tabs/demos/h5/demo5.tsx b/src/packages/tabs/demos/h5/demo5.tsx index ffdd2f1832..a18954d9a5 100644 --- a/src/packages/tabs/demos/h5/demo5.tsx +++ b/src/packages/tabs/demos/h5/demo5.tsx @@ -12,7 +12,7 @@ const Demo5 = () => { }} activeType="button" > - Tab 1 + Tab longitem Tab 2 Tab 3 diff --git a/src/packages/tabs/demos/h5/demo6.tsx b/src/packages/tabs/demos/h5/demo6.tsx index e218ab08ce..63d740dbf5 100644 --- a/src/packages/tabs/demos/h5/demo6.tsx +++ b/src/packages/tabs/demos/h5/demo6.tsx @@ -12,7 +12,7 @@ const Demo6 = () => { }} activeType="divider" > - Tab 1 + Tab longitem Tab 2 Tab 3 diff --git a/src/packages/tabs/demos/h5/demo7.tsx b/src/packages/tabs/demos/h5/demo7.tsx index 7b92a8a749..8626a9df42 100644 --- a/src/packages/tabs/demos/h5/demo7.tsx +++ b/src/packages/tabs/demos/h5/demo7.tsx @@ -12,7 +12,7 @@ const Demo7 = () => { setTab1value(value) }} > - Tab 1 + Tab longitem Tab 2 Tab 3 diff --git a/src/packages/tabs/demos/h5/demo8.tsx b/src/packages/tabs/demos/h5/demo8.tsx index 6143b08bce..c17875ddc1 100644 --- a/src/packages/tabs/demos/h5/demo8.tsx +++ b/src/packages/tabs/demos/h5/demo8.tsx @@ -13,7 +13,7 @@ const Demo8 = () => { setTab1value(value) }} > - Tab 1 + Tab longitem Tab 2 Tab 3 diff --git a/src/packages/tabs/demos/h5/demo9.tsx b/src/packages/tabs/demos/h5/demo9.tsx index 0471484c6a..1e8e992ec7 100644 --- a/src/packages/tabs/demos/h5/demo9.tsx +++ b/src/packages/tabs/demos/h5/demo9.tsx @@ -13,7 +13,7 @@ const Demo9 = () => { setTab1value(value) }} > - Tab 1 + Tab longitem Tab 2 Tab 3 diff --git a/src/packages/tabs/demos/taro/demo1.tsx b/src/packages/tabs/demos/taro/demo1.tsx index 2835e60e88..3fbf547d5a 100644 --- a/src/packages/tabs/demos/taro/demo1.tsx +++ b/src/packages/tabs/demos/taro/demo1.tsx @@ -11,7 +11,7 @@ const Demo1 = () => { setTab1value(value) }} > - Tab 1 + Tab longitem Tab 2 Tab 3 diff --git a/src/packages/tabs/demos/taro/demo10.tsx b/src/packages/tabs/demos/taro/demo10.tsx index 20cda2a1a3..ac6f2bd374 100644 --- a/src/packages/tabs/demos/taro/demo10.tsx +++ b/src/packages/tabs/demos/taro/demo10.tsx @@ -13,7 +13,7 @@ const Demo10 = () => { }} align="left" > - Tab 1 + Tab longitem Tab 2 Tab 3 diff --git a/src/packages/tabs/demos/taro/demo11.tsx b/src/packages/tabs/demos/taro/demo11.tsx index ef546e76eb..f39733cfd7 100644 --- a/src/packages/tabs/demos/taro/demo11.tsx +++ b/src/packages/tabs/demos/taro/demo11.tsx @@ -11,8 +11,8 @@ const Demo11 = () => { setTab2value(value) }} > - - Tab 1 + + Tab longitem Tab 2 diff --git a/src/packages/tabs/demos/taro/demo12.tsx b/src/packages/tabs/demos/taro/demo12.tsx index 208fa54843..da2f29b22f 100644 --- a/src/packages/tabs/demos/taro/demo12.tsx +++ b/src/packages/tabs/demos/taro/demo12.tsx @@ -14,7 +14,7 @@ const Demo12 = () => { setTabIndex(page) }} > - + @@ -28,7 +28,7 @@ const Demo12 = () => { }} > -
Tab 1
+
Tab longitem
Tab 2
diff --git a/src/packages/tabs/demos/taro/demo13.tsx b/src/packages/tabs/demos/taro/demo13.tsx index 475786e378..1077be5582 100644 --- a/src/packages/tabs/demos/taro/demo13.tsx +++ b/src/packages/tabs/demos/taro/demo13.tsx @@ -12,15 +12,15 @@ const Demo13 = () => { setTab2value(value) }} > - -

Tab 1

-

Tab 1

-

Tab 1

-

Tab 1

-

Tab 1

-

Tab 1

-

Tab 1

-

Tab 1

+ +

Tab longitem

+

Tab longitem

+

Tab longitem

+

Tab longitem

+

Tab longitem

+

Tab longitem

+

Tab longitem

+

Tab longitem

Tab 2

diff --git a/src/packages/tabs/demos/taro/demo14.tsx b/src/packages/tabs/demos/taro/demo14.tsx index 85790f7f6e..c3d5162b22 100644 --- a/src/packages/tabs/demos/taro/demo14.tsx +++ b/src/packages/tabs/demos/taro/demo14.tsx @@ -12,11 +12,11 @@ const Demo14 = () => { setTab2value(value) }} > - -

Tab 1

-

Tab 1

-

Tab 1

-

Tab 1

+ +

Tab longitem

+

Tab longitem

+

Tab longitem

+

Tab longitem

 Tab 2 Tab 3 diff --git a/src/packages/tabs/demos/taro/demo16.tsx b/src/packages/tabs/demos/taro/demo16.tsx index 2d6f90deb2..2159c2f529 100644 --- a/src/packages/tabs/demos/taro/demo16.tsx +++ b/src/packages/tabs/demos/taro/demo16.tsx @@ -11,6 +11,7 @@ const Demo16 = () => { setTab4value(value) }} > + 第一名top1 低阶特卖 上新日 百亿补贴 diff --git a/src/packages/tabs/demos/taro/demo2.tsx b/src/packages/tabs/demos/taro/demo2.tsx index 401008f4e4..c72e3ac5b3 100644 --- a/src/packages/tabs/demos/taro/demo2.tsx +++ b/src/packages/tabs/demos/taro/demo2.tsx @@ -12,7 +12,7 @@ const Demo2 = () => { }} activeType="smile" > - Tab 1 + Tab longitem Tab 2 Tab 3 diff --git a/src/packages/tabs/demos/taro/demo20.tsx b/src/packages/tabs/demos/taro/demo20.tsx index 7395364061..3f580ed7f1 100644 --- a/src/packages/tabs/demos/taro/demo20.tsx +++ b/src/packages/tabs/demos/taro/demo20.tsx @@ -13,7 +13,7 @@ const Demo20 = () => { }} direction="vertical" > - + { @@ -21,7 +21,7 @@ const Demo20 = () => { }} direction="horizontal" > - Tab 1 + Tab longitem Tab 2 Tab 3 diff --git a/src/packages/tabs/demos/taro/demo21.tsx b/src/packages/tabs/demos/taro/demo21.tsx index 5bf0a7a54b..d247d1f870 100644 --- a/src/packages/tabs/demos/taro/demo21.tsx +++ b/src/packages/tabs/demos/taro/demo21.tsx @@ -13,7 +13,7 @@ const Demo21 = () => { }} autoHeight > - + { @@ -21,7 +21,7 @@ const Demo21 = () => { }} direction="vertical" > - Tab 1 + Tab longitem Tab 2 Tab 3 diff --git a/src/packages/tabs/demos/taro/demo22.tsx b/src/packages/tabs/demos/taro/demo22.tsx index 20ed7c76fe..e66ef8ad71 100644 --- a/src/packages/tabs/demos/taro/demo22.tsx +++ b/src/packages/tabs/demos/taro/demo22.tsx @@ -12,7 +12,7 @@ const Demo22 = () => { }} style={{ '--nutui-tabs-titles-font-size': '20px' }} > - Tab 1 + Tab longitem Tab 2 Tab 3 @@ -23,7 +23,7 @@ const Demo22 = () => { }} style={{ '--nutui-tabs-titles-font-size': '12px' }} > - Tab 1 + Tab longitem Tab 2 Tab 3 diff --git a/src/packages/tabs/demos/taro/demo3.tsx b/src/packages/tabs/demos/taro/demo3.tsx index 5f3e6ce2e9..66c20da15f 100644 --- a/src/packages/tabs/demos/taro/demo3.tsx +++ b/src/packages/tabs/demos/taro/demo3.tsx @@ -12,7 +12,7 @@ const Demo3 = () => { }} activeType="simple" > - Tab 1 + Tab longitem Tab 2 Tab 3 diff --git a/src/packages/tabs/demos/taro/demo4.tsx b/src/packages/tabs/demos/taro/demo4.tsx index e6396ad698..eff2a0f769 100644 --- a/src/packages/tabs/demos/taro/demo4.tsx +++ b/src/packages/tabs/demos/taro/demo4.tsx @@ -12,7 +12,7 @@ const Demo4 = () => { }} activeType="card" > - Tab 1 + Tab longitem Tab 2 Tab 3 diff --git a/src/packages/tabs/demos/taro/demo5.tsx b/src/packages/tabs/demos/taro/demo5.tsx index dacdb8b418..ee31b5c29b 100644 --- a/src/packages/tabs/demos/taro/demo5.tsx +++ b/src/packages/tabs/demos/taro/demo5.tsx @@ -12,7 +12,7 @@ const Demo5 = () => { }} activeType="button" > - Tab 1 + Tab longitem Tab 2 Tab 3 diff --git a/src/packages/tabs/demos/taro/demo6.tsx b/src/packages/tabs/demos/taro/demo6.tsx index cd26844a65..5f379ccd72 100644 --- a/src/packages/tabs/demos/taro/demo6.tsx +++ b/src/packages/tabs/demos/taro/demo6.tsx @@ -12,7 +12,7 @@ const Demo6 = () => { }} activeType="divider" > - Tab 1 + Tab longitem Tab 2 Tab 3 diff --git a/src/packages/tabs/demos/taro/demo7.tsx b/src/packages/tabs/demos/taro/demo7.tsx index 2d08cbd704..b3ec27e81f 100644 --- a/src/packages/tabs/demos/taro/demo7.tsx +++ b/src/packages/tabs/demos/taro/demo7.tsx @@ -12,7 +12,7 @@ const Demo7 = () => { }} align="left" > - Tab 1 + Tab longitem Tab 2 Tab 3 diff --git a/src/packages/tabs/demos/taro/demo8.tsx b/src/packages/tabs/demos/taro/demo8.tsx index 686413269b..1b2710fc1a 100644 --- a/src/packages/tabs/demos/taro/demo8.tsx +++ b/src/packages/tabs/demos/taro/demo8.tsx @@ -13,7 +13,7 @@ const Demo8 = () => { }} align="left" > - Tab 1 + Tab longitem Tab 2 Tab 3 diff --git a/src/packages/tabs/demos/taro/demo9.tsx b/src/packages/tabs/demos/taro/demo9.tsx index 9bf81d3beb..bb1d815098 100644 --- a/src/packages/tabs/demos/taro/demo9.tsx +++ b/src/packages/tabs/demos/taro/demo9.tsx @@ -13,7 +13,7 @@ const Demo9 = () => { }} align="left" > - Tab 1 + Tab longitem Tab 2 Tab 3 diff --git a/src/packages/tabs/tabs.scss b/src/packages/tabs/tabs.scss index afb99ec2e0..7379053ef3 100644 --- a/src/packages/tabs/tabs.scss +++ b/src/packages/tabs/tabs.scss @@ -5,12 +5,17 @@ display: flex; } +.nut-tabs-horizontal { + flex-direction: column; +} + .nut-tabs-titles { display: flex; box-sizing: border-box; height: $tabs-titles-height; user-select: none; - overflow: hidden; + overflow-x: auto; + overflow-y: hidden; background: $tabs-titles-background-color; scrollbar-width: none; @@ -22,7 +27,6 @@ .nut-tabs-list { width: 100%; - height: auto; display: flex; flex-shrink: 0; } @@ -41,11 +45,6 @@ } } - &-scrollable { - overflow-x: auto; - overflow-y: hidden; - } - &-item { position: relative; display: flex; @@ -61,13 +60,17 @@ text-overflow: ellipsis; white-space: nowrap; + .nut-icon { + color: $tabs-titles-item-color; + } + &-left, &-right { flex: none; } &-text { - text-align: center; + color: $tabs-titles-item-color; } &-smile, @@ -77,9 +80,9 @@ width: 0; height: 0; content: ' '; - bottom: $tabs-tab-line-bottom; left: 50%; transform: translate(-50%, 0); + bottom: $tabs-tab-line-bottom; border-radius: $tabs-tab-line-border-radius; opacity: $tabs-tab-line-opacity; overflow: hidden; @@ -93,13 +96,18 @@ font-size: 20px; width: 100%; height: 100%; - color: $color-primary; } } &-active { - color: $tabs-titles-item-active-color; - font-weight: $tabs-titles-item-active-font-weight; + .nut-icon { + color: $tabs-titles-item-active-color; + } + + .nut-tabs-titles-item-text { + color: $tabs-titles-item-active-color; + font-weight: $tabs-titles-item-active-font-weight; + } .nut-tabs-titles-item-line { overflow: unset; @@ -113,28 +121,38 @@ overflow: unset; width: 40px; height: 20px; + + .nut-icon { + color: $tabs-titles-item-active-color; + } } } &-disabled { color: $color-text-disabled; + .nut-icon { + color: $color-text-disabled; + } + .nut-tabs-titles-item-text { + color: $color-text-disabled; + } } } &-simple { - .nut-tabs-titles-item-active { - color: $color-title; - font-size: $tabs-titles-item-active-font-size; + .nut-tabs-titles-item { + &-active { + .nut-tabs-titles-item-text, + .nut-icon { + color: $color-title; + font-size: $tabs-titles-item-active-font-size; + } + } } } &-card { - padding: 0; - background-color: $color-default-light; - .nut-tabs-titles-item { - padding: 0; - &-active { font-weight: $font-weight-bold; background-color: $white; @@ -158,22 +176,19 @@ .nut-tabs-titles-item-active { .nut-tabs-titles-item-text { background: $color-default-light; - color: $color-text; + color: $tabs-titles-item-active-color; border-radius: $tabs-tab-button-border-radius; font-weight: $font-weight-bold; background-color: $tabs-tab-button-active-background-color; - color: $color-text-link; border: $tabs-tab-button-active-border; } } } &-divider { - padding: 0; border-bottom: 1px solid $color-border; .nut-tabs-titles-item { - padding: 0; position: relative; &::after { @@ -196,83 +211,35 @@ } } -[dir='rtl'] .nut-tabs-titles, -.nut-rtl .nut-tabs-titles { - &-item { - &-smile, - &-line { - left: auto; - right: 50%; - transform: translate(50%, 0); - } - } - &-divider { - .nut-tabs-titles-item { - &::after { - right: auto; - left: 0; - } - } - } -} - -.nut-tabs-horizontal { - flex-direction: column; - position: relative; -} - .nut-tabs-vertical { - flex-direction: row; - width: 100%; - .nut-tabs-ellipsis { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; + white-space: break-spaces; + padding-left: 6px; + width: 90px; + line-height: $font-size-base; } .nut-tabs-titles { - box-sizing: border-box; flex-direction: column; height: 100%; - padding: 0; width: $tabs-vertical-titles-width; flex-shrink: 0; .nut-tabs-list { - width: 100%; - display: flex; flex-direction: column; - flex-shrink: 0; - } - - &-line { - .nut-tabs-titles-item { - padding-left: 14px; - } } } - .nut-tabs-titles-scrollable { - overflow-x: hidden; - overflow-y: auto; - } - .nut-tabs-titles-item { height: $tabs-vertical-titles-item-height; - margin: 0; flex: none; &-smile { - width: 0; - height: 0; overflow: hidden; transition: width 0.3s ease; } &-line { - width: 0; - height: 0; transform: translate(0, -50%); transition: height 0.3s ease; @@ -294,8 +261,6 @@ right: -12px; bottom: -2%; left: auto; - width: 40px; - height: 20px; transform: rotate(320deg); } } @@ -304,15 +269,13 @@ .nut-tabs-horizontal { .nut-tabs-titles { flex-direction: row; - overflow-x: auto; - overflow-y: hidden; height: $tabs-titles-height; + width: 100%; + padding: 0 !important; .nut-tabs-list { - width: 100%; - display: flex; flex-direction: row; - flex-shrink: 0; + height: auto; } } @@ -326,6 +289,9 @@ .nut-tabs-titles-item-line { left: 50%; transform: translate(-50%, 0); + width: $tabs-tab-line-width; + height: $tabs-tab-line-height; + background: $tabs-tab-line-color; } .nut-tabs-titles-item-smile { @@ -349,32 +315,32 @@ height: 100%; } } +} - .nut-tabs-horizontal { - .nut-tabs-titles { - display: flex; - flex-direction: row; - padding: 0 !important; - width: 100%; - - .nut-tabs-titles-item { - display: flex; - align-items: center; - justify-content: center; - flex: 1 0 auto; +.nut-tabs-content { + display: flex; + box-sizing: border-box; - &-active { - color: $color-primary; - font-weight: $tabs-titles-item-active-font-weight; - font-size: $tabs-titles-item-active-font-size; + &-wrap { + overflow: hidden; + } +} - .nut-tabs-titles-item-line { - content: ' '; - width: $tabs-tab-line-width; - height: $tabs-tab-line-height; - background: $tabs-tab-line-color; - } - } +[dir='rtl'] .nut-tabs-titles, +.nut-rtl .nut-tabs-titles { + &-item { + &-smile, + &-line { + left: auto; + right: 50%; + transform: translate(50%, 0); + } + } + &-divider { + .nut-tabs-titles-item { + &::after { + right: auto; + left: 0; } } } @@ -422,12 +388,3 @@ } } } - -.nut-tabs-content { - display: flex; - box-sizing: border-box; - - &-wrap { - overflow: hidden; - } -} diff --git a/src/packages/tabs/tabs.taro.tsx b/src/packages/tabs/tabs.taro.tsx index dc74a73294..e21dbff8de 100644 --- a/src/packages/tabs/tabs.taro.tsx +++ b/src/packages/tabs/tabs.taro.tsx @@ -67,27 +67,23 @@ export const Tabs: FunctionComponent> & { value: outerValue, defaultValue: outerDefaultValue, ...rest - } = { - ...defaultProps, - ...props, - } + } = { ...defaultProps, ...props } + const uuid = useUuid() const [value, setValue] = usePropsValue({ value: outerValue, defaultValue: outerDefaultValue, - finalValue: 0, onChange, }) const titleItemsRef = useRef([]) - const navRef = useRef(null) const getTitles = () => { const titles: TabsTitle[] = [] - React.Children.forEach(children, (child: any, idx) => { + React.Children.forEach(children, (child, idx) => { if (React.isValidElement(child)) { - const props: any = child?.props + const { props } = child if (props?.title || props?.value) { titles.push({ title: props.title, @@ -116,6 +112,7 @@ export const Tabs: FunctionComponent> & { forceUpdate() } }, [children]) + const classes = classNames( classPrefix, `${classPrefix}-${direction}`, @@ -123,14 +120,9 @@ export const Tabs: FunctionComponent> & { ) const classesTitle = classNames(`${classPrefix}-titles`, { [`${classPrefix}-titles-${activeType}`]: activeType, - [`${classPrefix}-titles-scrollable`]: true, [`${classPrefix}-titles-${align}`]: align, }) - const tabsActiveStyle = { - color: activeType === 'smile' ? activeColor : '', - background: activeType === 'line' ? activeColor : '', - } const getRect = (selector: string) => { return new Promise((resolve) => { createSelectorQuery() @@ -162,8 +154,6 @@ export const Tabs: FunctionComponent> & { width: number } const scrollWithAnimation = useRef(false) - const navRectRef = useRef() - const titleRectRef = useRef([]) const [scrollLeft, setScrollLeft] = useState(0) const [scrollTop, setScrollTop] = useState(0) const scrollDirection = ( @@ -174,16 +164,10 @@ export const Tabs: FunctionComponent> & { const frames = 1 function animate() { - if (direction === 'horizontal') { - setScrollLeft(to) - } else { - setScrollTop(to) - } - if (++count < frames) { - raf(animate) - } + if (direction === 'horizontal') setScrollLeft(to) + else setScrollTop(to) + if (++count < frames) raf(animate) } - animate() } const scrollIntoView = (index: number) => { @@ -192,10 +176,7 @@ export const Tabs: FunctionComponent> & { getRect(`#nut-tabs-titles-${name || uuid} .nut-tabs-list`), getAllRect(`#nut-tabs-titles-${name || uuid} .nut-tabs-titles-item`), ]).then(([navRect, titleRects]: any) => { - navRectRef.current = navRect - titleRectRef.current = titleRects - // @ts-ignore - const titleRect: RectItem = titleRectRef.current[index] + const titleRect = titleRects[index] if (!titleRect) return let to = 0 @@ -203,17 +184,19 @@ export const Tabs: FunctionComponent> & { const top = titleRects .slice(0, index) .reduce((prev: number, curr: RectItem) => prev + curr.height, 0) - to = top - (navRectRef.current.height - titleRect.height) / 2 + to = top - (navRect.height - titleRect.height) / 2 } else { const left = titleRects .slice(0, index) .reduce((prev: number, curr: RectItem) => prev + curr.width, 0) - to = rtl ? -left : left + to = left - (navRect.width - titleRect.width) / 2 + // to < 0 说明不需要进行滚动，页面元素已全部显示出来 + if (to < 0) return + to = rtl ? -to : to } nextTick(() => { scrollWithAnimation.current = true }) - scrollDirection(to, direction) }) }) @@ -228,7 +211,7 @@ export const Tabs: FunctionComponent> & { transform: direction === 'horizontal' ? `translate3d(${rtl ? '' : '-'}${index * 100}%, 0, 0)` - : `translate3d( 0,-${index * 100}%, 0)`, + : `translate3d( 0, -${index * 100}%, 0)`, transitionDuration: `${duration}ms`, } } @@ -241,12 +224,11 @@ export const Tabs: FunctionComponent> & { scrollIntoView(index) }, [value]) - const tabChange = (item: TabsTitle, index: number) => { + const tabChange = (item: TabsTitle) => { onClick && onClick(item.value) - if (item.disabled) { - return + if (!item.disabled) { + setValue(item.value) } - setValue(item.value) } return ( @@ -264,54 +246,49 @@ export const Tabs: FunctionComponent> & { } id={`nut-tabs-titles-${name || uuid}`} className={classesTitle} - style={{ ...tabStyle }} + style={tabStyle} > - + {!!title && typeof title === 'function' ? title() : titles.current.map((item, index) => { return ( titleItemsRef.current.push(ref) } id={`scrollIntoView${index}`} - onClick={(e) => { - tabChange(item, index) - }} + onClick={() => tabChange(item)} className={classNames(`${classPrefix}-titles-item`, { [`nut-tabs-titles-item-active`]: !item.disabled && String(item.value) === String(value), [`nut-tabs-titles-item-disabled`]: item.disabled, [`nut-tabs-titles-item-${align}`]: align, })} - key={item.value} > {activeType === 'line' && ( )} {activeType === 'smile' && ( - + )} {item.title} @@ -323,25 +300,15 @@ export const Tabs: FunctionComponent> & { {React.Children.map(children, (child, idx) => { - if (!React.isValidElement(child)) { - return null - } - - let childProps = { + if (!React.isValidElement(child)) return null + return React.cloneElement(child, { ...child.props, active: value === child.props.value, - } - - if ( - String(value) !== String(child.props.value || idx) && - autoHeight - ) { - childProps = { - ...childProps, - autoHeightClassName: 'inactive', - } - } - return React.cloneElement(child, childProps) + autoHeightClassName: + autoHeight && String(value) !== String(child.props.value || idx) + ? 'inactive' + : undefined, + }) })} diff --git a/src/packages/tabs/tabs.tsx b/src/packages/tabs/tabs.tsx index 103cbdb4a8..e61734a42f 100644 --- a/src/packages/tabs/tabs.tsx +++ b/src/packages/tabs/tabs.tsx @@ -42,6 +42,7 @@ const defaultProps = { } as TabsProps const classPrefix = 'nut-tabs' + export const Tabs: FunctionComponent> & { TabPane: typeof TabPane } = (props) => { @@ -62,52 +63,43 @@ export const Tabs: FunctionComponent> & { value: outerValue, defaultValue: outerDefaultValue, ...rest - } = { - ...defaultProps, - ...props, - } + } = { ...defaultProps, ...props } const [value, setValue] = usePropsValue({ value: outerValue, defaultValue: outerDefaultValue, - finalValue: 0, onChange, }) + const titleItemsRef = useRef([]) const navRef = useRef(null) + const scrollDirection = ( - nav: any, + nav: HTMLDivElement, to: number, - duration: number, - direction?: 'horizontal' | 'vertical' + duration: number ) => { - let count = 0 const from = direction === 'horizontal' ? nav.scrollLeft : nav.scrollTop const frames = duration === 0 ? 1 : Math.round((duration * 1000) / 16) + let count = 0 - function animate() { - if (direction === 'horizontal') { - nav.scrollLeft += (to - from) / frames - } else { - nav.scrollTop += (to - from) / frames - } - - if (++count < frames) { - raf(animate) - } + const animate = () => { + if (direction === 'horizontal') nav.scrollLeft += (to - from) / frames + else nav.scrollTop += (to - from) / frames + if (++count < frames) raf(animate) } animate() } + const scrollIntoView = (index: number, immediate?: boolean) => { const nav = navRef.current const titleItem = titleItemsRef.current const titlesLength = titles.current.length - const itemLength = titleItemsRef.current.length + const itemLength = titleItem.length if (!nav || !titleItem || !titleItem[itemLength - titlesLength + index]) { return } const title = titleItem[itemLength - titlesLength + index] - let to = 0 if (direction === 'vertical') { const runTop = title.offsetTop - nav.offsetTop + 10 @@ -115,14 +107,14 @@ export const Tabs: FunctionComponent> & { } else { to = title.offsetLeft - (nav.offsetWidth - title.offsetWidth) / 2 } - scrollDirection(nav, to, immediate ? 0 : 0.3, direction) + scrollDirection(nav, to, immediate ? 0 : 0.3) } const getTitles = () => { const titles: TabsTitle[] = [] - React.Children.forEach(children, (child: any, idx) => { + React.Children.forEach(children, (child, idx) => { if (React.isValidElement(child)) { - const props: any = child?.props + const { props } = child if (props?.title || props?.value) { titles.push({ title: props.title, @@ -140,7 +132,6 @@ export const Tabs: FunctionComponent> & { titles.current = getTitles() let current: string | number = '' titles.current.forEach((title) => { - // eslint-disable-next-line eqeqeq if (title.value === value) { current = value } @@ -159,29 +150,22 @@ export const Tabs: FunctionComponent> & { ) const classesTitle = classNames(`${classPrefix}-titles`, { [`${classPrefix}-titles-${activeType}`]: activeType, - [`${classPrefix}-titles-scrollable`]: true, [`${classPrefix}-titles-${align}`]: align, }) - const tabsActiveStyle = { - color: activeType === 'smile' ? activeColor : '', - background: activeType === 'line' ? activeColor : '', - } const getContentStyle = () => { - // eslint-disable-next-line eqeqeq - let index = titles.current.findIndex((t) => t.value == value) + let index = titles.current.findIndex((t) => t.value === value) index = index < 0 ? 0 : index return { transform: direction === 'horizontal' ? `translate3d(${rtl ? '' : '-'}${index * 100}%, 0, 0)` - : `translate3d( 0,-${index * 100}%, 0)`, + : `translate3d( 0, -${index * 100}%, 0)`, transitionDuration: `${duration}ms`, } } useEffect(() => { - // eslint-disable-next-line eqeqeq - let index = titles.current.findIndex((t) => t.value == value) + let index = titles.current.findIndex((t) => t.value === value) index = index < 0 ? 0 : index setTimeout(() => { scrollIntoView(index) @@ -190,52 +174,50 @@ export const Tabs: FunctionComponent> & { const tabChange = (item: TabsTitle) => { onClick && onClick(item.value) - if (item.disabled) { - return + if (!item.disabled) { + setValue(item.value) } - setValue(item.value) } return (
-
+
{!!title && typeof title === 'function' ? title() : titles.current.map((item) => { return (
{ - tabChange(item) - }} + key={item.value} + ref={(ref: HTMLDivElement) => titleItemsRef.current.push(ref)} + onClick={() => tabChange(item)} className={classNames(`${classPrefix}-titles-item`, { [`nut-tabs-titles-item-active`]: !item.disabled && String(item.value) === String(value), [`nut-tabs-titles-item-disabled`]: item.disabled, [`nut-tabs-titles-item-${align}`]: align, })} - ref={(ref: HTMLDivElement) => titleItemsRef.current.push(ref)} - key={item.value} > {activeType === 'line' && (
)} {activeType === 'smile' && ( -
+
)}
{item.title}
@@ -246,25 +228,15 @@ export const Tabs: FunctionComponent> & {
{React.Children.map(children, (child, idx) => { - if (!React.isValidElement(child)) { - return null - } - - let childProps = { + if (!React.isValidElement(child)) return null + return React.cloneElement(child, { ...child.props, active: value === child.props.value, - } - - if ( - String(value) !== String(child.props.value || idx) && - autoHeight - ) { - childProps = { - ...childProps, - autoHeightClassName: 'inactive', - } - } - return React.cloneElement(child, childProps) + autoHeightClassName: + autoHeight && String(value) !== String(child.props.value || idx) + ? 'inactive' + : undefined, + }) })}