feat(switch): loading 态受控 (#3149)

* feat: 控制加载状态的图标，传入空值时禁用 loading 态

* feat(switch): loading 态受控

* chore: 修正更新文档

* feat: 修改props定义

* fix: 更新升级文档

Author: irisSong

src/packages/switch/demo.taro.tsx

@@ -10,13 +10,15 @@ 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({
     'zh-CN': {
       basic: '非受控',
       disabled: '禁用状态',
       asyncControl: '受控',
+      loadingControl: 'loading 态受控',
       customColor: '自定义颜色',
       supportText: '支持文字',
       supportIcon: '支持Icon',
@@ -26,6 +28,7 @@ const SwitchDemo = () => {
       basic: '非受控',
       disabled: '禁用狀態',
       asyncControl: '受控',
+      loadingControl: 'loading 態受控',
       customColor: '自定義顏色',
       supportText: '支持文字',
       supportIcon: '支持Icon',
@@ -35,6 +38,7 @@ const SwitchDemo = () => {
       basic: 'Uncontrolled',
       disabled: 'Disabled',
       asyncControl: 'controlled',
+      loadingControl: 'Controlled with loading',
       customColor: 'Custom Color',
       supportText: 'Support Text',
       supportIcon: 'Support Icon',
@@ -49,6 +53,8 @@ const SwitchDemo = () => {
         <Demo1 />
         <View className="h2">{translated.asyncControl}</View>
         <Demo2 />
+        <View className="h2">{translated.loadingControl}</View>
+        <Demo8 />
         <View className="h2">{translated.disabled}</View>
         <Demo3 />
         <View className="h2">{translated.supportText}</View>

src/packages/switch/demo.tsx

@@ -7,13 +7,15 @@ 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({
     'zh-CN': {
       basic: '非受控',
       disabled: '禁用状态',
       asyncControl: '受控',
+      loadingControl: 'loading 态受控',
       customColor: '自定义颜色',
       supportText: '支持文字',
       supportIcon: '支持Icon',
@@ -23,6 +25,7 @@ const SwitchDemo = () => {
       basic: '非受控',
       disabled: '禁用狀態',
       asyncControl: '受控',
+      loadingControl: 'loading 態受控',
       customColor: '自定義顏色',
       supportText: '支持文字',
       supportIcon: '支持Icon',
@@ -32,6 +35,7 @@ const SwitchDemo = () => {
       basic: 'Uncontrolled',
       disabled: 'Disabled',
       asyncControl: 'controlled',
+      loadingControl: 'Controlled with loading',
       customColor: 'Custom Color',
       supportText: 'Support Text',
       supportIcon: 'Support Icon',
@@ -45,6 +49,8 @@ const SwitchDemo = () => {
         <Demo1 />
         <h2>{translated.asyncControl}</h2>
         <Demo2 />
+        <h2>{translated.loadingControl}</h2>
+        <Demo8 />
         <h2>{translated.disabled}</h2>
         <Demo3 />
         <h2>{translated.supportText}</h2>

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

@@ -0,0 +1,35 @@
+import React, { useState } from 'react'
+import { Cell, Switch, Toast } from '@nutui/nutui-react'
+
+const Demo8 = () => {
+  const [checkedAsync, setCheckedAsync] = useState(true)
+  const [externalLoading, setExternalLoading] = useState(false)
+
+  const mockRequest = (): Promise<void> => {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve()
+      }, 2000)
+    })
+  }
+
+  const onChangeAsync = async (value: boolean) => {
+    Toast.show(`2秒后异步触发 ${value}`)
+    await mockRequest()
+    setCheckedAsync(value)
+    // setExternalLoading(false)
+  }
+  return (
+    <Cell>
+      <Switch
+        loading={externalLoading}
+        onLoadingChange={async (loading: boolean) => {
+          setExternalLoading(loading)
+        }}
+        checked={checkedAsync}
+        onChange={(value) => onChangeAsync(value)}
+      />
+    </Cell>
+  )
+}
+export default Demo8

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

@@ -0,0 +1,46 @@
+import React, { useState } from 'react'
+import { Cell, Switch, Toast } from '@nutui/nutui-react-taro'
+
+const Demo8 = () => {
+  const [checkedAsync, setCheckedAsync] = useState(true)
+  const [value, setValue] = useState(false)
+  const [showToast, setShowToast] = useState(false)
+  const [externalLoading, setExternalLoading] = useState(false)
+  const mockRequest = (): Promise<void> => {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve()
+      }, 2000)
+    })
+  }
+
+  const onChangeAsync = async (value: boolean) => {
+    setValue(value)
+    setShowToast(true)
+    await mockRequest()
+    setCheckedAsync(value)
+    // setExternalLoading(false)
+  }
+  return (
+    <>
+      <Cell>
+        <Switch
+          loading={externalLoading}
+          onLoadingChange={async (loading: boolean) => {
+            setExternalLoading(loading)
+          }}
+          checked={checkedAsync}
+          onChange={(value) => onChangeAsync(value)}
+        />
+      </Cell>
+      <Toast
+        content={`2秒后异步触发 ${value}`}
+        visible={showToast}
+        onClose={() => {
+          setShowToast(false)
+        }}
+      />
+    </>
+  )
+}
+export default Demo8

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

@@ -26,6 +26,14 @@ import { Switch } from '@nutui/nutui-react'
 
 :::
 
+### loading 态受控
+
+:::demo
+
+<CodeBlock src='h5/demo8.tsx'></CodeBlock>
+
+:::
+
 ### disabled status
 
 :::demo
@@ -77,8 +85,10 @@ import { Switch } from '@nutui/nutui-react'
 | disabled | Disabled | `boolean` | `false` |
 | activeText | Text description when opening | `ReactNode` | `-` |
 | inactiveText | Text description when closed | `ReactNode` | `-` |
-| loadingIcon | Controlled loading state icon | `ReactNode` | `<Loading1 />` |
-| onChange | Trigger when switching switches | `onChange:(value: boolean, event: Event)` | `-` |
+| loadingIcon | Control the loading state icon, disable the loading state when a null | `ReactNode` | `<Loading1 />` |
+| loading | loading state, controlled | `boolean` | `-` |
+| onLoadingChange | Triggered when switching loading | `onLoadingChange:(value: boolean)` | `-` |
+| onChange | Trigger when switching switches | `onChange:(value: boolean)` | `-` |
 
 ## Theming
 

src/packages/switch/doc.md

@@ -26,6 +26,14 @@ import { Switch } from '@nutui/nutui-react'
 
 :::
 
+### loading 态受控
+
+:::demo
+
+<CodeBlock src='h5/demo8.tsx'></CodeBlock>
+
+:::
+
 ### 禁用状态
 
 :::demo
@@ -77,8 +85,10 @@ import { Switch } from '@nutui/nutui-react'
 | disabled | 禁用状态 | `boolean` | `false` |
 | activeText | 打开时文字描述 | `ReactNode` | `-` |
 | inactiveText | 关闭时文字描述 | `ReactNode` | `-` |
-| loadingIcon | 受控 loading 态图标 | `ReactNode` | `<Loading1 />` |
-| onChange | 切换开关时触发 | `onChange:(value: boolean, event: Event)` | `-` |
+| loadingIcon | 控制加载状态的图标，传入空值时禁用 loading 态 | `ReactNode` | `<Loading1 />` |
+| loading | loading 态，受控 | `boolean` | `-` |
+| onLoadingChange | 切换 loading 态时触发 | `onLoadingChange:(value: boolean)` | `-` |
+| onChange | 切换开关时触发 | `onChange:(value: boolean)` | `-` |
 
 ## 主题定制
 

src/packages/switch/doc.taro.md

@@ -26,6 +26,14 @@ import { Switch } from '@nutui/nutui-react-taro'
 
 :::
 
+### loading 态受控
+
+:::demo
+
+<CodeBlock src='taro/demo8.tsx'></CodeBlock>
+
+:::
+
 ### 禁用状态
 
 :::demo
@@ -77,8 +85,10 @@ import { Switch } from '@nutui/nutui-react-taro'
 | disabled | 禁用状态 | `boolean` | `false` |
 | activeText | 打开时文字描述 | `ReactNode` | `-` |
 | inactiveText | 关闭时文字描述 | `ReactNode` | `-` |
-| loadingIcon | 受控 loading 态图标 | `ReactNode` | `<Loading1 />` |
-| onChange | 切换开关时触发 | `onChange:(value: boolean, event: Event)` | `-` |
+| loadingIcon | 控制加载状态的图标，传入空值时禁用 loading 态 | `ReactNode` | `<Loading1 />` |
+| loading | loading 态，受控 | `boolean` | `-` |
+| onLoadingChange | 切换 loading 态时触发 | `onLoadingChange:(value: boolean)` | `-` |
+| onChange | 切换开关时触发 | `onChange:(value: boolean)` | `-` |
 
 ## 主题定制
 

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

@@ -26,6 +26,14 @@ import { Switch } from '@nutui/nutui-react'
 
 :::
 
+### loading 態受控
+
+:::demo
+
+<CodeBlock src='h5/demo8.tsx'></CodeBlock>
+
+:::
+
 ### 禁用狀態
 
 :::demo
@@ -77,8 +85,10 @@ import { Switch } from '@nutui/nutui-react'
 | disabled | 禁用狀態 | `boolean` | `false` |
 | activeText | 打開時文字描述 | `ReactNode` | `-` |
 | inactiveText | 關閉時文字描述 | `ReactNode` | `-` |
-| loadingIcon | 受控 loading 態圖標 | `ReactNode` | `<Loading1 />` |
-| onChange | 切換開關時觸發 | `onChange:(value: boolean, event: Event)` | `-` |
+| loadingIcon | 控制加載狀態的圖標，當傳入空值時禁用 loading 狀態 | `ReactNode` | `<Loading1 />` |
+| loading | loading 態，受控 | `boolean` | `-` |
+| onLoadingChange | 切換 loading 態時觸發 | `onLoadingChange:(value: boolean)` | `-` |
+| onChange | 切換開關時觸發 | `onChange:(value: boolean)` | `-` |
 
 ## 主題定製
 

src/packages/switch/switch.taro.tsx

@@ -1,5 +1,4 @@
 import React, { FunctionComponent, useEffect, useState } from 'react'
-
 import { View } from '@tarojs/components'
 import classNames from 'classnames'
 import { Loading1 } from '@nutui/icons-react-taro'
@@ -14,6 +13,8 @@ const defaultProps = {
   activeText: '',
   inactiveText: '',
   loadingIcon: <Loading1 />,
+  loading: undefined,
+  onLoadingChange: (loading: boolean) => {},
 } as TaroSwitchProps
 export const Switch: FunctionComponent<Partial<TaroSwitchProps>> = (props) => {
   const {
@@ -26,6 +27,8 @@ export const Switch: FunctionComponent<Partial<TaroSwitchProps>> = (props) => {
     className,
     style,
     onChange,
+    loading: propLoading,
+    onLoadingChange,
     ...rest
   } = {
     ...defaultProps,
@@ -38,12 +41,21 @@ export const Switch: FunctionComponent<Partial<TaroSwitchProps>> = (props) => {
     defaultValue: defaultChecked,
   })
 
+  const [internalLoading, setInternalLoading] = useState(false)
+  const loading = propLoading !== undefined ? propLoading : internalLoading
+
+  const setLoading = (val: boolean) => {
+    if (propLoading !== undefined) {
+      onLoadingChange(val)
+    } else {
+      setInternalLoading(val)
+    }
+  }
+
   useEffect(() => {
-    changing && setChanging(false)
+    loading && setLoading(false)
   }, [value])
 
-  const [changing, setChanging] = useState(false)
-
   const classes = () => {
     return classNames([
       classPrefix,
@@ -57,13 +69,14 @@ export const Switch: FunctionComponent<Partial<TaroSwitchProps>> = (props) => {
   }
 
   const onClick = async () => {
-    if (disabled || changing) return
+    if (disabled || loading) return
     if (onChange) {
-      setChanging(true)
+      loadingIcon && setLoading(true)
+      onChange(!value)
       try {
         await onChange(!value)
       } catch (e) {
-        setChanging(false)
+        setLoading(false)
       }
     }
     setValue(!value)
@@ -84,7 +97,7 @@ export const Switch: FunctionComponent<Partial<TaroSwitchProps>> = (props) => {
           },
         ])}
       >
-        {changing && loadingIcon ? (
+        {loading && loadingIcon ? (
           <>{loadingIcon}</>
         ) : (
           <>