feat(switch): v14&代码重构 (#2779)

* fix: 适配v14&代码重构

* fix: 支持rtl

* fix: 修改居中实现方式

* fix: 修改动画

* fix: 适配v14

* feat: add marking

* fix: 修改cr

* fix: 修整繁体字翻译错误+添加cursor

* fix: modify css var

* fix: 修改toast来源+升级文档更新

Author: irisSong

migrate-from-v2.md

@@ -616,6 +616,8 @@ plugins: [
 - 移除 `isAsync`，通过 `checked`实现
 - 移除 `activeColor` ，通过css变量`--nutui-switch-open-background-color`实现
 - 移除 `inactiveColor`，通过css变量`--nutui-switch-close-background-color`实现
+- `activeText 属性类型更改为 `ReactNode`
+- `inactiveText` 属性类型更改为 `ReactNode`
 
 #### Toast
 

src/config.json

@@ -687,6 +687,7 @@
           "sort": 11,
           "show": true,
           "taro": true,
+          "v14": true,
           "author": "dsj"
         },
         {

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

@@ -9,7 +9,10 @@ test('activeText && checked && onChange && inactiveText && className && style te
     inactiveText: '关',
     checked: false,
     className: 'switch-test',
-    style: { fontSize: '12px', '--nutui-switch-open-background-color': 'blue' },
+    style: {
+      fontSize: '12px',
+      '--nutui-switch-active-background-color': 'blue',
+    },
   }
   const { activeText, inactiveText, className, style } = state
   const testFn = vi.fn()
@@ -28,11 +31,11 @@ test('activeText && checked && onChange && inactiveText && className && style te
   if (el) {
     expect(el).toHaveAttribute(
       'class',
-      `nut-switch nut-switch-close  nut-switch-base switch-test`
+      `nut-switch nut-switch-inactive  nut-switch-base switch-test`
     )
     expect(el).toHaveAttribute(
       'style',
-      `font-size: 12px; --nutui-switch-open-background-color: blue;`
+      `font-size: 12px; --nutui-switch-active-background-color: blue;`
     )
     expect(el).toHaveTextContent(inactiveText)
     await act(() => {

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-active-background-color': 'blue',
+          '--nutui-switch-inactive-line-background-color': '#ebebeb',
+        }}
+      />
+    </Cell>
+  )
+}
+export default Demo7