feat(switch): 异步切换支持受控loading态

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

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import { render, fireEvent, waitFor, act } from '@testing-library/react'
 import '@testing-library/jest-dom'
+import { Loading1 } from '@nutui/icons-react'
 import { Switch } from '../switch'
 
 test('activeText && checked && onChange && inactiveText && className && style test', async () => {
@@ -49,8 +50,32 @@ test('activeText && checked && onChange && inactiveText && className && style te
   }
 })
 
-test('disabled test', () => {
-  render(<Switch disabled />)
+test('disabled test', async () => {
+  const { container } = render(<Switch disabled />)
   const el = document.getElementsByClassName('nut-switch-disabled')
   expect(el.length > 0).toBe(true)
+  const buttonEl: Element | null = container.querySelector('.nut-switch-button')
+  if (buttonEl) {
+    await act(() => {
+      fireEvent.click(buttonEl)
+    })
+  }
+})
+
+test('loadingIcon test', async () => {
+  const testFn = vi.fn()
+  const { container } = render(
+    <Switch loadingIcon={<Loading1 />} onChange={testFn} />
+  )
+  const el: Element | null = container.querySelector('.nut-switch-button')
+  if (el) {
+    await act(() => {
+      fireEvent.click(el)
+    })
+    waitFor(() => {
+      // 异步
+      const el = document.getElementsByClassName('.nut-icon')
+      expect(el.length > 0).toBe(true)
+    })
+  }
 })

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

@@ -4,17 +4,24 @@ import { Cell, Switch, Toast } from '@nutui/nutui-react'
 const Demo2 = () => {
   const [checkedAsync, setCheckedAsync] = useState(true)
 
-  const onChangeAsync = (value: boolean, event: any) => {
+  const mockRequest = (): Promise<void> => {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve()
+      }, 2000)
+    })
+  }
+
+  const onChangeAsync = async (value: boolean) => {
     Toast.show(`2秒后异步触发 ${value}`)
-    setTimeout(() => {
-      setCheckedAsync(value)
-    }, 2000)
+    await mockRequest()
+    setCheckedAsync(value)
   }
   return (
     <Cell>
       <Switch
         checked={checkedAsync}
-        onChange={(value, event) => onChangeAsync(value, event)}
+        onChange={(value) => onChangeAsync(value)}
       />
     </Cell>
   )

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

