mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2026-01-13 01:21:58 +00:00
新增columns的配置
This commit is contained in:
荣彬
commit
23bc6214d6
@ -25,6 +25,12 @@
|
||||
{
|
||||
"componentName": "Page",
|
||||
"title": "Page",
|
||||
"props": [
|
||||
{
|
||||
"name": "style",
|
||||
"propType": "object"
|
||||
}
|
||||
],
|
||||
"configure": {
|
||||
"events": {
|
||||
"supportedLifecycles": [
|
||||
@ -60,6 +66,272 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"componentName": "Table",
|
||||
"title": "Table",
|
||||
"docUrl": "",
|
||||
"screenshot": "",
|
||||
"npm": {
|
||||
"package": "@alifd/next",
|
||||
"version": "1.19.18",
|
||||
"exportName": "Table",
|
||||
"main": "src/index.js",
|
||||
"destructuring": true,
|
||||
"subName": ""
|
||||
},
|
||||
"props": [
|
||||
{
|
||||
"name": "prefix",
|
||||
"propType": "string"
|
||||
},
|
||||
{
|
||||
"name": "pure",
|
||||
"propType": "bool"
|
||||
},
|
||||
{
|
||||
"name": "rtl",
|
||||
"propType": "bool"
|
||||
},
|
||||
{
|
||||
"name": "tableLayout",
|
||||
"propType": {
|
||||
"type": "oneOf",
|
||||
"value": [
|
||||
"fixed",
|
||||
"auto"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "tableWidth",
|
||||
"propType": "number"
|
||||
},
|
||||
{
|
||||
"name": "className",
|
||||
"propType": "string"
|
||||
},
|
||||
{
|
||||
"name": "style",
|
||||
"propType": "object"
|
||||
},
|
||||
{
|
||||
"name": "size",
|
||||
"propType": {
|
||||
"type": "oneOf",
|
||||
"value": [
|
||||
"small",
|
||||
"medium"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "dataSource",
|
||||
"propType": {
|
||||
"type": "arrayOf",
|
||||
"value": "object"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "entireDataSource",
|
||||
"propType": "array"
|
||||
},
|
||||
{
|
||||
"name": "onRowClick",
|
||||
"propType": "func"
|
||||
},
|
||||
{
|
||||
"name": "onRowMouseEnter",
|
||||
"propType": "func"
|
||||
},
|
||||
{
|
||||
"name": "rowProps",
|
||||
"propType": "func"
|
||||
},
|
||||
{
|
||||
"name": "cellProps",
|
||||
"propType": "func"
|
||||
},
|
||||
{
|
||||
"name": "hasBorder",
|
||||
"propType": "bool"
|
||||
},
|
||||
{
|
||||
"name": "hasHeader",
|
||||
"propType": "bool"
|
||||
},
|
||||
{
|
||||
"name": "isZebra",
|
||||
"propType": "bool"
|
||||
},
|
||||
{
|
||||
"name": "loading",
|
||||
"propType": "bool"
|
||||
},
|
||||
{
|
||||
"name": "filterParams",
|
||||
"propType": "object"
|
||||
},
|
||||
{
|
||||
"name": "sort",
|
||||
"propType": "object"
|
||||
},
|
||||
{
|
||||
"name": "sortIcons",
|
||||
"propType": "object"
|
||||
},
|
||||
{
|
||||
"name": "locale",
|
||||
"propType": "object"
|
||||
},
|
||||
{
|
||||
"name": "components",
|
||||
"propType": "object"
|
||||
},
|
||||
{
|
||||
"name": "columns",
|
||||
"propType": "array"
|
||||
},
|
||||
{
|
||||
"name": "emptyContent",
|
||||
"propType": "node"
|
||||
},
|
||||
{
|
||||
"name": "primaryKey",
|
||||
"propType": "string"
|
||||
},
|
||||
{
|
||||
"name": "lockType",
|
||||
"propType": {
|
||||
"type": "oneOf",
|
||||
"value": [
|
||||
"left",
|
||||
"right"
|
||||
]
|
||||
}
|
||||
},{
|
||||
"name": "style",
|
||||
"propType": "object"
|
||||
},
|
||||
{
|
||||
"name": "wrapperContent",
|
||||
"propType": "any"
|
||||
},
|
||||
{
|
||||
"name": "refs",
|
||||
"propType": "object"
|
||||
},
|
||||
{
|
||||
"name": "expandedRowRender",
|
||||
"propType": "func"
|
||||
},
|
||||
{
|
||||
"name": "expandedRowIndent",
|
||||
"propType": "array"
|
||||
},
|
||||
{
|
||||
"name": "hasExpandedRowCtrl",
|
||||
"propType": "bool"
|
||||
},
|
||||
{
|
||||
"name": "getExpandedColProps",
|
||||
"propType": "func"
|
||||
},
|
||||
{
|
||||
"name": "openRowKeys",
|
||||
"propType": "array"
|
||||
},
|
||||
{
|
||||
"name": "onRowOpen",
|
||||
"propType": "func"
|
||||
},
|
||||
{
|
||||
"name": "onExpandedRowClick",
|
||||
"propType": "func"
|
||||
},
|
||||
{
|
||||
"name": "fixedHeader",
|
||||
"propType": "bool"
|
||||
},
|
||||
{
|
||||
"name": "rowSelection",
|
||||
"propType": "object"
|
||||
},
|
||||
{
|
||||
"name": "stickyHeader",
|
||||
"propType": "bool"
|
||||
},
|
||||
{
|
||||
"name": "offsetTop",
|
||||
"propType": "number"
|
||||
},
|
||||
{
|
||||
"name": "affixProps",
|
||||
"propType": "object"
|
||||
},
|
||||
{
|
||||
"name": "indent",
|
||||
"propType": "number"
|
||||
},
|
||||
{
|
||||
"name": "isTree",
|
||||
"propType": "bool"
|
||||
},
|
||||
{
|
||||
"name": "useVirtual",
|
||||
"propType": "bool"
|
||||
},
|
||||
{
|
||||
"name": "onBodyScroll",
|
||||
"propType": "func"
|
||||
},
|
||||
{
|
||||
"name": "expandedIndexSimulate",
|
||||
"propType": "bool"
|
||||
},
|
||||
{
|
||||
"name": "crossline",
|
||||
"propType": "bool"
|
||||
},
|
||||
{
|
||||
"name": "lengths",
|
||||
"propType": "object"
|
||||
}
|
||||
],
|
||||
"configure": {
|
||||
"component": {
|
||||
"isContainer": true
|
||||
},
|
||||
"props": {
|
||||
"isExtends": true,
|
||||
"override": [{
|
||||
"name": "dataSource",
|
||||
"setter": "JsonSetter"
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"componentName": "Table.Column",
|
||||
"title": "Table.Column",
|
||||
"npm": {
|
||||
"package": "@alifd/next",
|
||||
"version": "1.19.18",
|
||||
"exportName": "Table",
|
||||
"main": "src/index.js",
|
||||
"destructuring": true,
|
||||
"subName": "Column"
|
||||
},
|
||||
"props": [
|
||||
{
|
||||
"name": "title",
|
||||
"propType": "string"
|
||||
},
|
||||
{
|
||||
"name": "dataIndex",
|
||||
"propType": "string"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"componentName": "Badge",
|
||||
"title": "Badge",
|
||||
@ -614,7 +886,7 @@
|
||||
"name": "children",
|
||||
"propType": {
|
||||
"type": "instanceOf",
|
||||
"value": "custom"
|
||||
"value": "node"
|
||||
},
|
||||
"description": "面包屑子节点，需传入 Breadcrumb.Item"
|
||||
},
|
||||
@ -663,7 +935,12 @@
|
||||
"name": "style",
|
||||
"propType": "object"
|
||||
}
|
||||
]
|
||||
],
|
||||
"configure": {
|
||||
"component": {
|
||||
"isContainer": true
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"componentName": "MCBreadcrumb",
|
||||
@ -699,7 +976,7 @@
|
||||
"name": "children",
|
||||
"propType": {
|
||||
"type": "instanceOf",
|
||||
"value": "custom"
|
||||
"value": "node"
|
||||
},
|
||||
"description": "面包屑子节点，需传入 Breadcrumb.Item"
|
||||
},
|
||||
@ -748,7 +1025,12 @@
|
||||
"name": "style",
|
||||
"propType": "object"
|
||||
}
|
||||
]
|
||||
],
|
||||
"configure": {
|
||||
"component": {
|
||||
"isContainer": true
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"componentName": "Breadcrumb.Item",
|
||||
@ -804,7 +1086,12 @@
|
||||
"name": "style",
|
||||
"propType": "object"
|
||||
}
|
||||
]
|
||||
],
|
||||
"configure": {
|
||||
"component": {
|
||||
"isContainer": true
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"componentName": "Button",
|
||||
@ -962,12 +1249,7 @@
|
||||
"propType": "object",
|
||||
"description": "自定义内联样式"
|
||||
}
|
||||
],
|
||||
"configure": {
|
||||
"component": {
|
||||
"isContainer": true
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"componentName": "Button.Group",
|
||||
@ -3823,7 +4105,7 @@
|
||||
},
|
||||
{
|
||||
"name": "visible",
|
||||
"propType": "bool",
|
||||
"propType": "oneOfType",
|
||||
"description": "是否显示",
|
||||
"defaultValue": false
|
||||
},
|
||||
@ -4000,7 +4282,11 @@
|
||||
"name": "style",
|
||||
"propType": "object"
|
||||
}
|
||||
]
|
||||
],
|
||||
"configure": {
|
||||
"isContainer": true,
|
||||
"isModel": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"componentName": "Inner",
|
||||
@ -4266,26 +4552,6 @@
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"componentName": "Table",
|
||||
"title": "Table",
|
||||
"docUrl": "",
|
||||
"screenshot": "",
|
||||
"npm": {
|
||||
"package": "@alifd/next",
|
||||
"version": "1.19.18",
|
||||
"exportName": "Table",
|
||||
"main": "src/index.js",
|
||||
"destructuring": true,
|
||||
"subName": ""
|
||||
},
|
||||
"props": [
|
||||
{
|
||||
"name": "style",
|
||||
"propType": "object"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"componentName": "Form",
|
||||
"title": "Form",
|
||||
@ -11888,6 +12154,72 @@
|
||||
}
|
||||
}
|
||||
]
|
||||
},{
|
||||
"componentName": "Table",
|
||||
"title": "表格",
|
||||
"icon": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_table.png",
|
||||
"package": "@alife/next",
|
||||
"library": "Next",
|
||||
"snippets": [
|
||||
{
|
||||
"title": "表格",
|
||||
"screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_table.png",
|
||||
"schema": {
|
||||
"componentName": "Table",
|
||||
"props": {
|
||||
"dataSource": [{
|
||||
"id": 1, "time": "2016"
|
||||
},{
|
||||
"id": 2, "time": "2017"
|
||||
}],
|
||||
"size": "medium",
|
||||
"prefix": "next-",
|
||||
"hasBorder": true,
|
||||
"hasHeader": true,
|
||||
"isZebra": false,
|
||||
"loading": false,
|
||||
"expandedIndexSimulate": false,
|
||||
"primaryKey": "id",
|
||||
"locale": "zhCN.Table",
|
||||
"crossline": false
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"componentName": "Table.Column",
|
||||
"props": {
|
||||
"title": "id",
|
||||
"dataIndex": "id"
|
||||
}
|
||||
},
|
||||
{
|
||||
"componentName": "Table.Column",
|
||||
"props": {
|
||||
"title": "time",
|
||||
"dataIndex": "time"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
},{
|
||||
"componentName": "Table.Column",
|
||||
"title": "表格列",
|
||||
"icon": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_table.png",
|
||||
"package": "@alife/next",
|
||||
"library": "Next",
|
||||
"snippets": [
|
||||
{
|
||||
"title": "表格列",
|
||||
"screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_table.png",
|
||||
"schema": {
|
||||
"componentName": "Table.Column",
|
||||
"props": {
|
||||
"title": "name"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"componentName": "Calendar",
|
||||
@ -12381,6 +12713,54 @@
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"componentName": "Button.Group",
|
||||
"title": "按钮组",
|
||||
"icon": "",
|
||||
"package": "@alife/next",
|
||||
"library": "Next",
|
||||
"snippets": [
|
||||
{
|
||||
"title": "按钮组",
|
||||
"screenshot": "https://img.alicdn.com/tfs/TB1t6dhvV67gK0jSZPfXXahhFXa-310-122.png",
|
||||
"schema": {
|
||||
"componentName": "Button.Group",
|
||||
"props": {
|
||||
|
||||
},
|
||||
"children": [{
|
||||
"componentName": "Button",
|
||||
"props": {
|
||||
"type": "primary",
|
||||
"style": {
|
||||
"margin": "0 5px 0 5px"
|
||||
},
|
||||
"htmlType": "submit"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"componentName": "Icon",
|
||||
"props": {
|
||||
"type": "success"
|
||||
}
|
||||
},
|
||||
"提交"
|
||||
]
|
||||
}, {
|
||||
"componentName": "Button",
|
||||
"props": {
|
||||
"type": "normal",
|
||||
"style": {
|
||||
"margin": "0 5px 0 5px"
|
||||
},
|
||||
"htmlType": "reset"
|
||||
},
|
||||
"children": "重置"
|
||||
}]
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"componentName": "Divider",
|
||||
"title": "分隔符",
|
||||
@ -12559,6 +12939,28 @@
|
||||
}
|
||||
}
|
||||
]
|
||||
},{
|
||||
"componentName": "Breadcrumb.Item",
|
||||
"title": "面包屑 Item",
|
||||
"icon": "",
|
||||
"package": "@alife/next",
|
||||
"library": "Next",
|
||||
"snippets": [
|
||||
{
|
||||
"title": "面包屑",
|
||||
"screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_breadcrumb.png",
|
||||
"schema": {
|
||||
"componentName": "Breadcrumb.Item",
|
||||
"props": {
|
||||
"prefix": "next-"
|
||||
},
|
||||
"children": [
|
||||
"222",
|
||||
"222111"
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"componentName": "MCBreadcrumb",
|
||||
@ -12763,17 +13165,23 @@
|
||||
},
|
||||
{
|
||||
"componentName": "Form.Item",
|
||||
"title": "表单辅助工具",
|
||||
"title": "Form.Item",
|
||||
"icon": "",
|
||||
"package": "@alife/next",
|
||||
"library": "Next",
|
||||
"snippets": [
|
||||
{
|
||||
"title": "表单辅助工具",
|
||||
"title": "Form.Item",
|
||||
"screenshot": "",
|
||||
"schema": {
|
||||
"componentName": "Form.Item",
|
||||
"props": {}
|
||||
"props": {
|
||||
"style":{
|
||||
"margin-bottom": "0",
|
||||
"min-width": "200px",
|
||||
"min-height": "28px"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
@ -1,138 +1,420 @@
|
||||
{
|
||||
"componentName": "Page",
|
||||
"id": "node_dockcviv8fo1",
|
||||
"props": {
|
||||
"ref": "outterView",
|
||||
"autoLoading": true,
|
||||
"style": {
|
||||
"padding": "0 5px 0 5px"
|
||||
}
|
||||
},
|
||||
"fileName": "test",
|
||||
"dataSource": {
|
||||
"list": []
|
||||
},
|
||||
"state": {
|
||||
"text": "outter"
|
||||
"text": "outter",
|
||||
"isShowDialog": false
|
||||
},
|
||||
|
||||
"css": "body {font-size: 12px;} .botton{width:100px;color:#ff00ff}",
|
||||
"lifeCycles": {
|
||||
"componentDidMount": {
|
||||
"type": "JSExpression",
|
||||
"value": "function() {\n \t\tconsole.log('did mount');\n\t}"
|
||||
"type": "JSFunction",
|
||||
"value": "function() {\n console.log('did mount');\n }"
|
||||
},
|
||||
"componentWillUnmount": {
|
||||
"type": "JSExpression",
|
||||
"value": "function() {\n \t\tconsole.log('will umount');\n\t}"
|
||||
"type": "JSFunction",
|
||||
"value": "function() {\n console.log('will umount');\n }"
|
||||
}
|
||||
},
|
||||
|
||||
"methods": {
|
||||
"testFunc": {
|
||||
"type": "JSFunction",
|
||||
"value": "function() {console.log('test func');}"
|
||||
}
|
||||
},
|
||||
|
||||
"props": {
|
||||
"ref": "outterView",
|
||||
"autoLoading": true,
|
||||
"style": {
|
||||
"padding": 20
|
||||
"value": "function() {\n console.log('test func');\n }"
|
||||
},
|
||||
"onClick": {
|
||||
"type": "JSFunction",
|
||||
"value": "function(){\n this.setState({\n isShowDialog:true\n })\n\t}"
|
||||
}
|
||||
},
|
||||
"children": [{
|
||||
"componentName": "Form",
|
||||
"componentName": "Box",
|
||||
"id": "node_dockcy8n9xed",
|
||||
"props": {
|
||||
"labelCol": 3,
|
||||
"style": {},
|
||||
"ref": "testForm"
|
||||
"style": {
|
||||
"backgroundColor": "rgba(31,56,88,0.1)",
|
||||
"padding": "12px 12px 12px 12px"
|
||||
}
|
||||
},
|
||||
"children": [{
|
||||
"componentName": "Form.Item",
|
||||
"props": {
|
||||
"label": "姓名：",
|
||||
"name": "name",
|
||||
"initValue": "李雷"
|
||||
},
|
||||
"children": [{
|
||||
"componentName": "Input",
|
||||
"props": {
|
||||
"placeholder": "请输入",
|
||||
"size": "medium",
|
||||
"style": {
|
||||
"width": 320
|
||||
}
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
"componentName": "Form.Item",
|
||||
"props": {
|
||||
"label": "年龄：",
|
||||
"name": "age",
|
||||
"initValue": "22"
|
||||
},
|
||||
"children": [{
|
||||
"componentName": "NumberPicker",
|
||||
"props": {
|
||||
"size": "medium",
|
||||
"type": "normal"
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
"componentName": "Form.Item",
|
||||
"props": {
|
||||
"label": "职业：",
|
||||
"name": "profession"
|
||||
},
|
||||
"children": [{
|
||||
"componentName": "Select",
|
||||
"props": {
|
||||
"dataSource": [{
|
||||
"label": "教师",
|
||||
"value": "t"
|
||||
}, {
|
||||
"label": "医生",
|
||||
"value": "d"
|
||||
}, {
|
||||
"label": "歌手",
|
||||
"value": "s"
|
||||
}]
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
"componentName": "Form.Item",
|
||||
"componentName": "Box",
|
||||
"id": "node_dockcy8n9xee",
|
||||
"props": {
|
||||
"style": {
|
||||
"textAlign": "center"
|
||||
"padding": "12px 12px 12px 12px",
|
||||
"backgroundColor": "#ffffff"
|
||||
}
|
||||
},
|
||||
"children": [{
|
||||
"componentName": "Button.Group",
|
||||
"props": {},
|
||||
"componentName": "Breadcrumb",
|
||||
"id": "node_dockcy8n9xef",
|
||||
"props": {
|
||||
"prefix": "next-",
|
||||
"maxNode": 100,
|
||||
"component": "nav"
|
||||
},
|
||||
"children": [{
|
||||
"componentName": "Button",
|
||||
"componentName": "Breadcrumb.Item",
|
||||
"id": "node_dockcy8n9xeg",
|
||||
"props": {
|
||||
"type": "primary",
|
||||
"style": {
|
||||
"margin": "0 5px 0 5px"
|
||||
},
|
||||
"htmlType": "submit"
|
||||
"prefix": "next-"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"children": ["首页"]
|
||||
}, {
|
||||
"componentName": "Breadcrumb.Item",
|
||||
"id": "node_dockcy8n9xei",
|
||||
"props": {
|
||||
"prefix": "next-"
|
||||
},
|
||||
"children": ["品质中台"]
|
||||
}, {
|
||||
"componentName": "Breadcrumb.Item",
|
||||
"id": "node_dockcy8n9xek",
|
||||
"props": {
|
||||
"prefix": "next-"
|
||||
},
|
||||
"children": ["商家品质页面管理"]
|
||||
}, {
|
||||
"componentName": "Breadcrumb.Item",
|
||||
"id": "node_dockcy8n9xem",
|
||||
"props": {
|
||||
"prefix": "next-"
|
||||
},
|
||||
"children": ["质检知识条配置"]
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
"componentName": "Box",
|
||||
"id": "node_dockcy8n9xeo",
|
||||
"props": {
|
||||
"style": {
|
||||
"marginTop": "12px",
|
||||
"backgroundColor": "#ffffff"
|
||||
}
|
||||
},
|
||||
"children": [{
|
||||
"componentName": "Form",
|
||||
"id": "node_dockcy8n9xep",
|
||||
"props": {
|
||||
"inline": true,
|
||||
"style": {
|
||||
"marginTop": "12px",
|
||||
"marginRight": "12px",
|
||||
"marginLeft": "12px"
|
||||
},
|
||||
"__events": []
|
||||
},
|
||||
"children": [{
|
||||
"componentName": "Form.Item",
|
||||
"id": "node_dockcy8n9xeq",
|
||||
"props": {
|
||||
"style": {
|
||||
"marginBottom": "0"
|
||||
},
|
||||
"label": "类目名："
|
||||
},
|
||||
"children": [{
|
||||
"componentName": "Select",
|
||||
"id": "node_dockcy8n9xer",
|
||||
"props": {
|
||||
"mode": "single",
|
||||
"hasArrow": true,
|
||||
"cacheValue": true,
|
||||
"style": {
|
||||
"width": "150px"
|
||||
}
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
"componentName": "Form.Item",
|
||||
"id": "node_dockcy8n9xes",
|
||||
"props": {
|
||||
"style": {
|
||||
"marginBottom": "0"
|
||||
},
|
||||
"label": "项目类型："
|
||||
},
|
||||
"children": [{
|
||||
"componentName": "Select",
|
||||
"id": "node_dockcy8n9xet",
|
||||
"props": {
|
||||
"mode": "single",
|
||||
"hasArrow": true,
|
||||
"cacheValue": true,
|
||||
"style": {
|
||||
"width": "200px"
|
||||
}
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
"componentName": "Form.Item",
|
||||
"id": "node_dockcy8n9xeu",
|
||||
"props": {
|
||||
"style": {
|
||||
"marginBottom": "0"
|
||||
},
|
||||
"label": "项目 ID："
|
||||
},
|
||||
"children": [{
|
||||
"componentName": "Input",
|
||||
"id": "node_dockcy8n9xev",
|
||||
"props": {
|
||||
"hasBorder": true,
|
||||
"size": "medium",
|
||||
"autoComplete": "off",
|
||||
"style": {
|
||||
"width": "200px"
|
||||
}
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
"componentName": "Button.Group",
|
||||
"id": "node_dockcy8n9xew",
|
||||
"props": {},
|
||||
"children": [{
|
||||
"componentName": "Button",
|
||||
"id": "node_dockcy8n9xex",
|
||||
"props": {
|
||||
"type": "primary",
|
||||
"style": {
|
||||
"margin": "0 5px 0 5px"
|
||||
},
|
||||
"htmlType": "submit"
|
||||
},
|
||||
"children": [{
|
||||
"componentName": "Icon",
|
||||
"id": "node_dockcy8n9xey",
|
||||
"props": {
|
||||
"type": "success"
|
||||
}
|
||||
}, "搜索"]
|
||||
}, {
|
||||
"componentName": "Button",
|
||||
"id": "node_dockcy8n9xe10",
|
||||
"props": {
|
||||
"type": "normal",
|
||||
"style": {
|
||||
"margin": "0 5px 0 5px"
|
||||
},
|
||||
"htmlType": "reset"
|
||||
},
|
||||
"提交"
|
||||
]
|
||||
}, {
|
||||
"componentName": "Button",
|
||||
"props": {
|
||||
"type": "normal",
|
||||
"style": {
|
||||
"margin": "0 5px 0 5px"
|
||||
},
|
||||
"htmlType": "reset"
|
||||
},
|
||||
"children": "重置"
|
||||
"children": ["清空"]
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
"componentName": "Box",
|
||||
"id": "node_dockcy8n9xe12",
|
||||
"props": {
|
||||
"style": {
|
||||
"justifyContent": "flex-end",
|
||||
"display": "flex",
|
||||
"backgroundColor": "#ffffff",
|
||||
"flexDirection": "row",
|
||||
"paddingRight": "24px"
|
||||
}
|
||||
},
|
||||
"children": [{
|
||||
"componentName": "Button",
|
||||
"id": "node_dockcy8n9xe13",
|
||||
"props": {
|
||||
"prefix": "next-",
|
||||
"type": "primary",
|
||||
"size": "medium",
|
||||
"htmlType": "button",
|
||||
"component": "button",
|
||||
"style": {
|
||||
"width": "100px"
|
||||
},
|
||||
"events": {
|
||||
"onClick": {
|
||||
"type": "JSFunction",
|
||||
"value": "function(){ this.onClick() }",
|
||||
"__eventData": {
|
||||
"type": "componentEvent",
|
||||
"name": "onClick",
|
||||
"relatedEventName": "onClick"
|
||||
}
|
||||
}
|
||||
},
|
||||
"__events": [{
|
||||
"type": "componentEvent",
|
||||
"name": "onClick",
|
||||
"relatedEventName": "onClick"
|
||||
}],
|
||||
"onClick": {
|
||||
"type": "JSFunction",
|
||||
"value": "function(){ this.onClick() }"
|
||||
}
|
||||
},
|
||||
"children": ["新建配置"]
|
||||
}]
|
||||
}, {
|
||||
"componentName": "Box",
|
||||
"id": "node_dockcy8n9xe15",
|
||||
"props": {
|
||||
"style": {
|
||||
"backgroundColor": "#ffffff"
|
||||
}
|
||||
},
|
||||
"children": [{
|
||||
"componentName": "Table",
|
||||
"id": "node_dockcy8n9xe16",
|
||||
"props": {
|
||||
"dataSource": [{
|
||||
"firstCategory": "其他",
|
||||
"secondCategory": "新品预览",
|
||||
"leafCategory": "",
|
||||
"projectType": "标识判断",
|
||||
"projectId": "",
|
||||
"title": "其他类目->新品预览类目类型知识库",
|
||||
"url": "其他",
|
||||
"operation": "编辑"
|
||||
}, {
|
||||
"firstCategory": "其他",
|
||||
"secondCategory": "新品预览",
|
||||
"leafCategory": "",
|
||||
"projectType": "",
|
||||
"projectId": "1",
|
||||
"title": "其他类目->新品预览项目Id知识库",
|
||||
"url": "其他",
|
||||
"operation": "编辑"
|
||||
}],
|
||||
"size": "medium",
|
||||
"prefix": "next-",
|
||||
"hasBorder": true,
|
||||
"hasHeader": true,
|
||||
"isZebra": false,
|
||||
"loading": false,
|
||||
"expandedIndexSimulate": false,
|
||||
"primaryKey": "id",
|
||||
"locale": "zhCN.Table",
|
||||
"crossline": false,
|
||||
"style": {
|
||||
"margin": "24px 12px 24px 12px"
|
||||
}
|
||||
},
|
||||
"children": [{
|
||||
"componentName": "Table.Column",
|
||||
"id": "node_dockcy8n9xe17",
|
||||
"props": {
|
||||
"title": "一级类目",
|
||||
"dataIndex": "firstCategory"
|
||||
}
|
||||
}, {
|
||||
"componentName": "Table.Column",
|
||||
"id": "node_dockcy8n9xe18",
|
||||
"props": {
|
||||
"title": "二级类目",
|
||||
"dataIndex": "secondCategory"
|
||||
}
|
||||
}, {
|
||||
"componentName": "Table.Column",
|
||||
"id": "node_dockcy8n9xe19",
|
||||
"props": {
|
||||
"title": "叶子类目",
|
||||
"dataIndex": "leafCategory"
|
||||
}
|
||||
}, {
|
||||
"componentName": "Table.Column",
|
||||
"id": "node_dockcy8n9xe1a",
|
||||
"props": {
|
||||
"title": "项目类型",
|
||||
"dataIndex": "projectType"
|
||||
}
|
||||
}, {
|
||||
"componentName": "Table.Column",
|
||||
"id": "node_dockcy8n9xe1b",
|
||||
"props": {
|
||||
"title": "项目 ID",
|
||||
"dataIndex": "projectId"
|
||||
}
|
||||
}, {
|
||||
"componentName": "Table.Column",
|
||||
"id": "node_dockcy8n9xe1c",
|
||||
"props": {
|
||||
"title": "知识条标题",
|
||||
"dataIndex": "title"
|
||||
}
|
||||
}, {
|
||||
"componentName": "Table.Column",
|
||||
"id": "node_dockcy8n9xe1d",
|
||||
"props": {
|
||||
"title": "知识条链接",
|
||||
"dataIndex": "url"
|
||||
}
|
||||
}, {
|
||||
"componentName": "Table.Column",
|
||||
"id": "node_dockcy8n9xe1e",
|
||||
"props": {
|
||||
"title": "操作",
|
||||
"dataIndex": "operation"
|
||||
}
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
"componentName": "Box",
|
||||
"id": "node_dockcy8n9xe1f",
|
||||
"props": {
|
||||
"style": {
|
||||
"backgroundColor": "#ffffff",
|
||||
"paddingBottom": "24px"
|
||||
}
|
||||
},
|
||||
"children": [{
|
||||
"componentName": "Pagination",
|
||||
"id": "node_dockcy8n9xe1g",
|
||||
"props": {
|
||||
"prefix": "next-",
|
||||
"type": "normal",
|
||||
"shape": "normal",
|
||||
"size": "medium",
|
||||
"defaultCurrent": 1,
|
||||
"total": 100,
|
||||
"pageShowCount": 5,
|
||||
"pageSize": 10,
|
||||
"pageSizePosition": "start",
|
||||
"showJump": true,
|
||||
"style": {
|
||||
"display": "flex",
|
||||
"justifyContent": "flex-end"
|
||||
}
|
||||
}
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
"componentName": "Dialog",
|
||||
"id": "node_dockcy8n9xe1h",
|
||||
"props": {
|
||||
"prefix": "next-",
|
||||
"footerAlign": "right",
|
||||
"footerActions": ["ok", "cancel"],
|
||||
"closeable": "esc,close",
|
||||
"hasMask": true,
|
||||
"align": "cc cc",
|
||||
"minMargin": 40,
|
||||
"visible": {
|
||||
"type": "JSExpression",
|
||||
"value": "this.state.isShowDialog"
|
||||
},
|
||||
"children": {
|
||||
"type": "JSSlot"
|
||||
},
|
||||
"title": "标题",
|
||||
"footer": {
|
||||
"type": "JSSlot"
|
||||
},
|
||||
"events": []
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
||||
@ -24,8 +24,8 @@ interface IModuleInfo {
|
||||
|
||||
function getDirFromRoot(root: IResultDir, path: string[]): IResultDir {
|
||||
let current: IResultDir = root;
|
||||
path.forEach(p => {
|
||||
const exist = current.dirs.find(d => d.name === p);
|
||||
path.forEach((p) => {
|
||||
const exist = current.dirs.find((d) => d.name === p);
|
||||
if (exist) {
|
||||
current = exist;
|
||||
} else {
|
||||
@ -57,7 +57,7 @@ export class ProjectBuilder implements IProjectBuilder {
|
||||
this.postProcessors = postProcessors;
|
||||
}
|
||||
|
||||
public async generateProject(schema: IProjectSchema | string): Promise<IResultDir> {
|
||||
async generateProject(schema: IProjectSchema | string): Promise<IResultDir> {
|
||||
// Init
|
||||
const schemaParser: ISchemaParser = new SchemaParser();
|
||||
const builders = this.createModuleBuilders();
|
||||
@ -76,7 +76,7 @@ export class ProjectBuilder implements IProjectBuilder {
|
||||
// components
|
||||
// pages
|
||||
const containerBuildResult: IModuleInfo[] = await Promise.all<IModuleInfo>(
|
||||
parseResult.containers.map(async containerInfo => {
|
||||
parseResult.containers.map(async (containerInfo) => {
|
||||
let builder: IModuleBuilder;
|
||||
let path: string[];
|
||||
if (containerInfo.containerType === 'Page') {
|
||||
@ -100,9 +100,7 @@ export class ProjectBuilder implements IProjectBuilder {
|
||||
|
||||
// router
|
||||
if (parseResult.globalRouter && builders.router) {
|
||||
const { files } = await builders.router.generateModule(
|
||||
parseResult.globalRouter,
|
||||
);
|
||||
const { files } = await builders.router.generateModule(parseResult.globalRouter);
|
||||
|
||||
buildResult.push({
|
||||
path: this.template.slots.router.path,
|
||||
@ -112,9 +110,7 @@ export class ProjectBuilder implements IProjectBuilder {
|
||||
|
||||
// entry
|
||||
if (parseResult.project && builders.entry) {
|
||||
const { files } = await builders.entry.generateModule(
|
||||
parseResult.project,
|
||||
);
|
||||
const { files } = await builders.entry.generateModule(parseResult.project);
|
||||
|
||||
buildResult.push({
|
||||
path: this.template.slots.entry.path,
|
||||
@ -122,14 +118,8 @@ export class ProjectBuilder implements IProjectBuilder {
|
||||
});
|
||||
}
|
||||
// constants?
|
||||
if (
|
||||
parseResult.project &&
|
||||
builders.constants &&
|
||||
this.template.slots.constants
|
||||
) {
|
||||
const { files } = await builders.constants.generateModule(
|
||||
parseResult.project,
|
||||
);
|
||||
if (parseResult.project && builders.constants && this.template.slots.constants) {
|
||||
const { files } = await builders.constants.generateModule(parseResult.project);
|
||||
|
||||
buildResult.push({
|
||||
path: this.template.slots.constants.path,
|
||||
@ -137,14 +127,8 @@ export class ProjectBuilder implements IProjectBuilder {
|
||||
});
|
||||
}
|
||||
// utils?
|
||||
if (
|
||||
parseResult.globalUtils &&
|
||||
builders.utils &&
|
||||
this.template.slots.utils
|
||||
) {
|
||||
const { files } = await builders.utils.generateModule(
|
||||
parseResult.globalUtils,
|
||||
);
|
||||
if (parseResult.globalUtils && builders.utils && this.template.slots.utils) {
|
||||
const { files } = await builders.utils.generateModule(parseResult.globalUtils);
|
||||
|
||||
buildResult.push({
|
||||
path: this.template.slots.utils.path,
|
||||
@ -153,9 +137,7 @@ export class ProjectBuilder implements IProjectBuilder {
|
||||
}
|
||||
// i18n?
|
||||
if (parseResult.globalI18n && builders.i18n && this.template.slots.i18n) {
|
||||
const { files } = await builders.i18n.generateModule(
|
||||
parseResult.globalI18n,
|
||||
);
|
||||
const { files } = await builders.i18n.generateModule(parseResult.globalI18n);
|
||||
|
||||
buildResult.push({
|
||||
path: this.template.slots.i18n.path,
|
||||
@ -164,9 +146,7 @@ export class ProjectBuilder implements IProjectBuilder {
|
||||
}
|
||||
// globalStyle
|
||||
if (parseResult.project && builders.globalStyle) {
|
||||
const { files } = await builders.globalStyle.generateModule(
|
||||
parseResult.project,
|
||||
);
|
||||
const { files } = await builders.globalStyle.generateModule(parseResult.project);
|
||||
|
||||
buildResult.push({
|
||||
path: this.template.slots.globalStyle.path,
|
||||
@ -175,9 +155,7 @@ export class ProjectBuilder implements IProjectBuilder {
|
||||
}
|
||||
// htmlEntry
|
||||
if (parseResult.project && builders.htmlEntry) {
|
||||
const { files } = await builders.htmlEntry.generateModule(
|
||||
parseResult.project,
|
||||
);
|
||||
const { files } = await builders.htmlEntry.generateModule(parseResult.project);
|
||||
|
||||
buildResult.push({
|
||||
path: this.template.slots.htmlEntry.path,
|
||||
@ -186,9 +164,7 @@ export class ProjectBuilder implements IProjectBuilder {
|
||||
}
|
||||
// packageJSON
|
||||
if (parseResult.project && builders.packageJSON) {
|
||||
const { files } = await builders.packageJSON.generateModule(
|
||||
parseResult.project,
|
||||
);
|
||||
const { files } = await builders.packageJSON.generateModule(parseResult.project);
|
||||
|
||||
buildResult.push({
|
||||
path: this.template.slots.packageJSON.path,
|
||||
@ -199,14 +175,14 @@ export class ProjectBuilder implements IProjectBuilder {
|
||||
// Post Process
|
||||
|
||||
// Combine Modules
|
||||
buildResult.forEach(moduleInfo => {
|
||||
buildResult.forEach((moduleInfo) => {
|
||||
let targetDir = getDirFromRoot(projectRoot, moduleInfo.path);
|
||||
if (moduleInfo.moduleName) {
|
||||
const dir = new ResultDir(moduleInfo.moduleName);
|
||||
targetDir.addDirectory(dir);
|
||||
targetDir = dir;
|
||||
}
|
||||
moduleInfo.files.forEach(file => targetDir.addFile(file));
|
||||
moduleInfo.files.forEach((file) => targetDir.addFile(file));
|
||||
});
|
||||
|
||||
return projectRoot;
|
||||
@ -215,7 +191,7 @@ export class ProjectBuilder implements IProjectBuilder {
|
||||
private createModuleBuilders(): Record<string, IModuleBuilder> {
|
||||
const builders: Record<string, IModuleBuilder> = {};
|
||||
|
||||
Object.keys(this.plugins).forEach(pluginName => {
|
||||
Object.keys(this.plugins).forEach((pluginName) => {
|
||||
if (this.plugins[pluginName].length > 0) {
|
||||
const options: { mainFileName?: string } = {};
|
||||
if (this.template.slots[pluginName] && this.template.slots[pluginName].fileName) {
|
||||
|
||||
@ -11,11 +11,7 @@ import createRecoreProjectBuilder from './solutions/recore';
|
||||
|
||||
// 引入说明
|
||||
import { REACT_CHUNK_NAME } from './plugins/component/react/const';
|
||||
import {
|
||||
COMMON_CHUNK_NAME,
|
||||
CLASS_DEFINE_CHUNK_NAME,
|
||||
DEFAULT_LINK_AFTER,
|
||||
} from './const/generator';
|
||||
import { COMMON_CHUNK_NAME, CLASS_DEFINE_CHUNK_NAME, DEFAULT_LINK_AFTER } from './const/generator';
|
||||
|
||||
// 引入通用插件组
|
||||
import esmodule from './plugins/common/esmodule';
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
|
||||
import { SUPPORT_SCHEMA_VERSION_LIST } from '../const';
|
||||
|
||||
import { handleChildren } from '../utils/nodeToJSX';
|
||||
import { handleSubNodes } from '../utils/nodeToJSX';
|
||||
import { uniqueArray } from '../utils/common';
|
||||
|
||||
import {
|
||||
@ -198,11 +198,15 @@ class SchemaParser implements ISchemaParser {
|
||||
}
|
||||
|
||||
getComponentNames(children: ChildNodeType): string[] {
|
||||
return handleChildren<string>(children, {
|
||||
node: (i: IComponentNodeItem) => [i.componentName],
|
||||
}, {
|
||||
rerun: true,
|
||||
});
|
||||
return handleSubNodes<string>(
|
||||
children,
|
||||
{
|
||||
node: (i: IComponentNodeItem) => [i.componentName],
|
||||
},
|
||||
{
|
||||
rerun: true,
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -15,6 +15,8 @@ import {
|
||||
IWithDependency,
|
||||
} from '../../types';
|
||||
|
||||
import { isValidIdentifier } from '../../utils/validate';
|
||||
|
||||
function groupDepsByPack(deps: IDependency[]): Record<string, IDependency[]> {
|
||||
const depMap: Record<string, IDependency[]> = {};
|
||||
|
||||
@ -25,48 +27,53 @@ function groupDepsByPack(deps: IDependency[]): Record<string, IDependency[]> {
|
||||
depMap[pkg].push(dep);
|
||||
};
|
||||
|
||||
deps.forEach(dep => {
|
||||
// TODO: main 这个信息到底怎么用，是不是外部包不需要使用？
|
||||
// deps.forEach(dep => {
|
||||
// if (dep.dependencyType === DependencyType.Internal) {
|
||||
// addDep(
|
||||
// `${(dep as IInternalDependency).moduleName}${`/${dep.main}` || ''}`,
|
||||
// dep,
|
||||
// );
|
||||
// } else {
|
||||
// addDep(`${(dep as IExternalDependency).package}${`/${dep.main}` || ''}`, dep);
|
||||
// }
|
||||
// });
|
||||
|
||||
deps.forEach((dep) => {
|
||||
if (dep.dependencyType === DependencyType.Internal) {
|
||||
addDep(
|
||||
`${(dep as IInternalDependency).moduleName}${`/${dep.main}` || ''}`,
|
||||
dep,
|
||||
);
|
||||
addDep(`${(dep as IInternalDependency).moduleName}`, dep);
|
||||
} else {
|
||||
addDep(`${(dep as IExternalDependency).package}${`/${dep.main}` || ''}`, dep);
|
||||
addDep(`${(dep as IExternalDependency).package}`, dep);
|
||||
}
|
||||
});
|
||||
|
||||
return depMap;
|
||||
}
|
||||
|
||||
function buildPackageImport(
|
||||
pkg: string,
|
||||
deps: IDependency[],
|
||||
targetFileType: string,
|
||||
): ICodeChunk[] {
|
||||
function buildPackageImport(pkg: string, deps: IDependency[], targetFileType: string): ICodeChunk[] {
|
||||
const chunks: ICodeChunk[] = [];
|
||||
let defaultImport: string = '';
|
||||
let defaultImportAs: string = '';
|
||||
let defaultImport = '';
|
||||
let defaultImportAs = '';
|
||||
const imports: Record<string, string> = {};
|
||||
|
||||
deps.forEach(dep => {
|
||||
deps.forEach((dep) => {
|
||||
const srcName = dep.exportName;
|
||||
let targetName = dep.importName || dep.exportName;
|
||||
if (dep.subName) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (dep.subName) {
|
||||
chunks.push({
|
||||
type: ChunkType.STRING,
|
||||
fileType: targetFileType,
|
||||
name: COMMON_CHUNK_NAME.FileVarDefine,
|
||||
content: `const ${targetName} = ${srcName}.${dep.subName};`,
|
||||
linkAfter: [
|
||||
COMMON_CHUNK_NAME.ExternalDepsImport,
|
||||
COMMON_CHUNK_NAME.InternalDepsImport,
|
||||
],
|
||||
});
|
||||
if (targetName !== `${srcName}.${dep.subName}`) {
|
||||
if (!isValidIdentifier(targetName)) {
|
||||
throw new CodeGeneratorError(`Invalid Identifier [${targetName}]`);
|
||||
}
|
||||
|
||||
chunks.push({
|
||||
type: ChunkType.STRING,
|
||||
fileType: targetFileType,
|
||||
name: COMMON_CHUNK_NAME.FileVarDefine,
|
||||
content: `const ${targetName} = ${srcName}.${dep.subName};`,
|
||||
linkAfter: [COMMON_CHUNK_NAME.ExternalDepsImport, COMMON_CHUNK_NAME.InternalDepsImport],
|
||||
});
|
||||
}
|
||||
|
||||
targetName = srcName;
|
||||
}
|
||||
@ -74,18 +81,14 @@ function buildPackageImport(
|
||||
if (dep.destructuring) {
|
||||
imports[srcName] = targetName;
|
||||
} else if (defaultImport) {
|
||||
throw new CodeGeneratorError(
|
||||
`[${pkg}] has more than one default export.`,
|
||||
);
|
||||
throw new CodeGeneratorError(`[${pkg}] has more than one default export.`);
|
||||
} else {
|
||||
defaultImport = srcName;
|
||||
defaultImportAs = targetName;
|
||||
}
|
||||
});
|
||||
|
||||
const items = Object.keys(imports).map(src =>
|
||||
src === imports[src] ? src : `${src} as ${imports[src]}`,
|
||||
);
|
||||
const items = Object.keys(imports).map((src) => (src === imports[src] ? src : `${src} as ${imports[src]}`));
|
||||
|
||||
const statementL = ['import'];
|
||||
if (defaultImport) {
|
||||
@ -125,7 +128,7 @@ function buildPackageImport(
|
||||
|
||||
type PluginConfig = {
|
||||
fileType: string;
|
||||
}
|
||||
};
|
||||
|
||||
const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?: PluginConfig) => {
|
||||
const cfg: PluginConfig = {
|
||||
@ -143,9 +146,9 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?: Plu
|
||||
if (ir && ir.deps && ir.deps.length > 0) {
|
||||
const packs = groupDepsByPack(ir.deps);
|
||||
|
||||
Object.keys(packs).forEach(pkg => {
|
||||
Object.keys(packs).forEach((pkg) => {
|
||||
const chunks = buildPackageImport(pkg, packs[pkg], cfg.fileType);
|
||||
next.chunks.push.apply(next.chunks, chunks);
|
||||
next.chunks.push(...chunks);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -1,28 +1,23 @@
|
||||
import { CLASS_DEFINE_CHUNK_NAME, DEFAULT_LINK_AFTER } from '../../../const/generator';
|
||||
import { REACT_CHUNK_NAME } from './const';
|
||||
|
||||
import {
|
||||
getFuncExprBody,
|
||||
transformFuncExpr2MethodMember,
|
||||
} from '../../../utils/jsExpression';
|
||||
import { generateFunction } from '../../../utils/jsExpression';
|
||||
|
||||
import {
|
||||
BuilderComponentPlugin,
|
||||
BuilderComponentPluginFactory,
|
||||
ChunkType,
|
||||
CodeGeneratorError,
|
||||
FileType,
|
||||
ICodeChunk,
|
||||
ICodeStruct,
|
||||
IContainerInfo,
|
||||
IJSExpression,
|
||||
} from '../../../types';
|
||||
|
||||
type PluginConfig = {
|
||||
fileType: string;
|
||||
exportNameMapping: Record<string, string>;
|
||||
normalizeNameMapping: Record<string, string>;
|
||||
}
|
||||
};
|
||||
|
||||
const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) => {
|
||||
const cfg: PluginConfig = {
|
||||
@ -41,7 +36,7 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
|
||||
|
||||
if (ir.lifeCycles) {
|
||||
const lifeCycles = ir.lifeCycles;
|
||||
const chunks = Object.keys(lifeCycles).map<ICodeChunk>(lifeCycleName => {
|
||||
const chunks = Object.keys(lifeCycles).map<ICodeChunk>((lifeCycleName) => {
|
||||
const normalizeName = cfg.normalizeNameMapping[lifeCycleName] || lifeCycleName;
|
||||
const exportName = cfg.exportNameMapping[lifeCycleName] || lifeCycleName;
|
||||
if (normalizeName === 'constructor') {
|
||||
@ -49,9 +44,7 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
|
||||
type: ChunkType.STRING,
|
||||
fileType: cfg.fileType,
|
||||
name: CLASS_DEFINE_CHUNK_NAME.ConstructorContent,
|
||||
content: getFuncExprBody(
|
||||
(lifeCycles[lifeCycleName] as IJSExpression).value,
|
||||
),
|
||||
content: generateFunction(lifeCycles[lifeCycleName], { isBlock: true }),
|
||||
linkAfter: [...DEFAULT_LINK_AFTER[CLASS_DEFINE_CHUNK_NAME.ConstructorStart]],
|
||||
};
|
||||
}
|
||||
@ -60,9 +53,7 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
|
||||
type: ChunkType.STRING,
|
||||
fileType: cfg.fileType,
|
||||
name: REACT_CHUNK_NAME.ClassRenderPre,
|
||||
content: getFuncExprBody(
|
||||
(lifeCycles[lifeCycleName] as IJSExpression).value,
|
||||
),
|
||||
content: generateFunction(lifeCycles[lifeCycleName], { isBlock: true }),
|
||||
linkAfter: [REACT_CHUNK_NAME.ClassRenderStart],
|
||||
};
|
||||
}
|
||||
@ -71,15 +62,12 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
|
||||
type: ChunkType.STRING,
|
||||
fileType: cfg.fileType,
|
||||
name: CLASS_DEFINE_CHUNK_NAME.InsMethod,
|
||||
content: transformFuncExpr2MethodMember(
|
||||
exportName,
|
||||
(lifeCycles[lifeCycleName] as IJSExpression).value,
|
||||
),
|
||||
content: generateFunction(lifeCycles[lifeCycleName], { name: exportName, isMember: true }),
|
||||
linkAfter: [...DEFAULT_LINK_AFTER[CLASS_DEFINE_CHUNK_NAME.InsMethod]],
|
||||
};
|
||||
});
|
||||
|
||||
next.chunks.push.apply(next.chunks, chunks);
|
||||
next.chunks.push(...chunks);
|
||||
}
|
||||
|
||||
return next;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { CLASS_DEFINE_CHUNK_NAME, DEFAULT_LINK_AFTER } from '../../../const/generator';
|
||||
|
||||
import { transformFuncExpr2MethodMember } from '../../../utils/jsExpression';
|
||||
import { generateFunction } from '../../../utils/jsExpression';
|
||||
|
||||
import {
|
||||
BuilderComponentPlugin,
|
||||
@ -10,12 +10,11 @@ import {
|
||||
ICodeChunk,
|
||||
ICodeStruct,
|
||||
IContainerInfo,
|
||||
IJSExpression,
|
||||
} from '../../../types';
|
||||
|
||||
type PluginConfig = {
|
||||
fileType: string;
|
||||
}
|
||||
};
|
||||
|
||||
const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) => {
|
||||
const cfg: PluginConfig = {
|
||||
@ -32,18 +31,15 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
|
||||
|
||||
if (ir.methods) {
|
||||
const methods = ir.methods;
|
||||
const chunks = Object.keys(methods).map<ICodeChunk>(methodName => ({
|
||||
const chunks = Object.keys(methods).map<ICodeChunk>((methodName) => ({
|
||||
type: ChunkType.STRING,
|
||||
fileType: cfg.fileType,
|
||||
name: CLASS_DEFINE_CHUNK_NAME.InsMethod,
|
||||
content: transformFuncExpr2MethodMember(
|
||||
methodName,
|
||||
(methods[methodName] as IJSExpression).value,
|
||||
),
|
||||
content: generateFunction(methods[methodName], { name: methodName, isMember: true }),
|
||||
linkAfter: [...DEFAULT_LINK_AFTER[CLASS_DEFINE_CHUNK_NAME.InsMethod]],
|
||||
}));
|
||||
|
||||
next.chunks.push.apply(next.chunks, chunks);
|
||||
next.chunks.push(...chunks);
|
||||
}
|
||||
|
||||
return next;
|
||||
|
||||
@ -29,14 +29,11 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
|
||||
const ir = next.ir as IContainerInfo;
|
||||
if (ir.dataSource) {
|
||||
const { dataSource } = ir;
|
||||
const {
|
||||
list,
|
||||
...rest
|
||||
} = dataSource;
|
||||
const { list, ...rest } = dataSource;
|
||||
|
||||
let attrs: string[] = [];
|
||||
|
||||
const extConfigs = Object.keys(rest).map(extConfigName => {
|
||||
const extConfigs = Object.keys(rest).map((extConfigName) => {
|
||||
const value = (rest as Record<string, CompositeValue>)[extConfigName];
|
||||
const [isString, valueStr] = generateCompositeType(value);
|
||||
return `${extConfigName}: ${isString ? `'${valueStr}'` : valueStr}`;
|
||||
@ -44,9 +41,13 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
|
||||
|
||||
attrs = [...attrs, ...extConfigs];
|
||||
|
||||
const listProp = handleStringValueDefault(generateCompositeType(list as unknown as CompositeValue, {
|
||||
expression: packJsExpression,
|
||||
}));
|
||||
const listProp = handleStringValueDefault(
|
||||
generateCompositeType((list as unknown) as CompositeValue, {
|
||||
handlers: {
|
||||
expression: packJsExpression,
|
||||
},
|
||||
}),
|
||||
);
|
||||
|
||||
attrs.push(`list: ${listProp}`);
|
||||
|
||||
|
||||
@ -5,23 +5,26 @@ import {
|
||||
ICodeStruct,
|
||||
IContainerInfo,
|
||||
IComponentNodeItem,
|
||||
INodeGeneratorContext,
|
||||
CodePiece,
|
||||
PIECE_TYPE,
|
||||
} from '../../../types';
|
||||
import { COMMON_CHUNK_NAME, DEFAULT_LINK_AFTER } from '../../../const/generator';
|
||||
import { COMMON_CHUNK_NAME } from '../../../const/generator';
|
||||
|
||||
import { createNodeGenerator, generateString } from '../../../utils/nodeToJSX';
|
||||
import { generateExpression } from '../../../utils/jsExpression';
|
||||
import { generateCompositeType, handleStringValueDefault } from '../../../utils/compositeType';
|
||||
|
||||
const generateGlobalProps = (nodeItem: IComponentNodeItem): CodePiece[] => {
|
||||
return [{
|
||||
value: `{...globalProps.${nodeItem.componentName}}`,
|
||||
type: PIECE_TYPE.ATTR,
|
||||
}];
|
||||
const generateGlobalProps = (ctx: INodeGeneratorContext, nodeItem: IComponentNodeItem): CodePiece[] => {
|
||||
return [
|
||||
{
|
||||
value: `{...globalProps.${nodeItem.componentName}}`,
|
||||
type: PIECE_TYPE.ATTR,
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
const generateCtrlLine = (nodeItem: IComponentNodeItem): CodePiece[] => {
|
||||
const generateCtrlLine = (ctx: INodeGeneratorContext, nodeItem: IComponentNodeItem): CodePiece[] => {
|
||||
const pieces: CodePiece[] = [];
|
||||
|
||||
if (nodeItem.loop && nodeItem.loopArgs) {
|
||||
@ -49,13 +52,13 @@ const generateCtrlLine = (nodeItem: IComponentNodeItem): CodePiece[] => {
|
||||
};
|
||||
|
||||
const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
|
||||
const generator = createNodeGenerator({
|
||||
string: generateString,
|
||||
expression: (input) => [generateExpression(input)],
|
||||
}, [
|
||||
generateGlobalProps,
|
||||
generateCtrlLine,
|
||||
]);
|
||||
const generator = createNodeGenerator(
|
||||
{
|
||||
string: generateString,
|
||||
expression: (input) => [generateExpression(input)],
|
||||
},
|
||||
[generateGlobalProps, generateCtrlLine],
|
||||
);
|
||||
|
||||
const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
|
||||
const next: ICodeStruct = {
|
||||
|
||||
@ -26,10 +26,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
|
||||
content: `
|
||||
const constantConfig = ${constantStr};
|
||||
`,
|
||||
linkAfter: [
|
||||
COMMON_CHUNK_NAME.ExternalDepsImport,
|
||||
COMMON_CHUNK_NAME.InternalDepsImport,
|
||||
],
|
||||
linkAfter: [COMMON_CHUNK_NAME.ExternalDepsImport, COMMON_CHUNK_NAME.InternalDepsImport],
|
||||
});
|
||||
|
||||
next.chunks.push({
|
||||
|
||||
@ -59,6 +59,7 @@ export default function createIceJsProjectBuilder(): IProjectBuilder {
|
||||
Component: 'div',
|
||||
Page: 'div',
|
||||
Block: 'div',
|
||||
// Box: 'div',
|
||||
},
|
||||
}),
|
||||
css(),
|
||||
@ -72,6 +73,6 @@ export default function createIceJsProjectBuilder(): IProjectBuilder {
|
||||
htmlEntry: [icejs.plugins.entryHtml()],
|
||||
packageJSON: [icejs.plugins.packageJSON()],
|
||||
},
|
||||
postProcessors: [prettier()],
|
||||
postProcessors: [prettier()], // prettier()
|
||||
});
|
||||
}
|
||||
|
||||
@ -53,17 +53,12 @@ export interface ICodeStruct extends IBaseCodeStruct {
|
||||
chunks: ICodeChunk[];
|
||||
}
|
||||
|
||||
export type BuilderComponentPlugin = (
|
||||
initStruct: ICodeStruct,
|
||||
) => Promise<ICodeStruct>;
|
||||
export type BuilderComponentPlugin = (initStruct: ICodeStruct) => Promise<ICodeStruct>;
|
||||
|
||||
export type BuilderComponentPluginFactory<T> = (config?: T) => BuilderComponentPlugin;
|
||||
|
||||
export interface IChunkBuilder {
|
||||
run(
|
||||
ir: any,
|
||||
initialStructure?: ICodeStruct,
|
||||
): Promise<{ chunks: ICodeChunk[][] }>;
|
||||
run(ir: any, initialStructure?: ICodeStruct): Promise<{ chunks: ICodeChunk[][] }>;
|
||||
getPlugins(): BuilderComponentPlugin[];
|
||||
addPlugin(plugin: BuilderComponentPlugin): void;
|
||||
}
|
||||
@ -80,10 +75,7 @@ export interface ICompiledModule {
|
||||
export interface IModuleBuilder {
|
||||
generateModule(input: unknown): Promise<ICompiledModule>;
|
||||
generateModuleCode(schema: IBasicSchema | string): Promise<IResultDir>;
|
||||
linkCodeChunks(
|
||||
chunks: Record<string, ICodeChunk[]>,
|
||||
fileName: string,
|
||||
): IResultFile[];
|
||||
linkCodeChunks(chunks: Record<string, ICodeChunk[]>, fileName: string): IResultFile[];
|
||||
addPlugin(plugin: BuilderComponentPlugin): void;
|
||||
}
|
||||
|
||||
@ -154,7 +146,7 @@ export enum PIECE_TYPE {
|
||||
ATTR = 'NodeCodePieceAttr',
|
||||
CHILDREN = 'NodeCodePieceChildren',
|
||||
AFTER = 'NodeCodePieceAfter',
|
||||
};
|
||||
}
|
||||
|
||||
export interface CodePiece {
|
||||
value: string;
|
||||
@ -168,14 +160,35 @@ export interface HandlerSet<T> {
|
||||
common?: (input: unknown) => T[];
|
||||
}
|
||||
|
||||
export type ExtGeneratorPlugin = (nodeItem: IComponentNodeItem) => CodePiece[];
|
||||
export type ExtGeneratorPlugin = (ctx: INodeGeneratorContext, nodeItem: IComponentNodeItem) => CodePiece[];
|
||||
|
||||
export interface INodeGeneratorConfig {
|
||||
nodeTypeMapping?: Record<string, string>;
|
||||
}
|
||||
|
||||
export type NodeGenerator = (nodeItem: IComponentNodeItem) => string;
|
||||
|
||||
export interface INodeGeneratorContext {
|
||||
generator: NodeGenerator;
|
||||
}
|
||||
|
||||
// export interface InteratorScope {
|
||||
// [$item: string]: string; // $item 默认取值 "item"
|
||||
// [$index: string]: string | number; // $index 默认取值 "index"
|
||||
// __proto__: BlockInstance;
|
||||
// }
|
||||
|
||||
export type CompositeValueCustomHandler = (data: unknown) => string;
|
||||
export interface CompositeValueCustomHandlerSet {
|
||||
boolean?: CompositeValueCustomHandler;
|
||||
number?: CompositeValueCustomHandler;
|
||||
string?: CompositeValueCustomHandler;
|
||||
array?: CompositeValueCustomHandler;
|
||||
object?: CompositeValueCustomHandler;
|
||||
expression?: CompositeValueCustomHandler;
|
||||
}
|
||||
|
||||
export interface CompositeValueGeneratorOptions {
|
||||
handlers?: CompositeValueCustomHandlerSet;
|
||||
nodeGenerator?: NodeGenerator;
|
||||
}
|
||||
|
||||
@ -13,18 +13,37 @@ export interface IJSExpression {
|
||||
[extConfigName: string]: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* 搭建基础协议 - 函数定义
|
||||
*
|
||||
* @export
|
||||
* @interface IJSFunction
|
||||
*/
|
||||
export interface IJSFunction {
|
||||
type: 'JSFunction';
|
||||
value: string;
|
||||
[extConfigName: string]: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* 搭建基础协议 - 函数定义
|
||||
*
|
||||
* @export
|
||||
* @interface IJSSlot
|
||||
*/
|
||||
export interface IJSSlot {
|
||||
type: 'JSSlot';
|
||||
value: IComponentNodeItem[];
|
||||
params?: string[];
|
||||
[extConfigName: string]: any;
|
||||
}
|
||||
|
||||
// JSON 基本类型
|
||||
export interface IJSONObject {
|
||||
[key: string]: JSONValue;
|
||||
}
|
||||
|
||||
export type JSONValue =
|
||||
| boolean
|
||||
| string
|
||||
| number
|
||||
| null
|
||||
| JSONArray
|
||||
| IJSONObject;
|
||||
export type JSONValue = boolean | string | number | null | JSONArray | IJSONObject;
|
||||
export type JSONArray = JSONValue[];
|
||||
|
||||
export type CompositeArray = CompositeValue[];
|
||||
@ -33,11 +52,7 @@ export interface ICompositeObject {
|
||||
}
|
||||
|
||||
// 复合类型
|
||||
export type CompositeValue =
|
||||
| JSONValue
|
||||
| IJSExpression
|
||||
| CompositeArray
|
||||
| ICompositeObject;
|
||||
export type CompositeValue = JSONValue | IJSExpression | IJSFunction | IJSSlot | CompositeArray | ICompositeObject;
|
||||
|
||||
/**
|
||||
* 搭建基础协议 - 多语言描述
|
||||
@ -136,8 +151,8 @@ export interface IContainerNodeItem extends IComponentNodeItem {
|
||||
* • componentWillUnmount()
|
||||
* • componentDidCatch(error, info)
|
||||
*/
|
||||
lifeCycles?: Record<string, IJSExpression>; // 生命周期Hook方法
|
||||
methods?: Record<string, IJSExpression>; // 自定义方法设置
|
||||
lifeCycles?: Record<string, IJSExpression | IJSFunction>; // 生命周期Hook方法
|
||||
methods?: Record<string, IJSExpression | IJSFunction>; // 自定义方法设置
|
||||
dataSource?: {
|
||||
list: IDataSourceConfig[];
|
||||
}; // 异步数据源配置
|
||||
@ -154,9 +169,9 @@ export interface IDataSourceConfig {
|
||||
id: string; // 数据请求ID标识
|
||||
isInit: boolean; // 是否为初始数据 支持表达式 值为true时，将在组件初始化渲染时自动发送当前数据请求
|
||||
type: string; // 数据请求类型 'fetch' | 'mtop' | 'jsonp' | 'custom'
|
||||
requestHandler?: IJSExpression; // 自定义扩展的外部请求处理器 仅type='custom'时生效
|
||||
requestHandler?: IJSExpression | IJSFunction; // 自定义扩展的外部请求处理器 仅type='custom'时生效
|
||||
options?: IFetchOptions; // 请求参数配置 每种请求类型对应不同参数
|
||||
dataHandler?: IJSExpression; // 数据结果处理函数，形如：(data, err) => Object
|
||||
dataHandler?: IJSExpression | IJSFunction; // 数据结果处理函数，形如：(data, err) => Object
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -1,38 +1,40 @@
|
||||
import { CompositeArray, CompositeValue, ICompositeObject } from '../types';
|
||||
import { generateExpression, isJsExpression } from './jsExpression';
|
||||
import {
|
||||
CompositeArray,
|
||||
CompositeValue,
|
||||
ICompositeObject,
|
||||
CompositeValueGeneratorOptions,
|
||||
CodeGeneratorError,
|
||||
} from '../types';
|
||||
import { generateExpression, generateFunction, isJsExpression, isJsFunction } from './jsExpression';
|
||||
import { isJsSlot, generateJsSlot } from './jsSlot';
|
||||
|
||||
type CustomHandler = (data: unknown) => string;
|
||||
interface CustomHandlerSet {
|
||||
boolean?: CustomHandler;
|
||||
number?: CustomHandler;
|
||||
string?: CustomHandler;
|
||||
array?: CustomHandler;
|
||||
object?: CustomHandler;
|
||||
expression?: CustomHandler;
|
||||
}
|
||||
|
||||
function generateArray(
|
||||
value: CompositeArray,
|
||||
handlers: CustomHandlerSet = {},
|
||||
): string {
|
||||
const body = value.map(v => generateUnknownType(v, handlers)).join(',');
|
||||
function generateArray(value: CompositeArray, options: CompositeValueGeneratorOptions = {}): string {
|
||||
const body = value.map((v) => generateUnknownType(v, options)).join(',');
|
||||
return `[${body}]`;
|
||||
}
|
||||
|
||||
function generateObject(
|
||||
value: ICompositeObject,
|
||||
handlers: CustomHandlerSet = {},
|
||||
): string {
|
||||
function generateObject(value: ICompositeObject, options: CompositeValueGeneratorOptions = {}): string {
|
||||
if (isJsExpression(value)) {
|
||||
if (handlers.expression) {
|
||||
return handlers.expression(value);
|
||||
if (options.handlers && options.handlers.expression) {
|
||||
return options.handlers.expression(value);
|
||||
}
|
||||
return generateExpression(value);
|
||||
}
|
||||
|
||||
if (isJsFunction(value)) {
|
||||
return generateFunction(value, { isArrow: true });
|
||||
}
|
||||
|
||||
if (isJsSlot(value)) {
|
||||
if (options.nodeGenerator) {
|
||||
return generateJsSlot(value, options.nodeGenerator);
|
||||
}
|
||||
throw new CodeGeneratorError("Can't find Node Generator");
|
||||
}
|
||||
|
||||
const body = Object.keys(value)
|
||||
.map(key => {
|
||||
const v = generateUnknownType(value[key], handlers);
|
||||
.map((key) => {
|
||||
const v = generateUnknownType(value[key], options);
|
||||
return `${key}: ${v}`;
|
||||
})
|
||||
.join(',\n');
|
||||
@ -40,38 +42,35 @@ function generateObject(
|
||||
return `{${body}}`;
|
||||
}
|
||||
|
||||
export function generateUnknownType(
|
||||
value: CompositeValue,
|
||||
handlers: CustomHandlerSet = {},
|
||||
): string {
|
||||
export function generateUnknownType(value: CompositeValue, options: CompositeValueGeneratorOptions = {}): string {
|
||||
if (Array.isArray(value)) {
|
||||
if (handlers.array) {
|
||||
return handlers.array(value);
|
||||
if (options.handlers && options.handlers.array) {
|
||||
return options.handlers.array(value);
|
||||
}
|
||||
return generateArray(value as CompositeArray, handlers);
|
||||
return generateArray(value as CompositeArray, options);
|
||||
} else if (typeof value === 'object') {
|
||||
if (handlers.object) {
|
||||
return handlers.object(value);
|
||||
if (options.handlers && options.handlers.object) {
|
||||
return options.handlers.object(value);
|
||||
}
|
||||
return generateObject(value as ICompositeObject, handlers);
|
||||
return generateObject(value as ICompositeObject, options);
|
||||
} else if (typeof value === 'string') {
|
||||
if (handlers.string) {
|
||||
return handlers.string(value);
|
||||
if (options.handlers && options.handlers.string) {
|
||||
return options.handlers.string(value);
|
||||
}
|
||||
return `'${value}'`;
|
||||
} else if (typeof value === 'number' && handlers.number) {
|
||||
return handlers.number(value);
|
||||
} else if (typeof value === 'boolean' && handlers.boolean) {
|
||||
return handlers.boolean(value);
|
||||
} else if (typeof value === 'number' && options.handlers && options.handlers.number) {
|
||||
return options.handlers.number(value);
|
||||
} else if (typeof value === 'boolean' && options.handlers && options.handlers.boolean) {
|
||||
return options.handlers.boolean(value);
|
||||
}
|
||||
return `${value}`;
|
||||
}
|
||||
|
||||
export function generateCompositeType(
|
||||
value: CompositeValue,
|
||||
handlers: CustomHandlerSet = {},
|
||||
options: CompositeValueGeneratorOptions = {},
|
||||
): [boolean, string] {
|
||||
const result = generateUnknownType(value, handlers);
|
||||
const result = generateUnknownType(value, options);
|
||||
|
||||
if (result.substr(0, 1) === "'" && result.substr(-1, 1) === "'") {
|
||||
return [true, result.substring(1, result.length - 1)];
|
||||
|
||||
@ -1,39 +1,6 @@
|
||||
import traverse from '@babel/traverse';
|
||||
import * as parser from '@babel/parser';
|
||||
import { CodeGeneratorError, IJSExpression } from '../types';
|
||||
|
||||
let count = 0;
|
||||
|
||||
function test(functionBody: string) {
|
||||
console.log(functionBody);
|
||||
console.log('---->');
|
||||
try {
|
||||
const parseResult = parser.parse(functionBody);
|
||||
// console.log(JSON.stringify(parseResult));
|
||||
traverse(parseResult, {
|
||||
enter(path) {
|
||||
console.log('path: ', JSON.stringify(path));
|
||||
}
|
||||
});
|
||||
|
||||
if (count === 0) {
|
||||
count++;
|
||||
|
||||
test('this.aaa && this.bbb');
|
||||
}
|
||||
} catch (error) {
|
||||
// console.log('Error');
|
||||
console.log(error.message);
|
||||
}
|
||||
console.log('=====================');
|
||||
}
|
||||
|
||||
export function transformFuncExpr2MethodMember(
|
||||
methodName: string,
|
||||
functionBody: string,
|
||||
): string {
|
||||
// test(functionBody);
|
||||
import { CodeGeneratorError, IJSExpression, IJSFunction } from '../types';
|
||||
|
||||
export function transformFuncExpr2MethodMember(methodName: string, functionBody: string): string {
|
||||
const args = getFuncExprArguments(functionBody);
|
||||
const body = getFuncExprBody(functionBody);
|
||||
|
||||
@ -66,20 +33,60 @@ export function getFuncExprBody(functionBody: string) {
|
||||
return body;
|
||||
}
|
||||
|
||||
export function generateExpression(value: any): string {
|
||||
if (value && (value as IJSExpression).type === 'JSExpression') {
|
||||
// test((value as IJSExpression).value);
|
||||
export function getArrowFunction(functionBody: string) {
|
||||
const args = getFuncExprArguments(functionBody);
|
||||
const body = getFuncExprBody(functionBody);
|
||||
|
||||
return `(${args}) => { ${body} }`;
|
||||
}
|
||||
|
||||
export function isJsExpression(value: unknown): boolean {
|
||||
return value && typeof value === 'object' && (value as IJSExpression).type === 'JSExpression';
|
||||
}
|
||||
|
||||
export function isJsFunction(value: unknown): boolean {
|
||||
return value && typeof value === 'object' && (value as IJSFunction).type === 'JSFunction';
|
||||
}
|
||||
|
||||
export function isJsCode(value: unknown): boolean {
|
||||
return isJsExpression(value) || isJsFunction(value);
|
||||
}
|
||||
|
||||
export function generateExpression(value: any): string {
|
||||
if (isJsExpression(value)) {
|
||||
return (value as IJSExpression).value || 'null';
|
||||
}
|
||||
|
||||
throw new CodeGeneratorError('Not a JSExpression');
|
||||
}
|
||||
|
||||
export function isJsExpression(value: any): boolean {
|
||||
return (
|
||||
value &&
|
||||
typeof value === 'object' &&
|
||||
(value as IJSExpression).type === 'JSExpression'
|
||||
);
|
||||
export function generateFunction(
|
||||
value: any,
|
||||
config: {
|
||||
name?: string;
|
||||
isMember?: boolean;
|
||||
isBlock?: boolean;
|
||||
isArrow?: boolean;
|
||||
} = {
|
||||
name: undefined,
|
||||
isMember: false,
|
||||
isBlock: false,
|
||||
isArrow: false,
|
||||
},
|
||||
) {
|
||||
if (isJsCode(value)) {
|
||||
const functionCfg = value as IJSFunction;
|
||||
if (config.isMember) {
|
||||
return transformFuncExpr2MethodMember(config.name || '', functionCfg.value);
|
||||
}
|
||||
if (config.isBlock) {
|
||||
return getFuncExprBody(functionCfg.value);
|
||||
}
|
||||
if (config.isArrow) {
|
||||
return getArrowFunction(functionCfg.value);
|
||||
}
|
||||
return functionCfg.value;
|
||||
}
|
||||
|
||||
throw new CodeGeneratorError('Not a JSFunction or JSExpression');
|
||||
}
|
||||
|
||||
21
packages/code-generator/src/utils/jsSlot.ts
Normal file
21
packages/code-generator/src/utils/jsSlot.ts
Normal file
@ -0,0 +1,21 @@
|
||||
import { CodeGeneratorError, NodeGenerator, IJSSlot } from '../types';
|
||||
|
||||
export function isJsSlot(value: unknown): boolean {
|
||||
return value && typeof value === 'object' && (value as IJSSlot).type === 'JSSlot';
|
||||
}
|
||||
|
||||
export function generateJsSlot(value: any, generator: NodeGenerator): string {
|
||||
if (isJsSlot(value)) {
|
||||
const slotCfg = value as IJSSlot;
|
||||
if (!slotCfg.value) {
|
||||
return 'null';
|
||||
}
|
||||
const results = slotCfg.value.map((n) => generator(n));
|
||||
if (results.length === 1) {
|
||||
return results[0];
|
||||
}
|
||||
return `[${results.join(',')}]`;
|
||||
}
|
||||
|
||||
throw new CodeGeneratorError('Not a JSSlot');
|
||||
}
|
||||
@ -9,9 +9,11 @@ import {
|
||||
HandlerSet,
|
||||
ExtGeneratorPlugin,
|
||||
INodeGeneratorConfig,
|
||||
INodeGeneratorContext,
|
||||
NodeGenerator,
|
||||
} from '../types';
|
||||
import { generateCompositeType } from './compositeType';
|
||||
import { generateExpression } from './jsExpression';
|
||||
import { generateExpression, isJsExpression } from './jsExpression';
|
||||
|
||||
// tslint:disable-next-line: no-empty
|
||||
const noop = () => [];
|
||||
@ -20,11 +22,11 @@ const handleChildrenDefaultOptions = {
|
||||
rerun: false,
|
||||
};
|
||||
|
||||
export function handleChildren<T>(
|
||||
export function handleSubNodes<T>(
|
||||
children: ChildNodeType,
|
||||
handlers: HandlerSet<T>,
|
||||
options?: {
|
||||
rerun?: boolean,
|
||||
rerun?: boolean;
|
||||
},
|
||||
): T[] {
|
||||
const opt = {
|
||||
@ -34,43 +36,78 @@ export function handleChildren<T>(
|
||||
|
||||
if (Array.isArray(children)) {
|
||||
const list: ChildNodeItem[] = children as ChildNodeItem[];
|
||||
return list
|
||||
.map(child => handleChildren(child, handlers, opt))
|
||||
.reduce((p, c) => p.concat(c), []);
|
||||
return list.map((child) => handleSubNodes(child, handlers, opt)).reduce((p, c) => p.concat(c), []);
|
||||
} else if (typeof children === 'string') {
|
||||
const handler = handlers.string || handlers.common || noop;
|
||||
return handler(children as string);
|
||||
} else if ((children as IJSExpression).type === 'JSExpression') {
|
||||
} else if (isJsExpression(children)) {
|
||||
const handler = handlers.expression || handlers.common || noop;
|
||||
return handler(children as IJSExpression);
|
||||
} else {
|
||||
const handler = handlers.node || handlers.common || noop;
|
||||
let curRes = handler(children as IComponentNodeItem);
|
||||
if (opt.rerun && children.children) {
|
||||
const childRes = handleChildren(children.children, handlers, opt);
|
||||
const childRes = handleSubNodes(children.children, handlers, opt);
|
||||
curRes = curRes.concat(childRes || []);
|
||||
}
|
||||
return curRes;
|
||||
}
|
||||
}
|
||||
|
||||
export function generateAttr(attrName: string, attrValue: any): CodePiece[] {
|
||||
export function handleChildren<T>(
|
||||
ctx: INodeGeneratorContext,
|
||||
children: ChildNodeType,
|
||||
handlers: HandlerSet<T>,
|
||||
options?: {
|
||||
rerun?: boolean;
|
||||
},
|
||||
): T[] {
|
||||
const opt = {
|
||||
...handleChildrenDefaultOptions,
|
||||
...(options || {}),
|
||||
};
|
||||
|
||||
if (Array.isArray(children)) {
|
||||
const list: ChildNodeItem[] = children as ChildNodeItem[];
|
||||
return list.map((child) => handleChildren(ctx, child, handlers, opt)).reduce((p, c) => p.concat(c), []);
|
||||
} else if (typeof children === 'string') {
|
||||
const handler = handlers.string || handlers.common || noop;
|
||||
return handler(children as string);
|
||||
} else if (isJsExpression(children)) {
|
||||
const handler = handlers.expression || handlers.common || noop;
|
||||
return handler(children as IJSExpression);
|
||||
} else {
|
||||
const handler = handlers.node || handlers.common || noop;
|
||||
let curRes = handler(children as IComponentNodeItem);
|
||||
if (opt.rerun && children.children) {
|
||||
const childRes = handleChildren(ctx, children.children, handlers, opt);
|
||||
curRes = curRes.concat(childRes || []);
|
||||
}
|
||||
return curRes;
|
||||
}
|
||||
}
|
||||
|
||||
export function generateAttr(ctx: INodeGeneratorContext, attrName: string, attrValue: any): CodePiece[] {
|
||||
if (attrName === 'initValue') {
|
||||
return [];
|
||||
}
|
||||
const [isString, valueStr] = generateCompositeType(attrValue);
|
||||
return [{
|
||||
value: `${attrName}=${isString ? `"${valueStr}"` : `{${valueStr}}`}`,
|
||||
type: PIECE_TYPE.ATTR,
|
||||
}];
|
||||
const [isString, valueStr] = generateCompositeType(attrValue, {
|
||||
nodeGenerator: ctx.generator,
|
||||
});
|
||||
return [
|
||||
{
|
||||
value: `${attrName}=${isString ? `"${valueStr}"` : `{${valueStr}}`}`,
|
||||
type: PIECE_TYPE.ATTR,
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
export function generateAttrs(nodeItem: IComponentNodeItem): CodePiece[] {
|
||||
export function generateAttrs(ctx: INodeGeneratorContext, nodeItem: IComponentNodeItem): CodePiece[] {
|
||||
const { props } = nodeItem;
|
||||
let pieces: CodePiece[] = [];
|
||||
|
||||
Object.keys(props).forEach((propName: string) =>
|
||||
pieces = pieces.concat(generateAttr(propName, props[propName])),
|
||||
Object.keys(props).forEach(
|
||||
(propName: string) => (pieces = pieces.concat(generateAttr(ctx, propName, props[propName]))),
|
||||
);
|
||||
|
||||
return pieces;
|
||||
@ -83,7 +120,11 @@ function mapNodeName(src: string, mapping: Record<string, string>): string {
|
||||
return src;
|
||||
}
|
||||
|
||||
export function generateBasicNode(nodeItem: IComponentNodeItem, mapping: Record<string, string>): CodePiece[] {
|
||||
export function generateBasicNode(
|
||||
ctx: INodeGeneratorContext,
|
||||
nodeItem: IComponentNodeItem,
|
||||
mapping: Record<string, string>,
|
||||
): CodePiece[] {
|
||||
const pieces: CodePiece[] = [];
|
||||
pieces.push({
|
||||
value: mapNodeName(nodeItem.componentName, mapping),
|
||||
@ -93,13 +134,25 @@ export function generateBasicNode(nodeItem: IComponentNodeItem, mapping: Record<
|
||||
return pieces;
|
||||
}
|
||||
|
||||
export function generateReactCtrlLine(nodeItem: IComponentNodeItem): CodePiece[] {
|
||||
// TODO: 生成文档
|
||||
// 为包裹的代码片段生成子上下文，集成父级上下文，并传入子级上下文新增内容。（如果存在多级上下文怎么处理？）
|
||||
// 创建新的上下文，并从作用域中取对应同名变量塞到作用域里面？
|
||||
// export function createSubContext() {}
|
||||
|
||||
/**
|
||||
* JSX 生成逻辑插件。在 React 代码模式下生成 loop 与 condition 相关的逻辑代码
|
||||
*
|
||||
* @export
|
||||
* @param {IComponentNodeItem} nodeItem 当前 UI 节点
|
||||
* @returns {CodePiece[]} 实现功能的相关代码片段
|
||||
*/
|
||||
export function generateReactCtrlLine(ctx: INodeGeneratorContext, nodeItem: IComponentNodeItem): CodePiece[] {
|
||||
const pieces: CodePiece[] = [];
|
||||
|
||||
if (nodeItem.loop && nodeItem.loopArgs) {
|
||||
let loopDataExp;
|
||||
if ((nodeItem.loop as IJSExpression).type === 'JSExpression') {
|
||||
loopDataExp = `(${(nodeItem.loop as IJSExpression).value})`;
|
||||
if (isJsExpression(nodeItem.loop)) {
|
||||
loopDataExp = `(${generateExpression(nodeItem.loop)})`;
|
||||
} else {
|
||||
loopDataExp = JSON.stringify(nodeItem.loop);
|
||||
}
|
||||
@ -114,7 +167,9 @@ export function generateReactCtrlLine(nodeItem: IComponentNodeItem): CodePiece[]
|
||||
}
|
||||
|
||||
if (nodeItem.condition) {
|
||||
const [isString, value] = generateCompositeType(nodeItem.condition);
|
||||
const [isString, value] = generateCompositeType(nodeItem.condition, {
|
||||
nodeGenerator: ctx.generator,
|
||||
});
|
||||
|
||||
pieces.unshift({
|
||||
value: `(${isString ? `'${value}'` : value}) && (`,
|
||||
@ -141,29 +196,29 @@ export function generateReactCtrlLine(nodeItem: IComponentNodeItem): CodePiece[]
|
||||
}
|
||||
|
||||
export function linkPieces(pieces: CodePiece[]): string {
|
||||
if (pieces.filter(p => p.type === PIECE_TYPE.TAG).length !== 1) {
|
||||
if (pieces.filter((p) => p.type === PIECE_TYPE.TAG).length !== 1) {
|
||||
throw new CodeGeneratorError('One node only need one tag define');
|
||||
}
|
||||
const tagName = pieces.filter(p => p.type === PIECE_TYPE.TAG)[0].value;
|
||||
const tagName = pieces.filter((p) => p.type === PIECE_TYPE.TAG)[0].value;
|
||||
|
||||
const beforeParts = pieces
|
||||
.filter(p => p.type === PIECE_TYPE.BEFORE)
|
||||
.map(p => p.value)
|
||||
.filter((p) => p.type === PIECE_TYPE.BEFORE)
|
||||
.map((p) => p.value)
|
||||
.join('');
|
||||
|
||||
const afterParts = pieces
|
||||
.filter(p => p.type === PIECE_TYPE.AFTER)
|
||||
.map(p => p.value)
|
||||
.filter((p) => p.type === PIECE_TYPE.AFTER)
|
||||
.map((p) => p.value)
|
||||
.join('');
|
||||
|
||||
const childrenParts = pieces
|
||||
.filter(p => p.type === PIECE_TYPE.CHILDREN)
|
||||
.map(p => p.value)
|
||||
.filter((p) => p.type === PIECE_TYPE.CHILDREN)
|
||||
.map((p) => p.value)
|
||||
.join('');
|
||||
|
||||
let attrsParts = pieces
|
||||
.filter(p => p.type === PIECE_TYPE.ATTR)
|
||||
.map(p => p.value)
|
||||
.filter((p) => p.type === PIECE_TYPE.ATTR)
|
||||
.map((p) => p.value)
|
||||
.join(' ');
|
||||
|
||||
attrsParts = !!attrsParts ? ` ${attrsParts}` : '';
|
||||
@ -179,7 +234,7 @@ export function createNodeGenerator(
|
||||
handlers: HandlerSet<string>,
|
||||
plugins: ExtGeneratorPlugin[],
|
||||
cfg?: INodeGeneratorConfig,
|
||||
) {
|
||||
): NodeGenerator {
|
||||
let nodeTypeMapping: Record<string, string> = {};
|
||||
if (cfg && cfg.nodeTypeMapping) {
|
||||
nodeTypeMapping = cfg.nodeTypeMapping;
|
||||
@ -187,17 +242,22 @@ export function createNodeGenerator(
|
||||
|
||||
const generateNode = (nodeItem: IComponentNodeItem): string => {
|
||||
let pieces: CodePiece[] = [];
|
||||
const ctx: INodeGeneratorContext = {
|
||||
generator: generateNode,
|
||||
};
|
||||
|
||||
plugins.forEach(p => {
|
||||
pieces = pieces.concat(p(nodeItem));
|
||||
plugins.forEach((p) => {
|
||||
pieces = pieces.concat(p(ctx, nodeItem));
|
||||
});
|
||||
pieces = pieces.concat(generateBasicNode(nodeItem, nodeTypeMapping));
|
||||
pieces = pieces.concat(generateAttrs(nodeItem));
|
||||
pieces = pieces.concat(generateBasicNode(ctx, nodeItem, nodeTypeMapping));
|
||||
pieces = pieces.concat(generateAttrs(ctx, nodeItem));
|
||||
if (nodeItem.children && (nodeItem.children as unknown[]).length > 0) {
|
||||
pieces = pieces.concat(handleChildren<string>(nodeItem.children, handlers).map(l => ({
|
||||
type: PIECE_TYPE.CHILDREN,
|
||||
value: l,
|
||||
})));
|
||||
pieces = pieces.concat(
|
||||
handleChildren<string>(ctx, nodeItem.children, handlers).map((l) => ({
|
||||
type: PIECE_TYPE.CHILDREN,
|
||||
value: l,
|
||||
})),
|
||||
);
|
||||
}
|
||||
|
||||
return linkPieces(pieces);
|
||||
@ -210,11 +270,13 @@ export function createNodeGenerator(
|
||||
|
||||
export const generateString = (input: string) => [input];
|
||||
|
||||
export function createReactNodeGenerator(cfg?: INodeGeneratorConfig) {
|
||||
return createNodeGenerator({
|
||||
string: generateString,
|
||||
expression: (input) => [generateExpression(input)],
|
||||
}, [
|
||||
generateReactCtrlLine,
|
||||
], cfg);
|
||||
export function createReactNodeGenerator(cfg?: INodeGeneratorConfig): NodeGenerator {
|
||||
return createNodeGenerator(
|
||||
{
|
||||
string: generateString,
|
||||
expression: (input) => [generateExpression(input)],
|
||||
},
|
||||
[generateReactCtrlLine],
|
||||
cfg,
|
||||
);
|
||||
}
|
||||
|
||||
3
packages/code-generator/src/utils/validate.ts
Normal file
3
packages/code-generator/src/utils/validate.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export const isValidIdentifier = (name: string) => {
|
||||
return /^[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*$/.test(name);
|
||||
};
|
||||
@ -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"
|
||||
},
|
||||
{
|
||||
@ -66,6 +66,262 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"componentName": "Drawer",
|
||||
"title": "抽屉",
|
||||
"docUrl": "",
|
||||
"screenshot": "",
|
||||
"npm": {
|
||||
"package": "@alifd/next",
|
||||
"version": "1.19.18",
|
||||
"exportName": "Drawer",
|
||||
"main": "src/index.js",
|
||||
"destructuring": true,
|
||||
"subName": ""
|
||||
},
|
||||
"props": [
|
||||
{
|
||||
"name": "prefix",
|
||||
"propType": "string",
|
||||
"defaultValue": "next-"
|
||||
},
|
||||
{
|
||||
"name": "style",
|
||||
"propType": "object"
|
||||
},
|
||||
{
|
||||
"name": "pure",
|
||||
"propType": "bool"
|
||||
},
|
||||
{
|
||||
"name": "rtl",
|
||||
"propType": "bool"
|
||||
},
|
||||
{
|
||||
"name": "trigger",
|
||||
"propType": {
|
||||
"type": "instanceOf",
|
||||
"value": "element"
|
||||
},
|
||||
"defaultValue": null
|
||||
},
|
||||
{
|
||||
"name": "triggerType",
|
||||
"propType": {
|
||||
"type": "oneOfType",
|
||||
"value": [
|
||||
"string",
|
||||
{
|
||||
"type": "instanceOf",
|
||||
"value": "array"
|
||||
}
|
||||
]
|
||||
},
|
||||
"defaultValue": "click"
|
||||
},
|
||||
{
|
||||
"name": "width",
|
||||
"propType": {
|
||||
"type": "oneOfType",
|
||||
"value": [
|
||||
"number",
|
||||
"string"
|
||||
]
|
||||
},
|
||||
"description": "宽度，仅在 placement是 left right 的时候生效"
|
||||
},
|
||||
{
|
||||
"name": "height",
|
||||
"propType": {
|
||||
"type": "oneOfType",
|
||||
"value": [
|
||||
"number",
|
||||
"string"
|
||||
]
|
||||
},
|
||||
"description": "高度，仅在 placement是 top bottom 的时候生效"
|
||||
},
|
||||
{
|
||||
"name": "closeable",
|
||||
"propType": {
|
||||
"type": "oneOfType",
|
||||
"value": [
|
||||
"string",
|
||||
"bool"
|
||||
]
|
||||
},
|
||||
"description": "控制对话框关闭的方式，值可以为字符串或者布尔值，其中字符串是由以下值组成：\n**close** 表示点击关闭按钮可以关闭对话框\n**mask** 表示点击遮罩区域可以关闭对话框\n**esc** 表示按下 esc 键可以关闭对话框\n如 'close' 或 'close,esc,mask'\n如果设置为 true，则以上关闭方式全部生效\n如果设置为 false，则以上关闭方式全部失效",
|
||||
"defaultValue": true
|
||||
},
|
||||
{
|
||||
"name": "onClose",
|
||||
"propType": "func",
|
||||
"description": "对话框关闭时触发的回调函数\n@param {String} trigger 关闭触发行为的描述字符串\n@param {Object} event 关闭时事件对象"
|
||||
},
|
||||
{
|
||||
"name": "placement",
|
||||
"propType": {
|
||||
"type": "oneOf",
|
||||
"value": [
|
||||
"top",
|
||||
"right",
|
||||
"bottom",
|
||||
"left"
|
||||
]
|
||||
},
|
||||
"description": "位于页面的位置",
|
||||
"defaultValue": "right"
|
||||
},
|
||||
{
|
||||
"name": "title",
|
||||
"propType": {
|
||||
"type": "instanceOf",
|
||||
"value": "node"
|
||||
},
|
||||
"description": "标题"
|
||||
},
|
||||
{
|
||||
"name": "headerStyle",
|
||||
"propType": "object",
|
||||
"description": "header上的样式"
|
||||
},
|
||||
{
|
||||
"name": "bodyStyle",
|
||||
"propType": "object",
|
||||
"description": "body上的样式"
|
||||
},
|
||||
{
|
||||
"name": "visible",
|
||||
"propType": "bool",
|
||||
"description": "是否显示"
|
||||
},
|
||||
{
|
||||
"name": "hasMask",
|
||||
"propType": "bool",
|
||||
"description": "是否显示遮罩",
|
||||
"defaultValue": true
|
||||
},
|
||||
{
|
||||
"name": "onVisibleChange",
|
||||
"propType": "func"
|
||||
},
|
||||
{
|
||||
"name": "animation",
|
||||
"propType": {
|
||||
"type": "oneOfType",
|
||||
"value": [
|
||||
"object",
|
||||
"bool"
|
||||
]
|
||||
},
|
||||
"description": "显示隐藏时动画的播放方式\n@property {String} in 进场动画\n@property {String} out 出场动画"
|
||||
},
|
||||
{
|
||||
"name": "locale",
|
||||
"propType": "object"
|
||||
},
|
||||
{
|
||||
"name": "popupContainer",
|
||||
"propType": "any"
|
||||
}
|
||||
],"configure": {
|
||||
"component": {
|
||||
"isContainer": true,
|
||||
"isModel": true
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"componentName": "Drawer.Inner",
|
||||
"title": "Drawer.Inner",
|
||||
"docUrl": "",
|
||||
"screenshot": "",
|
||||
"npm": {
|
||||
"package": "@alifd/next",
|
||||
"version": "1.19.18",
|
||||
"exportName": "Drawer",
|
||||
"main": "src/index.js",
|
||||
"destructuring": true,
|
||||
"subName": "Inner"
|
||||
},
|
||||
"props": [
|
||||
{
|
||||
"name": "prefix",
|
||||
"propType": "string",
|
||||
"defaultValue": "next-"
|
||||
},
|
||||
{
|
||||
"name": "className",
|
||||
"propType": "string"
|
||||
},
|
||||
{
|
||||
"name": "closeable",
|
||||
"propType": "bool",
|
||||
"defaultValue": true
|
||||
},
|
||||
{
|
||||
"name": "role",
|
||||
"propType": "string",
|
||||
"defaultValue": "dialog"
|
||||
},
|
||||
{
|
||||
"name": "title",
|
||||
"propType": "string"
|
||||
},
|
||||
{
|
||||
"name": "placement",
|
||||
"propType": {
|
||||
"type": "oneOf",
|
||||
"value": [
|
||||
"top",
|
||||
"right",
|
||||
"bottom",
|
||||
"left"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "rtl",
|
||||
"propType": "bool"
|
||||
},
|
||||
{
|
||||
"name": "onClose",
|
||||
"propType": "func"
|
||||
},
|
||||
{
|
||||
"name": "locale",
|
||||
"propType": "object"
|
||||
},
|
||||
{
|
||||
"name": "headerStyle",
|
||||
"propType": "object"
|
||||
},
|
||||
{
|
||||
"name": "bodyStyle",
|
||||
"propType": "object"
|
||||
},
|
||||
{
|
||||
"name": "afterClose",
|
||||
"propType": "func"
|
||||
},
|
||||
{
|
||||
"name": "beforeOpen",
|
||||
"propType": "func"
|
||||
},
|
||||
{
|
||||
"name": "beforeClose",
|
||||
"propType": "func"
|
||||
},
|
||||
{
|
||||
"name": "cache",
|
||||
"propType": "bool"
|
||||
},
|
||||
{
|
||||
"name": "shouldUpdatePosition",
|
||||
"propType": "bool"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"componentName": "Table",
|
||||
"title": "Table",
|
||||
@ -333,7 +589,7 @@
|
||||
"exportName": "Table",
|
||||
"main": "src/index.js",
|
||||
"destructuring": true,
|
||||
"subName": ""
|
||||
"subName": "Column"
|
||||
},
|
||||
"props": [
|
||||
{
|
||||
@ -401,7 +657,7 @@
|
||||
"name": "showZero",
|
||||
"propType": "bool",
|
||||
"description": "当count为0时，是否显示count",
|
||||
"defaultValue": false
|
||||
"defaultValue": true
|
||||
},
|
||||
{
|
||||
"name": "content",
|
||||
@ -1091,10 +1347,8 @@
|
||||
},
|
||||
{
|
||||
"name": "children",
|
||||
"propType": {
|
||||
"type": "instanceOf",
|
||||
"value": "node"
|
||||
}
|
||||
"description": "内容",
|
||||
"propType": "array"
|
||||
},
|
||||
{
|
||||
"name": "style",
|
||||
@ -1253,17 +1507,19 @@
|
||||
},
|
||||
{
|
||||
"name": "children",
|
||||
"propType": {
|
||||
"type": "instanceOf",
|
||||
"value": "node"
|
||||
}
|
||||
"propType": "array"
|
||||
},
|
||||
{
|
||||
"name": "style",
|
||||
"propType": "object",
|
||||
"description": "自定义内联样式"
|
||||
}
|
||||
]
|
||||
],
|
||||
"configure": {
|
||||
"component": {
|
||||
"isContainer": true
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"componentName": "Button.Group",
|
||||
@ -4134,8 +4390,14 @@
|
||||
{
|
||||
"name": "children",
|
||||
"propType": {
|
||||
"type": "instanceOf",
|
||||
"value": "node"
|
||||
"type": "oneOfType",
|
||||
"value": [
|
||||
"bool",
|
||||
{
|
||||
"type": "instanceOf",
|
||||
"value": "node"
|
||||
}
|
||||
]
|
||||
},
|
||||
"description": "内容"
|
||||
},
|
||||
@ -4298,8 +4560,10 @@
|
||||
}
|
||||
],
|
||||
"configure": {
|
||||
"isContainer": true,
|
||||
"isModel": true
|
||||
"component": {
|
||||
"isContainer": true,
|
||||
"isModel": true
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -6126,7 +6390,12 @@
|
||||
"name": "style",
|
||||
"propType": "object"
|
||||
}
|
||||
]
|
||||
],
|
||||
"configure": {
|
||||
"component": {
|
||||
"isContainer": true
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"componentName": "SubMenu",
|
||||
@ -6250,7 +6519,7 @@
|
||||
]
|
||||
},
|
||||
{
|
||||
"componentName": "SelectableItem",
|
||||
"componentName": "Menu.Item",
|
||||
"title": "SelectableItem",
|
||||
"docUrl": "",
|
||||
"screenshot": "",
|
||||
@ -6548,8 +6817,8 @@
|
||||
]
|
||||
},
|
||||
{
|
||||
"componentName": "Group",
|
||||
"title": "Group",
|
||||
"componentName": "Menu.Group",
|
||||
"title": "Menu.Group",
|
||||
"docUrl": "",
|
||||
"screenshot": "",
|
||||
"npm": {
|
||||
@ -7852,7 +8121,7 @@
|
||||
},
|
||||
{
|
||||
"name": "backgroundColor",
|
||||
"propType": "string",
|
||||
"propType": "color",
|
||||
"description": "背景色"
|
||||
},
|
||||
{
|
||||
@ -8242,6 +8511,11 @@
|
||||
"name": "renderPreview",
|
||||
"propType": "func",
|
||||
"description": "预览态模式下渲染的内容\n@param {number} value 评分值"
|
||||
},
|
||||
{
|
||||
"name": "value",
|
||||
"propType": "number",
|
||||
"description": "分值"
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -9972,6 +10246,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",
|
||||
@ -10266,7 +10607,12 @@
|
||||
"name": "style",
|
||||
"propType": "object"
|
||||
}
|
||||
]
|
||||
],
|
||||
"configure": {
|
||||
"component": {
|
||||
"isContainer": true
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"componentName": "TimelineItem",
|
||||
@ -10524,11 +10870,24 @@
|
||||
"propType": "func",
|
||||
"description": "接收 children 自定义渲染列表"
|
||||
},
|
||||
{
|
||||
"name": "dataSource",
|
||||
"propType": "array"
|
||||
},
|
||||
{
|
||||
"name": "style",
|
||||
"propType": "object"
|
||||
}
|
||||
]
|
||||
],
|
||||
"configure": {
|
||||
"props": {
|
||||
"isExtends": true,
|
||||
"override": [{
|
||||
"name": "dataSource",
|
||||
"setter": "JsonSetter"
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"componentName": "Tree",
|
||||
@ -10776,7 +11135,12 @@
|
||||
"name": "style",
|
||||
"propType": "object"
|
||||
}
|
||||
]
|
||||
],
|
||||
"configure": {
|
||||
"component": {
|
||||
"isContainer": true
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"componentName": "TreeNode",
|
||||
@ -11950,11 +12314,16 @@
|
||||
"name": "style",
|
||||
"propType": "object"
|
||||
}
|
||||
]
|
||||
],
|
||||
"configure": {
|
||||
"component": {
|
||||
"isContainer": true
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"componentName": "Cell",
|
||||
"title": "Cell",
|
||||
"componentName": "ResponsiveGrid.Cell",
|
||||
"title": "ResponsiveGrid.Cell",
|
||||
"docUrl": "",
|
||||
"screenshot": "",
|
||||
"npm": {
|
||||
@ -12007,7 +12376,12 @@
|
||||
"name": "style",
|
||||
"propType": "object"
|
||||
}
|
||||
]
|
||||
],
|
||||
"configure": {
|
||||
"component": {
|
||||
"isContainer": true
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"componentName": "Box",
|
||||
@ -12163,12 +12537,37 @@
|
||||
"componentName": "Badge",
|
||||
"props": {
|
||||
"prefix": "next-",
|
||||
"overflowCount": 99
|
||||
"showZero": true
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},{
|
||||
},
|
||||
{
|
||||
"componentName": "Drawer",
|
||||
"title": "抽屉",
|
||||
"icon": "",
|
||||
"package": "@alife/next",
|
||||
"library": "Next",
|
||||
"snippets": [
|
||||
{
|
||||
"title": "抽屉",
|
||||
"screenshot": "https://img.alicdn.com/tfs/TB1RiM3lgHqK1RjSZFEXXcGMXXa-404-422.png",
|
||||
"schema": {
|
||||
"componentName": "Drawer",
|
||||
"props": {
|
||||
"prefix": "next-",
|
||||
"triggerType": "click",
|
||||
"closeable": true,
|
||||
"placement": "right",
|
||||
"hasMask": true,
|
||||
"visible": true
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"componentName": "Table",
|
||||
"title": "表格",
|
||||
"icon": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_table.png",
|
||||
@ -12412,6 +12811,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": "进度指示器",
|
||||
@ -12506,6 +12929,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": [],
|
||||
@ -12648,23 +13111,6 @@
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"componentName": "Notification",
|
||||
"title": "通知",
|
||||
"icon": "",
|
||||
"package": "@alife/next",
|
||||
"library": "Next",
|
||||
"snippets": [
|
||||
{
|
||||
"title": "通知",
|
||||
"screenshot": "",
|
||||
"schema": {
|
||||
"componentName": "Notification",
|
||||
"props": {}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"icon": ""
|
||||
@ -12720,9 +13166,9 @@
|
||||
"type": "primary",
|
||||
"size": "large",
|
||||
"htmlType": "button",
|
||||
"component": "button"
|
||||
},
|
||||
"children": "提交"
|
||||
"component": "button",
|
||||
"children": ["提交"]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
@ -12825,7 +13271,9 @@
|
||||
"screenshot": "",
|
||||
"schema": {
|
||||
"componentName": "Icon",
|
||||
"props": {}
|
||||
"props": {
|
||||
"type": "smile"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
@ -12870,17 +13318,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": {}
|
||||
}
|
||||
}
|
||||
@ -12966,12 +13414,12 @@
|
||||
"schema": {
|
||||
"componentName": "Breadcrumb.Item",
|
||||
"props": {
|
||||
"prefix": "next-"
|
||||
},
|
||||
"children": [
|
||||
"222",
|
||||
"222111"
|
||||
]
|
||||
"prefix": "next-",
|
||||
"children": [
|
||||
"222",
|
||||
"222111"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
@ -72,37 +72,37 @@
|
||||
"componentName":"Breadcrumb.Item",
|
||||
"id":"node_dockcy8n9xeg",
|
||||
"props":{
|
||||
"prefix":"next-"
|
||||
},
|
||||
"children":[
|
||||
"首页"]
|
||||
"prefix":"next-",
|
||||
"children":[
|
||||
"首页"]
|
||||
}
|
||||
},
|
||||
{
|
||||
"componentName":"Breadcrumb.Item",
|
||||
"id":"node_dockcy8n9xei",
|
||||
"props":{
|
||||
"prefix":"next-"
|
||||
},
|
||||
"children":[
|
||||
"品质中台"]
|
||||
"prefix":"next-",
|
||||
"children":[
|
||||
"品质中台"]
|
||||
}
|
||||
},
|
||||
{
|
||||
"componentName":"Breadcrumb.Item",
|
||||
"id":"node_dockcy8n9xek",
|
||||
"props":{
|
||||
"prefix":"next-"
|
||||
},
|
||||
"children":[
|
||||
"商家品质页面管理"]
|
||||
"prefix":"next-",
|
||||
"children":[
|
||||
"商家品质页面管理"]
|
||||
}
|
||||
},
|
||||
{
|
||||
"componentName":"Breadcrumb.Item",
|
||||
"id":"node_dockcy8n9xem",
|
||||
"props":{
|
||||
"prefix":"next-"
|
||||
},
|
||||
"children":[
|
||||
"质检知识条配置"]
|
||||
"prefix":"next-",
|
||||
"children":[
|
||||
"质检知识条配置"]
|
||||
}
|
||||
}]
|
||||
}]
|
||||
},
|
||||
@ -135,7 +135,7 @@
|
||||
"id":"node_dockcy8n9xeq",
|
||||
"props":{
|
||||
"style":{
|
||||
"margin-bottom":"0"
|
||||
"marginBottom":"0"
|
||||
},
|
||||
"label":"类目名："
|
||||
},
|
||||
@ -158,7 +158,7 @@
|
||||
"id":"node_dockcy8n9xes",
|
||||
"props":{
|
||||
"style":{
|
||||
"margin-bottom":"0"
|
||||
"marginBottom":"0"
|
||||
},
|
||||
"label":"项目类型："
|
||||
},
|
||||
@ -181,7 +181,7 @@
|
||||
"id":"node_dockcy8n9xeu",
|
||||
"props":{
|
||||
"style":{
|
||||
"margin-bottom":"0"
|
||||
"marginBottom":"0"
|
||||
},
|
||||
"label":"项目 ID："
|
||||
},
|
||||
@ -213,17 +213,17 @@
|
||||
"style":{
|
||||
"margin":"0 5px 0 5px"
|
||||
},
|
||||
"htmlType":"submit"
|
||||
},
|
||||
"children":[
|
||||
{
|
||||
"htmlType":"submit",
|
||||
"children":[
|
||||
{
|
||||
"componentName":"Icon",
|
||||
"id":"node_dockcy8n9xey",
|
||||
"props":{
|
||||
"type":"success"
|
||||
"type":"success"
|
||||
}
|
||||
},
|
||||
"搜索"]
|
||||
},
|
||||
"搜索"]
|
||||
}
|
||||
},
|
||||
{
|
||||
"componentName":"Button",
|
||||
@ -233,10 +233,10 @@
|
||||
"style":{
|
||||
"margin":"0 5px 0 5px"
|
||||
},
|
||||
"htmlType":"reset"
|
||||
},
|
||||
"children":[
|
||||
"清空"]
|
||||
"htmlType":"reset",
|
||||
"children":[
|
||||
"清空"]
|
||||
}
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
@ -266,6 +266,7 @@
|
||||
"style":{
|
||||
"width":"100px"
|
||||
},
|
||||
"children":["新建配置"],
|
||||
"events":{
|
||||
"onClick":{
|
||||
"type":"JSFunction",
|
||||
@ -287,9 +288,7 @@
|
||||
"type":"JSFunction",
|
||||
"value":"function(){ this.onClick() }"
|
||||
}
|
||||
},
|
||||
"children":[
|
||||
"新建配置"]
|
||||
}
|
||||
}]
|
||||
},
|
||||
{
|
||||
@ -456,13 +455,9 @@
|
||||
"type":"JSExpression",
|
||||
"value":"this.state.isShowDialog"
|
||||
},
|
||||
"children":{
|
||||
"type":"JSSlot"
|
||||
},
|
||||
|
||||
"title":"标题",
|
||||
"footer":{
|
||||
"type":"JSSlot"
|
||||
},
|
||||
|
||||
"events":[
|
||||
]
|
||||
}
|
||||
|
||||
@ -9,6 +9,7 @@ import variableBindDialog from '@ali/lowcode-plugin-variable-bind-dialog';
|
||||
import sourceEditor from '@ali/lowcode-plugin-source-editor';
|
||||
|
||||
import codeout from './plugins/codeout';
|
||||
import saveload from './plugins/saveload';
|
||||
|
||||
export default {
|
||||
logo,
|
||||
@ -21,4 +22,5 @@ export default {
|
||||
variableBindDialog,
|
||||
sourceEditor,
|
||||
codeout,
|
||||
saveload,
|
||||
};
|
||||
|
||||
@ -45,6 +45,14 @@ export default {
|
||||
width: 64,
|
||||
},
|
||||
},
|
||||
{
|
||||
pluginKey: 'saveload',
|
||||
type: 'Custom',
|
||||
props: {
|
||||
align: 'right',
|
||||
width: 128,
|
||||
},
|
||||
},
|
||||
],
|
||||
leftArea: [
|
||||
{
|
||||
|
||||
4
packages/demo/src/editor/plugins/saveload.scss
Normal file
4
packages/demo/src/editor/plugins/saveload.scss
Normal file
@ -0,0 +1,4 @@
|
||||
.lowcode-plugin-saveload {
|
||||
padding: 10px 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
68
packages/demo/src/editor/plugins/saveload.tsx
Normal file
68
packages/demo/src/editor/plugins/saveload.tsx
Normal file
@ -0,0 +1,68 @@
|
||||
/* eslint-disable @typescript-eslint/no-empty-function */
|
||||
/* eslint-disable @typescript-eslint/no-empty-interface */
|
||||
import React from 'react';
|
||||
import { Button } from '@alifd/next';
|
||||
import { PluginProps, NpmInfo } from '@ali/lowcode-types';
|
||||
import { Designer } from '@ali/lowcode-designer';
|
||||
|
||||
import './saveload.scss';
|
||||
|
||||
interface BasicSection {
|
||||
componentName: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
docUrl?: string;
|
||||
screenshot?: string;
|
||||
icon?: string;
|
||||
tags?: string[];
|
||||
devMode?: 'proCode' | 'lowCode';
|
||||
npm: NpmInfo;
|
||||
[k: string]: any;
|
||||
}
|
||||
|
||||
const Codeout = ({ editor }: PluginProps) => {
|
||||
const handleSaveClick = () => {
|
||||
const designer = editor.get(Designer);
|
||||
if (designer) {
|
||||
const schema = designer.schema.componentsTree[0]; // editor.get('schema');
|
||||
const schemaStr = JSON.stringify(schema);
|
||||
window.localStorage.setItem('schema_data', schemaStr);
|
||||
console.info('save schema:', schemaStr);
|
||||
alert('保存成功');
|
||||
}
|
||||
};
|
||||
|
||||
const handleLoadClick = () => {
|
||||
const designer = editor.get(Designer);
|
||||
if (designer) {
|
||||
const tmp = window.localStorage.getItem('schema_data');
|
||||
if (tmp) {
|
||||
try {
|
||||
const schema = JSON.parse(tmp);
|
||||
editor.set('schema', schema);
|
||||
console.info('load schema:', schema);
|
||||
alert('加载成功');
|
||||
} catch (error) {
|
||||
console.log('Invalid Schema', error);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div className="lowcode-plugin-saveload">
|
||||
<Button type="primary" onClick={handleSaveClick}>
|
||||
保存
|
||||
</Button>
|
||||
</div>
|
||||
<div className="lowcode-plugin-saveload">
|
||||
<Button type="primary" onClick={handleLoadClick}>
|
||||
加载
|
||||
</Button>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
export default Codeout;
|
||||
@ -211,6 +211,7 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp
|
||||
) {
|
||||
if (component.isContainer !== false) {
|
||||
component.isContainer = true;
|
||||
props.push(propConfigToFieldConfig(prop));
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 = <div style={{
|
||||
if (leaf?.isContainer() && (_children == null || !_children.length) && (!viewProps.style || Object.keys(viewProps.style).length == 0)){
|
||||
_children = <div style={{
|
||||
height:'66px',
|
||||
backgroundColor:'#f0f0f0',
|
||||
borderColor:'#a7b1bd',
|
||||
@ -142,10 +150,11 @@ class Renderer extends Component<{ renderer: SimulatorRenderer }> {
|
||||
});
|
||||
console.info('menuprops', viewProps);
|
||||
}
|
||||
|
||||
return createElement(
|
||||
getDeviceView(Component, device, designMode),
|
||||
viewProps,
|
||||
leaf?.isContainer() ? (children == null ? [] : Array.isArray(children) ? children : [children]) : children,
|
||||
_children,
|
||||
);
|
||||
}}
|
||||
onCompGetRef={(schema: any, ref: ReactInstance | null) => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user