fix: tabs 代码简化,调整部分样式

jdf2e · Jan 16, 2025 · 8b76ec0 · 8b76ec0
1 parent 16fb6e5
commit 8b76ec0
Show file tree

Hide file tree

Showing 42 changed files with 241 additions and 346 deletions.
diff --git a/src/packages/tabpane/tabpane.taro.tsx b/src/packages/tabpane/tabpane.taro.tsx
@@ -1,5 +1,6 @@
 import React, { FunctionComponent } from 'react'
 import classNames from 'classnames'
+import { View } from '@tarojs/components'
 
 interface TabPanelInnerProps {
   autoHeightClassName: string
@@ -37,7 +38,5 @@ export const TabPane: FunctionComponent<
     className
   )
 
-  return children ? (
-    <div className={classes}>{!disabled && children}</div>
-  ) : null
+  return children && <View className={classes}>{!disabled && children}</View>
 }
diff --git a/src/packages/tabpane/tabpane.tsx b/src/packages/tabpane/tabpane.tsx
@@ -37,7 +37,5 @@ export const TabPane: FunctionComponent<
     className
   )
 
-  return children ? (
-    <div className={classes}>{!disabled && children}</div>
-  ) : null
+  return children && <div className={classes}>{!disabled && children}</div>
 }
diff --git 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(
     <Tabs data-testid="tabs1">
-      <TabPane title="Tab 1"> Tab 1 </TabPane>
+      <TabPane title="Tab longitem"> Tab longitem </TabPane>
     </Tabs>
   )
   expect(getByTestId('tabs1')).toHaveClass('nut-tabs')