@@ -5,20 +5,26 @@ 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 = (value: boolean, event: any) => {
+  const onChangeAsync = async (value: boolean) => {
     setValue(value)
     setShowToast(true)
-    setTimeout(() => {
-      setCheckedAsync(value)
-    }, 2000)
+    await mockRequest()
+    setCheckedAsync(value)
   }
   return (
     <>
       <Cell>
         <Switch
           checked={checkedAsync}
-          onChange={(value, event) => onChangeAsync(value, event)}
+          onChange={(value) => onChangeAsync(value)}
         />
       </Cell>
       <Toast

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

@@ -4,20 +4,14 @@ import { Cell, Switch, Toast } from '@nutui/nutui-react-taro'
 const Demo6 = () => {
   const [value, setValue] = useState(false)
   const [showToast, setShowToast] = useState(false)
-  const onChange = (
-    value: boolean,
-    event: React.MouseEvent<Element, MouseEvent>
-  ) => {
+  const onChange = (value: boolean) => {
     setValue(value)
     setShowToast(true)
   }
   return (
     <>
       <Cell>
-        <Switch
-          defaultChecked
-          onChange={(value, event) => onChange(value, event)}
-        />
+        <Switch defaultChecked onChange={(value) => onChange(value)} />
       </Cell>
       <Toast
         content={`触发了onChange事件，开关状态：${value}`}

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

@@ -77,6 +77,7 @@ 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)` | `-` |
 
 ## Theming

src/packages/switch/doc.md

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

src/packages/switch/doc.taro.md

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

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

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

src/packages/switch/switch.scss

@@ -40,6 +40,11 @@
         left: calc(100% - $switch-height + $switch-border-width);
       }
     }
+    .nut-icon {
+      width: calc(($switch-height - $switch-border-width * 2) / 2);
+      height: calc(($switch-height - $switch-border-width * 2) / 2);
+      color: $switch-active-disabled-background-color;
+    }
   }
 
   &-close {

src/packages/switch/switch.taro.tsx

@@ -1,7 +1,8 @@
-import React, { FunctionComponent } from 'react'
+import React, { FunctionComponent, useEffect, useState } from 'react'
 
-import { ITouchEvent, View } from '@tarojs/components'
+import { View } from '@tarojs/components'
 import classNames from 'classnames'
+import { Loading1 } from '@nutui/icons-react-taro'
 import { ComponentDefaults } from '@/utils/typings'
 import { usePropsValue } from '@/hooks/use-props-value'
 import { useRtl } from '@/packages/configprovider/index.taro'
@@ -12,6 +13,7 @@ const defaultProps = {
   disabled: false,
   activeText: '',
   inactiveText: '',
+  loadingIcon: <Loading1 />,
 } as TaroSwitchProps
 export const Switch: FunctionComponent<Partial<TaroSwitchProps>> = (props) => {
   const {
@@ -20,6 +22,7 @@ export const Switch: FunctionComponent<Partial<TaroSwitchProps>> = (props) => {
     disabled,
     activeText,
     inactiveText,
+    loadingIcon,
     className,
     style,
     onChange,
@@ -37,6 +40,12 @@ export const Switch: FunctionComponent<Partial<TaroSwitchProps>> = (props) => {
     defaultValue: defaultChecked,
   })
 
+  useEffect(() => {
+    changing && setChanging(false)
+  }, [value])
+
+  const [changing, setChanging] = useState(false)
+
   const classes = () => {
     return classNames([
       classPrefix,
@@ -49,20 +58,16 @@ export const Switch: FunctionComponent<Partial<TaroSwitchProps>> = (props) => {
     ])
   }
 
-  const onClick = (
-    event: React.MouseEvent<Element, MouseEvent> | ITouchEvent
-  ) => {
-    if (disabled) return
-    onChange && onChange(!value, event)
+  const onClick = () => {
+    if (disabled || changing) return
+    if (props.onChange) {
+      setChanging(true)
+      props.onChange(!value)
+    }
     setValue(!value)
   }
   return (
-    <View
-      className={classes()}
-      onClick={(e) => onClick(e)}
-      style={style}
-      {...rest}
-    >
+    <View className={classes()} onClick={onClick} style={style} {...rest}>
       <View
         className={classNames([
           [`${classPrefix}-button`],
@@ -77,8 +82,14 @@ export const Switch: FunctionComponent<Partial<TaroSwitchProps>> = (props) => {
           },
         ])}
       >
-        {!value && !activeText && (
-          <View className={`${classPrefix}-close-line`} />
+        {changing && loadingIcon ? (
+          <>{loadingIcon}</>
+        ) : (
+          <>
+            {!value && !activeText && (
+              <View className={`${classPrefix}-close-line`} />
+            )}
+          </>
         )}
       </View>
       {activeText && (

src/packages/switch/switch.tsx

@@ -1,5 +1,6 @@
-import React, { FunctionComponent } from 'react'
+import React, { FunctionComponent, useEffect, useState } from 'react'
 import classNames from 'classnames'
+import { Loading1 } from '@nutui/icons-react'
 import { ComponentDefaults } from '@/utils/typings'
 import { usePropsValue } from '@/hooks/use-props-value'
 import { useRtl } from '@/packages/configprovider'
@@ -10,6 +11,7 @@ const defaultProps = {
   disabled: false,
   activeText: '',
   inactiveText: '',
+  loadingIcon: <Loading1 />,
 } as WebSwitchProps
 export const Switch: FunctionComponent<Partial<WebSwitchProps>> = (props) => {
   const {
@@ -18,6 +20,7 @@ export const Switch: FunctionComponent<Partial<WebSwitchProps>> = (props) => {
     disabled,
     activeText,
     inactiveText,
+    loadingIcon,
     className,
     style,
     onChange,
@@ -35,6 +38,12 @@ export const Switch: FunctionComponent<Partial<WebSwitchProps>> = (props) => {
     defaultValue: defaultChecked,
   })
 
+  useEffect(() => {
+    changing && setChanging(false)
+  }, [value])
+
+  const [changing, setChanging] = useState(false)
+
   const classes = () => {
     return classNames([
       classPrefix,
@@ -47,18 +56,16 @@ export const Switch: FunctionComponent<Partial<WebSwitchProps>> = (props) => {
     ])
   }
 
-  const onClick = (event: React.MouseEvent<Element, MouseEvent>) => {
-    if (disabled) return
-    onChange && onChange(!value, event)
+  const onClick = () => {
+    if (disabled || changing) return
+    if (props.onChange) {
+      setChanging(true)
+      props.onChange(!value)
+    }
     setValue(!value)
   }
   return (
-    <div
-      className={classes()}
-      onClick={(e) => onClick(e)}
-      style={style}
-      {...rest}
-    >
+    <div className={classes()} onClick={onClick} style={style} {...rest}>
       <div
         className={classNames([
           [`${classPrefix}-button`],
@@ -73,8 +80,14 @@ export const Switch: FunctionComponent<Partial<WebSwitchProps>> = (props) => {
           },
         ])}
       >
-        {!value && !activeText && (
-          <div className={`${classPrefix}-close-line`} />
+        {changing && loadingIcon ? (
+          <>{loadingIcon}</>
+        ) : (
+          <>
+            {!value && !activeText && (
+              <div className={`${classPrefix}-close-line`} />
+            )}
+          </>
         )}
       </div>
       {activeText && (

src/sites/sites-react/doc/docs/react/migrate-from-v2.md

@@ -225,6 +225,7 @@ plugins: [
 
 - `activeText` 属性类型更改为`ReactNode`
 - `inactiveText` 属性类型更改为 `ReactNode`
+- 新增 `loadingIcon` 属性，受控 loading 态图标
 
 [//]: # '#### Toast'
 

src/sites/sites-react/doc/docs/taro/migrate-from-v2.md

@@ -228,6 +228,7 @@ plugins: [
 
 - `activeText` 属性类型更改为`ReactNode`
 - `inactiveText` 属性类型更改为 `ReactNode`
+- 新增 `loadingIcon` 属性，受控 loading 态图标
 
 [//]: # '#### Toast'
 

src/types/spec/switch/base.ts

@@ -1,11 +1,12 @@
 import { ReactNode } from 'react'
 import { BaseProps } from '../../base/props'
 
-export interface BaseSwitch<EVENT = any> extends BaseProps {
+export interface BaseSwitch extends BaseProps {
   checked: boolean
   defaultChecked: boolean
   disabled: boolean
   activeText: ReactNode
   inactiveText: ReactNode
-  onChange: (val: boolean, event: EVENT) => void
+  loadingIcon: ReactNode
+  onChange: (val: boolean) => void
 }

src/types/spec/switch/h5.ts

@@ -1,3 +1,3 @@
 import { BaseSwitch } from '../switch/base'
 
-export interface WebSwitchProps extends BaseSwitch<React.MouseEvent> {}
+export interface WebSwitchProps extends BaseSwitch {}

src/types/spec/switch/taro.ts

@@ -1,5 +1,3 @@
-import { ITouchEvent } from '@tarojs/components'
 import { BaseSwitch } from './base'
 
-type UnionEvent = React.MouseEvent<Element, MouseEvent> | ITouchEvent
-export interface TaroSwitchProps extends BaseSwitch<UnionEvent> {}
+export interface TaroSwitchProps extends BaseSwitch {}