From ae1d1250f9fe6aec8f4ff9c14cc8dc3be23bac29 Mon Sep 17 00:00:00 2001 From: "wuji.xwt" Date: Tue, 4 Aug 2020 15:57:12 +0800 Subject: [PATCH 01/11] fix: dropdown and menu schema --- packages/demo/public/assets.json | 12 ++---- packages/react-renderer/demo/compose.md | 37 +++++++++++++++++++ .../react-renderer/demo/schemas/compose.js | 33 +++++++++++++++++ 3 files changed, 74 insertions(+), 8 deletions(-) create mode 100644 packages/react-renderer/demo/compose.md create mode 100644 packages/react-renderer/demo/schemas/compose.js diff --git a/packages/demo/public/assets.json b/packages/demo/public/assets.json index 608c377fc..9345ffec8 100644 --- a/packages/demo/public/assets.json +++ b/packages/demo/public/assets.json @@ -12764,7 +12764,8 @@ "screenshot": "", "schema": { "componentName": "Dropdown", - "props": {} + "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" }]}] } } ] @@ -13130,13 +13131,8 @@ "schema": { "componentName": "Menu.Item", "props": { - "parentMode": "inline", - "type": "item", - "component": "", - "disabled": true, - "className": "", - "needIndent": "" - } + }, + "children": "Option" } } ] diff --git a/packages/react-renderer/demo/compose.md b/packages/react-renderer/demo/compose.md new file mode 100644 index 000000000..c432f3e97 --- /dev/null +++ b/packages/react-renderer/demo/compose.md @@ -0,0 +1,37 @@ +--- +title: 复杂组件 +order: 2 +--- + +````jsx +import React, { PureComponent } from 'react'; +import ReactDOM from 'react-dom'; +import ReactRenderer from '@ali/lowcode-react-renderer'; +import schema from './schemas/compose'; +import components from './config/components/index'; +import utils from './config/utils'; +import constants from './config/constants'; + +class Demo extends PureComponent { + static displayName = 'renderer-demo'; + render() { + return ( +
+ +
+ ); + } +} + +ReactDOM.render(( + +), mountNode); +```` diff --git a/packages/react-renderer/demo/schemas/compose.js b/packages/react-renderer/demo/schemas/compose.js new file mode 100644 index 000000000..213362d25 --- /dev/null +++ b/packages/react-renderer/demo/schemas/compose.js @@ -0,0 +1,33 @@ +/* eslint-disable */ +export default { + componentName: 'Page', + fileName: 'compose', + props: { + }, + children: [ + { + "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" }]}] + }, + { + "componentName": "Menu", + "props": { + "style": { + "width": 200 + } + }, + "children": [{ + "componentName": "MenuItem", + "props": { + }, + "children": "Option 1" + }, { + "componentName": "MenuItem", + "props": { + }, + "children": "Option 2" + }] + } + ] +}; From 91f8e2dd78559a9b4ee28128e06267169295a216 Mon Sep 17 00:00:00 2001 From: Jeffery Young Date: Thu, 6 Aug 2020 22:54:45 +0800 Subject: [PATCH 02/11] update NumberPicker prop by Jeffery --- packages/demo/public/assets.json | 184 ++++++++++++++----------------- 1 file changed, 80 insertions(+), 104 deletions(-) diff --git a/packages/demo/public/assets.json b/packages/demo/public/assets.json index ef383471d..d2913910c 100644 --- a/packages/demo/public/assets.json +++ b/packages/demo/public/assets.json @@ -7627,24 +7627,6 @@ "subName": "" }, "props": [ - { - "name": "prefix", - "propType": "string", - "description": "样式前缀", - "defaultValue": "next-" - }, - { - "name": "type", - "propType": { - "type": "oneOf", - "value": [ - "normal", - "inline" - ] - }, - "description": "设置类型\n@enumdesc 普通, 内联", - "defaultValue": "normal" - }, { "name": "size", "propType": { @@ -7657,6 +7639,18 @@ "description": "大小", "defaultValue": "medium" }, + { + "name": "type", + "propType": { + "type": "oneOf", + "value": [ + "normal", + "inline" + ] + }, + "description": "设置类型", + "defaultValue": "normal" + }, { "name": "value", "propType": "number", @@ -7674,13 +7668,7 @@ }, { "name": "step", - "propType": { - "type": "oneOfType", - "value": [ - "number", - "string" - ] - }, + "propType": "number", "description": "步长", "defaultValue": 1 }, @@ -7701,6 +7689,57 @@ "propType": "bool", "description": "自动焦点" }, + { + "name": "max", + "propType": "number", + "description": "最大值", + "defaultValue": null + }, + { + "name": "min", + "propType": "number", + "description": "最小值", + "defaultValue": null + }, + { + "name": "format", + "propType": "func", + "description": "格式化当前值" + }, + { + "name": "upBtnProps", + "propType": "object", + "description": "增加按钮的props" + }, + { + "name": "downBtnProps", + "propType": "object", + "description": "减少按钮的props" + }, + { + "name": "label", + "propType": "string", + "description": "内联 label" + }, + { + "name": "innerAfter", + "propType": "string", + "description": "inner after" + }, + { + "name": "rtl", + "propType": "bool" + }, + { + "name": "isPreview", + "propType": "bool", + "description": "是否为预览态" + }, + { + "name": "renderPreview", + "propType": "func", + "description": "预览态模式下渲染的内容\n@param {number} value 评分值" + }, { "name": "onChange", "propType": "func", @@ -7730,18 +7769,6 @@ "name": "onDisabled", "propType": "func" }, - { - "name": "max", - "propType": "number", - "description": "最大值", - "defaultValue": null - }, - { - "name": "min", - "propType": "number", - "description": "最小值", - "defaultValue": null - }, { "name": "className", "propType": "string", @@ -7751,74 +7778,23 @@ "name": "style", "propType": "object", "description": "自定义内联样式" - }, - { - "name": "state", - "propType": { - "type": "oneOf", - "value": [ - "error" - ] - } - }, - { - "name": "format", - "propType": "func", - "description": "格式化当前值\n@param {Number} value\n@return {String|Number}" - }, - { - "name": "upBtnProps", - "propType": "object", - "description": "增加按钮的props" - }, - { - "name": "downBtnProps", - "propType": "object", - "description": "减少按钮的props" - }, - { - "name": "label", - "propType": { - "type": "instanceOf", - "value": "node" - }, - "description": "内联 label" - }, - { - "name": "innerAfter", - "propType": { - "type": "instanceOf", - "value": "node" - }, - "description": "inner after" - }, - { - "name": "rtl", - "propType": "bool" - }, - { - "name": "isPreview", - "propType": "bool", - "description": "是否为预览态" - }, - { - "name": "renderPreview", - "propType": "func", - "description": "预览态模式下渲染的内容\n@param {number} value 评分值" - }, - { - "name": "device", - "propType": { - "type": "oneOf", - "value": [ - "phone", - "tablet", - "desktop" - ] - }, - "description": "预设屏幕宽度" } - ] + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "upBtnProps", + "setter": "JsonSetter" + }, + { + "name": "downBtnProps", + "setter": "JsonSetter" + } + ] + } + } }, { "componentName": "Pagination", From b2ad9a1d1da52e4ea44622a73c561d288f4d93f1 Mon Sep 17 00:00:00 2001 From: Jeffery Young Date: Fri, 7 Aug 2020 08:54:42 +0800 Subject: [PATCH 03/11] update Radio and Radio.Gruop by Jeffery --- packages/demo/public/assets.json | 171 +++++++++++++++++-------------- 1 file changed, 92 insertions(+), 79 deletions(-) diff --git a/packages/demo/public/assets.json b/packages/demo/public/assets.json index d2913910c..4f5519190 100644 --- a/packages/demo/public/assets.json +++ b/packages/demo/public/assets.json @@ -8116,53 +8116,35 @@ "propType": "string", "description": "自定义类名" }, - { - "name": "id", - "propType": "string", - "description": "组件input的id" - }, { "name": "style", "propType": "object", "description": "自定义内敛样式" }, + { + "name": "id", + "propType": "string", + "description": "input元素id" + }, { "name": "checked", "propType": "bool", - "description": "设置radio是否选中" + "description": "是否选中" }, { "name": "defaultChecked", "propType": "bool", - "description": "设置radio是否默认选中" + "description": "是否默认选中" }, { "name": "label", - "propType": { - "type": "instanceOf", - "value": "node" - }, + "propType": "string", "description": "通过属性配置label" }, - { - "name": "onChange", - "propType": "func", - "description": "状态变化时触发的事件\n@param {Boolean} checked 是否选中\n@param {Event} e Dom 事件对象" - }, - { - "name": "onMouseEnter", - "propType": "func", - "description": "鼠标进入enter事件\n@param {Event} e Dom 事件对象" - }, - { - "name": "onMouseLeave", - "propType": "func", - "description": "鼠标离开事件\n@param {Event} e Dom 事件对象" - }, { "name": "disabled", "propType": "bool", - "description": "radio是否被禁用" + "description": "是否被禁用" }, { "name": "value", @@ -8174,7 +8156,7 @@ "bool" ] }, - "description": "radio 的value" + "description": "value" }, { "name": "name", @@ -8190,21 +8172,28 @@ { "name": "renderPreview", "propType": "func", - "description": "预览态模式下渲染的内容\n@param {number} value 评分值" + "description": "预览态模式下渲染的内容" }, { - "name": "tabIndex", - "defaultValue": 0 + "name": "onChange", + "propType": "func", + "description": "状态变化时触发的事件\n@param {Boolean} checked 是否选中\n@param {Event} e Dom 事件对象" }, { - "name": "prefix", - "defaultValue": "next-" + "name": "onMouseEnter", + "propType": "func", + "description": "鼠标进入enter事件\n@param {Event} e Dom 事件对象" + }, + { + "name": "onMouseLeave", + "propType": "func", + "description": "鼠标离开事件\n@param {Event} e Dom 事件对象" } ] }, { - "componentName": "RadioGroup", - "title": "RadioGroup", + "componentName": "Radio.Group", + "title": "Radio.Group", "docUrl": "", "screenshot": "", "npm": { @@ -8216,12 +8205,6 @@ "subName": "Group" }, "props": [ - { - "name": "prefix", - "propType": "string", - "description": "样式类名的品牌前缀", - "defaultValue": "next-" - }, { "name": "className", "propType": "string", @@ -8237,6 +8220,31 @@ "propType": "string", "description": "name" }, + { + "name": "size", + "propType": { + "type": "oneOf", + "value": [ + "large", + "medium", + "small" + ] + }, + "description": "尺寸", + "defaultValue": "medium" + }, + + { + "name": "shape", + "propType": { + "type": "oneOf", + "value": [ + "normal", + "button" + ] + }, + "description": "展示形态" + }, { "name": "value", "propType": { @@ -8247,7 +8255,7 @@ "bool" ] }, - "description": "radio group的选中项的值" + "description": "选中项的值" }, { "name": "defaultValue", @@ -8259,52 +8267,23 @@ "bool" ] }, - "description": "radio group的默认值" + "description": "默认值" }, { "name": "component", - "propType": { - "type": "oneOfType", - "value": [ - "string", - "func" - ] - }, + "propType": "string", "description": "设置标签类型", "defaultValue": "div" }, - { - "name": "onChange", - "propType": "func", - "description": "选中值改变时的事件\n@param {String/Number} value 选中项的值\n@param {Event} e Dom 事件对象" - }, { "name": "disabled", "propType": "bool", - "description": "表示radio被禁用" + "description": "是否被禁用" }, { - "name": "shape", - "propType": { - "type": "oneOf", - "value": [ - "button" - ] - }, - "description": "可以设置成 button 展示形状\n@enumdesc 按钮状" - }, - { - "name": "size", - "propType": { - "type": "oneOf", - "value": [ - "large", - "medium", - "small" - ] - }, - "description": "与 `shape` 属性配套使用，shape设为button时有效\n@enumdesc 大, 中, 小", - "defaultValue": "medium" + "name": "dataSource", + "propType": "object", + "description": "可选项列表" }, { "name": "itemDirection", @@ -8315,7 +8294,7 @@ "ver" ] }, - "description": "子项目的排列方式\n- hoz: 水平排列 (default)\n- ver: 垂直排列", + "description": "子项目的排列方式", "defaultValue": "hoz" }, { @@ -8328,8 +8307,25 @@ "name": "renderPreview", "propType": "func", "description": "预览态模式下渲染的内容\n@param {number} value 评分值" + }, + { + "name": "onChange", + "propType": "func", + "description": "选中值改变时的事件\n@param {String/Number} value 选中项的值\n@param {Event} e Dom 事件对象" } - ] + ], + "configure": { + "component": { + "isContainer": true + }, + "props": { + "isExtends": true, + "override": [{ + "name": "dataSource", + "setter": "JsonSetter" + }] + } + } }, { "componentName": "Range", @@ -13938,6 +13934,23 @@ } ] }, + { + "componentName": "Radio.Group", + "title": "单选框组", + "icon": "", + "package": "@alife/next", + "library": "Next", + "snippets": [ + { + "title": "单选框组", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_radio.png", + "schema": { + "componentName": "Radio.Group", + "props": {} + } + } + ] + }, { "componentName": "Range", "title": "区段选择器", From b54208043abfca10ef4530ff8d15c333d296d81c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=87=91=E7=A6=85?= Date: Sat, 8 Aug 2020 23:33:57 +0800 Subject: [PATCH 04/11] =?UTF-8?q?1.=20=E8=A7=A3=E5=86=B3=20MixedSetter=20c?= =?UTF-8?q?urrentSetter=20=E4=B8=8D=E6=AD=A3=E7=A1=AE=E7=9A=84=E9=97=AE?= =?UTF-8?q?=E9=A2=98=EF=BC=9B=202.=20DateSetter=20=E5=92=8C=20TimeSetter?= =?UTF-8?q?=20onChange=20=E8=BF=94=E5=9B=9E=E5=AD=97=E7=AC=A6=E4=B8=B2?= =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E7=9A=84=E5=80=BC=EF=BC=9B=203.=20=E8=A7=A3?= =?UTF-8?q?=E5=86=B3=20Children=20=E9=87=8C=20Slot=20=E6=97=A0=E6=B3=95?= =?UTF-8?q?=E6=B8=B2=E6=9F=93=E7=9A=84=E9=97=AE=E9=A2=98=EF=BC=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/demo/public/assets.json | 159 +++++++++++++++--- .../designer/src/builtin-simulator/host.ts | 2 +- packages/editor-setters/src/index.tsx | 37 +++- .../editor-skeleton/src/register-defaults.ts | 4 +- .../src/transducers/parse-props.ts | 31 ++-- packages/react-renderer/src/renderer/base.jsx | 7 + packages/react-renderer/src/utils/index.js | 2 +- 7 files changed, 192 insertions(+), 50 deletions(-) diff --git a/packages/demo/public/assets.json b/packages/demo/public/assets.json index d9fe2b6e9..909158ac5 100644 --- 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", diff --git a/packages/designer/src/builtin-simulator/host.ts b/packages/designer/src/builtin-simulator/host.ts index 6ca5910e3..35fb749a0 100644 --- 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 { + onChange(val.format()) + } + }/>; + } +} +class StringTimePicker extends Component { + + render() { + debugger + const { onChange, editor } = this.props; + return { + 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, diff --git a/packages/editor-skeleton/src/register-defaults.ts b/packages/editor-skeleton/src/register-defaults.ts index b18decb13..c3ac74378 100644 --- 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, diff --git a/packages/editor-skeleton/src/transducers/parse-props.ts b/packages/editor-skeleton/src/transducers/parse-props.ts index 850624b86..618a7d100 100644 --- 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, diff --git a/packages/react-renderer/src/renderer/base.jsx b/packages/react-renderer/src/renderer/base.jsx index f5f68837f..987c32ae7 100644 --- 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, diff --git a/packages/react-renderer/src/utils/index.js b/packages/react-renderer/src/utils/index.js index 19332fa96..229ca8b91 100644 --- 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))); } From a66c0b1ea74684819408f8561bed2009d9e7806e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=87=91=E7=A6=85?= Date: Sat, 8 Aug 2020 23:48:26 +0800 Subject: [PATCH 05/11] Loading Schema update --- packages/demo/public/assets.json | 38 +++++++++----------------------- 1 file changed, 10 insertions(+), 28 deletions(-) diff --git a/packages/demo/public/assets.json b/packages/demo/public/assets.json index 909158ac5..76a23f8a0 100644 --- a/packages/demo/public/assets.json +++ b/packages/demo/public/assets.json @@ -6022,15 +6022,9 @@ "subName": "" }, "props": [ - { - "name": "prefix", - "propType": "string", - "description": "样式前缀", - "defaultValue": "next-" - }, { "name": "tip", - "propType": "any", + "propType": "string", "description": "自定义内容" }, { @@ -6042,7 +6036,7 @@ "bottom" ] }, - "description": "自定义内容位置\n@enumdesc 出现在动画右边, 出现在动画下面", + "description": "自定义内容位置", "defaultValue": "bottom" }, { @@ -6077,14 +6071,9 @@ "description": "设置动画尺寸\n@description 仅仅对默认动画效果起作用\n@enumdesc 大号, 中号", "defaultValue": "large" }, - { - "name": "indicator", - "propType": "any", - "description": "自定义动画" - }, { "name": "color", - "propType": "string", + "propType": "color", "description": "动画颜色" }, { @@ -6092,26 +6081,19 @@ "propType": "bool", "description": "全屏展示" }, - { - "name": "children", - "propType": "any", - "description": "子元素" - }, { "name": "inline", + "title": "inline", "propType": "bool", "description": "should loader be displayed inline", "defaultValue": true - }, - { - "name": "rtl", - "propType": "bool" - }, - { - "name": "animate", - "defaultValue": null } - ] + ], + "configure": { + "component": { + "isContainer": true + } + } }, { "componentName": "Menu", From a600cf4b37e3a9c402ab4450428ae5c8f854b74b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=87=91=E7=A6=85?= Date: Sun, 9 Aug 2020 05:17:46 +0800 Subject: [PATCH 06/11] =?UTF-8?q?1.=20=E4=BF=AE=E5=A4=8D=20BoolSetter=20?= =?UTF-8?q?=E4=B8=8D=E5=93=8D=E5=BA=94=20value=20=E7=9A=84bug=EF=BC=9B=202?= =?UTF-8?q?.=20setter=20=E6=94=AF=E6=8C=81=E9=85=8D=E7=BD=AE=20extraProps?= =?UTF-8?q?=EF=BC=9B=203.=20button=20=E6=94=AF=E6=8C=81=20icon=20=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=EF=BC=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/demo/public/assets.json | 93 ++++++++++--------- packages/editor-setters/src/index.tsx | 23 ++++- .../src/components/settings/settings-pane.tsx | 11 ++- packages/react-renderer/src/renderer/base.jsx | 17 ++-- 4 files changed, 83 insertions(+), 61 deletions(-) diff --git a/packages/demo/public/assets.json b/packages/demo/public/assets.json index 76a23f8a0..c421819bd 100644 --- a/packages/demo/public/assets.json +++ b/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 快速打造高生产力的低代码研发平台" diff --git a/packages/editor-setters/src/index.tsx b/packages/editor-setters/src/index.tsx index 37ddd5e66..df88e2b95 100644 --- a/packages/editor-setters/src/index.tsx +++ b/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 { + 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 { @@ -48,7 +62,6 @@ class StringDateSetter extends Component { class StringTimePicker extends Component { render() { - debugger const { onChange, editor } = this.props; return { diff --git a/packages/editor-skeleton/src/components/settings/settings-pane.tsx b/packages/editor-skeleton/src/components/settings/settings-pane.tsx index 5b75bddfa..5685926f8 100644 --- a/packages/editor-skeleton/src/components/settings/settings-pane.tsx +++ b/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) { diff --git a/packages/react-renderer/src/renderer/base.jsx b/packages/react-renderer/src/renderer/base.jsx index 987c32ae7..c0f9bff6a 100644 --- a/packages/react-renderer/src/renderer/base.jsx +++ b/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); //解析占位组件 From 007f53435c7569891c8543d8980ab5ccef2900c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=87=91=E7=A6=85?= Date: Sun, 9 Aug 2020 18:28:35 +0800 Subject: [PATCH 07/11] =?UTF-8?q?1.=20ReactRender=20=E4=BD=BF=E7=94=A8?= =?UTF-8?q?=E4=BA=86=20shouldComponentUpdate=20=EF=BC=8C=E4=B8=8D=E8=83=BD?= =?UTF-8?q?=E7=BB=A7=E6=89=BF=E8=87=AA=20PureComponent=EF=BC=8C=E6=94=B9?= =?UTF-8?q?=E4=B8=BA=E7=BB=A7=E6=89=BF=20Component=EF=BC=9B=202.=20?= =?UTF-8?q?=E9=A2=84=E8=A7=88=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9=EF=BC=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/plugin-sample-preview/src/index.scss | 6 ++++++ packages/plugin-sample-preview/src/index.tsx | 13 ++++--------- packages/react-renderer/package.json | 2 +- packages/react-renderer/src/index.js | 4 ++-- 4 files changed, 13 insertions(+), 12 deletions(-) diff --git a/packages/plugin-sample-preview/src/index.scss b/packages/plugin-sample-preview/src/index.scss index 05253bf0b..d623acdd5 100644 --- a/packages/plugin-sample-preview/src/index.scss +++ b/packages/plugin-sample-preview/src/index.scss @@ -1,3 +1,9 @@ .lowcode-plugin-sample-preview { padding: 10px 4px; } + +.lowcode-plugin-sample-preview-content { + width: 80vw; + height: 80vh; + min-height: 300px; +} \ No newline at end of file diff --git a/packages/plugin-sample-preview/src/index.tsx b/packages/plugin-sample-preview/src/index.tsx index c5cb139b2..27cb93fcc 100644 --- a/packages/plugin-sample-preview/src/index.tsx +++ b/packages/plugin-sample-preview/src/index.tsx @@ -40,15 +40,10 @@ const SamplePreview = ({ editor }: PluginProps) => { - - {visible && } + + {visible && + + } ); diff --git a/packages/react-renderer/package.json b/packages/react-renderer/package.json index 55b847f74..b529d7274 100644 --- a/packages/react-renderer/package.json +++ b/packages/react-renderer/package.json @@ -27,7 +27,7 @@ "@ali/b3-one": "^0.0.17", "@ali/bzb-request": "^2.6.0-beta.13", "@ali/lib-mtop": "^2.5.1", - "@alifd/next": "^1.18.17", + "@alifd/next": "^1.19.17", "debug": "^4.1.1", "events": "^3.0.0", "fetch-jsonp": "^1.1.3", diff --git a/packages/react-renderer/src/index.js b/packages/react-renderer/src/index.js index 37885f905..75ceb844c 100644 --- a/packages/react-renderer/src/index.js +++ b/packages/react-renderer/src/index.js @@ -37,7 +37,7 @@ class FaultComponent extends PureComponent { class NotFoundComponent extends PureComponent { render() { console.error('component not found', this.props); - return
; + return
{this.props.children || 'Component Not Found'}
; } } @@ -45,7 +45,7 @@ function isReactClass(obj) { return obj && obj.prototype && (obj.prototype.isReactComponent || obj.prototype instanceof Component); } -export default class Renderer extends PureComponent { +export default class Renderer extends Component { static dislayName = 'renderer'; static propTypes = { appHelper: PropTypes.object, From 7a769fe484e1f37293fde9dd657c1cafe08f1629 Mon Sep 17 00:00:00 2001 From: "zude.hzd" Date: Sun, 9 Aug 2020 21:42:15 +0800 Subject: [PATCH 08/11] =?UTF-8?q?Message=20=E7=BB=84=E4=BB=B6=E4=BF=AE?= =?UTF-8?q?=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/demo/public/assets.json | 55 ++++++++++---------------------- 1 file changed, 16 insertions(+), 39 deletions(-) diff --git a/packages/demo/public/assets.json b/packages/demo/public/assets.json index c421819bd..83d7617d2 100644 --- a/packages/demo/public/assets.json +++ b/packages/demo/public/assets.json @@ -7102,16 +7102,6 @@ "subName": "" }, "props": [ - { - "name": "prefix", - "propType": "string", - "defaultValue": "next-" - }, - { - "name": "pure", - "propType": "bool", - "defaultValue": false - }, { "name": "className", "propType": "string" @@ -7120,6 +7110,12 @@ "name": "style", "propType": "object" }, + { + "name": "title", + "propType": "string", + "description": "标题", + "defaultValue": "标题" + }, { "name": "type", "propType": { @@ -7146,7 +7142,7 @@ "toast" ] }, - "description": "反馈外观", + "description": "外观", "defaultValue": "inline" }, { @@ -7158,31 +7154,20 @@ "large" ] }, - "description": "反馈大小", + "description": "尺寸", "defaultValue": "medium" }, - { - "name": "title", - "propType": { - "type": "instanceOf", - "value": "node" - }, - "description": "标题" - }, { "name": "children", "propType": { - "type": "instanceOf", - "value": "node" + "type": "oneOfType", + "value": [ + "string", + "node" + ] }, "description": "内容" }, - { - "name": "defaultVisible", - "propType": "bool", - "description": "默认是否显示", - "defaultValue": true - }, { "name": "visible", "propType": "bool", @@ -7212,16 +7197,8 @@ { "name": "animation", "propType": "bool", - "description": "是否开启展开收起动画", + "description": "收起动画", "defaultValue": true - }, - { - "name": "locale", - "propType": "object" - }, - { - "name": "rtl", - "propType": "bool" } ] }, @@ -13496,11 +13473,11 @@ "schema": { "componentName": "Message", "props": { - "prefix": "next-", + "title": "标题", "type": "success", "shape": "inline", "size": "medium", - "defaultVisible": true, + "visible": true, "animation": true } } From 9fa5b91400641c2a3598ce1aa4a788801e2fadfe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=87=91=E7=A6=85?= Date: Sun, 9 Aug 2020 21:51:40 +0800 Subject: [PATCH 09/11] =?UTF-8?q?Breadcrumb=20=E7=BB=84=E4=BB=B6=20update?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/demo/public/assets.json | 69 +++++++++++++++++++++++++++----- packages/demo/public/index.html | 4 +- 2 files changed, 61 insertions(+), 12 deletions(-) diff --git a/packages/demo/public/assets.json b/packages/demo/public/assets.json index 83d7617d2..a48384a25 100644 --- a/packages/demo/public/assets.json +++ b/packages/demo/public/assets.json @@ -984,7 +984,8 @@ ], "configure": { "component": { - "isContainer": true + "isModel": true, + "rootSelector": "div.next-balloon" } } }, @@ -1268,7 +1269,22 @@ "configure": { "component": { "isContainer": true - } + }, + "props": [ + { + "name": "maxNode", + "title": { + "label": "最大节点数", + "tip": "默认 100" + }, + "setter": "NumberSetter" + }, + { + "name": "separator", + "title": "分隔符", + "setter": "StringSetter" + } + ] } }, { @@ -1357,7 +1373,9 @@ ], "configure": { "component": { - "isContainer": true + "isContainer": true, + "isModel": true, + "rootSelector": "div.MCBreadcrumb" } } }, @@ -1415,9 +1433,11 @@ } ], "configure": { - "component": { - "isContainer": true - } + "props": [{ + "name": "children", + "title": "文本内容", + "setter": "StringSetter" + }] } }, { @@ -13403,7 +13423,13 @@ 0 ], "triggerType": "hover", - "autoFocus": true + "autoFocus": true, + "trigger": { + "componentName": "Avatar", + "props": { + "icon": "success" + } + } } } } @@ -13752,10 +13778,33 @@ "schema": { "componentName": "Breadcrumb", "props": { - "prefix": "next-", "maxNode": 100, - "component": "nav" - } + "component": "nav", + "style": { + "margin": 10, + "padding": 5 + } + }, + "children": [ + { + "componentName": "Breadcrumb.Item", + "props": { + "children": "一级" + } + }, + { + "componentName": "Breadcrumb.Item", + "props": { + "children": "二级" + } + }, + { + "componentName": "Breadcrumb.Item", + "props": { + "children": "三级" + } + } + ] } } ] diff --git a/packages/demo/public/index.html b/packages/demo/public/index.html index 32d4da9b4..2e3d7eb63 100644 --- a/packages/demo/public/index.html +++ b/packages/demo/public/index.html @@ -14,8 +14,8 @@ - - + +