@@ -16,8 +16,8 @@ test('base Tabs', () => {
 test('base tabs props', () => {
   const { container } = render(
     <Tabs value="0" direction="horizontal" activeType="smile">
-      <TabPane title="Tab 1" value="0">
-        Tab 1
+      <TabPane title="Tab longitem" value="0">
+        Tab longitem
       </TabPane>
     </Tabs>
   )
@@ -32,8 +32,8 @@ test('base tabs props', () => {
 test('base tabs props', () => {
   const { container } = render(
     <Tabs value="0" direction="horizontal" activeType="card">
-      <TabPane title="Tab 1" value="0">
-        Tab 1
+      <TabPane title="Tab longitem" value="0">
+        Tab longitem
       </TabPane>
     </Tabs>
   )
@@ -44,7 +44,7 @@ test('base tabs props', () => {
 test('base other props', async () => {
   const { container } = render(
     <Tabs duration={500}>
-      <TabPane title="Tab 1"> Tab 1 </TabPane>
+      <TabPane title="Tab longitem"> Tab longitem </TabPane>
       <TabPane title="Tab 2"> Tab 2 </TabPane>
     </Tabs>
   )
@@ -71,8 +71,8 @@ test('base other props', async () => {
 test('base Tabpane Props', () => {
   const { container } = render(
     <Tabs value="0">
-      <TabPane title="Tab 1" value="0">
-        Tab 1
+      <TabPane title="Tab longitem" value="0">
+        Tab longitem
       </TabPane>
       <TabPane title="Tab 2" value="1" disabled>
         Tab 2
@@ -87,14 +87,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(
     <Tabs value="0" autoHeight>
-      <TabPane title="Tab 1" value="0">
-        Tab 1
+      <TabPane title="Tab longitem" value="0">
+        Tab longitem
       </TabPane>
       <TabPane title="Tab 2" value="1">
         Tab 2
@@ -120,8 +120,8 @@ test('base click', () => {
   const handleClick = vi.fn(() => {})
   const { container } = render(
     <Tabs value="0" onClick={handleClick}>
-      <TabPane title="Tab 1" value="0">
-        Tab 1
+      <TabPane title="Tab longitem" value="0">
+        Tab longitem
       </TabPane>
       <TabPane title="Tab 2" value="1" disabled>
         Tab 2
@@ -145,17 +145,17 @@ test('click tab when have many tabs', async () => {
   const handleClick = vi.fn(() => {})
   const { container } = render(
     <Tabs value="0" onClick={handleClick} direction="vertical">
-      <TabPane title="Tab 1" value="0">
-        Tab 1
+      <TabPane title="Tab longitem" value="0">
+        Tab longitem
       </TabPane>
       <TabPane title="Tab 2" value="1">
         Tab 2
       </TabPane>
       <TabPane title="Tab 3" value="2">
         Tab 3
       </TabPane>
-      <TabPane title="Tab 11" value="01">
-        Tab 11
+      <TabPane title="Tab longitem1" value="01">
+        Tab longitem1
       </TabPane>
       <TabPane title="Tab 22" value="12">
         Tab 22

diff --git a/src/packages/tabs/demos/h5/demo1.tsx b/src/packages/tabs/demos/h5/demo1.tsx
@@ -11,7 +11,7 @@ const Demo1 = () => {
           setTab1value(value)
         }}
       >
-        <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+        <Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
         <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
         <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
       </Tabs>

diff --git a/src/packages/tabs/demos/h5/demo10.tsx b/src/packages/tabs/demos/h5/demo10.tsx
@@ -13,7 +13,7 @@ const Demo10 = () => {
           setTab1value(value)
         }}
       >
-        <Tabs.TabPane title="Tab 1"> Tab 1</Tabs.TabPane>
+        <Tabs.TabPane title="Tab longitem"> Tab longitem</Tabs.TabPane>
         <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
         <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
       </Tabs>

diff --git a/src/packages/tabs/demos/h5/demo11.tsx b/src/packages/tabs/demos/h5/demo11.tsx
@@ -11,8 +11,8 @@ const Demo11 = () => {
           setTab2value(value)
         }}
       >
-        <Tabs.TabPane title="Tab 1" value="0">
-          Tab 1
+        <Tabs.TabPane title="Tab longitem" value="0">
+          Tab longitem
         </Tabs.TabPane>
         <Tabs.TabPane title="Tab 2" value="1" disabled>
           Tab 2

diff --git a/src/packages/tabs/demos/h5/demo12.tsx b/src/packages/tabs/demos/h5/demo12.tsx
@@ -14,7 +14,7 @@ const Demo12 = () => {
           setTabIndex(page)
         }}
       >
-        <Tabs.TabPane title="Tab 1" />
+        <Tabs.TabPane title="Tab longitem" />
         <Tabs.TabPane title="Tab 2" />
         <Tabs.TabPane title="Tab 3" />
       </Tabs>
@@ -28,7 +28,7 @@ const Demo12 = () => {
         }}
       >
         <Swiper.Item>
-          <div style={style}>Tab 1</div>
+          <div style={style}>Tab longitem</div>
         </Swiper.Item>
         <Swiper.Item>
           <div style={style}>Tab 2</div>

diff --git a/src/packages/tabs/demos/h5/demo13.tsx b/src/packages/tabs/demos/h5/demo13.tsx
@@ -13,16 +13,16 @@ const Demo13 = () => {
           setTab2value(value)
         }}
       >
-        <Tabs.TabPane title="Tab 1" value="0">
-          <p>Tab 1</p>
-          <p>Tab 1</p>
-          <p>Tab 1</p>
-          <p>Tab 1</p>
-          <p>Tab 1</p>
-          <p>Tab 1</p>
-          <p>Tab 1</p>
-          <p>Tab 1</p>
-          <p>Tab 1</p>
+        <Tabs.TabPane title="Tab longitem" value="0">
+          <p>Tab longitem</p>
+          <p>Tab longitem</p>
+          <p>Tab longitem</p>
+          <p>Tab longitem</p>
+          <p>Tab longitem</p>
+          <p>Tab longitem</p>
+          <p>Tab longitem</p>
+          <p>Tab longitem</p>
+          <p>Tab longitem</p>
         </Tabs.TabPane>
         <Tabs.TabPane title="Tab 2" value="1">
           <p>Tab 2</p>

diff --git a/src/packages/tabs/demos/h5/demo14.tsx b/src/packages/tabs/demos/h5/demo14.tsx
@@ -12,11 +12,11 @@ const Demo14 = () => {
           setTab2value(value)
         }}
       >
-        <Tabs.TabPane title="Tab 1">
-          <p>Tab 1</p>
-          <p>Tab 1</p>
-          <p>Tab 1</p>
-          <p>Tab 1</p>
+        <Tabs.TabPane title="Tab longitem">
+          <p>Tab longitem</p>
+          <p>Tab longitem</p>
+          <p>Tab longitem</p>
+          <p>Tab longitem</p>
         </Tabs.TabPane>
         <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
         <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>

diff --git a/src/packages/tabs/demos/h5/demo16.tsx b/src/packages/tabs/demos/h5/demo16.tsx
@@ -11,6 +11,7 @@ const Demo16 = () => {
           setTab4value(value)
         }}
       >
+        <Tabs.TabPane title="第一名top1">第一名top1</Tabs.TabPane>
         <Tabs.TabPane title="低阶特卖">低阶特卖</Tabs.TabPane>
         <Tabs.TabPane title="上新日">上新日</Tabs.TabPane>
         <Tabs.TabPane title="百亿补贴">百亿补贴</Tabs.TabPane>

diff --git a/src/packages/tabs/demos/h5/demo2.tsx b/src/packages/tabs/demos/h5/demo2.tsx
@@ -12,7 +12,7 @@ const Demo2 = () => {
         }}
         activeType="smile"
       >
-        <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+        <Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
         <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
         <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
       </Tabs>

diff --git a/src/packages/tabs/demos/h5/demo20.tsx b/src/packages/tabs/demos/h5/demo20.tsx
@@ -13,15 +13,15 @@ const Demo20 = () => {
         }}
         direction="vertical"
       >
-        <Tabs.TabPane title="Tab 1">
+        <Tabs.TabPane title="Tab longitem">
           <Tabs
             value={tab9value}
             onChange={(value) => {
               setTab9value(value)
             }}
             direction="horizontal"
           >
-            <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+            <Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
             <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
             <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
           </Tabs>

diff --git a/src/packages/tabs/demos/h5/demo21.tsx b/src/packages/tabs/demos/h5/demo21.tsx
@@ -13,15 +13,15 @@ const Demo21 = () => {
         }}
         autoHeight
       >
-        <Tabs.TabPane title="Tab 1">
+        <Tabs.TabPane title="Tab longitem">
           <Tabs
             value={tab9value}
             onChange={(value) => {
               setTab9value(value)
             }}
             direction="vertical"
           >
-            <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+            <Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
             <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
             <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
           </Tabs>

diff --git 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' }}
       >
-        <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+        <Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
         <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
         <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
       </Tabs>
@@ -24,7 +24,7 @@ const Demo22 = () => {
         }}
         style={{ '--nutui-tabs-titles-font-size': '12px' }}
       >
-        <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+        <Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
         <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
         <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
       </Tabs>

diff --git a/src/packages/tabs/demos/h5/demo3.tsx b/src/packages/tabs/demos/h5/demo3.tsx
@@ -12,7 +12,7 @@ const Demo3 = () => {
         }}
         activeType="simple"
       >
-        <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+        <Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
         <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
         <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
       </Tabs>

diff --git a/src/packages/tabs/demos/h5/demo4.tsx b/src/packages/tabs/demos/h5/demo4.tsx
@@ -12,7 +12,7 @@ const Demo4 = () => {
         }}
         activeType="card"
       >
-        <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+        <Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
         <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
         <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
       </Tabs>

diff --git a/src/packages/tabs/demos/h5/demo5.tsx b/src/packages/tabs/demos/h5/demo5.tsx
@@ -12,7 +12,7 @@ const Demo5 = () => {
         }}
         activeType="button"
       >
-        <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+        <Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
         <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
         <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
       </Tabs>

diff --git a/src/packages/tabs/demos/h5/demo6.tsx b/src/packages/tabs/demos/h5/demo6.tsx
@@ -12,7 +12,7 @@ const Demo6 = () => {
         }}
         activeType="divider"
       >
-        <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+        <Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
         <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
         <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
       </Tabs>

diff --git a/src/packages/tabs/demos/h5/demo7.tsx b/src/packages/tabs/demos/h5/demo7.tsx
@@ -12,7 +12,7 @@ const Demo7 = () => {
           setTab1value(value)
         }}
       >
-        <Tabs.TabPane title="Tab 1"> Tab 1</Tabs.TabPane>
+        <Tabs.TabPane title="Tab longitem"> Tab longitem</Tabs.TabPane>
         <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
         <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
       </Tabs>

diff --git a/src/packages/tabs/demos/h5/demo8.tsx b/src/packages/tabs/demos/h5/demo8.tsx
@@ -13,7 +13,7 @@ const Demo8 = () => {
           setTab1value(value)
         }}
       >
-        <Tabs.TabPane title="Tab 1"> Tab 1</Tabs.TabPane>
+        <Tabs.TabPane title="Tab longitem"> Tab longitem</Tabs.TabPane>
         <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
         <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
       </Tabs>

diff --git a/src/packages/tabs/demos/h5/demo9.tsx b/src/packages/tabs/demos/h5/demo9.tsx
@@ -13,7 +13,7 @@ const Demo9 = () => {
           setTab1value(value)
         }}
       >
-        <Tabs.TabPane title="Tab 1"> Tab 1</Tabs.TabPane>
+        <Tabs.TabPane title="Tab longitem"> Tab longitem</Tabs.TabPane>
         <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
         <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
       </Tabs>

diff --git a/src/packages/tabs/demos/taro/demo1.tsx b/src/packages/tabs/demos/taro/demo1.tsx
@@ -11,7 +11,7 @@ const Demo1 = () => {
           setTab1value(value)
         }}
       >
-        <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+        <Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
         <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
         <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
       </Tabs>

diff --git a/src/packages/tabs/demos/taro/demo10.tsx b/src/packages/tabs/demos/taro/demo10.tsx
@@ -13,7 +13,7 @@ const Demo10 = () => {
         }}
         align="left"
       >
-        <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+        <Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
         <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
         <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
       </Tabs>

diff --git a/src/packages/tabs/demos/taro/demo11.tsx b/src/packages/tabs/demos/taro/demo11.tsx
@@ -11,8 +11,8 @@ const Demo11 = () => {
           setTab2value(value)
         }}
       >
-        <Tabs.TabPane title="Tab 1" value="0">
-          Tab 1
+        <Tabs.TabPane title="Tab longitem" value="0">
+          Tab longitem
         </Tabs.TabPane>
         <Tabs.TabPane title="Tab 2" value="1" disabled>
           Tab 2

diff --git a/src/packages/tabs/demos/taro/demo12.tsx b/src/packages/tabs/demos/taro/demo12.tsx
@@ -14,7 +14,7 @@ const Demo12 = () => {
           setTabIndex(page)
         }}
       >
-        <Tabs.TabPane title="Tab 1" />
+        <Tabs.TabPane title="Tab longitem" />
         <Tabs.TabPane title="Tab 2" />
         <Tabs.TabPane title="Tab 3" />
       </Tabs>
@@ -28,7 +28,7 @@ const Demo12 = () => {
         }}
       >
         <Swiper.Item>
-          <div style={contentStyle}>Tab 1</div>
+          <div style={contentStyle}>Tab longitem</div>
         </Swiper.Item>
         <Swiper.Item>
           <div style={contentStyle}>Tab 2</div>