feat: Switch组件的onText和offText支持Schema配置 (#8816)

docs/zh-CN/components/form/switch.md

@@ -86,7 +86,7 @@ order: 51
 
 ## 配置开启和关闭状态的文本
 
-> 1.1.5 版本之后支持
+> `1.1.5` 版本之后支持
 
 ```schema: scope="body"
 {
@@ -102,6 +102,47 @@ order: 51
 }
 ```
 
+### 使用Schema配置文本
+
+> `3.6.0` 版本之后支持
+
+```schema: scope="body"
+{
+    "type": "form",
+    "body": [
+        {
+            "name": "switch",
+            "type": "switch",
+            "onText": [
+                {
+                    "type": "icon",
+                    "icon": "fa fa-plane",
+                    "vendor": "",
+                    "className": "mr-1"
+                },
+                {
+                    "type": "tpl",
+                    "tpl": "飞行模式"
+                }
+            ],
+            "offText": [
+                {
+                    "type": "icon",
+                    "icon": "fa fa-plane",
+                    "vendor": "",
+                    "className": "mr-1"
+                },
+                {
+                    "type": "tpl",
+                    "tpl": "飞行模式"
+                }
+            ]
+        }
+    ]
+}
+```
+
+
 ## 默认值
 
 和其它表单项一样，如果要设置默认值，可以使用 value 属性
@@ -256,10 +297,10 @@ order: 51
 | 属性名     | 类型                        | 默认值  | 说明                 | 版本 |
 | ---------- | --------------------------- | ------- | -------------------- | --- |
 | option     | `string`                    |         | 选项说明             |
-| onText     | `string / IconSchema`       |         | 开启时开关显示的内容 |
-| offText    | `string / IconSchema`       |         | 关闭时开关显示的内容 |
-| trueValue  | `boolean / string / number` | `true`  | 标识真值             |
-| falseValue | `boolean / string / number` | `false` | 标识假值             |
+| onText     | `string \| IconSchema \| SchemaCollection`       |         | 开启时开关显示的内容 | `3.6.0`支持Schema |
+| offText    | `string \| IconSchema \| SchemaCollection`       |         | 关闭时开关显示的内容 | `3.6.0`支持Schema |
+| trueValue  | `boolean \| string \| number` | `true`  | 标识真值             |
+| falseValue | `boolean \| string \| number` | `false` | 标识假值             |
 | size       | `"sm" \| "md"`              | `"md"`  | 开关大小             |
 | loading    | `boolean`                   | `false`  | 是否处于加载状态     | `3.6.0` |
 

packages/amis-editor/src/plugin/Form/Switch.tsx

@@ -84,6 +84,7 @@ export class SwitchControlPlugin extends BasePlugin {
   ];
 
   panelJustify = true;
+
   panelBodyCreator = (context: BaseEventContext) =>
     getSchemaTpl('tabs', [
       {

packages/amis/__tests__/renderers/Form/switch.test.tsx

@@ -110,3 +110,51 @@ test('Renderer:Switch with loading status', async () => {
 
   expect(loadingDom?.length).toEqual(2);
 });
+
+test('Renderer:Switch onText & offText schema', async () => {
+  const {container} = render(
+    amisRender(
+      {
+        type: 'form',
+        body: [
+          {
+            "name": "switch",
+            "type": "switch",
+            "onText": [
+              {
+                "type": "icon",
+                "icon": "fa fa-plane",
+                "vendor": "",
+                "className": "mr-1"
+              },
+              {
+                "type": "tpl",
+                "tpl": "飞行模式"
+              }
+            ],
+            "offText": [
+              {
+                "type": "icon",
+                "icon": "fa fa-plane",
+                "vendor": "",
+                "className": "mr-1"
+              },
+              {
+                "type": "tpl",
+                "tpl": "飞行模式"
+              }
+            ]
+          }
+        ],
+        actions: []
+      },
+      {},
+      makeEnv()
+    )
+  );
+
+  const text = container.querySelector('.cxd-Switch > span.text')!;
+
+  /** offText的Schema包含了2个元素 */
+  expect(text?.childNodes?.length).toEqual(2);
+});

packages/amis/src/renderers/Form/Switch.tsx

@@ -8,7 +8,7 @@ import {
 import {Icon, Switch} from 'amis-ui';
 import {autobind, isObject} from 'amis-core';
 import {IconSchema} from '../Icon';
-import {FormBaseControlSchema} from '../../Schema';
+import {FormBaseControlSchema, SchemaCollection} from '../../Schema';
 import {supportStatic} from './StaticHoc';
 
 import type {SpinnerExtraProps} from 'amis-ui';
@@ -42,12 +42,12 @@ export interface SwitchControlSchema extends FormBaseControlSchema {
   /**
    * 开启时显示的内容
    */
-  onText?: string | IconSchema;
+  onText?: string | IconSchema | SchemaCollection;
 
   /**
    * 关闭时显示的内容
    */
-  offText?: string | IconSchema;
+  offText?: string | IconSchema | SchemaCollection;
 
   /** 开关尺寸 */
   size?: 'sm' | 'md';
@@ -88,18 +88,25 @@ export default class SwitchControl extends React.Component<SwitchProps, any> {
   }
 
   getResult() {
-    const {classnames: cx, onText, offText} = this.props;
-    const on = isObject(onText) ? (
-      <Icon cx={cx} icon={onText.icon} className="Switch-icon" />
-    ) : (
-      onText
-    );
-    const off = isObject(offText) ? (
-      <Icon cx={cx} icon={offText.icon} className="Switch-icon" />
-    ) : (
-      offText
-    );
-    return {on, off};
+    const {classnames: cx, render, onText, offText} = this.props;
+    let onComp = onText;
+    let offComp = offText;
+
+    /** 兼容单独使用Icon的场景 */
+    if (isObject(onText) && onText.icon && !onText.type) {
+      onComp = <Icon cx={cx} icon={onText.icon} className="Switch-icon" />;
+    } else if (onText != null && typeof onText !== 'string') {
+      /** 兼容原来的DOM接口，string类型直接渲染 */
+      onComp = render('switch-on-text', onText);
+    }
+
+    if (isObject(offText) && offText.icon && !offText.type) {
+      offComp = <Icon cx={cx} icon={offText.icon} className="Switch-icon" />;
+    } else if (offText != null && typeof offText !== 'string') {
+      offComp = render('switch-off-text', offText);
+    }
+
+    return {on: onComp, off: offComp};
   }
 
   renderBody(children: any) {