Skip to content

Commit 41c2255

Browse files
irisSongirisSong
authored
feat(switch): v14&代码重构 (#2779)
* fix: 适配v14&代码重构 * fix: 支持rtl * fix: 修改居中实现方式 * fix: 修改动画 * fix: 适配v14 * feat: add marking * fix: 修改cr * fix: 修整繁体字翻译错误+添加cursor * fix: modify css var * fix: 修改toast来源+升级文档更新
1 parent e4b8e17 commit 41c2255

24 files changed

+407
-239
lines changed

‎migrate-from-v2.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -616,6 +616,8 @@ plugins: [
616616
- 移除 `isAsync`，通过 `checked`实现
617617
- 移除 `activeColor` ，通过css变量`--nutui-switch-open-background-color`实现
618618
- 移除 `inactiveColor`，通过css变量`--nutui-switch-close-background-color`实现
619+
- `activeText 属性类型更改为 `ReactNode`
620+
- `inactiveText` 属性类型更改为 `ReactNode`
619621

620622
#### Toast
621623

‎src/config.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -687,6 +687,7 @@
687687
"sort": 11,
688688
"show": true,
689689
"taro": true,
690+
"v14": true,
690691
"author": "dsj"
691692
},
692693
{

‎src/packages/switch/__test__/switch.spec.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,10 @@ test('activeText && checked && onChange && inactiveText && className && style te
99
inactiveText: '关',
1010
checked: false,
1111
className: 'switch-test',
12-
style: { fontSize: '12px', '--nutui-switch-open-background-color': 'blue' },
12+
style: {
13+
fontSize: '12px',
14+
'--nutui-switch-active-background-color': 'blue',
15+
},
1316
}
1417
const { activeText, inactiveText, className, style } = state
1518
const testFn = vi.fn()
@@ -28,11 +31,11 @@ test('activeText && checked && onChange && inactiveText && className && style te
2831
if (el) {
2932
expect(el).toHaveAttribute(
3033
'class',
31-
`nut-switch nut-switch-close nut-switch-base switch-test`
34+
`nut-switch nut-switch-inactive nut-switch-base switch-test`
3235
)
3336
expect(el).toHaveAttribute(
3437
'style',
35-
`font-size: 12px; --nutui-switch-open-background-color: blue;`
38+
`font-size: 12px; --nutui-switch-active-background-color: blue;`
3639
)
3740
expect(el).toHaveTextContent(inactiveText)
3841
await act(() => {

‎src/packages/switch/demo.taro.tsx

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import React from 'react'
22
import { ScrollView, View } from '@tarojs/components'
33
import Taro from '@tarojs/taro'
4-
import { useTranslate } from '@/sites/assets/locale//taro'
4+
import { useTranslate } from '@/sites/assets/locale/taro'
55
import Header from '@/sites/components/header'
66
import Demo1 from './demos/taro/demo1'
77
import Demo2 from './demos/taro/demo2'
88
import Demo3 from './demos/taro/demo3'
99
import Demo4 from './demos/taro/demo4'
1010
import Demo5 from './demos/taro/demo5'
1111
import Demo6 from './demos/taro/demo6'
12+
import Demo7 from './demos/taro/demo7'
1213

1314
const SwitchDemo = () => {
1415
const [translated] = useTranslate({
@@ -18,6 +19,7 @@ const SwitchDemo = () => {
1819
asyncControl: '受控',
1920
customColor: '自定义颜色',
2021
supportText: '支持文字',
22+
supportIcon: '支持Icon',
2123
eventTip: '触发了 onChange 事件，开关状态：',
2224
},
2325
'zh-TW': {
@@ -26,6 +28,7 @@ const SwitchDemo = () => {
2628
asyncControl: '受控',
2729
customColor: '自定義顏色',
2830
supportText: '支持文字',
31+
supportIcon: '支持Icon',
2932
eventTip: '觸發了 onChange 事件，開關狀態：',
3033
},
3134
'en-US': {
@@ -34,6 +37,7 @@ const SwitchDemo = () => {
3437
asyncControl: 'controlled',
3538
customColor: 'Custom Color',
3639
supportText: 'Support Text',
40+
supportIcon: 'Support Icon',
3741
eventTip: 'Emit onChange event, current state:',
3842
},
3943
})
@@ -47,12 +51,14 @@ const SwitchDemo = () => {
4751
<Demo2 />
4852
<View className="h2">{translated.disabled}</View>
4953
<Demo3 />
50-
<View className="h2">{translated.eventTip}</View>
54+
<View className="h2">{translated.supportText}</View>
5155
<Demo4 />
52-
<View className="h2">{translated.customColor}</View>
56+
<View className="h2">{translated.supportIcon}</View>
5357
<Demo5 />
54-
<View className="h2">{translated.supportText}</View>
58+
<View className="h2">{translated.eventTip}</View>
5559
<Demo6 />
60+
<View className="h2">{translated.customColor}</View>
61+
<Demo7 />
5662
</ScrollView>
5763
</>
5864
)

‎src/packages/switch/demo.tsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import Demo3 from './demos/h5/demo3'
66
import Demo4 from './demos/h5/demo4'
77
import Demo5 from './demos/h5/demo5'
88
import Demo6 from './demos/h5/demo6'
9+
import Demo7 from './demos/h5/demo7'
910

1011
const SwitchDemo = () => {
1112
const [translated] = useTranslate({
@@ -15,6 +16,7 @@ const SwitchDemo = () => {
1516
asyncControl: '受控',
1617
customColor: '自定义颜色',
1718
supportText: '支持文字',
19+
supportIcon: '支持Icon',
1820
eventTip: '触发了 onChange 事件，开关状态：',
1921
},
2022
'zh-TW': {
@@ -23,6 +25,7 @@ const SwitchDemo = () => {
2325
asyncControl: '受控',
2426
customColor: '自定義顏色',
2527
supportText: '支持文字',
28+
supportIcon: '支持Icon',
2629
eventTip: '觸發了 onChange 事件，開關狀態：',
2730
},
2831
'en-US': {
@@ -31,6 +34,7 @@ const SwitchDemo = () => {
3134
asyncControl: 'controlled',
3235
customColor: 'Custom Color',
3336
supportText: 'Support Text',
37+
supportIcon: 'Support Icon',
3438
eventTip: 'Emit onChange event, current state:',
3539
},
3640
})
@@ -43,12 +47,14 @@ const SwitchDemo = () => {
4347
<Demo2 />
4448
<h2>{translated.disabled}</h2>
4549
<Demo3 />
46-
<h2>{translated.eventTip}</h2>
50+
<h2>{translated.supportText}</h2>
4751
<Demo4 />
48-
<h2>{translated.customColor}</h2>
52+
<h2>{translated.supportIcon}</h2>
4953
<Demo5 />
50-
<h2>{translated.supportText}</h2>
54+
<h2>{translated.eventTip}</h2>
5155
<Demo6 />
56+
<h2>{translated.customColor}</h2>
57+
<Demo7 />
5258
</div>
5359
</>
5460
)

‎src/packages/switch/demos/h5/demo3.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import React from 'react'
2-
import { Cell, Switch } from '@nutui/nutui-react'
2+
import { Cell, Switch, Space } from '@nutui/nutui-react'
33

44
const Demo3 = () => {
55
return (
66
<Cell>
7-
<Switch defaultChecked disabled />
7+
<Space>
8+
<Switch defaultChecked disabled />
9+
<Switch disabled />
10+
</Space>
811
</Cell>
912
)
1013
}

‎src/packages/switch/demos/h5/demo4.tsx

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
import React from 'react'
2-
import { Cell, Switch, Toast } from '@nutui/nutui-react'
2+
import { Cell, Switch, Space } from '@nutui/nutui-react'
33

44
const Demo4 = () => {
5-
const onChange = (value: boolean, event: any) => {
6-
Toast.show(`触发了onChange事件，开关状态：${value}`)
7-
}
85
return (
96
<Cell>
10-
<Switch
11-
defaultChecked
12-
onChange={(value, event) => onChange(value, event)}
13-
/>
7+
<Space>
8+
<Switch defaultChecked activeText="开启" inactiveText="关闭" />
9+
<Switch defaultChecked activeText="开" inactiveText="关" />
10+
<Switch defaultChecked activeText="开启" inactiveText="关闭" disabled />
11+
<Switch activeText="开启" inactiveText="关闭" disabled />
12+
</Space>
1413
</Cell>
1514
)
1615
}

‎src/packages/switch/demos/h5/demo5.tsx

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,24 @@
11
import React from 'react'
2-
import { Cell, Switch } from '@nutui/nutui-react'
2+
import { Cell, Space, Switch } from '@nutui/nutui-react'
3+
import { Check, Close } from '@nutui/icons-react'
34

45
const Demo5 = () => {
56
return (
67
<Cell>
7-
<Switch
8-
defaultChecked
9-
style={{
10-
'--nutui-switch-open-background-color': 'blue',
11-
'--nutui-switch-close-line-background-color': '#ebebeb',
12-
}}
13-
/>
8+
<Space>
9+
<Switch
10+
defaultChecked
11+
activeText={<Check />}
12+
inactiveText={<Close />}
13+
/>
14+
<Switch
15+
defaultChecked
16+
activeText={<Check />}
17+
inactiveText={<Close />}
18+
disabled
19+
/>
20+
<Switch activeText={<Check />} inactiveText={<Close />} disabled />
21+
</Space>
1422
</Cell>
1523
)
1624
}

‎src/packages/switch/demos/h5/demo6.tsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
11
import React from 'react'
2-
import { Cell, Switch } from '@nutui/nutui-react'
2+
import { Cell, Switch, Toast } from '@nutui/nutui-react'
33

44
const Demo6 = () => {
5+
const onChange = (value: boolean, event: any) => {
6+
Toast.show(`触发了onChange事件，开关状态：${value}`)
7+
}
58
return (
69
<Cell>
7-
<Switch defaultChecked activeText="开" inactiveText="关" />
10+
<Switch
11+
defaultChecked
12+
onChange={(value, event) => onChange(value, event)}
13+
/>
814
</Cell>
915
)
1016
}

‎src/packages/switch/demos/h5/demo7.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react'
2+
import { Cell, Switch } from '@nutui/nutui-react'
3+
4+
const Demo7 = () => {
5+
return (
6+
<Cell>
7+
<Switch
8+
defaultChecked
9+
style={{
10+
'--nutui-switch-active-background-color': 'blue',
11+
'--nutui-switch-inactive-line-background-color': '#ebebeb',
12+
}}
13+
/>
14+
</Cell>
15+
)
16+
}
17+
export default Demo7

0 commit comments

Comments
 (0)