Skip to content

Commit 338d5c5

Browse files
Ryan-CW-CodeRyan-CW-Code
committed
feat(switch): loading状态交给用户控制
1 parent 79a9900 commit 338d5c5

File tree

11 files changed

+55
-20
lines changed

11 files changed

+55
-20
lines changed

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import Demo4 from './demos/taro/demo4'
1010
import Demo5 from './demos/taro/demo5'
1111
import Demo6 from './demos/taro/demo6'
1212
import Demo7 from './demos/taro/demo7'
13+
import Demo8 from './demos/taro/demo8'
1314

1415
const SwitchDemo = () => {
1516
const [translated] = useTranslate({
@@ -21,6 +22,7 @@ const SwitchDemo = () => {
2122
supportText: '支持文字',
2223
supportIcon: '支持Icon',
2324
eventTip: '触发了 onChange 事件，开关状态：',
25+
loading: '标识开关操作仍在执行中',
2426
},
2527
'zh-TW': {
2628
basic: '非受控',
@@ -30,6 +32,7 @@ const SwitchDemo = () => {
3032
supportText: '支持文字',
3133
supportIcon: '支持Icon',
3234
eventTip: '觸發了 onChange 事件，開關狀態：',
35+
loading: '開關操作仍在進行中',
3336
},
3437
'en-US': {
3538
basic: 'Uncontrolled',
@@ -39,6 +42,7 @@ const SwitchDemo = () => {
3942
supportText: 'Support Text',
4043
supportIcon: 'Support Icon',
4144
eventTip: 'Emit onChange event, current state:',
45+
loading: 'Mark a pending state of switch.',
4246
},
4347
})
4448
return (
@@ -59,6 +63,8 @@ const SwitchDemo = () => {
5963
<Demo6 />
6064
<View className="h2">{translated.customColor}</View>
6165
<Demo7 />
66+
<View className="h2">{translated.loading}</View>
67+
<Demo8 />
6268
</ScrollView>
6369
</>
6470
)

‎src/packages/switch/demo.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import Demo4 from './demos/h5/demo4'
77
import Demo5 from './demos/h5/demo5'
88
import Demo6 from './demos/h5/demo6'
99
import Demo7 from './demos/h5/demo7'
10+
import Demo8 from './demos/h5/demo8'
1011

1112
const SwitchDemo = () => {
1213
const [translated] = useTranslate({
@@ -18,6 +19,7 @@ const SwitchDemo = () => {
1819
supportText: '支持文字',
1920
supportIcon: '支持Icon',
2021
eventTip: '触发了 onChange 事件，开关状态：',
22+
loading: '标识开关操作仍在执行中',
2123
},
2224
'zh-TW': {
2325
basic: '非受控',
@@ -27,6 +29,7 @@ const SwitchDemo = () => {
2729
supportText: '支持文字',
2830
supportIcon: '支持Icon',
2931
eventTip: '觸發了 onChange 事件，開關狀態：',
32+
loading: '開關操作仍在進行中',
3033
},
3134
'en-US': {
3235
basic: 'Uncontrolled',
@@ -36,6 +39,7 @@ const SwitchDemo = () => {
3639
supportText: 'Support Text',
3740
supportIcon: 'Support Icon',
3841
eventTip: 'Emit onChange event, current state:',
42+
loading: 'Mark a pending state of switch.',
3943
},
4044
})
4145
return (
@@ -55,6 +59,8 @@ const SwitchDemo = () => {
5559
<Demo6 />
5660
<h2>{translated.customColor}</h2>
5761
<Demo7 />
62+
<h2>{translated.loading}</h2>
63+
<Demo8 />
5864
</div>
5965
</>
6066
)

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react'
2+
import { Cell, Switch, Space } from '@nutui/nutui-react'
3+
4+
const Demo8 = () => {
5+
return (
6+
<Cell>
7+
<Space>
8+
<Switch loading />
9+
<Switch loading defaultChecked />
10+
</Space>
11+
</Cell>
12+
)
13+
}
14+
export default Demo8

‎src/packages/switch/demos/taro/demo8.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react'
2+
import { Cell, Switch, Space } from '@nutui/nutui-react-taro'
3+
4+
const Demo8 = () => {
5+
return (
6+
<Cell>
7+
<Space>
8+
<Switch loading />
9+
<Switch loading defaultChecked />
10+
</Space>
11+
</Cell>
12+
)
13+
}
14+
export default Demo8

‎src/packages/switch/doc.en-US.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ import { Switch } from '@nutui/nutui-react'
7878
| activeText | Text description when opening | `ReactNode` | `-` |
7979
| inactiveText | Text description when closed | `ReactNode` | `-` |
8080
| loadingIcon | Controlled loading state icon | `ReactNode` | `<Loading1 />` |
81+
| loading | Loading state of switch | `boolean` | `false` |
8182
| onChange | Trigger when switching switches | `onChange:(value: boolean, event: Event)` | `-` |
8283

8384
## Theming

‎src/packages/switch/doc.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ import { Switch } from '@nutui/nutui-react'
7878
| activeText | 打开时文字描述 | `ReactNode` | `-` |
7979
| inactiveText | 关闭时文字描述 | `ReactNode` | `-` |
8080
| loadingIcon | 受控 loading 态图标 | `ReactNode` | `<Loading1 />` |
81+
| loading | 加载中的开关 | `boolean` | `false` |
8182
| onChange | 切换开关时触发 | `onChange:(value: boolean, event: Event)` | `-` |
8283

8384
## 主题定制

‎src/packages/switch/doc.taro.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ import { Switch } from '@nutui/nutui-react-taro'
7878
| activeText | 打开时文字描述 | `ReactNode` | `-` |
7979
| inactiveText | 关闭时文字描述 | `ReactNode` | `-` |
8080
| loadingIcon | 受控 loading 态图标 | `ReactNode` | `<Loading1 />` |
81+
| loading | 加载中的开关 | `boolean` | `false` |
8182
| onChange | 切换开关时触发 | `onChange:(value: boolean, event: Event)` | `-` |
8283

8384
## 主题定制

‎src/packages/switch/doc.zh-TW.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ import { Switch } from '@nutui/nutui-react'
7878
| activeText | 打開時文字描述 | `ReactNode` | `-` |
7979
| inactiveText | 關閉時文字描述 | `ReactNode` | `-` |
8080
| loadingIcon | 受控 loading 態圖標 | `ReactNode` | `<Loading1 />` |
81+
| loading | 載入中的開關 | `boolean` | `false` |
8182
| onChange | 切換開關時觸發 | `onChange:(value: boolean, event: Event)` | `-` |
8283

8384
## 主題定製

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

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { FunctionComponent, useEffect, useState } from 'react'
1+
import React, { FunctionComponent } from 'react'
22

33
import { View } from '@tarojs/components'
44
import classNames from 'classnames'
@@ -14,6 +14,7 @@ const defaultProps = {
1414
activeText: '',
1515
inactiveText: '',
1616
loadingIcon: <Loading1 />,
17+
loading: false,
1718
} as TaroSwitchProps
1819
export const Switch: FunctionComponent<Partial<TaroSwitchProps>> = (props) => {
1920
const {
@@ -23,6 +24,7 @@ export const Switch: FunctionComponent<Partial<TaroSwitchProps>> = (props) => {
2324
activeText,
2425
inactiveText,
2526
loadingIcon,
27+
loading,
2628
className,
2729
style,
2830
onChange,
@@ -40,12 +42,6 @@ export const Switch: FunctionComponent<Partial<TaroSwitchProps>> = (props) => {
4042
defaultValue: defaultChecked,
4143
})
4244

43-
useEffect(() => {
44-
changing && setChanging(false)
45-
}, [value])
46-
47-
const [changing, setChanging] = useState(false)
48-
4945
const classes = () => {
5046
return classNames([
5147
classPrefix,
@@ -59,9 +55,8 @@ export const Switch: FunctionComponent<Partial<TaroSwitchProps>> = (props) => {
5955
}
6056

6157
const onClick = () => {
62-
if (disabled || changing) return
58+
if (disabled || loading) return
6359
if (onChange) {
64-
setChanging(true)
6560
onChange(!value)
6661
}
6762
setValue(!value)
@@ -82,7 +77,7 @@ export const Switch: FunctionComponent<Partial<TaroSwitchProps>> = (props) => {
8277
},
8378
])}
8479
>
85-
{changing && loadingIcon ? (
80+
{loading && loadingIcon ? (
8681
<>{loadingIcon}</>
8782
) : (
8883
<>

‎src/packages/switch/switch.tsx‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { FunctionComponent, useEffect, useState } from 'react'
1+
import React, { FunctionComponent } from 'react'
22
import classNames from 'classnames'
33
import { Loading1 } from '@nutui/icons-react'
44
import { ComponentDefaults } from '@/utils/typings'
@@ -12,6 +12,7 @@ const defaultProps = {
1212
activeText: '',
1313
inactiveText: '',
1414
loadingIcon: <Loading1 />,
15+
loading: false,
1516
} as WebSwitchProps
1617
export const Switch: FunctionComponent<Partial<WebSwitchProps>> = (props) => {
1718
const {
@@ -21,6 +22,7 @@ export const Switch: FunctionComponent<Partial<WebSwitchProps>> = (props) => {
2122
activeText,
2223
inactiveText,
2324
loadingIcon,
25+
loading,
2426
className,
2527
style,
2628
onChange,
@@ -38,12 +40,6 @@ export const Switch: FunctionComponent<Partial<WebSwitchProps>> = (props) => {
3840
defaultValue: defaultChecked,
3941
})
4042

41-
useEffect(() => {
42-
changing && setChanging(false)
43-
}, [value])
44-
45-
const [changing, setChanging] = useState(false)
46-
4743
const classes = () => {
4844
return classNames([
4945
classPrefix,
@@ -57,9 +53,8 @@ export const Switch: FunctionComponent<Partial<WebSwitchProps>> = (props) => {
5753
}
5854

5955
const onClick = () => {
60-
if (disabled || changing) return
56+
if (disabled || loading) return
6157
if (onChange) {
62-
setChanging(true)
6358
onChange(!value)
6459
}
6560
setValue(!value)
@@ -80,7 +75,7 @@ export const Switch: FunctionComponent<Partial<WebSwitchProps>> = (props) => {
8075
},
8176
])}
8277
>
83-
{changing && loadingIcon ? (
78+
{loading && loadingIcon ? (
8479
<>{loadingIcon}</>
8580
) : (
8681
<>

0 commit comments

Comments
 (0)