1. 解决 MixedSetter currentSetter 不正确的问题；

2. DateSetter 和 TimeSetter onChange 返回字符串类型的值；
3. 解决 Children 里 Slot 无法渲染的问题；

packages/demo/public/assets.json

@@ -264,7 +264,17 @@
         "component": {
           "isContainer": true,
           "isModel": true
-        }
+        },
+        "props": [
+          {
+            "name": "prefix",
+            "title": {
+              "type": "i18n",
+              "zh_CN": "前缀",
+              "en_US": "prefix"
+            }
+          }
+        ]
     }
     },
     {
@@ -635,7 +645,24 @@
           "name": "cell",
           "propType": "func"
         }
-      ]
+      ],
+      "configure": {
+        "props": {
+          "isExtends": true,
+          "override": [{
+            "name": "cell",
+            "setter": {
+              "componentName": "SlotSetter",
+              "props": {
+                "supportParams": true
+              }
+            },
+            "extraProps": {
+              "display": "block"
+            }
+          }]
+        }
+      }
     },
     {
       "componentName": "Badge",
@@ -1411,7 +1438,7 @@
         {
           "name": "children",
           "title": "内容",
-          "propType": "array"
+          "propType": "string"
         },
         {
           "name": "type",
@@ -1520,8 +1547,41 @@
         }
       ],
       "configure": {
-        "component": {
+        "props": {
-          "isContainer": true
+          "isExtends": true,
+          "override": [
+            {
+              "name": "children",
+              "setter": {
+                "componentName": "ArraySetter",
+                "props": {
+                  "itemSetter": {
+                    "componentName": "MixedSetter",
+                    "props": {
+                      "setters": [
+                        {
+                          "componentName": "SlotSetter",
+                          "initialValue": {
+                            "type": "JSSlot",
+                            "value": [
+                              {
+                                "componentName": "Icon",
+                                "props": {
+                                  "type": "smile"
+                                }
+                              }
+                            ]
+                          }
+                        },
+                        "StringSetter",
+                        "ExpressionSetter"
+                      ]
+                    }
+                  }
+                }
+              }
+            }
+          ]
         }
       }
     },
@@ -1827,7 +1887,30 @@
           "name": "style",
           "propType": "object"
         }
-      ]
+      ],
+      "configure": {
+      "props": {
+        "isExtends": true,
+        "override": [
+          {
+            "name": "startValue",
+            "setter": "DateSetter"
+          },
+          {
+            "name": "defaultStartValue",
+            "setter": "DateSetter"
+          },
+          {
+            "name": "defaultEndValue",
+            "setter": "DateSetter"
+          },
+          {
+            "name": "endValue",
+            "setter": "DateSetter"
+          }
+        ]
+      }
+    }
     },
     {
       "componentName": "Card",
@@ -3363,7 +3446,18 @@
           "name": "style",
           "propType": "object"
         }
-      ]
+      ],
+      "configure": {
+        "props": {
+          "isExtends": true,
+          "override": [
+            {
+              "name": "value",
+              "setter": "DateSetter"
+            }
+          ]
+        }
+      }
     },
     {
       "componentName": "RangePicker",
@@ -5616,13 +5710,6 @@
           "propType": "string",
           "description": "指定显示哪种图标"
         },
-        {
-          "name": "children",
-          "propType": {
-            "type": "instanceOf",
-            "value": "node"
-          }
-        },
         {
           "name": "size",
           "propType": {
@@ -5655,10 +5742,6 @@
         {
           "name": "style",
           "propType": "object"
-        },
-        {
-          "name": "prefix",
-          "defaultValue": "next-"
         }
       ]
     },
@@ -8908,7 +8991,7 @@
         {
           "name": "itemRender",
           "propType": "func",
-          "description": "渲染 MenuItem 内容的方法\n@param {Object} item 渲染节点的item\n@param {String} searchValue 搜索关键字（如果开启搜索）\n@return {ReactNode} item node"
+          "description": "渲染 Menu.Item 内容的方法\n@param {Object} item 渲染节点的item\n@param {String} searchValue 搜索关键字（如果开启搜索）\n@return {ReactNode} item node"
         },
         {
           "name": "notFoundContent",
@@ -10468,10 +10551,7 @@
         },
         {
           "name": "label",
-          "propType": {
+          "propType": "string",
-            "type": "instanceOf",
-            "value": "node"
-          },
           "description": "按钮的文案"
         },
         {
@@ -10678,7 +10758,22 @@
           "name": "style",
           "propType": "object"
         }
