diff --git a/src/packages/switch/demo.taro.tsx b/src/packages/switch/demo.taro.tsx
index ac961c8b0d..1fb5533e0f 100644
--- a/src/packages/switch/demo.taro.tsx
+++ b/src/packages/switch/demo.taro.tsx
@@ -10,6 +10,7 @@ import Demo4 from './demos/taro/demo4'
import Demo5 from './demos/taro/demo5'
import Demo6 from './demos/taro/demo6'
import Demo7 from './demos/taro/demo7'
+import Demo8 from './demos/taro/demo8'
const SwitchDemo = () => {
const [translated] = useTranslate({
@@ -21,6 +22,7 @@ const SwitchDemo = () => {
supportText: '支持文字',
supportIcon: '支持Icon',
eventTip: '触发了 onChange 事件，开关状态：',
+ loading: '标识开关操作仍在执行中',
},
'zh-TW': {
basic: '非受控',
@@ -30,6 +32,7 @@ const SwitchDemo = () => {
supportText: '支持文字',
supportIcon: '支持Icon',
eventTip: '觸發了 onChange 事件，開關狀態：',
+ loading: '開關操作仍在進行中',
},
'en-US': {
basic: 'Uncontrolled',
@@ -39,6 +42,7 @@ const SwitchDemo = () => {
supportText: 'Support Text',
supportIcon: 'Support Icon',
eventTip: 'Emit onChange event, current state:',
+ loading: 'Mark a pending state of switch.',
},
})
return (
@@ -59,6 +63,8 @@ const SwitchDemo = () => {
{translated.customColor}
+ {translated.loading}
+
)
diff --git a/src/packages/switch/demo.tsx b/src/packages/switch/demo.tsx
index 7d33a634d2..efa9f2adbe 100644
--- a/src/packages/switch/demo.tsx
+++ b/src/packages/switch/demo.tsx
@@ -7,6 +7,7 @@ import Demo4 from './demos/h5/demo4'
import Demo5 from './demos/h5/demo5'
import Demo6 from './demos/h5/demo6'
import Demo7 from './demos/h5/demo7'
+import Demo8 from './demos/h5/demo8'
const SwitchDemo = () => {
const [translated] = useTranslate({
@@ -18,6 +19,7 @@ const SwitchDemo = () => {
supportText: '支持文字',
supportIcon: '支持Icon',
eventTip: '触发了 onChange 事件，开关状态：',
+ loading: '标识开关操作仍在执行中',
},
'zh-TW': {
basic: '非受控',
@@ -27,6 +29,7 @@ const SwitchDemo = () => {
supportText: '支持文字',
supportIcon: '支持Icon',
eventTip: '觸發了 onChange 事件，開關狀態：',
+ loading: '開關操作仍在進行中',
},
'en-US': {
basic: 'Uncontrolled',
@@ -36,6 +39,7 @@ const SwitchDemo = () => {
supportText: 'Support Text',
supportIcon: 'Support Icon',
eventTip: 'Emit onChange event, current state:',
+ loading: 'Mark a pending state of switch.',
},
})
return (
@@ -55,6 +59,8 @@ const SwitchDemo = () => {
{translated.customColor}
+ {translated.loading}
+
)
diff --git a/src/packages/switch/demos/h5/demo8.tsx b/src/packages/switch/demos/h5/demo8.tsx
new file mode 100644
index 0000000000..3bd1b38429
--- /dev/null
+++ b/src/packages/switch/demos/h5/demo8.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { Cell, Switch, Space } from '@nutui/nutui-react'
+
+const Demo8 = () => {
+ return (
+
+
+
+
+
+ |
+ )
+}
+export default Demo8
diff --git a/src/packages/switch/demos/taro/demo8.tsx b/src/packages/switch/demos/taro/demo8.tsx
new file mode 100644
index 0000000000..789abeb982
--- /dev/null
+++ b/src/packages/switch/demos/taro/demo8.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { Cell, Switch, Space } from '@nutui/nutui-react-taro'
+
+const Demo8 = () => {
+ return (
+
+
+
+
+
+ |
+ )
+}
+export default Demo8
diff --git a/src/packages/switch/doc.en-US.md b/src/packages/switch/doc.en-US.md
index b4090e42d0..d3e00a7d28 100644
--- a/src/packages/switch/doc.en-US.md
+++ b/src/packages/switch/doc.en-US.md
@@ -78,6 +78,7 @@ import { Switch } from '@nutui/nutui-react'
| activeText | Text description when opening | `ReactNode` | `-` |
| inactiveText | Text description when closed | `ReactNode` | `-` |
| loadingIcon | Controlled loading state icon | `ReactNode` | `` |
+| loading | Loading state of switch | `boolean` | `false` |
| onChange | Trigger when switching switches | `onChange:(value: boolean, event: Event)` | `-` |
## Theming
diff --git a/src/packages/switch/doc.md b/src/packages/switch/doc.md
index d699265bd2..449c561a09 100644
--- a/src/packages/switch/doc.md
+++ b/src/packages/switch/doc.md
@@ -78,6 +78,7 @@ import { Switch } from '@nutui/nutui-react'
| activeText | 打开时文字描述 | `ReactNode` | `-` |
| inactiveText | 关闭时文字描述 | `ReactNode` | `-` |
| loadingIcon | 受控 loading 态图标 | `ReactNode` | `` |
+| loading | 加载中的开关 | `boolean` | `false` |
| onChange | 切换开关时触发 | `onChange:(value: boolean, event: Event)` | `-` |
## 主题定制
diff --git a/src/packages/switch/doc.taro.md b/src/packages/switch/doc.taro.md
index 77a4646b2f..25f95d6efd 100644
--- a/src/packages/switch/doc.taro.md
+++ b/src/packages/switch/doc.taro.md
@@ -78,6 +78,7 @@ import { Switch } from '@nutui/nutui-react-taro'
| activeText | 打开时文字描述 | `ReactNode` | `-` |
| inactiveText | 关闭时文字描述 | `ReactNode` | `-` |
| loadingIcon | 受控 loading 态图标 | `ReactNode` | `` |
+| loading | 加载中的开关 | `boolean` | `false` |
| onChange | 切换开关时触发 | `onChange:(value: boolean, event: Event)` | `-` |
## 主题定制
diff --git a/src/packages/switch/doc.zh-TW.md b/src/packages/switch/doc.zh-TW.md
index 0f12e4205a..708c78a37f 100644
--- a/src/packages/switch/doc.zh-TW.md
+++ b/src/packages/switch/doc.zh-TW.md
@@ -78,6 +78,7 @@ import { Switch } from '@nutui/nutui-react'
| activeText | 打開時文字描述 | `ReactNode` | `-` |
| inactiveText | 關閉時文字描述 | `ReactNode` | `-` |
| loadingIcon | 受控 loading 態圖標 | `ReactNode` | `` |
+| loading | 載入中的開關 | `boolean` | `false` |
| onChange | 切換開關時觸發 | `onChange:(value: boolean, event: Event)` | `-` |
## 主題定製
diff --git a/src/packages/switch/switch.taro.tsx b/src/packages/switch/switch.taro.tsx
index e4c7389ae8..180c7fa378 100644
--- a/src/packages/switch/switch.taro.tsx
+++ b/src/packages/switch/switch.taro.tsx
@@ -1,4 +1,4 @@
-import React, { FunctionComponent, useEffect, useState } from 'react'
+import React, { FunctionComponent } from 'react'
import { View } from '@tarojs/components'
import classNames from 'classnames'
@@ -14,6 +14,7 @@ const defaultProps = {
activeText: '',
inactiveText: '',
loadingIcon: ,
+ loading: false,
} as TaroSwitchProps
export const Switch: FunctionComponent> = (props) => {
const {
@@ -23,6 +24,7 @@ export const Switch: FunctionComponent> = (props) => {
activeText,
inactiveText,
loadingIcon,
+ loading,
className,
style,
onChange,
@@ -40,12 +42,6 @@ export const Switch: FunctionComponent> = (props) => {
defaultValue: defaultChecked,
})
- useEffect(() => {
- changing && setChanging(false)
- }, [value])
-
- const [changing, setChanging] = useState(false)
-
const classes = () => {
return classNames([
classPrefix,
@@ -59,9 +55,8 @@ export const Switch: FunctionComponent> = (props) => {
}
const onClick = () => {
- if (disabled || changing) return
+ if (disabled || loading) return
if (onChange) {
- setChanging(true)
onChange(!value)
}
setValue(!value)
@@ -82,7 +77,7 @@ export const Switch: FunctionComponent> = (props) => {
},
])}
>
- {changing && loadingIcon ? (
+ {loading && loadingIcon ? (
<>{loadingIcon}
) : (
<>
diff --git a/src/packages/switch/switch.tsx b/src/packages/switch/switch.tsx
index 91c6c1b46d..89d3dad461 100644
--- a/src/packages/switch/switch.tsx
+++ b/src/packages/switch/switch.tsx
@@ -1,4 +1,4 @@
-import React, { FunctionComponent, useEffect, useState } from 'react'
+import React, { FunctionComponent } from 'react'
import classNames from 'classnames'
import { Loading1 } from '@nutui/icons-react'
import { ComponentDefaults } from '@/utils/typings'
@@ -12,6 +12,7 @@ const defaultProps = {
activeText: '',
inactiveText: '',
loadingIcon: ,
+ loading: false,
} as WebSwitchProps
export const Switch: FunctionComponent> = (props) => {
const {
@@ -21,6 +22,7 @@ export const Switch: FunctionComponent> = (props) => {
activeText,
inactiveText,
loadingIcon,
+ loading,
className,
style,
onChange,
@@ -38,12 +40,6 @@ export const Switch: FunctionComponent> = (props) => {
defaultValue: defaultChecked,
})
- useEffect(() => {
- changing && setChanging(false)
- }, [value])
-
- const [changing, setChanging] = useState(false)
-
const classes = () => {
return classNames([
classPrefix,
@@ -57,9 +53,8 @@ export const Switch: FunctionComponent> = (props) => {
}
const onClick = () => {
- if (disabled || changing) return
+ if (disabled || loading) return
if (onChange) {
- setChanging(true)
onChange(!value)
}
setValue(!value)
@@ -80,7 +75,7 @@ export const Switch: FunctionComponent> = (props) => {
},
])}
>
- {changing && loadingIcon ? (
+ {loading && loadingIcon ? (
<>{loadingIcon}
) : (
<>
diff --git a/src/types/spec/switch/base.ts b/src/types/spec/switch/base.ts
index 156821089c..037af07465 100644
--- a/src/types/spec/switch/base.ts
+++ b/src/types/spec/switch/base.ts
@@ -8,5 +8,6 @@ export interface BaseSwitch extends BaseProps {
activeText: ReactNode
inactiveText: ReactNode
loadingIcon: ReactNode
+ loading: boolean
onChange: (val: boolean) => void
}