feat(switch): loading状态交给用户控制

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 = () => {
         <Demo6 />
         <View className="h2">{translated.customColor}</View>
         <Demo7 />
+        <View className="h2">{translated.loading}</View>
+        <Demo8 />
       </ScrollView>
     </>
   )

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 = () => {
         <Demo6 />
         <h2>{translated.customColor}</h2>
         <Demo7 />
+        <h2>{translated.loading}</h2>
+        <Demo8 />
       </div>
     </>
   )

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 (
+    <Cell>
+      <Space>
+        <Switch loading />
+        <Switch loading defaultChecked />
+      </Space>
+    </Cell>
+  )
+}
+export default Demo8

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 (
+    <Cell>
+      <Space>
+        <Switch loading />
+        <Switch loading defaultChecked />
+      </Space>
+    </Cell>
+  )
+}
+export default Demo8

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` | `<Loading1 />` |
+| loading | Loading state of switch | `boolean` | `false` |
 | onChange | Trigger when switching switches | `onChange:(value: boolean, event: Event)` | `-` |
 
 ## Theming

src/packages/switch/doc.md

@@ -78,6 +78,7 @@ import { Switch } from '@nutui/nutui-react'
 | activeText | 打开时文字描述 | `ReactNode` | `-` |
 | inactiveText | 关闭时文字描述 | `ReactNode` | `-` |
 | loadingIcon | 受控 loading 态图标 | `ReactNode` | `<Loading1 />` |
+| loading | 加载中的开关 | `boolean` | `false` |
 | onChange | 切换开关时触发 | `onChange:(value: boolean, event: Event)` | `-` |
 
 ## 主题定制

src/packages/switch/doc.taro.md

@@ -78,6 +78,7 @@ import { Switch } from '@nutui/nutui-react-taro'
 | activeText | 打开时文字描述 | `ReactNode` | `-` |
 | inactiveText | 关闭时文字描述 | `ReactNode` | `-` |
 | loadingIcon | 受控 loading 态图标 | `ReactNode` | `<Loading1 />` |
+| loading | 加载中的开关 | `boolean` | `false` |
 | onChange | 切换开关时触发 | `onChange:(value: boolean, event: Event)` | `-` |
 
 ## 主题定制

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

@@ -78,6 +78,7 @@ import { Switch } from '@nutui/nutui-react'
 | activeText | 打開時文字描述 | `ReactNode` | `-` |
 | inactiveText | 關閉時文字描述 | `ReactNode` | `-` |
 | loadingIcon | 受控 loading 態圖標 | `ReactNode` | `<Loading1 />` |
+| loading | 載入中的開關 | `boolean` | `false` |
 | onChange | 切換開關時觸發 | `onChange:(value: boolean, event: Event)` | `-` |
 
 ## 主題定製

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: <Loading1 />,
+  loading: false,
 } as TaroSwitchProps
 export const Switch: FunctionComponent<Partial<TaroSwitchProps>> = (props) => {
   const {
@@ -23,6 +24,7 @@ export const Switch: FunctionComponent<Partial<TaroSwitchProps>> = (props) => {
     activeText,
     inactiveText,
     loadingIcon,
+    loading,
     className,
     style,
     onChange,
@@ -40,12 +42,6 @@ export const Switch: FunctionComponent<Partial<TaroSwitchProps>> = (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<Partial<TaroSwitchProps>> = (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<Partial<TaroSwitchProps>> = (props) => {
           },
         ])}
       >
-        {changing && loadingIcon ? (
+        {loading && loadingIcon ? (
           <>{loadingIcon}</>
         ) : (
           <>

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: <Loading1 />,
+  loading: false,
 } as WebSwitchProps
 export const Switch: FunctionComponent<Partial<WebSwitchProps>> = (props) => {
   const {
@@ -21,6 +22,7 @@ export const Switch: FunctionComponent<Partial<WebSwitchProps>> = (props) => {
     activeText,
     inactiveText,
     loadingIcon,
+    loading,
     className,
     style,
     onChange,
@@ -38,12 +40,6 @@ export const Switch: FunctionComponent<Partial<WebSwitchProps>> = (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<Partial<WebSwitchProps>> = (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<Partial<WebSwitchProps>> = (props) => {
           },
         ])}
       >
-        {changing && loadingIcon ? (
+        {loading && loadingIcon ? (
           <>{loadingIcon}</>
         ) : (
           <>

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
 }