-      ]
+      ],
+      "configure": {
+        "props": {
+          "isExtends": true,
+          "override": [
+            {
+              "name": "defaultValue",
+              "setter": "TimePicker"
+            },
+            {
+              "name": "value",
+              "setter": "TimePicker"
+            }
+          ]
+        }
+      }
     },
     {
       "componentName": "Timeline",
@@ -12710,7 +12805,7 @@
               "schema": {
                 "componentName": "Dropdown",
                 "props": {  "trigger": [{    "componentName": "Button",    "props": {      "type": "primary"    },    "children": "确定"  }],  "triggerType": "click"},
-                "children": [{  "componentName": "Menu",  "props": {    "style": {      "width": 200    }  },  "children": [{    "componentName": "MenuItem",    "props": {},    "children": "Option 1"  }, {    "componentName": "MenuItem",    "props": {      "disabled": false    },    "children": "option 2"  }, {    "componentName": "MenuItem",    "props": {      "disabled": false    },    "children": "option 3"  }]}]
+                "children": [{  "componentName": "Menu",  "props": {    "style": {      "width": 200    }  },  "children": [{    "componentName": "Menu.Item",    "props": {},    "children": "Option 1"  }, {    "componentName": "Menu.Item",    "props": {      "disabled": false    },    "children": "option 2"  }, {    "componentName": "Menu.Item",    "props": {      "disabled": false    },    "children": "option 3"  }]}]
               }
             }
           ]
@@ -12823,8 +12918,17 @@
                       "dataIndex": "id",
                       "cell": {
                         "type": "JSSlot",
-                        "value": "123",
+                        "params": ["value", "index", "record"],
-                        "params": []
+                        "value": [{
+                          "componentName": "Button",
+                          "props": {
+                            "type": "primary",
+                            "children": [{
+                              "type": "JSExpression",
+                              "value": "this.value"
+                            }]
+                          }
+                        }]
                       }
                     }
                   },
