From 8de2a9d799e77db051a845591f5904aa6a207df0 Mon Sep 17 00:00:00 2001 From: "mark.ck" Date: Mon, 27 Jul 2020 14:27:16 +0800 Subject: [PATCH 1/2] =?UTF-8?q?1.=20container=20=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E5=8F=AF=E9=85=8D=E7=BD=AE=20children=EF=BC=9B=202.=20schema.c?= =?UTF-8?q?hildren=20=E5=92=8C=20props.children=20=E5=86=85=E5=AE=B9?= =?UTF-8?q?=E5=90=88=E5=B9=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/demo/public/assets.json | 72 ++++++++++++------- packages/demo/public/schema.json | 8 +-- .../src/transducers/parse-props.ts | 1 + .../src/renderer-view.tsx | 10 ++- 4 files changed, 59 insertions(+), 32 deletions(-) diff --git a/packages/demo/public/assets.json b/packages/demo/public/assets.json index 2de653885..1d4ada11d 100644 --- a/packages/demo/public/assets.json +++ b/packages/demo/public/assets.json @@ -188,8 +188,9 @@ "propType": "object" }, { - "name": "columns", - "propType": "array" + "name": "children", + "propType": "array", + "description": "列" }, { "name": "emptyContent", @@ -1077,10 +1078,8 @@ }, { "name": "children", - "propType": { - "type": "instanceOf", - "value": "node" - } + "description": "内容", + "propType": "array" }, { "name": "style", @@ -1239,17 +1238,19 @@ }, { "name": "children", - "propType": { - "type": "instanceOf", - "value": "node" - } + "propType": "array" }, { "name": "style", "propType": "object", "description": "自定义内联样式" } - ] + ], + "configure": { + "component": { + "isContainer": true + } + } }, { "componentName": "Button.Group", @@ -4120,8 +4121,14 @@ { "name": "children", "propType": { - "type": "instanceOf", - "value": "node" + "type": "oneOfType", + "value": [ + "bool", + { + "type": "instanceOf", + "value": "node" + } + ] }, "description": "内容" }, @@ -4284,8 +4291,10 @@ } ], "configure": { - "isContainer": true, - "isModel": true + "component": { + "isContainer": true, + "isModel": true + } } }, { @@ -10510,11 +10519,24 @@ "propType": "func", "description": "接收 children 自定义渲染列表" }, + { + "name": "dataSource", + "propType": "array" + }, { "name": "style", "propType": "object" } - ] + ], + "configure": { + "props": { + "isExtends": true, + "override": [{ + "name": "dataSource", + "setter": "JsonSetter" + }] + } + } }, { "componentName": "Tree", @@ -12706,9 +12728,9 @@ "type": "primary", "size": "large", "htmlType": "button", - "component": "button" - }, - "children": "提交" + "component": "button", + "children": ["提交"] + } } } ] @@ -12952,12 +12974,12 @@ "schema": { "componentName": "Breadcrumb.Item", "props": { - "prefix": "next-" - }, - "children": [ - "222", - "222111" - ] + "prefix": "next-", + "children": [ + "222", + "222111" + ] + } } } ] diff --git a/packages/demo/public/schema.json b/packages/demo/public/schema.json index 065d5eabb..fcf89ccd0 100644 --- a/packages/demo/public/schema.json +++ b/packages/demo/public/schema.json @@ -456,13 +456,9 @@ "type":"JSExpression", "value":"this.state.isShowDialog" }, - "children":{ - "type":"JSSlot" - }, + "title":"标题", - "footer":{ - "type":"JSSlot" - }, + "events":[ ] } diff --git a/packages/editor-skeleton/src/transducers/parse-props.ts b/packages/editor-skeleton/src/transducers/parse-props.ts index 0bf803e41..10e153924 100644 --- a/packages/editor-skeleton/src/transducers/parse-props.ts +++ b/packages/editor-skeleton/src/transducers/parse-props.ts @@ -211,6 +211,7 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp ) { if (component.isContainer !== false) { component.isContainer = true; + props.push(propConfigToFieldConfig(prop)); return; } } diff --git a/packages/react-simulator-renderer/src/renderer-view.tsx b/packages/react-simulator-renderer/src/renderer-view.tsx index 5adf162b4..e1945d853 100644 --- a/packages/react-simulator-renderer/src/renderer-view.tsx +++ b/packages/react-simulator-renderer/src/renderer-view.tsx @@ -142,10 +142,18 @@ class Renderer extends Component<{ renderer: SimulatorRenderer }> { }); console.info('menuprops', viewProps); } + let _children = leaf?.isContainer() ? (children == null ? [] : Array.isArray(children) ? children : [children]) : children; + if (props.children && props.children.length) { + if (Array.isArray(props.children)) { + _children = Array.isArray(_children) ? _children.concat(props.children) : props.children.unshift(_children); + } else { + Array.isArray(_children) && _children.push(props.children) || (_children = [_children].push(props.children)); + } + } return createElement( getDeviceView(Component, device, designMode), viewProps, - leaf?.isContainer() ? (children == null ? [] : Array.isArray(children) ? children : [children]) : children, + _children, ); }} onCompGetRef={(schema: any, ref: ReactInstance | null) => { From dc6f8e3844dfc4fd664dafc3ddaf316751e29d37 Mon Sep 17 00:00:00 2001 From: "mark.ck" Date: Mon, 27 Jul 2020 17:06:49 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E5=AE=8C=E5=96=84=E8=B5=84=E4=BA=A7?= =?UTF-8?q?=E5=8C=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/demo/public/assets.json | 222 +++++++++++++++--- packages/demo/public/schema.json | 6 +- .../src/renderer-view.tsx | 21 +- 3 files changed, 198 insertions(+), 51 deletions(-) diff --git a/packages/demo/public/assets.json b/packages/demo/public/assets.json index 1d4ada11d..4256d8320 100644 --- a/packages/demo/public/assets.json +++ b/packages/demo/public/assets.json @@ -9,8 +9,8 @@ { "title": "fusion组件库", "package": "@alifd/next", - "version": "1.19.18", - "urls": ["https://unpkg.antfin-inc.com/@alife/next@1.19.18/dist/next.js", "https://unpkg.antfin-inc.com/@alife/next@1.19.18/dist/next.css"], + "version": "1.20.0", + "urls": ["https://unpkg.antfin-inc.com/@alifd/next@1.20.0/dist/next.js", "https://unpkg.antfin-inc.com/@alifd/next@1.20.0/dist/next.css"], "library": "Next" }, { @@ -320,7 +320,7 @@ "exportName": "Table", "main": "src/index.js", "destructuring": true, - "subName": "" + "subName": "Column" }, "props": [ { @@ -388,7 +388,7 @@ "name": "showZero", "propType": "bool", "description": "当count为0时，是否显示count", - "defaultValue": false + "defaultValue": true }, { "name": "content", @@ -6121,7 +6121,12 @@ "name": "style", "propType": "object" } - ] + ], + "configure": { + "component": { + "isContainer": true + } + } }, { "componentName": "SubMenu", @@ -6245,7 +6250,7 @@ ] }, { - "componentName": "SelectableItem", + "componentName": "Menu.Item", "title": "SelectableItem", "docUrl": "", "screenshot": "", @@ -6543,8 +6548,8 @@ ] }, { - "componentName": "Group", - "title": "Group", + "componentName": "Menu.Group", + "title": "Menu.Group", "docUrl": "", "screenshot": "", "npm": { @@ -7847,7 +7852,7 @@ }, { "name": "backgroundColor", - "propType": "string", + "propType": "color", "description": "背景色" }, { @@ -8237,6 +8242,11 @@ "name": "renderPreview", "propType": "func", "description": "预览态模式下渲染的内容\n@param {number} value 评分值" + }, + { + "name": "value", + "propType": "number", + "description": "分值" } ] }, @@ -9967,6 +9977,73 @@ } ] }, + { + "componentName": "Tag", + "title": "Tag", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "@alifd/next", + "version": "1.19.18", + "exportName": "Tag", + "main": "src/index.js", + "destructuring": true + }, + "props": [ + { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, + { + "name": "type", + "propType": { + "type": "oneOf", + "value": [ + "normal", + "primary" + ] + }, + "description": "标签的类型" + }, + { + "name": "size", + "propType": { + "type": "oneOf", + "value": [ + "small", + "medium", + "large" + ] + }, + "description": "标签的尺寸（large 尺寸为兼容表单场景 large = medium）" + }, + { + "name": "closeArea", + "propType": { + "type": "oneOf", + "value": [ + "tag", + "tail" + ] + } + }, + { + "name": "color", + "propType": "string", + "description": "标签颜色, 目前支持：blue、 green、 orange、red、 turquoise、 yellow 和 hex 颜色值 （`color keywords`作为 Tag 组件的保留字，请勿直接使用 ）, `1.19.0` 以上版本生效" + }, + { + "name": "children", + "propType": "array" + } + ], + "configure": { + "component": { + "isContainer": true + } + } + }, { "componentName": "TimePicker", "title": "TimePicker", @@ -10261,7 +10338,12 @@ "name": "style", "propType": "object" } - ] + ], + "configure": { + "component": { + "isContainer": true + } + } }, { "componentName": "TimelineItem", @@ -10784,7 +10866,12 @@ "name": "style", "propType": "object" } - ] + ], + "configure": { + "component": { + "isContainer": true + } + } }, { "componentName": "TreeNode", @@ -11958,11 +12045,16 @@ "name": "style", "propType": "object" } - ] + ], + "configure": { + "component": { + "isContainer": true + } + } }, { - "componentName": "Cell", - "title": "Cell", + "componentName": "ResponsiveGrid.Cell", + "title": "ResponsiveGrid.Cell", "docUrl": "", "screenshot": "", "npm": { @@ -12015,7 +12107,12 @@ "name": "style", "propType": "object" } - ] + ], + "configure": { + "component": { + "isContainer": true + } + } }, { "componentName": "Box", @@ -12171,7 +12268,7 @@ "componentName": "Badge", "props": { "prefix": "next-", - "overflowCount": 99 + "showZero": true } } } @@ -12420,6 +12517,30 @@ } ] }, + { + "componentName": "Menu.Item", + "title": "菜单项", + "icon": "", + "package": "@alife/next", + "library": "Next", + "snippets": [ + { + "title": "菜单项", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_menu.png", + "schema": { + "componentName": "Menu.Item", + "props": { + "parentMode": "inline", + "type": "item", + "component": "", + "disabled": true, + "className": "", + "needIndent": "" + } + } + } + ] + }, { "componentName": "Progress", "title": "进度指示器", @@ -12514,6 +12635,46 @@ "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_timeline.png", "schema": { "componentName": "Timeline", + "props": { + "prefix": "next-", + "fold": [], + "animation": true + },"children": [ + { + "componentName": "TimelineItem", + "props": { + "state": "process", + "title": "12344" + } + }, + { + "componentName": "TimelineItem", + "props": { + "title": "Ship" + } + }, + { + "componentName": "TimelineItem", + "props": { + "title": "Order" + } + } + ] + } + } + ] + },{ + "componentName": "TimelineItem", + "title": "时间轴 Item", + "icon": "", + "package": "@alife/next", + "library": "Next", + "snippets": [ + { + "title": "时间轴 Item", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_timeline.png", + "schema": { + "componentName": "TimelineItem", "props": { "prefix": "next-", "fold": [], @@ -12656,23 +12817,6 @@ } } ] - }, - { - "componentName": "Notification", - "title": "通知", - "icon": "", - "package": "@alife/next", - "library": "Next", - "snippets": [ - { - "title": "通知", - "screenshot": "", - "schema": { - "componentName": "Notification", - "props": {} - } - } - ] } ], "icon": "" @@ -12833,7 +12977,9 @@ "screenshot": "", "schema": { "componentName": "Icon", - "props": {} + "props": { + "type": "smile" + } } } ] @@ -12878,17 +13024,17 @@ ] }, { - "componentName": "Shell", - "title": "框架", + "componentName": "ResponsiveGrid.Cell", + "title": "栅格布局 Cell", "icon": "", "package": "@alife/next", "library": "Next", "snippets": [ { - "title": "框架", + "title": "栅格布局 Cell", "screenshot": "", "schema": { - "componentName": "Shell", + "componentName": "ResponsiveGrid.Cell", "props": {} } } diff --git a/packages/demo/public/schema.json b/packages/demo/public/schema.json index fcf89ccd0..a57d5a2e4 100644 --- a/packages/demo/public/schema.json +++ b/packages/demo/public/schema.json @@ -286,10 +286,10 @@ "onClick":{ "type":"JSFunction", "value":"function(){ this.onClick() }" - } - }, - "children":[ + }, + "children":[ "新建配置"] + } }] }, { diff --git a/packages/react-simulator-renderer/src/renderer-view.tsx b/packages/react-simulator-renderer/src/renderer-view.tsx index e1945d853..ca00e07ee 100644 --- a/packages/react-simulator-renderer/src/renderer-view.tsx +++ b/packages/react-simulator-renderer/src/renderer-view.tsx @@ -108,9 +108,17 @@ class Renderer extends Component<{ renderer: SimulatorRenderer }> { const leaf = host.document.getNode(__id); viewProps._leaf = leaf; viewProps._componentName = leaf?.componentName; + let _children = leaf?.isContainer() ? (children == null ? [] : Array.isArray(children) ? children : [children]) : children; + if (props.children && props.children.length) { + if (Array.isArray(props.children)) { + _children = Array.isArray(_children) ? _children.concat(props.children) : props.children.unshift(_children); + } else { + Array.isArray(_children) && _children.push(props.children) || (_children = [_children].push(props.children)); + } + } // 如果是容器 && 无children && 高宽为空 增加一个占位容器，方便拖动 - if (leaf?.isContainer() && children == null && (!viewProps.style || Object.keys(viewProps.style).length == 0)){ - children =
{ }); console.info('menuprops', viewProps); } - let _children = leaf?.isContainer() ? (children == null ? [] : Array.isArray(children) ? children : [children]) : children; - if (props.children && props.children.length) { - if (Array.isArray(props.children)) { - _children = Array.isArray(_children) ? _children.concat(props.children) : props.children.unshift(_children); - } else { - Array.isArray(_children) && _children.push(props.children) || (_children = [_children].push(props.children)); - } - } + return createElement( getDeviceView(Component, device, designMode), viewProps,