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] =?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); //解析占位组件