@@ -13326,6 +13430,7 @@
               "schema": {
                 "componentName": "Balloon",
                 "props": {
+                  "visible": true,
                   "prefix": "next-",
                   "size": "medium",
                   "type": "normal",

packages/designer/src/builtin-simulator/host.ts

@@ -755,7 +755,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
 
     // fix target : 浏览器事件响应目标
     if (!e.target || notMyEvent) {
-      e.target = this.contentDocument!.elementFromPoint(e.canvasX!, e.canvasY!);
+      e.target = this.contentDocument?.elementFromPoint(e.canvasX!, e.canvasY!);
     }
 
     // documentModel : 目标文档

packages/editor-setters/src/index.tsx

@@ -1,11 +1,12 @@
 import { registerSetter } from '@ali/lowcode-editor-core';
-import { DatePicker, Input, Radio, Select, Switch, NumberPicker } from '@alifd/next';
+import { isJSExpression } from '@ali/lowcode-types';
+import { DatePicker, TimePicker, Input, Radio, Select, Switch, NumberPicker } from '@alifd/next';
 import ExpressionSetter from './expression-setter';
 import ColorSetter from './color-setter';
 import JsonSetter from './json-setter';
 import EventsSetter from './events-setter';
 import StyleSetter from './style-setter';
-
+import React, { Component } from 'react';
 export const StringSetter = {
   component: Input,
   defaultProps: { placeholder: '请输入' },
@@ -32,6 +33,31 @@ export const DateRangeSetter = DatePicker.RangePicker;
 
 export { ExpressionSetter, EventsSetter };
 
+class StringDateSetter extends Component {
+
+  render() {
+    debugger
+    const { onChange, editor } = this.props;
+    return <DatePicker onChange={
+      val => {
+        onChange(val.format())
+      }
+    }/>;
+  }
+}
+class StringTimePicker extends Component {
+
+  render() {
+    debugger
+    const { onChange, editor } = this.props;
+    return <TimePicker onChange={
+      val => {
+        onChange(val.format('HH:mm:ss'))
+      }
+    }/>;
+  }
+}
+
 const builtinSetters: any = {
   StringSetter,
   NumberSetter,
@@ -39,13 +65,18 @@ const builtinSetters: any = {
   SelectSetter,
   ExpressionSetter: {
     component: ExpressionSetter,
+    condition: (field: any) => {
+      const v = field.getValue();
+      return v == null || isJSExpression(v);
+    },
     defaultProps: { placeholder: '请输入表达式' },
     title: '表达式输入',
     recommend: true,
   },
   RadioGroupSetter,
   TextAreaSetter,
-  DateSetter,
+  DateSetter: StringDateSetter,
+  TimePicker: StringTimePicker,
   DateYearSetter,
   DateMonthSetter,
   DateRangeSetter,

packages/editor-skeleton/src/register-defaults.ts

@@ -7,7 +7,7 @@ import { isPlainObject } from '@ali/lowcode-utils';
 import parseProps from './transducers/parse-props';
 import addonCombine from './transducers/addon-combine';
 import SlotSetter from './components/slot-setter';
-import { isJSSlot } from '@ali/lowcode-types';
+import { isJSSlot, isJSExpression } from '@ali/lowcode-types';
 
 registerSetter('ArraySetter', {
   component: ArraySetter,
@@ -27,7 +27,7 @@ registerSetter('ObjectSetter', {
   title: 'ObjectSetter', // TODO
   condition: (field: any) => {
     const v = field.getValue();
-    return v == null || isPlainObject(v);
+    return v == null || (isPlainObject(v) && !isJSExpression(v) && !isJSSlot(v));
   },
   initialValue: {},
   recommend: true,

packages/editor-skeleton/src/transducers/parse-props.ts

@@ -90,20 +90,20 @@ function propTypeToSetter(propType: PropType): SetterType {
         initialValue: dataSource[0] ? dataSource[0].value : null,
       };
 
-    // case 'element':
+    case 'element':
-    // case 'node': // TODO: use Mixin
+    case 'node': // TODO: use Mixin
-    //   return {
+      return {
-    //     // slotSetter
+        // slotSetter
-    //     componentName: 'NodeSetter',
+        componentName: 'SlotSetter',
-    //     props: {
+        props: {
-    //       mode: typeName,
+          mode: typeName,
-    //     },
+        },
-    //     isRequired,
+        isRequired,
-    //     initialValue: {
+        initialValue: {
-    //       type: 'JSSlot',
+          type: 'JSSlot',
-    //       value: '',
+          value: [],
-    //     },
+        },
-    //   };
+      };
     case 'shape':
     case 'exact':
       const items = ((propType as any).value || []).map((item: any) => propConfigToFieldConfig(item));
@@ -164,12 +164,11 @@ function propTypeToSetter(propType: PropType): SetterType {
         componentName: 'MixedSetter',
         props: {
           // TODO:
-          // setters: (propType as OneOfType).value.map(item => propTypeToSetter(item)),
+          setters: (propType as OneOfType).value.map(item => propTypeToSetter(item)),
         },
         isRequired,
       };
   }
-
   return {
     componentName: 'MixedSetter',
     isRequired,

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

@@ -236,6 +236,9 @@ export default class BaseRender extends PureComponent {
       if (isJSExpression(schema)) {
         return parseExpression(schema, self);
       }
+      if (isJSSlot(schema)) {
+        return this.__createVirtualDom(schema.value, self, parentInfo);
+      }
       if (typeof schema === 'string') return schema;
       if (typeof schema === 'number' || typeof schema === 'boolean') {
         return schema.toString();
@@ -247,6 +250,7 @@ export default class BaseRender extends PureComponent {
         );
       }
 
+      // FIXME
       const _children = this.getSchemaChildren(schema);
       //解析占位组件
       if (schema.componentName === 'Flagment' && _children) {
@@ -349,6 +353,9 @@ export default class BaseRender extends PureComponent {
         props.key = idx;
       }
       props.__id = schema.id;
+      if (!props.key) {
+        props.key = props.__id;
+      }
       const renderComp = (props) => {
         return engine.createElement(
           Comp,

packages/react-renderer/src/utils/index.js

@@ -64,7 +64,7 @@ const ENV = {
 export function isSchema(schema, ignoreArr) {
   if (isEmpty(schema)) return false;
   // Leaf 组件也返回 true
-  if (schema.componentName === 'Leaf') return true;
+  if (schema.componentName === 'Leaf' || schema.componentName === 'Slot') return true;
   if (!ignoreArr && Array.isArray(schema)) return schema.every((item) => isSchema(item));
   return !!(schema.componentName && schema.props && (typeof schema.props === 'object' || isJSExpression(schema.props)));
 }