1. 修复 BoolSetter 不响应 value 的bug；

2. setter 支持配置 extraProps；
3. button 支持 icon 配置；

packages/demo/public/assets.json

@@ -1440,6 +1440,11 @@
           "title": "内容",
           "propType": "string"
         },
+        {
+          "name": "icon",
+          "propType": "string",
+          "description": "自定义内联样式"
+        },
         {
           "name": "type",
           "title": "类型",
@@ -1489,13 +1494,14 @@
         },
         {
           "name": "loading",
-          "title": "是否 loading",
+          "title": "loading",
           "propType": "bool",
           "description": "设置按钮的载入状态",
           "defaultValue": false
         },
         {
           "name": "ghost",
+          "title": "ghost",
           "propType": {
             "type": "oneOf",
             "value": [
@@ -1510,18 +1516,21 @@
         },
         {
           "name": "text",
+          "title": "text",
           "propType": "bool",
           "description": "是否为文本按钮",
           "defaultValue": false
         },
         {
           "name": "warning",
+          "title": "warning",
           "propType": "bool",
           "description": "是否为警告按钮",
           "defaultValue": false
         },
         {
           "name": "disabled",
+          "title": "disabled",
           "propType": "bool",
           "description": "是否禁用",
           "defaultValue": false
@@ -1550,34 +1559,26 @@
         "props": {
           "isExtends": true,
           "override": [
+            {
+              "name": "icon",
+              "setter": "StringSetter",
+              "extraProps": {
+                "defaultValue": "success",
+                "onChange": {
+                  "type": "JSFunction",
+                  "value": "(val, field, editor) => {\n  field.nodes[0].children.import({\"componentName\": \"Icon\", \"props\": {\"type\": val, \"style\": {\"marginRight\": 5}}}, true); //field.top.setPropValue('children', [{\"componentName\": \"Icon\", \"props\": {\"type\": val}}, (field.top.getPropValue('children') || []).slice(-1)]);\n}"
+                }
+              }
+            },
             {
               "name": "children",
               "setter": {
-                "componentName": "ArraySetter",
+                "componentName": "MixedSetter",
                 "props": {
-                  "itemSetter": {
-                    "componentName": "MixedSetter",
-                    "props": {
-                      "setters": [
-                        {
-                          "componentName": "SlotSetter",
-                          "initialValue": {
-                            "type": "JSSlot",
-                            "value": [
-                              {
-                                "componentName": "Icon",
-                                "props": {
-                                  "type": "smile"
-                                }
-                              }
-                            ]
-                          }
-                        },
-                        "StringSetter",
-                        "ExpressionSetter"
-                      ]
-                    }
-                  }
+                  "setters": [
+                    "StringSetter",
+                    "ExpressionSetter"
+                  ]
                 }
               }
             }
@@ -11807,7 +11808,7 @@
     },
     {
       "componentName": "Typography.Text",
-      "title": "Typography.Text",
+      "title": "Text",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -11820,9 +11821,8 @@
       },
       "props": [
         {
-          "name": "prefix",
-          "propType": "string",
-          "defaultValue": "next-"
+          "name": "children",
+          "propType": "string"
         },
         {
           "name": "delete",
@@ -11857,29 +11857,32 @@
         {
           "name": "component",
           "propType": {
-            "type": "instanceOf",
-            "value": "elementType"
+            "type": "oneOf",
+            "value": [
+              "span",
+              "H1",
+              "H2",
+              "H3",
+              "H4"
+            ]
           },
           "description": "设置标签类型",
           "defaultValue": "span"
         },
-        {
-          "name": "children",
-          "propType": "string"
-        },
-        {
-          "name": "rtl",
-          "propType": "bool",
-          "defaultValue": false
-        },
         {
           "name": "style",
           "propType": "object"
         }
       ],
       "configure": {
-        "component": {
-          "isContainer": true
+        "props": {
+          "isExtends": true,
+          "override": [
+            {
+              "name": "children",
+              "setter": "TextAreaSetter"
+            }
+          ]
         }
       }
     },
@@ -13735,16 +13738,16 @@
         },
         {
           "componentName": "Typography",
-          "title": "排版",
+          "title": "Text",
           "icon": "",
           "package": "@alife/next",
           "library": "Next",
           "snippets": [
             {
-              "title": "排版",
+              "title": "Text",
               "screenshot": "",
               "schema": {
-                "componentName": "Typography",
+                "componentName": "Typography.Text",
                 "props": {
                   "component": "span",
                   "children": "基于 Ali-Lowcode-Engine 快速打造高生产力的低代码研发平台"

packages/editor-setters/src/index.tsx

@@ -9,12 +9,22 @@ import StyleSetter from './style-setter';
 import React, { Component } from 'react';
 export const StringSetter = {
   component: Input,
-  defaultProps: { placeholder: '请输入' },
+  defaultProps: { placeholder: '请输入', style: { maxWidth: 180 } },
   title: 'StringSetter',
   recommend: true,
 };
 export const NumberSetter = NumberPicker;
-export const BoolSetter = Switch;
+export class BoolSetter extends Component {
+
+  render() {
+    const { onChange, value, defaultValue } = this.props;
+    return <Switch checked={value || defaultValue} onChange={
+      val => {
+        onChange(val)
+      }
+    }/>;
+  }
+}
 export const SelectSetter = Select;
 
 // suggest: 做成 SelectSetter 一种变体
@@ -25,7 +35,12 @@ export const RadioGroupSetter = {
   },
 };
 // suggest: 做成 StringSetter 的一个参数，
-export const TextAreaSetter = Input.TextArea;
+export const TextAreaSetter = {
+  component: Input.TextArea,
+  defaultProps: { placeholder: '请输入', style: { maxWidth: 180 } },
+  title: 'TextAreaSetter',
+  recommend: true,
+};
 export const DateSetter = DatePicker;
 export const DateYearSetter = DatePicker.YearPicker;
 export const DateMonthSetter = DatePicker.MonthPicker;
@@ -36,7 +51,6 @@ export { ExpressionSetter, EventsSetter };
 class StringDateSetter extends Component {
 
   render() {
-    debugger
     const { onChange, editor } = this.props;
     return <DatePicker onChange={
       val => {
@@ -48,7 +62,6 @@ class StringDateSetter extends Component {
 class StringTimePicker extends Component {
 
   render() {
-    debugger
     const { onChange, editor } = this.props;
     return <TimePicker onChange={
       val => {

packages/editor-skeleton/src/components/settings/settings-pane.tsx

@@ -8,7 +8,10 @@ import { SettingField, isSettingField, SettingTopEntry, SettingEntry } from '@al
 import { isSetterConfig, CustomView } from '@ali/lowcode-types';
 import { intl } from '../../locale';
 import { Skeleton } from 'editor-skeleton/src/skeleton';
-
+function transformStringToFunction(str) {
+  if (typeof str !== 'string') return str;
+  return new Function(`"use strict"; return ${str}`)();
+}
 @observer
 class SettingFieldView extends Component<{ field: SettingField }> {
   render() {
@@ -60,7 +63,10 @@ class SettingFieldView extends Component<{ field: SettingField }> {
     }
 
     // todo: error handling
-
+    let _onChange = extraProps?.onChange?.value;
+    if (extraProps && extraProps.onChange && extraProps.onChange.type === 'JSFunction') {
+      _onChange = transformStringToFunction(extraProps.onChange.value);
+    }
     return createField(
       {
         meta: field?.componentMeta?.npm || field?.componentMeta?.componentName || '',
@@ -85,6 +91,7 @@ class SettingFieldView extends Component<{ field: SettingField }> {
             value,
           });
           field.setValue(value);
+          if(_onChange) _onChange(value, field);
         },
         onInitial: () => {
           if (initialValue == null) {

packages/react-renderer/src/renderer/base.jsx

@@ -199,14 +199,13 @@ export default class BaseRender extends PureComponent {
     if (!schema || !schema.props) {
       return schema?.children;
     }
-    let _children = schema.children;
-    if (!_children) return schema.props.children;
-    if (schema.props.children && schema.props.children.length) {
-      if (Array.isArray(schema.props.children)) {
-        _children = Array.isArray(_children) ? _children.concat(schema.props.children) : schema.props.children.unshift(_children);
-      } else {
-        Array.isArray(_children) && _children.push(schema.props.children) || (_children = [_children] && _children.push(schema.props.children));
-      }
+    if (!schema.children) return schema.props.children;
+    if (!schema.props.children) return schema.children;
+    var _children = [].concat(schema.children);
+    if (Array.isArray(schema.props.children)) {
+      _children = _children.concat(schema.props.children);
+    } else {
+      _children.push(schema.props.children);
     }
     return _children;
   };
@@ -233,6 +232,7 @@ export default class BaseRender extends PureComponent {
       if (!schema) return null;
       const { __appHelper: appHelper, __components: components = {} } =
         this.props || {};
+
       if (isJSExpression(schema)) {
         return parseExpression(schema, self);
       }
@@ -249,7 +249,6 @@ export default class BaseRender extends PureComponent {
           this.__createVirtualDom(item, self, parentInfo, item && item.__ctx && item.__ctx.lunaKey ? '' : idx),
         );
       }
-
       // FIXME
       const _children = this.getSchemaChildren(schema);
       //解析占位组件