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

feat(switch): v14&代码重构 #2779

Merged
merged 12 commits into from
Dec 4, 2024
Merged

feat(switch): v14&代码重构 #2779

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
92b4a54
fix: 适配v14&代码重构
irisSong Nov 7, 2024
20d4f47
fix: 支持rtl
irisSong Nov 8, 2024
485a534
fix: 修改居中实现方式
irisSong Nov 8, 2024
915250f
fix: 修改动画
irisSong Nov 8, 2024
90af513
chore: 合并V3.0
irisSong Nov 18, 2024
400e214
fix: 适配v14
irisSong Nov 18, 2024
26a008c
feat: add marking
irisSong Nov 25, 2024
975544f
fix: 修改cr
irisSong Nov 25, 2024
53dfc81
Merge remote-tracking branch 'upstream/feat_v3.x' into 3.0-switch
irisSong Nov 25, 2024
05e74d1
fix: 修整繁体字翻译错误+添加cursor
irisSong Dec 2, 2024
babc359
fix: modify css var
irisSong Dec 2, 2024
e03b7f1
fix: 修改toast来源+升级文档更新
irisSong Dec 4, 2024
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
2 changes: 2 additions & 0 deletions migrate-from-v2.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -616,6 +616,8 @@ plugins: [
- 移除 `isAsync`，通过 `checked`实现
- 移除 `activeColor` ，通过css变量`--nutui-switch-open-background-color`实现
- 移除 `inactiveColor`，通过css变量`--nutui-switch-close-background-color`实现
- `activeText 属性类型更改为 `ReactNode`
- `inactiveText` 属性类型更改为 `ReactNode`

#### Toast

Expand Down
1 change: 1 addition & 0 deletions src/config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -673,6 +673,7 @@
"sort": 11,
"show": true,
"taro": true,
"v14": true,
"author": "dsj"
},
{
Expand Down
9 changes: 6 additions & 3 deletions src/packages/switch/__test__/switch.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,10 @@ test('activeText && checked && onChange && inactiveText && className && style te
inactiveText: '关',
checked: false,
className: 'switch-test',
style: { fontSize: '12px', '--nutui-switch-open-background-color': 'blue' },
style: {
fontSize: '12px',
'--nutui-switch-active-background-color': 'blue',
},
Comment on lines +12 to +15
Copy link

Choose a reason for hiding this comment

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

💡 Codebase verification

测试用例中的样式覆盖不完整

根据组件源码分析，当前测试用例仅覆盖了 --nutui-switch-active-background-color 和 fontSize，但组件实际使用了多个重要的样式变量，包括：

  • 开关尺寸相关：$switch-width、$switch-height、$switch-line-height
  • 边框相关：$switch-border-radius、$switch-border-width
  • 背景色相关：$switch-inactive-background-color、$switch-active-disabled-background-color
  • 文本相关：$switch-label-font-size、$switch-label-text-color

建议补充以下测试场景：

  • 开关尺寸的自定义样式测试
  • 禁用状态下的样式测试
  • 文本标签的样式测试
🔗 Analysis chain

样式属性更新应覆盖完整

在测试中，style 对象更新了 --nutui-switch-active-background-color，但缺少其他可能影响组件显示的样式属性，建议检查并确保所有相关样式都已正确覆盖。

请运行以下脚本以验证样式属性：

Let me generate additional verification to check the actual CSS custom properties being used in the component:

Let me try one more verification to check the CSS custom properties in the component's SCSS file with proper escaping:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# 检查 switch 组件的所有自定义样式变量是否在测试中被覆盖

# 查找 switch 组件中使用的所有样式变量
rg --no-heading -o '\$switch-[a-zA-Z0-9_-]+' src/packages/switch/switch.scss | sort | uniq

# 检查测试文件中是否覆盖了这些样式变量
for var in $(rg --no-heading -o '\$switch-[a-zA-Z0-9_-]+' src/packages/switch/switch.scss | sort | uniq); do
  if ! rg -q "$var" src/packages/switch/__test__/switch.spec.tsx; then
    echo "未在测试中覆盖样式变量: $var"
  fi
done

Length of output: 4855

Script:

#!/bin/bash
# 检查 switch 组件中实际使用的 CSS 自定义属性
rg --no-heading -o '--nutui-switch-[a-zA-Z0-9_-]+' src/packages/switch/switch.scss

# 检查测试文件中的自定义属性覆盖情况
rg -A 5 'style:' src/packages/switch/__test__/switch.spec.tsx

Length of output: 745

Script:

#!/bin/bash
# 检查 switch 组件中实际使用的 CSS 自定义属性（使用正确的转义）
rg -o "\\-\\-nutui-switch-[a-zA-Z0-9_-]+" src/packages/switch/switch.scss

# 检查组件中的样式变量定义
cat src/packages/switch/switch.scss

Length of output: 2532

}
const { activeText, inactiveText, className, style } = state
const testFn = vi.fn()
Expand All @@ -28,11 +31,11 @@ test('activeText && checked && onChange && inactiveText && className && style te
if (el) {
expect(el).toHaveAttribute(
'class',
`nut-switch nut-switch-close nut-switch-base switch-test`
`nut-switch nut-switch-inactive nut-switch-base switch-test`
)
expect(el).toHaveAttribute(
'style',
`font-size: 12px; --nutui-switch-open-background-color: blue;`
`font-size: 12px; --nutui-switch-active-background-color: blue;`
)
expect(el).toHaveTextContent(inactiveText)
await act(() => {
Expand Down
14 changes: 10 additions & 4 deletions src/packages/switch/demo.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
import React from 'react'
import { ScrollView, View } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useTranslate } from '@/sites/assets/locale//taro'
import { useTranslate } from '@/sites/assets/locale/taro'
import Header from '@/sites/components/header'
import Demo1 from './demos/taro/demo1'
import Demo2 from './demos/taro/demo2'
import Demo3 from './demos/taro/demo3'
import Demo4 from './demos/taro/demo4'
import Demo5 from './demos/taro/demo5'
import Demo6 from './demos/taro/demo6'
import Demo7 from './demos/taro/demo7'

const SwitchDemo = () => {
const [translated] = useTranslate({
Expand All @@ -18,6 +19,7 @@ const SwitchDemo = () => {
asyncControl: '受控',
customColor: '自定义颜色',
supportText: '支持文字',
supportIcon: '支持Icon',
eventTip: '触发了 onChange 事件，开关状态：',
},
'zh-TW': {
Expand All @@ -26,6 +28,7 @@ const SwitchDemo = () => {
asyncControl: '受控',
customColor: '自定義顏色',
supportText: '支持文字',
supportIcon: '支持Icon',
eventTip: '觸發了 onChange 事件，開關狀態：',
},
'en-US': {
Expand All @@ -34,6 +37,7 @@ const SwitchDemo = () => {
asyncControl: 'controlled',
customColor: 'Custom Color',
supportText: 'Support Text',
supportIcon: 'Support Icon',
eventTip: 'Emit onChange event, current state:',
},
})
Expand All @@ -47,12 +51,14 @@ const SwitchDemo = () => {
<Demo2 />
<View className="h2">{translated.disabled}</View>
<Demo3 />
<View className="h2">{translated.eventTip}</View>
<View className="h2">{translated.supportText}</View>
<Demo4 />
<View className="h2">{translated.customColor}</View>
<View className="h2">{translated.supportIcon}</View>
<Demo5 />
<View className="h2">{translated.supportText}</View>
<View className="h2">{translated.eventTip}</View>
<Demo6 />
<View className="h2">{translated.customColor}</View>
<Demo7 />
</ScrollView>
</>
)
Expand Down
12 changes: 9 additions & 3 deletions src/packages/switch/demo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import Demo3 from './demos/h5/demo3'
import Demo4 from './demos/h5/demo4'
import Demo5 from './demos/h5/demo5'
import Demo6 from './demos/h5/demo6'
import Demo7 from './demos/h5/demo7'

const SwitchDemo = () => {
const [translated] = useTranslate({
Expand All @@ -15,6 +16,7 @@ const SwitchDemo = () => {
asyncControl: '受控',
customColor: '自定义颜色',
supportText: '支持文字',
supportIcon: '支持Icon',
eventTip: '触发了 onChange 事件，开关状态：',
},
'zh-TW': {
Expand All @@ -23,6 +25,7 @@ const SwitchDemo = () => {
asyncControl: '受控',
customColor: '自定義顏色',
supportText: '支持文字',
supportIcon: '支持Icon',
eventTip: '觸發了 onChange 事件，開關狀態：',
},
'en-US': {
Expand All @@ -31,6 +34,7 @@ const SwitchDemo = () => {
asyncControl: 'controlled',
customColor: 'Custom Color',
supportText: 'Support Text',
supportIcon: 'Support Icon',
eventTip: 'Emit onChange event, current state:',
},
})
Expand All @@ -43,12 +47,14 @@ const SwitchDemo = () => {
<Demo2 />
<h2>{translated.disabled}</h2>
<Demo3 />
<h2>{translated.eventTip}</h2>
<h2>{translated.supportText}</h2>
<Demo4 />
<h2>{translated.customColor}</h2>
<h2>{translated.supportIcon}</h2>
<Demo5 />
<h2>{translated.supportText}</h2>
<h2>{translated.eventTip}</h2>
<Demo6 />
<h2>{translated.customColor}</h2>
<Demo7 />
</div>
</>
)
Expand Down
7 changes: 5 additions & 2 deletions src/packages/switch/demos/h5/demo3.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
import React from 'react'
import { Cell, Switch } from '@nutui/nutui-react'
import { Cell, Switch, Space } from '@nutui/nutui-react'

const Demo3 = () => {
return (
<Cell>
<Switch defaultChecked disabled />
<Space>
<Switch defaultChecked disabled />
<Switch disabled />
</Space>
</Cell>
)
}
Expand Down
15 changes: 7 additions & 8 deletions src/packages/switch/demos/h5/demo4.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
import React from 'react'
import { Cell, Switch, Toast } from '@nutui/nutui-react'
import { Cell, Switch, Space } from '@nutui/nutui-react'

const Demo4 = () => {
const onChange = (value: boolean, event: any) => {
Toast.show(`触发了onChange事件，开关状态：${value}`)
}
return (
<Cell>
<Switch
defaultChecked
onChange={(value, event) => onChange(value, event)}
/>
<Space>
<Switch defaultChecked activeText="开启" inactiveText="关闭" />
<Switch defaultChecked activeText="开" inactiveText="关" />
<Switch defaultChecked activeText="开启" inactiveText="关闭" disabled />
<Switch activeText="开启" inactiveText="关闭" disabled />
</Space>
</Cell>
)
}
Expand Down
24 changes: 16 additions & 8 deletions src/packages/switch/demos/h5/demo5.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,24 @@
import React from 'react'
import { Cell, Switch } from '@nutui/nutui-react'
import { Cell, Space, Switch } from '@nutui/nutui-react'
import { Check, Close } from '@nutui/icons-react'

const Demo5 = () => {
return (
<Cell>
<Switch
defaultChecked
style={{
'--nutui-switch-open-background-color': 'blue',
'--nutui-switch-close-line-background-color': '#ebebeb',
}}
/>
<Space>
<Switch
defaultChecked
activeText={<Check />}
inactiveText={<Close />}
/>
<Switch
defaultChecked
activeText={<Check />}
inactiveText={<Close />}
disabled
/>
<Switch activeText={<Check />} inactiveText={<Close />} disabled />
</Space>
</Cell>
)
}
Expand Down
10 changes: 8 additions & 2 deletions src/packages/switch/demos/h5/demo6.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,16 @@
import React from 'react'
import { Cell, Switch } from '@nutui/nutui-react'
import { Cell, Switch, Toast } from '@nutui/nutui-react'

const Demo6 = () => {
const onChange = (value: boolean, event: any) => {
Toast.show(`触发了onChange事件，开关状态：${value}`)
}
return (
<Cell>
<Switch defaultChecked activeText="开" inactiveText="关" />
<Switch
defaultChecked
onChange={(value, event) => onChange(value, event)}
/>
</Cell>
)
}
Expand Down
17 changes: 17 additions & 0 deletions src/packages/switch/demos/h5/demo7.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import React from 'react'
import { Cell, Switch } from '@nutui/nutui-react'

const Demo7 = () => {
return (
<Cell>
<Switch
defaultChecked
style={{
'--nutui-switch-active-background-color': 'blue',
'--nutui-switch-inactive-line-background-color': '#ebebeb',
}}
/>
</Cell>
)
}
export default Demo7
28 changes: 20 additions & 8 deletions src/packages/switch/demos/taro/demo2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,35 @@
import React, { useState } from 'react'
import { Cell, Switch } from '@nutui/nutui-react-taro'
import Taro from '@tarojs/taro'
import { Cell, Switch, Toast } from '@nutui/nutui-react-taro'

const Demo2 = () => {
const [checkedAsync, setCheckedAsync] = useState(true)
const [value, setValue] = useState(false)
const [showToast, setShowToast] = useState(false)

const onChangeAsync = (value: boolean, event: any) => {
Taro.showToast({ title: `2秒后异步触发 ${value}` })
setValue(value)
setShowToast(true)
setTimeout(() => {
setCheckedAsync(value)
}, 2000)
}
return (
<Cell>
<Switch
checked={checkedAsync}
onChange={(value, event) => onChangeAsync(value, event)}
<>
<Cell>
<Switch
checked={checkedAsync}
onChange={(value, event) => onChangeAsync(value, event)}
/>
</Cell>
<Toast
type="text"
content={`2秒后异步触发 ${value}`}
visible={showToast}
Comment on lines +26 to +27
Copy link

Choose a reason for hiding this comment

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

⚠️ Potential issue

Toast 内容显示可能不准确

Toast 中显示的 value 是切换时的状态值，而不是实际的 checkedAsync 值，可能会导致用户理解错误。建议同步显示 checkedAsync 的值。

建议修改如下：

<Toast
  type="text"
- content={`2秒后异步触发 ${value}`}
+ content={`2秒后异步触发 ${checkedAsync}`}
  visible={showToast}
  onClose={() => {
    setShowToast(false)
  }}
/>

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

onClose={() => {
setShowToast(false)
}}
/>
</Cell>
</>
)
}
export default Demo2
7 changes: 5 additions & 2 deletions src/packages/switch/demos/taro/demo3.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
import React from 'react'
import { Cell, Switch } from '@nutui/nutui-react-taro'
import { Cell, Switch, Space } from '@nutui/nutui-react-taro'

const Demo3 = () => {
return (
<Cell>
<Switch defaultChecked disabled />
<Space>
<Switch defaultChecked disabled />
<Switch disabled />
</Space>
</Cell>
)
}
Expand Down
19 changes: 7 additions & 12 deletions src/packages/switch/demos/taro/demo4.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,15 @@
import React from 'react'
import { Cell, Switch } from '@nutui/nutui-react-taro'
import Taro from '@tarojs/taro'
import { Cell, Switch, Space } from '@nutui/nutui-react-taro'

const Demo4 = () => {
const onChange = (
value: boolean,
event: React.MouseEvent<Element, MouseEvent>
) => {
Taro.showToast({ title: `触发了onChange事件，开关状态：${value}` })
}
return (
<Cell>
<Switch
defaultChecked
onChange={(value, event) => onChange(value, event)}
/>
<Space>
<Switch defaultChecked activeText="开启" inactiveText="关闭" />
<Switch defaultChecked activeText="开" inactiveText="关" />
<Switch defaultChecked activeText="开启" inactiveText="关闭" disabled />
<Switch activeText="开启" inactiveText="关闭" disabled />
</Space>
</Cell>
)
}
Expand Down
24 changes: 16 additions & 8 deletions src/packages/switch/demos/taro/demo5.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,24 @@
import React from 'react'
import { Cell, Switch } from '@nutui/nutui-react-taro'
import { Cell, Space, Switch } from '@nutui/nutui-react-taro'
import { Check, Close } from '@nutui/icons-react-taro'

const Demo5 = () => {
return (
<Cell>
<Switch
defaultChecked
style={{
'--nutui-switch-open-background-color': 'blue',
'--nutui-switch-close-line-background-color': '#ebebeb',
}}
/>
<Space>
<Switch
defaultChecked
activeText={<Check />}
inactiveText={<Close />}
/>
<Switch
defaultChecked
activeText={<Check />}
inactiveText={<Close />}
disabled
/>
<Switch activeText={<Check />} inactiveText={<Close />} disabled />
</Space>
</Cell>
)
}
Expand Down
Loading
Loading