Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 1 commit into
base: next
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions src/packages/tabpane/tabpane.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { FunctionComponent } from 'react'
import classNames from 'classnames'
import { View } from '@tarojs/components'
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

建议统一组件引入方式并优化渲染逻辑

  1. 建议将组件引入语句与其他引入保持一致的顺序
  2. 渲染逻辑存在与 React 版本相同的问题
- import { View } from '@tarojs/components'
+ import type { View } from '@tarojs/components'
+ import { View } from '@tarojs/components'

  // ... 其他代码 ...

- return children && <View className={classes}>{!disabled && children}</View>
+ if (!children) return null
+ return (
+   <View className={classes}>
+     {disabled ? (
+       <View className={`${classPrefix}__disabled`}>
+         {children}
+       </View>
+     ) : children}
+   </View>
+ )

Also applies to: 41-41


interface TabPanelInnerProps {
autoHeightClassName: string
Expand Down Expand Up @@ -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>
}
4 changes: 1 addition & 3 deletions src/packages/tabpane/tabpane.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

建议优化条件渲染逻辑

当前实现存在以下问题：

  1. 条件渲染逻辑可能不够直观
  2. disabled 状态的处理方式可能导致不一致的渲染结果

建议重构为更清晰的实现：

- return children && <div className={classes}>{!disabled && children}</div>
+ if (!children) return null
+ return (
+   <div className={classes}>
+     {disabled ? (
+       <div className={`${classPrefix}__disabled`}>
+         {children}
+       </div>
+     ) : children}
+   </div>
+ )

Committable suggestion skipped: line range outside the PR's diff.

}
34 changes: 17 additions & 17 deletions src/packages/tabs/__test__/tabs.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand All @@ -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>
)
Expand All @@ -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>
)
Expand All @@ -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>
)
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/packages/tabs/demos/h5/demo1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/packages/tabs/demos/h5/demo10.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/packages/tabs/demos/h5/demo11.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions src/packages/tabs/demos/h5/demo12.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
20 changes: 10 additions & 10 deletions src/packages/tabs/demos/h5/demo13.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
10 changes: 5 additions & 5 deletions src/packages/tabs/demos/h5/demo14.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions src/packages/tabs/demos/h5/demo16.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/packages/tabs/demos/h5/demo2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/packages/tabs/demos/h5/demo20.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/packages/tabs/demos/h5/demo21.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/packages/tabs/demos/h5/demo22.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/packages/tabs/demos/h5/demo3.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/packages/tabs/demos/h5/demo4.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/packages/tabs/demos/h5/demo5.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/packages/tabs/demos/h5/demo6.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/packages/tabs/demos/h5/demo7.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/packages/tabs/demos/h5/demo8.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/packages/tabs/demos/h5/demo9.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/packages/tabs/demos/taro/demo1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/packages/tabs/demos/taro/demo10.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/packages/tabs/demos/taro/demo11.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions src/packages/tabs/demos/taro/demo12.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
Loading
Loading