fix(switch): 异步操作中抛错可中断 loading 态 (#3143)

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

* fix: modify cr

* fix: remove console

* feat: 增加demo使用描述

* feat: update test

* fix: 还原doc

* fix: 还原doc

* fix: update descr

Author: irisSong

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

@@ -63,9 +63,13 @@ test('disabled test', async () => {
 })
 
 test('loadingIcon test', async () => {
-  const testFn = vi.fn()
   const { container } = render(
-    <Switch loadingIcon={<Loading1 />} onChange={testFn} />
+    <Switch
+      loadingIcon={<Loading1 />}
+      onChange={() => {
+        throw new Error('Function not implemented.')
+      }}
+    />
   )
   const el: Element | null = container.querySelector('.nut-switch-button')
   if (el) {

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

@@ -4,18 +4,19 @@ import { Cell, Switch, Toast } from '@nutui/nutui-react'
 const Demo2 = () => {
   const [checkedAsync, setCheckedAsync] = useState(true)
 
-  const mockRequest = (): Promise<void> => {
-    return new Promise((resolve) => {
+  const onChangeAsync = async (value: boolean) => {
+    Toast.show(`2秒后异步触发 ${value}`)
+    const res = await new Promise((resolve) => {
       setTimeout(() => {
-        resolve()
+        resolve(true)
       }, 2000)
     })
-  }
-
-  const onChangeAsync = async (value: boolean) => {
-    Toast.show(`2秒后异步触发 ${value}`)
-    await mockRequest()
-    setCheckedAsync(value)
+    if (!res) {
+      // 主动抛出一个错误对象，用于中断组件 loading 态
+      throw new Error()
+    } else {
+      setCheckedAsync(value)
+    }
   }
   return (
     <Cell>

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

@@ -5,19 +5,21 @@ const Demo2 = () => {
   const [checkedAsync, setCheckedAsync] = useState(true)
   const [value, setValue] = useState(false)
   const [showToast, setShowToast] = 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)
+    const res = await new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(true)
+      }, 2000)
+    })
+    if (!res) {
+      // 主动抛出一个错误对象，用于中断组件 loading 态
+      throw new Error()
+    } else {
+      setCheckedAsync(value)
+    }
   }
   return (
     <>

src/packages/switch/switch.taro.tsx

@@ -32,9 +32,7 @@ export const Switch: FunctionComponent<Partial<TaroSwitchProps>> = (props) => {
     ...props,
   }
   const classPrefix = 'nut-switch'
-
   const rtl = useRtl()
-
   const [value, setValue] = usePropsValue<boolean>({
     value: checked,
     defaultValue: defaultChecked,
@@ -58,11 +56,15 @@ export const Switch: FunctionComponent<Partial<TaroSwitchProps>> = (props) => {
     ])
   }
 
-  const onClick = () => {
+  const onClick = async () => {
     if (disabled || changing) return
     if (onChange) {
       setChanging(true)
-      onChange(!value)
+      try {
+        await onChange(!value)
+      } catch (e) {
+        setChanging(false)
+      }
     }
     setValue(!value)
   }

src/packages/switch/switch.tsx

@@ -56,11 +56,15 @@ export const Switch: FunctionComponent<Partial<WebSwitchProps>> = (props) => {
     ])
   }
 
-  const onClick = () => {
+  const onClick = async () => {
     if (disabled || changing) return
     if (onChange) {
       setChanging(true)
-      onChange(!value)
+      try {
+        await onChange(!value)
+      } catch (e) {
+        setChanging(false)
+      }
     }
     setValue(!value)
   }