feat(switch): 异步加载展示loading

Author: irisSong

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

@@ -6,7 +6,7 @@ const Demo2 = () => {
   const [value, setValue] = useState(false)
   const [showToast, setShowToast] = useState(false)
 
-  const onChangeAsync = (value: boolean, event: any) => {
+  const onChangeAsync = (value: boolean) => {
     setValue(value)
     setShowToast(true)
     setTimeout(() => {
@@ -18,7 +18,7 @@ const Demo2 = () => {
       <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/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'
@@ -37,6 +38,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 +56,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 +80,14 @@ export const Switch: FunctionComponent<Partial<TaroSwitchProps>> = (props) => {
           },
         ])}
       >
-        {!value && !activeText && (
-          <View className={`${classPrefix}-close-line`} />
+        {changing ? (
+          <Loading1 />
+        ) : (
+          <>
+            {!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'
@@ -35,6 +36,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 +54,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 +78,14 @@ export const Switch: FunctionComponent<Partial<WebSwitchProps>> = (props) => {
           },
         ])}
       >
-        {!value && !activeText && (
-          <div className={`${classPrefix}-close-line`} />
+        {changing ? (
+          <Loading1 />
+        ) : (
+          <>
+            {!value && !activeText && (
+              <div className={`${classPrefix}-close-line`} />
+            )}
+          </>
         )}
       </div>
       {activeText && (

src/types/spec/switch/base.ts

@@ -1,11 +1,11 @@
 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
+  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 {}