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

2. DateSetter 和 TimeSetter onChange 返回字符串类型的值； 3. 解决 Children 里 Slot 无法渲染的问题；
2026-01-13 17:48:13 +00:00 · 2020-08-08 23:33:57 +08:00 · 2020-08-08 23:33:57 +08:00 · b54208043a
commit b54208043a
parent 32af20c42b
7 changed files with 192 additions and 50 deletions
--- a/packages/demo/public/assets.json
+++ b/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": {
-          "isContainer": true
+        "props": {
+          "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": {
-            "type": "instanceOf",
-            "value": "node"
-          },
+          "propType": "string",
          "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": []
+                        "params": ["value", "index", "record"],
+                        "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",
--- a/packages/designer/src/builtin-simulator/host.ts
+++ b/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 : 目标文档
--- a/packages/editor-setters/src/index.tsx
+++ b/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,
--- a/packages/editor-skeleton/src/register-defaults.ts
+++ b/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,
--- a/packages/editor-skeleton/src/transducers/parse-props.ts
+++ b/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 'node': // TODO: use Mixin
-    //   return {
-    //     // slotSetter
-    //     componentName: 'NodeSetter',
-    //     props: {
-    //       mode: typeName,
-    //     },
-    //     isRequired,
-    //     initialValue: {
-    //       type: 'JSSlot',
-    //       value: '',
-    //     },
-    //   };
+    case 'element':
+    case 'node': // TODO: use Mixin
+      return {
+        // slotSetter
+        componentName: 'SlotSetter',
+        props: {
+          mode: typeName,
+        },
+        isRequired,
+        initialValue: {
+          type: 'JSSlot',
+          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,
--- a/packages/react-renderer/src/renderer/base.jsx
+++ b/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,
--- a/packages/react-renderer/src/utils/index.js
+++ b/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)));
 }