feat(switch): v14&代码重构

src/packages/switch/demo.taro.tsx

@@ -1,14 +1,15 @@
 import React from 'react'
 import { ScrollView, View } from '@tarojs/components'
 import Taro from '@tarojs/taro'
-import { useTranslate } from '@/sites/assets/locale//taro'
+import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
 import Demo1 from './demos/taro/demo1'
 import Demo2 from './demos/taro/demo2'
 import Demo3 from './demos/taro/demo3'
 import Demo4 from './demos/taro/demo4'
 import Demo5 from './demos/taro/demo5'
 import Demo6 from './demos/taro/demo6'
+import Demo7 from './demos/taro/demo7'
 
 const SwitchDemo = () => {
   const [translated] = useTranslate({
@@ -18,6 +19,7 @@ const SwitchDemo = () => {
       asyncControl: '受控',
       customColor: '自定义颜色',
       supportText: '支持文字',
+      supportIcon: '支持Icon',
       eventTip: '触发了 onChange 事件，开关状态：',
     },
     'zh-TW': {
@@ -26,6 +28,7 @@ const SwitchDemo = () => {
       asyncControl: '受控',
       customColor: '自定義顏色',
       supportText: '支持文字',
+      supportIcon: '支持Icon',
       eventTip: '觸發了 onChange 事件，開關狀態：',
     },
     'en-US': {
@@ -34,6 +37,7 @@ const SwitchDemo = () => {
       asyncControl: 'controlled',
       customColor: 'Custom Color',
       supportText: 'Support Text',
+      supportIcon: 'Support Icon',
       eventTip: 'Emit onChange event, current state:',
     },
   })
@@ -47,12 +51,14 @@ const SwitchDemo = () => {
         <Demo2 />
         <View className="h2">{translated.disabled}</View>
         <Demo3 />
-        <View className="h2">{translated.eventTip}</View>
+        <View className="h2">{translated.supportText}</View>
         <Demo4 />
-        <View className="h2">{translated.customColor}</View>
+        <View className="h2">{translated.supportIcon}</View>
         <Demo5 />
-        <View className="h2">{translated.supportText}</View>
+        <View className="h2">{translated.eventTip}</View>
         <Demo6 />
+        <View className="h2">{translated.customColor}</View>
+        <Demo7 />
       </ScrollView>
     </>
   )

src/packages/switch/demo.tsx

@@ -6,6 +6,7 @@ import Demo3 from './demos/h5/demo3'
 import Demo4 from './demos/h5/demo4'
 import Demo5 from './demos/h5/demo5'
 import Demo6 from './demos/h5/demo6'
+import Demo7 from './demos/h5/demo7'
 
 const SwitchDemo = () => {
   const [translated] = useTranslate({
@@ -15,6 +16,7 @@ const SwitchDemo = () => {
       asyncControl: '受控',
       customColor: '自定义颜色',
       supportText: '支持文字',
+      supportIcon: '支持Icon',
       eventTip: '触发了 onChange 事件，开关状态：',
     },
     'zh-TW': {
@@ -23,6 +25,7 @@ const SwitchDemo = () => {
       asyncControl: '受控',
       customColor: '自定義顏色',
       supportText: '支持文字',
+      supportIcon: '支持Icon',
       eventTip: '觸發了 onChange 事件，開關狀態：',
     },
     'en-US': {
@@ -31,6 +34,7 @@ const SwitchDemo = () => {
       asyncControl: 'controlled',
       customColor: 'Custom Color',
       supportText: 'Support Text',
+      supportIcon: 'Support Icon',
       eventTip: 'Emit onChange event, current state:',
     },
   })
@@ -43,12 +47,14 @@ const SwitchDemo = () => {
         <Demo2 />
         <h2>{translated.disabled}</h2>
         <Demo3 />
-        <h2>{translated.eventTip}</h2>
+        <h2>{translated.supportText}</h2>
         <Demo4 />
-        <h2>{translated.customColor}</h2>
+        <h2>{translated.supportIcon}</h2>
         <Demo5 />
-        <h2>{translated.supportText}</h2>
+        <h2>{translated.eventTip}</h2>
         <Demo6 />
+        <h2>{translated.customColor}</h2>
+        <Demo7 />
       </div>
     </>
   )

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

@@ -1,10 +1,13 @@
 import React from 'react'
-import { Cell, Switch } from '@nutui/nutui-react'
+import { Cell, Switch, Space } from '@nutui/nutui-react'
 
 const Demo3 = () => {
   return (
     <Cell>
-      <Switch defaultChecked disabled />
+      <Space>
+        <Switch defaultChecked disabled />
+        <Switch disabled />
+      </Space>
     </Cell>
   )
 }

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

@@ -1,16 +1,15 @@
 import React from 'react'
-import { Cell, Switch, Toast } from '@nutui/nutui-react'
+import { Cell, Switch, Space } from '@nutui/nutui-react'
 
 const Demo4 = () => {
-  const onChange = (value: boolean, event: any) => {
-    Toast.show(`触发了onChange事件，开关状态：${value}`)
-  }
   return (
     <Cell>
-      <Switch
-        defaultChecked
-        onChange={(value, event) => onChange(value, event)}
-      />
+      <Space>
+        <Switch defaultChecked activeText="开启" inactiveText="关闭" />
+        <Switch defaultChecked activeText="开" inactiveText="关" />
+        <Switch defaultChecked activeText="开启" inactiveText="关闭" disabled />
+        <Switch activeText="开启" inactiveText="关闭" disabled />
+      </Space>
     </Cell>
   )
 }

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

@@ -1,16 +1,24 @@
 import React from 'react'
-import { Cell, Switch } from '@nutui/nutui-react'
+import { Cell, Space, Switch } from '@nutui/nutui-react'
+import { Check, Close } from '@nutui/icons-react'
 
 const Demo5 = () => {
   return (
     <Cell>
-      <Switch
-        defaultChecked
-        style={{
-          '--nutui-switch-open-background-color': 'blue',
-          '--nutui-switch-close-line-background-color': '#ebebeb',
-        }}
-      />
+      <Space>
+        <Switch
+          defaultChecked
+          activeText={<Check />}
+          inactiveText={<Close />}
+        />
+        <Switch
+          defaultChecked
+          activeText={<Check />}
+          inactiveText={<Close />}
+          disabled
+        />
+        <Switch activeText={<Check />} inactiveText={<Close />} disabled />
+      </Space>
     </Cell>
   )
 }

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

@@ -1,10 +1,16 @@
 import React from 'react'
-import { Cell, Switch } from '@nutui/nutui-react'
+import { Cell, Switch, Toast } from '@nutui/nutui-react'
 
 const Demo6 = () => {
+  const onChange = (value: boolean, event: any) => {
+    Toast.show(`触发了onChange事件，开关状态：${value}`)
+  }
   return (
     <Cell>
-      <Switch defaultChecked activeText="开" inactiveText="关" />
+      <Switch
+        defaultChecked
+        onChange={(value, event) => onChange(value, event)}
+      />
     </Cell>
   )
 }

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

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Cell, Switch } from '@nutui/nutui-react'
+
+const Demo7 = () => {
+  return (
+    <Cell>
+      <Switch
+        defaultChecked
+        style={{
+          '--nutui-switch-open-background-color': 'blue',
+          '--nutui-switch-close-line-background-color': '#ebebeb',
+        }}
+      />
+    </Cell>
+  )
+}
+export default Demo7

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

@@ -1,10 +1,13 @@
 import React from 'react'
-import { Cell, Switch } from '@nutui/nutui-react-taro'
+import { Cell, Switch, Space } from '@nutui/nutui-react-taro'
 
 const Demo3 = () => {
   return (
     <Cell>
-      <Switch defaultChecked disabled />
+      <Space>
+        <Switch defaultChecked disabled />
+        <Switch disabled />
+      </Space>
     </Cell>
   )
 }

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

@@ -1,20 +1,15 @@
 import React from 'react'
-import { Cell, Switch } from '@nutui/nutui-react-taro'
-import Taro from '@tarojs/taro'
+import { Cell, Switch, Space } from '@nutui/nutui-react-taro'
 
 const Demo4 = () => {
-  const onChange = (
-    value: boolean,
-    event: React.MouseEvent<Element, MouseEvent>
-  ) => {
-    Taro.showToast({ title: `触发了onChange事件，开关状态：${value}` })
-  }
   return (
     <Cell>
-      <Switch
-        defaultChecked
-        onChange={(value, event) => onChange(value, event)}
-      />
+      <Space>
+        <Switch defaultChecked activeText="开启" inactiveText="关闭" />
+        <Switch defaultChecked activeText="开" inactiveText="关" />
+        <Switch defaultChecked activeText="开启" inactiveText="关闭" disabled />
+        <Switch activeText="开启" inactiveText="关闭" disabled />
+      </Space>
     </Cell>
   )
 }

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

@@ -1,16 +1,24 @@
 import React from 'react'
-import { Cell, Switch } from '@nutui/nutui-react-taro'
+import { Cell, Space, Switch } from '@nutui/nutui-react-taro'
+import { Check, Close } from '@nutui/icons-react-taro'
 
 const Demo5 = () => {
   return (
     <Cell>
-      <Switch
-        defaultChecked
-        style={{
-          '--nutui-switch-open-background-color': 'blue',
-          '--nutui-switch-close-line-background-color': '#ebebeb',
-        }}
-      />
+      <Space>
+        <Switch
+          defaultChecked
+          activeText={<Check />}
+          inactiveText={<Close />}
+        />
+        <Switch
+          defaultChecked
+          activeText={<Check />}
+          inactiveText={<Close />}
+          disabled
+        />
+        <Switch activeText={<Check />} inactiveText={<Close />} disabled />
+      </Space>
     </Cell>
   )
 }

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

@@ -1,10 +1,20 @@
 import React from 'react'
 import { Cell, Switch } from '@nutui/nutui-react-taro'
+import Taro from '@tarojs/taro'
 
 const Demo6 = () => {
+  const onChange = (
+    value: boolean,
+    event: React.MouseEvent<Element, MouseEvent>
+  ) => {
+    Taro.showToast({ title: `触发了onChange事件，开关状态：${value}` })
+  }
   return (
     <Cell>
-      <Switch defaultChecked activeText="开" inactiveText="关" />
+      <Switch
+        defaultChecked
+        onChange={(value, event) => onChange(value, event)}
+      />
     </Cell>
   )
 }

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

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Cell, Switch } from '@nutui/nutui-react-taro'
+
+const Demo7 = () => {
+  return (
+    <Cell>
+      <Switch
+        defaultChecked
+        style={{
+          '--nutui-switch-open-background-color': 'blue',
+          '--nutui-switch-close-line-background-color': '#ebebeb',
+        }}
+      />
+    </Cell>
+  )
+}
+export default Demo7