diff --git a/packages/demo/public/assets.json b/packages/demo/public/assets.json index b1fccc8f8..a6706aeee 100644 --- a/packages/demo/public/assets.json +++ b/packages/demo/public/assets.json @@ -13,6 +13,13 @@ "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" }, + { + "title": "NextTable", + "package": "NextTable", + "version": "1.0.0", + "urls": ["http://alifd.alibabausercontent.com/materials/NextTable.js"], + "library": "NextTable" + }, { "title": "MCBreadcrumb", "package": "mc-breadcrumb", @@ -176,7 +183,6 @@ "subName": "" }, "props": [ - { "name": "children", "propType": "string", @@ -218,7 +224,16 @@ "description": "分割线标题的位置", "defaultValue": "center" } - ] + ], + "experimental": { + "filters": [{ + "name": "", + "filter": { + "type": "JSFunction", + "value": "filters" + } + }] + } }, { "componentName": "Drawer", @@ -459,6 +474,320 @@ } ] }, + { + "componentName": "NextTable", + "title": "NextTable", + "docUrl": "", + "screenshot": "", + "npm": { + "package": "NextTable", + "version": "1.19.18", + "exportName": "NextTable", + "main": "lib/index.js", + "subName": "" + }, + "props": [ + { + "name": "columns", + "title": "数据列", + "propType": { + "type": "arrayOf", + "value": { + "type": "shape", + "value": [ + { + "name": "title", + "description": "列标题", + "propType": "string", + "defaultValue": "Title" + }, + { + "name": "dataKey", + "description": "列索引", + "propType": "string", + "defaultValue": "Key" + }, + { + "name": "dataType", + "description": "数据类型", + "propType": { + "type": "oneOf", + "value": [ + "text", + "timestamp", + "cascadeTimestamp", + "employee", + "money", + "moneyRange" + ] + }, + "defaultValue": "Key" + }, + { + "name": "editType", + "description": "编辑类型", + "propType": { + "type": "oneOf", + "value": [ + "select", + "text", + "radio", + "date", + "employee" + ] + }, + "defaultValue": "Key" + } + ] + } + } + }, + { + "name": "data", + "title": "数据源", + "propType": { + "type": "oneOfType", + "value": [ + "Json", + "JSExpression" + ] + } + }, + { + "name": "actionTitle", + "title": "操作列标题", + "propType": "string" + }, + { + "name": "actionColumn", + "title": "操作列", + "propType": { + "type": "arrayOf", + "value": { + "type": "shape", + "value": [{ + "name": "title", + "description": "列标题", + "propType": "string", + "defaultValue": "Title" + },{ + "name": "callback", + "description": "callback", + "propType": "func", + "defaultValue": { + "type": "JSFunction", + "value": "(rowData, action, table) => {\n return table.editRow(rowData).then((row) => {\n console.log(row);\n })}" + } + }] + } + } + } + ], + "configure": { + "props": [ + { + "name": "columns", + "title": "数据列", + "setter": { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "title", + "description": "列标题", + "setter": "StringSetter" + }, + { + "name": "dataKey", + "description": "列索引", + "setter": "StringSetter" + }, + { + "name": "dataType", + "description": "数据类型", + "setter": { + "componentName": "SelectSetter", + "props": { + "dataSource": [ + { + "label": "text", + "value": "text" + },{ + "label": "timestamp", + "value": "timestamp" + },{ + "label": "cascadeTimestamp", + "value": "cascadeTimestamp" + },{ + "label": "employee", + "value": "employee" + },{ + "label": "money", + "value": "money" + },{ + "label": "moneyRange", + "value": "moneyRange" + } + ] + } + } + }, + { + "name": "editType", + "description": "编辑类型", + "setter": { + "componentName": "SelectSetter", + "props": { + "dataSource": [ + { + "label": "select", + "value": "select" + },{ + "label": "text", + "value": "text" + },{ + "label": "radio", + "value": "radio" + },{ + "label": "date", + "value": "date" + },{ + "label": "employee", + "value": "employee" + } + ] + } + } + } + ] + } + }, + "initialValue": { + "title": "Title", + "dataKey": "Key", + "dataType": "text", + "editType": "text" + } + } + } + } + }, + { + "name": "data", + "title": "数据源", + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + "JsonSetter", + "ExpressionSetter" + ] + } + } + }, + { + "name": "action", + "title": "操作列选项", + "type": "group", + "extraProps": { + "display": "entry" + }, + "items": [ + { + "name": "actionTitle", + "title": "操作列标题", + "setter": "StringSetter" + }, + { + "name": "actionWidth", + "title": "操作列宽度", + "setter": "NumberSetter" + }, + { + "name": "actionType", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "dataSource": [ + { + "label": "link", + "value": "link" + },{ + "label": "button", + "value": "button" + } + ] + } + } + }, + { + "name": "actionFixed", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "dataSource": [ + { + "label": "right", + "value": "right" + },{ + "label": "none", + "value": "none" + } + ] + } + } + }, + { + "name": "actionHidden", + "setter": "BoolSetter", + "initialValue": false + } + ] + }, + { + "name": "actionColumn", + "title": "操作列", + "setter": { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [{ + "name": "title", + "description": "列标题", + "setter": "StringSetter", + "defaultValue": "Title" + },{ + "name": "callback", + "description": "callback", + "propType": "JsonSetter", + "defaultValue": { + "type": "JSFunction", + "value": "(rowData, action, table) => {\n return table.editRow(rowData).then((row) => {\n console.log(row);\n })}" + } + }] + } + }, + "initialValue": { + "title": "Title", + "callback": { + "type": "JSFunction", + "value": "(rowData, action, table) => {\n return table.editRow(rowData).then((row) => {\n console.log(row);\n })}" + } + } + } + } + } + } + ] + } + }, { "componentName": "Table", "title": "Table", @@ -477,6 +806,10 @@ "name": "prefix", "propType": "string" }, + { + "name": "children", + "propType": "string" + }, { "name": "pure", "propType": "bool" @@ -705,15 +1038,71 @@ } ], "configure": { - "component": { - "isContainer": true - }, "props": { "isExtends": true, - "override": [{ - "name": "dataSource", - "setter": "JsonSetter" - }] + "override": [ + { + "name": "dataSource", + "setter": "JsonSetter" + }, + { + "name": "children", + "setter": { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "componentName", + "title": "子组件", + "defaultValue": "Table.Column", + "setter": { + "componentName": "StringSetter" + } + }, + { + "name": "props", + "title": "props", + "setter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [ + { + "name": "title", + "setter": { + "componentName": "StringSetter" + } + }, + { + "name": "dataIndex", + "setter": { + "componentName": "StringSetter" + } + } + ] + } + } + } + } + ] + } + } + } + } + }, + "extraProps": { + "defaultValue": "", + "onChange": { + "type": "JSFunction", + "value": "(val, field, editor) => {\n debugger;\n console.log('val', val);//field.nodes[0].children.import(val && {\"componentName\": \"Table.Column\", \"props\": {\"type\": val, \"style\": {\"marginRight\": 5}}}, true); //field.top.setPropValue('children', [{\"componentName\": \"Icon\", \"props\": {\"type\": val}}, (field.top.getPropValue('children') || []).slice(-1)]);\n}" + } + } + } + ] } } }, @@ -5439,22 +5828,161 @@ "description": "是否校验/需要校验的 name 数组" }, { - "name": "field", - "propType": "object", - "description": "自定义 field (在 Form 内不需要设置)" + "name": "style", + "propType": "object" }, { "name": "children", + "title": "内容", + "propType": "string" + }, + { + "name": "icon", + "propType": "string", + "description": "自定义内联样式" + }, + { + "name": "type", + "title": "类型", "propType": { - "type": "instanceOf", - "value": "node" - } + "type": "oneOf", + "value": [ + "primary", + "secondary", + "normal" + ] + }, + "description": "按钮的类型", + "defaultValue": "normal" + }, + { + "name": "size", + "title": "尺寸", + "propType": { + "type": "oneOf", + "value": [ + "small", + "medium", + "large" + ] + }, + "description": "按钮的尺寸", + "defaultValue": "medium" + }, + { + "name": "iconSize", + "title": "Icon 尺寸", + "propType": { + "type": "oneOf", + "value": [ + "xxs", + "xs", + "small", + "medium", + "large", + "xl", + "xxl", + "xxxl" + ] + }, + "defaultValue": "small", + "description": "按钮中 Icon 的尺寸，用于替代 Icon 的默认大小" + }, + { + "name": "loading", + "title": "loading", + "propType": "bool", + "description": "设置按钮的载入状态", + "defaultValue": false + }, + { + "name": "ghost", + "title": "ghost", + "propType": { + "type": "oneOf", + "value": [ + true, + false, + "light", + "dark" + ] + }, + "description": "是否为幽灵按钮", + "defaultValue": false + }, + { + "name": "text", + "title": "text", + "propType": "bool", + "description": "是否为文本按钮", + "defaultValue": false + }, + { + "name": "warning", + "title": "warning", + "propType": "bool", + "description": "是否为警告按钮", + "defaultValue": false + }, + { + "name": "disabled", + "title": "disabled", + "propType": "bool", + "description": "是否禁用", + "defaultValue": false + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "onMouseUp", + "propType": "func" }, { "name": "style", - "propType": "object" + "propType": "object", + "description": "自定义内联样式" } - ] + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "icon", + "setter": "IconSetter", + "extraProps": { + "defaultValue": "", + "onChange": { + "type": "JSFunction", + "value": "(val, field, editor) => {\n field.nodes[0].children.import(val && {\"componentName\": \"Icon\", \"props\": {\"type\": val, \"style\": {\"marginRight\": 5}}}, true); //field.top.setPropValue('children', [{\"componentName\": \"Icon\", \"props\": {\"type\": val}}, (field.top.getPropValue('children') || []).slice(-1)]);\n}" + } + } + }, + { + "name": "children", + "title": { + "label": { + "type": "i18n", + "zh_CN": "文本内容", + "en_US": "content" + }, + "tip": "按钮文本内容" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + "StringSetter", + "ExpressionSetter" + ] + } + } + } + ] + } + } }, { "componentName": "Form.Reset", @@ -5470,14 +5998,6 @@ "subName": "Reset" }, "props": [ - { - "name": "names", - "propType": { - "type": "instanceOf", - "value": "array" - }, - "description": "自定义重置的字段" - }, { "name": "onClick", "propType": "func", @@ -5489,22 +6009,161 @@ "description": "返回默认值" }, { - "name": "field", - "propType": "object", - "description": "自定义 field (在 Form 内不需要设置)" + "name": "style", + "propType": "object" }, { "name": "children", + "title": "内容", + "propType": "string" + }, + { + "name": "icon", + "propType": "string", + "description": "自定义内联样式" + }, + { + "name": "type", + "title": "类型", "propType": { - "type": "instanceOf", - "value": "node" - } + "type": "oneOf", + "value": [ + "primary", + "secondary", + "normal" + ] + }, + "description": "按钮的类型", + "defaultValue": "normal" + }, + { + "name": "size", + "title": "尺寸", + "propType": { + "type": "oneOf", + "value": [ + "small", + "medium", + "large" + ] + }, + "description": "按钮的尺寸", + "defaultValue": "medium" + }, + { + "name": "iconSize", + "title": "Icon 尺寸", + "propType": { + "type": "oneOf", + "value": [ + "xxs", + "xs", + "small", + "medium", + "large", + "xl", + "xxl", + "xxxl" + ] + }, + "defaultValue": "small", + "description": "按钮中 Icon 的尺寸，用于替代 Icon 的默认大小" + }, + { + "name": "loading", + "title": "loading", + "propType": "bool", + "description": "设置按钮的载入状态", + "defaultValue": false + }, + { + "name": "ghost", + "title": "ghost", + "propType": { + "type": "oneOf", + "value": [ + true, + false, + "light", + "dark" + ] + }, + "description": "是否为幽灵按钮", + "defaultValue": false + }, + { + "name": "text", + "title": "text", + "propType": "bool", + "description": "是否为文本按钮", + "defaultValue": false + }, + { + "name": "warning", + "title": "warning", + "propType": "bool", + "description": "是否为警告按钮", + "defaultValue": false + }, + { + "name": "disabled", + "title": "disabled", + "propType": "bool", + "description": "是否禁用", + "defaultValue": false + }, + { + "name": "className", + "propType": "string" + }, + { + "name": "onMouseUp", + "propType": "func" }, { "name": "style", - "propType": "object" + "propType": "object", + "description": "自定义内联样式" } - ] + ], + "configure": { + "props": { + "isExtends": true, + "override": [ + { + "name": "icon", + "setter": "IconSetter", + "extraProps": { + "defaultValue": "", + "onChange": { + "type": "JSFunction", + "value": "(val, field, editor) => {\n field.nodes[0].children.import(val && {\"componentName\": \"Icon\", \"props\": {\"type\": val, \"style\": {\"marginRight\": 5}}}, true); //field.top.setPropValue('children', [{\"componentName\": \"Icon\", \"props\": {\"type\": val}}, (field.top.getPropValue('children') || []).slice(-1)]);\n}" + } + } + }, + { + "name": "children", + "title": { + "label": { + "type": "i18n", + "zh_CN": "文本内容", + "en_US": "content" + }, + "tip": "按钮文本内容" + }, + "setter": { + "componentName": "MixedSetter", + "props": { + "setters": [ + "StringSetter", + "ExpressionSetter" + ] + } + } + } + ] + } + } }, { "componentName": "Form.Error", @@ -8960,13 +9619,22 @@ "defaultValue": "single" }, { - "name": "value", - "propType": "any", - "description": "当前值，用于受控模式" + "name": "dataSource", + "propType": "Json" }, { "name": "defaultValue", - "propType": "any", + "title": { + "label": "默认值", + "tip": "初始的默认值" + }, + "propType": { + "type": "oneOfType", + "value": [ + "string", + "JSExpression" + ] + }, "description": "初始的默认值" }, { @@ -8976,17 +9644,29 @@ }, { "name": "hasBorder", + "title": { + "label": "边框", + "tip": "是否有边框" + }, "propType": "bool", "description": "是否有边框" }, { "name": "hasArrow", + "title": { + "label": "箭头", + "tip": "是否有下拉箭头" + }, "propType": "bool", "description": "是否有下拉箭头", "defaultValue": true }, { "name": "showSearch", + "title": { + "label": "搜索框", + "tip": "展开后是否能搜索（tag 模式下固定为true）" + }, "propType": "bool", "description": "展开后是否能搜索（tag 模式下固定为true）", "defaultValue": false @@ -9003,76 +9683,69 @@ }, { "name": "hasSelectAll", - "propType": { - "type": "oneOfType", - "value": [ - "bool", - "string" - ] + "title": { + "label": "全选", + "tip": "多选模式下是否有全选功能" }, + "propType": "bool", "description": "多选模式下是否有全选功能" }, { "name": "fillProps", + "title": { + "label": "FillProps", + "tip": "填充到选择框里的值的 key" + }, "propType": "string", "description": "填充到选择框里的值的 key\b\b" }, - { - "name": "useDetailValue", - "propType": "bool", - "description": "onChange 返回的 value 使用 dataSource 的对象" - }, - { - "name": "cacheValue", - "propType": "bool", - "description": "dataSource 变化的时是否保留已选的内容", - "defaultValue": true - }, - { - "name": "valueRender", - "propType": "func", - "description": "渲染 Select 展现内容的方法\n@param {Object} item 渲染节点的item\n@return {ReactNode} 展现内容\n@default item => item.label \\|\\| item.value" - }, - { - "name": "itemRender", - "propType": "func", - "description": "渲染 Menu.Item 内容的方法\n@param {Object} item 渲染节点的item\n@param {String} searchValue 搜索关键字（如果开启搜索）\n@return {ReactNode} item node" - }, { "name": "notFoundContent", - "propType": { - "type": "instanceOf", - "value": "node" + "title": { + "label": "空文案", + "tip": "notFoundContent|弹层内容为空的文案" }, + "propType": "string", "description": "弹层内容为空的文案" }, { "name": "style", "propType": "object" }, - { - "name": "searchValue", - "propType": "string", - "description": "受控搜索值，一般不需要设置\n@type {[type]}" - }, { "name": "tagInline", + "title": { + "label": "Inline", + "tip": "tagInline|是否一行显示，仅在 mode 为 multiple 的时候生效" + }, "propType": "bool", "description": "是否一行显示，仅在 mode 为 multiple 的时候生效", "defaultValue": false }, { "name": "maxTagCount", + "title": { + "label": "最大标签数", + "tip": "maxTagCount|最多显示多少个 tag" + }, "propType": "number", "description": "最多显示多少个 tag" }, { "name": "maxTagPlaceholder", - "propType": "func", + "title": { + "label": "隐藏 tag 占位符", + "tip": "maxTagPlaceholder|隐藏多余 tag 时显示的内容，在 maxTagCount 生效时起作用\n@param {number} selectedValues 当前已选中的元素\n@param {number} totalValues 总待选元素" + }, + "propType": "string", "description": "隐藏多余 tag 时显示的内容，在 maxTagCount 生效时起作用\n@param {number} selectedValues 当前已选中的元素\n@param {number} totalValues 总待选元素" }, { "name": "hiddenSelected", + "title": { + "label": "隐藏菜单", + "tip": "hiddenSelected|选择后是否立即隐藏菜单 (mode=multiple/tag 模式生效)" + }, "propType": "bool", "description": "选择后是否立即隐藏菜单 (mode=multiple/tag 模式生效)" }, @@ -9102,10 +9775,6 @@ { "name": "onKeyDown", "propType": "func" - }, - { - "name": "locale", - "propType": "object" } ], "configure": { @@ -12387,7 +13056,7 @@ }, { "componentName": "ResponsiveGrid", - "title": "ResponsiveGrid", + "title": "布局容器", "docUrl": "", "screenshot": "", "npm": { @@ -12399,11 +13068,6 @@ "subName": "" }, "props": [ - { - "name": "prefix", - "propType": "string", - "defaultValue": "next-" - }, { "name": "className", "propType": "any" @@ -12418,38 +13082,14 @@ "desktop" ] }, - "description": "设备，用来做自适应，默认为 PC\n@enumdesc 手机, 平板, PC", + "description": "设备，用来做自适应，默认为PC", "defaultValue": "desktop" }, - { - "name": "rows", - "propType": { - "type": "oneOfType", - "value": [ - "number", - "string" - ] - } - }, { "name": "columns", - "propType": { - "type": "oneOfType", - "value": [ - "number", - "string" - ] - }, - "description": "分为几列， 默认是 12 列" - }, - { - "name": "component", - "propType": { - "type": "instanceOf", - "value": "elementType" - }, - "description": "设置标签类型", - "defaultValue": "div" + "propType": "number", + "description": "分为几列", + "defaultValue": 4 }, { "name": "style", @@ -12464,7 +13104,7 @@ }, { "componentName": "ResponsiveGrid.Cell", - "title": "ResponsiveGrid.Cell", + "title": "布局容器 Cell", "docUrl": "", "screenshot": "", "npm": { @@ -12476,27 +13116,9 @@ "subName": "Cell" }, "props": [ - { - "name": "device", - "propType": { - "type": "oneOf", - "value": [ - "phone", - "tablet", - "desktop" - ] - }, - "defaultValue": "desktop" - }, { "name": "colSpan", - "propType": { - "type": "oneOfType", - "value": [ - "number", - "object" - ] - }, + "propType": "number", "description": "横向，占据几列" }, { @@ -12504,15 +13126,6 @@ "propType": "number", "description": "纵向，占据几行" }, - { - "name": "component", - "propType": { - "type": "instanceOf", - "value": "elementType" - }, - "description": "设置标签类型", - "defaultValue": "div" - }, { "name": "style", "propType": "object" @@ -12526,7 +13139,7 @@ }, { "componentName": "Box", - "title": "Box", + "title": "容器", "docUrl": "", "screenshot": "", "npm": { @@ -12801,6 +13414,98 @@ } ] }, + { + "componentName": "NextTable", + "title": "NextTable", + "icon": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_table.png", + "package": "NextTable", + "library": "NextTable", + "snippets": [{ + "title": "NextTable", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_table.png", + "schema": { + "componentName": "NextTable", + "props": { + "showMiniPager": true, + "showActionBar": true, + "actionBar": [ + { + "title": "新增", + "type": "primary" + }, + { + "title": "编辑" + } + ], + "columns": [ + { + "dataKey": "name", + "width": 200, + "align": "center", + "title": "姓名", + "editType": "text" + }, + { + "dataKey": "age", + "width": 200, + "align": "center", + "title": "年龄" + }, + { + "dataKey": "email", + "width": 200, + "align": "center", + "title": "邮箱" + } + ], + "data": [ + { + "name": "王小", + "id": "1", + "age": 15000, + "email": "aaa@abc.com" + }, + { + "name": "王中", + "id": "2", + "age": 25000, + "email": "bbb@abc.com" + }, + { + "name": "王大", + "id": "3", + "age": 35000, + "email": "ccc@abc.com" + } + ], + "actionTitle": "操作", + "actionWidth": 180, + "actionType": "link", + "actionFixed": "right", + "actionHidden": false, + "maxWebShownActionCount": 2, + "actionColumn": [ + { + "title": "编辑", + "callback": { + "type": "JSFunction", + "value": "(rowData, action, table) => {\n return table.editRow(rowData).then((row) => {\n console.log(row);\n });\n }" + }, + "device": ["desktop"] + }, + { + "title": "保存", + "callback": { + "type": "JSFunction", + "value": "(rowData, action, table) => { \nreturn table.saveRow(rowData).then((row) => { \nconsole.log(row); \n}); \n}" + }, + "mode": "EDIT" + } + ] + } + } + }] + }, { "componentName": "Table", "title": "表格", @@ -13394,7 +14099,8 @@ "closeable": "esc,close", "hasMask": true, "align": "cc cc", - "minMargin": 40 + "minMargin": 40, + "visible": true } } } @@ -13456,13 +14162,13 @@ "children": [ { "componentName": "Box", - "title": "弹性布局", + "title": "容器", "icon": "", "package": "@alifd/next", "library": "Next", "snippets": [ { - "title": "弹性布局", + "title": "容器", "screenshot": "", "schema": { "componentName": "Box", @@ -13485,15 +14191,7 @@ "props": { "href": "https://fusion.design", "target": "_blank", - "children": { - "type": "JSSlot", - "value": { - "componentName": "Typography.Text", - "props": { - "children": "这是一个超链接" - } - } - } + "children": "这是一个超链接" } } } @@ -13535,7 +14233,7 @@ "size": "medium", "htmlType": "button", "component": "button", - "children": ["取消"] + "children": "取消" } } }, @@ -13549,7 +14247,7 @@ "size": "medium", "htmlType": "button", "component": "button", - "children": ["提交"] + "children": "提交" } } } @@ -13577,7 +14275,8 @@ "style": { "margin": "0 5px 0 5px" }, - "htmlType": "submit" + "htmlType": "submit", + "children": "提交" }, "children": [ { @@ -13585,8 +14284,7 @@ "props": { "type": "success" } - }, - "提交" + } ] }, { "componentName": "Button", @@ -13595,9 +14293,9 @@ "style": { "margin": "0 5px 0 5px" }, - "htmlType": "reset" - }, - "children": "重置" + "htmlType": "reset", + "children": "重置" + } }] } } @@ -13667,30 +14365,236 @@ }, { "componentName": "ResponsiveGrid", - "title": "栅格布局", + "title": "布局容器", "icon": "", "package": "@alifd/next", "library": "Next", "snippets": [ { - "title": "栅格布局", - "screenshot": "", + "title": "1 + 2", + "screenshot": "https://img.alicdn.com/tfs/TB1BgObx5_1gK0jSZFqXXcpaXXa-112-64.png", "schema": { "componentName": "ResponsiveGrid", - "props": {} + "props": {}, + "children": [ + { + "componentName": "ResponsiveGrid.Cell", + "props": { + "colSpan": 12 + } + }, + { + "componentName": "ResponsiveGrid.Cell", + "props": { + "colSpan": 8 + } + }, + { + "componentName": "ResponsiveGrid.Cell", + "props": { + "colSpan": 4 + } + } + ] + } + }, + { + "title": "1 + 3", + "screenshot": "https://img.alicdn.com/tfs/TB1glaexYj1gK0jSZFuXXcrHpXa-112-64.png", + "schema": { + "componentName": "ResponsiveGrid", + "props": {}, + "children": [ + { + "componentName": "ResponsiveGrid.Cell", + "props": { + "colSpan": 12 + } + }, + { + "componentName": "ResponsiveGrid.Cell", + "props": { + "colSpan": 8 + } + }, + { + "componentName": "ResponsiveGrid.Cell", + "props": { + "colSpan": 4 + } + } + ] + } + }, + { + "title": "混合", + "screenshot": "https://img.alicdn.com/tfs/TB1cb9ex1H2gK0jSZJnXXaT1FXa-112-64.png", + "schema": { + "componentName": "ResponsiveGrid", + "props": {}, + "children": [ + { + "componentName": "ResponsiveGrid.Cell", + "props": { + "colSpan": 12 + } + }, + { + "componentName": "ResponsiveGrid.Cell", + "props": { + "colSpan": 4 + } + }, + { + "componentName": "ResponsiveGrid.Cell", + "props": { + "colSpan": 4 + } + }, + { + "componentName": "ResponsiveGrid.Cell", + "props": { + "colSpan": 4 + } + } + ] + } + }, + { + "title": "单栏", + "screenshot": "https://img.alicdn.com/tfs/TB1y5RLyO_1gK0jSZFqXXcpaXXa-112-40.png", + "schema": { + "componentName": "ResponsiveGrid", + "props": {}, + "children": [ + { + "componentName": "ResponsiveGrid.Cell", + "props": { + "colSpan": 12 + } + } + ] + } + }, + { + "title": "两栏", + "screenshot": "https://img.alicdn.com/tfs/TB1Sw4MyKL2gK0jSZFmXXc7iXXa-112-40.png", + "schema": { + "componentName": "ResponsiveGrid", + "props": {}, + "children": [ + { + "componentName": "ResponsiveGrid.Cell", + "props": { + "colSpan": 6 + } + }, + { + "componentName": "ResponsiveGrid.Cell", + "props": { + "colSpan": 6 + } + } + ] + } + }, + { + "title": "三栏", + "screenshot": "https://img.alicdn.com/tfs/TB1uq4LyQY2gK0jSZFgXXc5OFXa-112-40.png", + "schema": { + "componentName": "ResponsiveGrid", + "props": {}, + "children": [ + { + "componentName": "ResponsiveGrid.Cell", + "props": { + "colSpan": 4 + } + }, + { + "componentName": "ResponsiveGrid.Cell", + "props": { + "colSpan": 4 + } + }, + { + "componentName": "ResponsiveGrid.Cell", + "props": { + "colSpan": 4 + } + } + ] + } + }, + { + "title": "四栏", + "screenshot": "https://img.alicdn.com/tfs/TB1mpEjyQL0gK0jSZFtXXXQCXXa-112-40.png", + "schema": { + "componentName": "ResponsiveGrid", + "props": {}, + "children": [ + { + "componentName": "ResponsiveGrid.Cell", + "props": { + "colSpan": 3 + } + }, + { + "componentName": "ResponsiveGrid.Cell", + "props": { + "colSpan": 3 + } + }, + { + "componentName": "ResponsiveGrid.Cell", + "props": { + "colSpan": 3 + } + }, + { + "componentName": "ResponsiveGrid.Cell", + "props": { + "colSpan": 3 + } + } + ] + } + }, + { + "title": "1:3 分栏", + "screenshot": "https://img.alicdn.com/tfs/TB1x_RMyQT2gK0jSZPcXXcKkpXa-112-40.png", + "schema": { + "componentName": "ResponsiveGrid", + "props": { + "columns": 4 + }, + "children": [ + { + "componentName": "ResponsiveGrid.Cell", + "props": { + "colSpan": 1 + } + }, + { + "componentName": "ResponsiveGrid.Cell", + "props": { + "colSpan": 3 + } + } + ] } } ] }, { "componentName": "ResponsiveGrid.Cell", - "title": "栅格布局 Cell", + "title": "布局容器 Cell", "icon": "", "package": "@alifd/next", "library": "Next", "snippets": [ { - "title": "栅格布局 Cell", + "title": "布局容器 Cell", "screenshot": "", "schema": { "componentName": "ResponsiveGrid.Cell", @@ -14080,16 +14984,16 @@ "onClick": { "type": "JSFunction", "value": "(v, e) => { console.log(v, e) }" - } - }, - "children": "Submit" + }, + "children": "Submit" + } }, { "componentName": "Form.Reset", "props": { - "style": {"marginLeft": 10} - }, - "children": "Reset" + "style": {"marginLeft": 10}, + "children": "Reset" + } } ] } @@ -14265,7 +15169,16 @@ "props": { "mode": "single", "hasArrow": true, - "cacheValue": true + "cacheValue": true, + "dataSource": [ + {"value": "10001", "label": "Lucy King"}, + {"value": 10002, "label": "Lily King"}, + {"value": 10003, "label": "Tom Cat", "disabled": true}, + {"label": "Special Group", "children": [ + {"value": -1, "label": "FALSE"}, + {"value": 0, "label": "ZERO"} + ]} + ] } } } diff --git a/packages/demo/public/schema.json b/packages/demo/public/schema.json index 402a37437..616ff3bef 100644 --- a/packages/demo/public/schema.json +++ b/packages/demo/public/schema.json @@ -1 +1,581 @@ -{"componentName":"Page","id":"node_dockcviv8fo1","props":{"ref":"outterView","autoLoading":true,"style":{"padding":"0 5px 0 5px"}},"fileName":"test","dataSource":{"list":[]},"state":{"text":"outter","isShowDialog":false},"css":"body {font-size: 12px;} .botton{width:100px;color:#ff00ff}","lifeCycles":{"componentDidMount":{"type":"JSFunction","value":"function() {\n console.log('did mount');\n }"},"componentWillUnmount":{"type":"JSFunction","value":"function() {\n console.log('will umount');\n }"}},"methods":{"testFunc":{"type":"JSFunction","value":"function() {\n console.log('test func');\n }"},"onClick":{"type":"JSFunction","value":"function() {\n this.setState({\n isShowDialog: true\n })\n }"},"closeDialog":{"type":"JSFunction","value":"function() {\n this.setState({\n isShowDialog: false\n })\n }"}},"children":[{"componentName":"Box","id":"node_dockcy8n9xed","props":{"style":{"backgroundColor":"rgba(31,56,88,0.1)","padding":"12px 12px 12px 12px"}},"children":[{"componentName":"Box","id":"node_dockcy8n9xee","props":{"style":{"padding":"12px 12px 12px 12px","backgroundColor":"#ffffff"}},"children":[{"componentName":"Breadcrumb","id":"node_dockcy8n9xef","props":{"prefix":"next-","maxNode":100,"component":"nav"},"children":[{"componentName":"Breadcrumb.Item","id":"node_dockcy8n9xeg","props":{"prefix":"next-","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":"Button","id":"node_dockcy8n9xe10","props":{"type":"normal","style":{"margin":"0 5px 0 5px"},"htmlType":"reset","children":["清空"]}}]}]}]},{"componentName":"Box","id":"node_dockcy8n9xe1f","props":{"style":{"backgroundColor":"#ffffff","paddingBottom":"24px","display":"flex","flexDirection":"row","justifyContent":"flex-end"}},"children":[{"componentName":"Button","id":"node_dockd5nrh9p4","props":{"type":"primary","size":"medium","htmlType":"button","component":"button","children":["新建配置"],"style":{},"__events":[{"type":"componentEvent","name":"onClick","relatedEventName":"onClick"}],"onClick":{"type":"JSFunction","value":"function(){ this.onClick() }"}}}]},{"componentName":"Box","id":"node_dockd5nrh9p5","props":{},"children":[{"componentName":"Table","id":"node_dockd5nrh9p6","props":{"dataSource":[{"id1":1,"id2":"2016","id3":"2013","id4":"2014","id5":"2015","id6":"2016","id7":"2017","id8":"2018"},{"id1":1,"id2":"2016","id3":"2016","id4":"2016","id5":"2016","id6":"2016","id7":"2016","id8":"2016"}],"size":"medium","prefix":"next-","hasBorder":true,"hasHeader":true,"isZebra":false,"loading":false,"expandedIndexSimulate":false,"primaryKey":"id","locale":"zhCN.Table","crossline":false,"__events":[]},"children":[{"componentName":"Table.Column","id":"node_dockd5nrh9p7","props":{"title":"一级类目","dataIndex":"id1"}},{"componentName":"Table.Column","id":"node_dockd5nrh9p8","props":{"title":"二级类目","dataIndex":"id2"}},{"componentName":"Table.Column","id":"node_dockd5nrh9p9","props":{"title":"叶子类目","dataIndex":"id3"}},{"componentName":"Table.Column","id":"node_dockd5nrh9pa","props":{"title":"项目类型","dataIndex":"id4"}},{"componentName":"Table.Column","id":"node_dockd5nrh9pb","props":{"title":"项目id","dataIndex":"id5"}},{"componentName":"Table.Column","id":"node_dockd5nrh9pc","props":{"title":"知识条标题","dataIndex":"id6"}},{"componentName":"Table.Column","id":"node_dockd5nrh9pd","props":{"title":"知识条链接","dataIndex":"id7"}},{"componentName":"Table.Column","id":"node_dockd5nrh9pe","props":{"title":"操作","dataIndex":"id8"}}]},{"componentName":"Box","id":"node_dockd5nrh9pg","props":{"style":{"display":"flex","flexDirection":"row","justifyContent":"flex-end"}},"children":[{"componentName":"Pagination","id":"node_dockd5nrh9pf","props":{"prefix":"next-","type":"normal","shape":"normal","size":"medium","defaultCurrent":1,"total":100,"pageShowCount":5,"pageSize":10,"pageSizePosition":"start","showJump":true,"style":{}}}]}]}]},{"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"},"title":"标题","events":[],"__events":[{"type":"componentEvent","name":"onCancel","relatedEventName":"closeDialog"},{"type":"componentEvent","name":"onClose","relatedEventName":"closeDialog"},{"type":"componentEvent","name":"onOk","relatedEventName":"testFunc"}],"onCancel":{"type":"JSFunction","value":"function(){ this.closeDialog() }"},"onClose":{"type":"JSFunction","value":"function(){ this.closeDialog() }"},"onOk":{"type":"JSFunction","value":"function(){ this.testFunc() }"}},"children":[{"componentName":"Form","id":"node_dockd5nrh9pi","props":{"inline":false,"labelAlign":"top","labelTextAlign":"right","size":"medium"},"children":[{"componentName":"Form.Item","id":"node_dockd5nrh9pj","props":{"style":{"marginBottom":"0","minWidth":"200px","minHeight":"28px"},"label":"商品类目"},"children":[{"componentName":"Select","id":"node_dockd5nrh9pk","props":{"mode":"single","hasArrow":true,"cacheValue":true}}]},{"componentName":"Form.Item","id":"node_dockd5nrh9pl","props":{"style":{"marginBottom":"0","minWidth":"200px","minHeight":"28px"},"label":"商品类目"},"children":[{"componentName":"Select","id":"node_dockd5nrh9pm","props":{"mode":"single","hasArrow":true,"cacheValue":true}}]},{"componentName":"Form.Item","id":"node_dockd5nrh9pn","props":{"style":{"marginBottom":"0","minWidth":"200px","minHeight":"28px"},"label":"商品类目","asterisk":true},"children":[{"componentName":"Select","id":"node_dockd5nrh9po","props":{"mode":"single","hasArrow":true,"cacheValue":true}}]},{"componentName":"Form.Item","id":"node_dockd5nrh9pp","props":{"style":{"marginBottom":"0","minWidth":"200px","minHeight":"28px"},"label":"商品类目"},"children":[{"componentName":"Input","id":"node_dockd5nrh9pr","props":{"hasBorder":true,"size":"medium","autoComplete":"off"}}]}]}]}]} +{ + "componentName": "Page", + "id": "node_dockcviv8fo1", + "props": { + "ref": "outterView", + "autoLoading": true, + "style": { + "padding": "0 5px 0 5px" + } + }, + "fileName": "test", + "dataSource": { + "list": [] + }, + "state": { + "text": "outter", + "isShowDialog": false + }, + "css": "body {font-size: 12px;} .botton{width:100px;color:#ff00ff}", + "lifeCycles": { + "componentDidMount": { + "type": "JSFunction", + "value": "function() {\n console.log('did mount');\n }" + }, + "componentWillUnmount": { + "type": "JSFunction", + "value": "function() {\n console.log('will umount');\n }" + } + }, + "methods": { + "testFunc": { + "type": "JSFunction", + "value": "function() {\n console.log('test func');\n }" + }, + "onClick": { + "type": "JSFunction", + "value": "function() {\n this.setState({\n isShowDialog: true\n })\n }" + }, + "closeDialog": { + "type": "JSFunction", + "value": "function() {\n this.setState({\n isShowDialog: false\n })\n }" + } + }, + "children": [ + { + "componentName": "Box", + "id": "node_dockcy8n9xed", + "props": { + "style": { + "backgroundColor": "rgba(31,56,88,0.1)", + "padding": "12px 12px 12px 12px" + } + }, + "children": [ + { + "componentName": "Box", + "id": "node_dockcy8n9xee", + "props": { + "style": { + "padding": "12px 12px 12px 12px", + "backgroundColor": "#ffffff" + } + }, + "children": [ + { + "componentName": "Breadcrumb", + "id": "node_dockcy8n9xef", + "props": { + "prefix": "next-", + "maxNode": 100, + "component": "nav" + }, + "children": [ + { + "componentName": "Breadcrumb.Item", + "id": "node_dockcy8n9xeg", + "props": { + "prefix": "next-", + "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": "Button", + "id": "node_dockcy8n9xe10", + "props": { + "type": "normal", + "style": { + "margin": "0 5px 0 5px" + }, + "htmlType": "reset", + "children": "清空" + } + } + ] + } + ] + } + ] + }, + { + "componentName": "Box", + "id": "node_dockcy8n9xe1f", + "props": { + "style": { + "backgroundColor": "#ffffff", + "paddingBottom": "24px", + "display": "flex", + "flexDirection": "row", + "justifyContent": "flex-end" + } + }, + "children": [ + { + "componentName": "Button", + "id": "node_dockd5nrh9p4", + "props": { + "type": "primary", + "size": "medium", + "htmlType": "button", + "component": "button", + "children": "新建配置", + "style": {}, + "__events": [ + { + "type": "componentEvent", + "name": "onClick", + "relatedEventName": "onClick" + } + ], + "onClick": { + "type": "JSFunction", + "value": "function(){ this.onClick() }" + } + } + } + ] + }, + { + "componentName": "Box", + "id": "node_dockd5nrh9p5", + "props": {}, + "children": [ + { + "componentName": "Table", + "id": "node_dockd5nrh9p6", + "props": { + "dataSource": [ + { + "id1": 1, + "id2": "2016", + "id3": "2013", + "id4": "2014", + "id5": "2015", + "id6": "2016", + "id7": "2017", + "id8": "2018" + }, + { + "id1": 1, + "id2": "2016", + "id3": "2016", + "id4": "2016", + "id5": "2016", + "id6": "2016", + "id7": "2016", + "id8": "2016" + } + ], + "size": "medium", + "prefix": "next-", + "hasBorder": true, + "hasHeader": true, + "isZebra": false, + "loading": false, + "expandedIndexSimulate": false, + "primaryKey": "id", + "locale": "zhCN.Table", + "crossline": false, + "__events": [] + }, + "children": [ + { + "componentName": "Table.Column", + "id": "node_dockd5nrh9p7", + "props": { + "title": "一级类目", + "dataIndex": "id1" + } + }, + { + "componentName": "Table.Column", + "id": "node_dockd5nrh9p8", + "props": { + "title": "二级类目", + "dataIndex": "id2" + } + }, + { + "componentName": "Table.Column", + "id": "node_dockd5nrh9p9", + "props": { + "title": "叶子类目", + "dataIndex": "id3" + } + }, + { + "componentName": "Table.Column", + "id": "node_dockd5nrh9pa", + "props": { + "title": "项目类型", + "dataIndex": "id4" + } + }, + { + "componentName": "Table.Column", + "id": "node_dockd5nrh9pb", + "props": { + "title": "项目id", + "dataIndex": "id5" + } + }, + { + "componentName": "Table.Column", + "id": "node_dockd5nrh9pc", + "props": { + "title": "知识条标题", + "dataIndex": "id6" + } + }, + { + "componentName": "Table.Column", + "id": "node_dockd5nrh9pd", + "props": { + "title": "知识条链接", + "dataIndex": "id7" + } + }, + { + "componentName": "Table.Column", + "id": "node_dockd5nrh9pe", + "props": { + "title": "操作", + "dataIndex": "id8" + } + } + ] + }, + { + "componentName": "Box", + "id": "node_dockd5nrh9pg", + "props": { + "style": { + "display": "flex", + "flexDirection": "row", + "justifyContent": "flex-end" + } + }, + "children": [ + { + "componentName": "Pagination", + "id": "node_dockd5nrh9pf", + "props": { + "prefix": "next-", + "type": "normal", + "shape": "normal", + "size": "medium", + "defaultCurrent": 1, + "total": 100, + "pageShowCount": 5, + "pageSize": 10, + "pageSizePosition": "start", + "showJump": true, + "style": {} + } + } + ] + } + ] + } + ] + }, + { + "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" + }, + "title": "标题", + "events": [], + "__events": [ + { + "type": "componentEvent", + "name": "onCancel", + "relatedEventName": "closeDialog" + }, + { + "type": "componentEvent", + "name": "onClose", + "relatedEventName": "closeDialog" + }, + { + "type": "componentEvent", + "name": "onOk", + "relatedEventName": "testFunc" + } + ], + "onCancel": { + "type": "JSFunction", + "value": "function(){ this.closeDialog() }" + }, + "onClose": { + "type": "JSFunction", + "value": "function(){ this.closeDialog() }" + }, + "onOk": { + "type": "JSFunction", + "value": "function(){ this.testFunc() }" + } + }, + "children": [ + { + "componentName": "Form", + "id": "node_dockd5nrh9pi", + "props": { + "inline": false, + "labelAlign": "top", + "labelTextAlign": "right", + "size": "medium" + }, + "children": [ + { + "componentName": "Form.Item", + "id": "node_dockd5nrh9pj", + "props": { + "style": { + "marginBottom": "0", + "minWidth": "200px", + "minHeight": "28px" + }, + "label": "商品类目" + }, + "children": [ + { + "componentName": "Select", + "id": "node_dockd5nrh9pk", + "props": { + "mode": "single", + "hasArrow": true, + "cacheValue": true + } + } + ] + }, + { + "componentName": "Form.Item", + "id": "node_dockd5nrh9pl", + "props": { + "style": { + "marginBottom": "0", + "minWidth": "200px", + "minHeight": "28px" + }, + "label": "商品类目" + }, + "children": [ + { + "componentName": "Select", + "id": "node_dockd5nrh9pm", + "props": { + "mode": "single", + "hasArrow": true, + "cacheValue": true + } + } + ] + }, + { + "componentName": "Form.Item", + "id": "node_dockd5nrh9pn", + "props": { + "style": { + "marginBottom": "0", + "minWidth": "200px", + "minHeight": "28px" + }, + "label": "商品类目", + "asterisk": true + }, + "children": [ + { + "componentName": "Select", + "id": "node_dockd5nrh9po", + "props": { + "mode": "single", + "hasArrow": true, + "cacheValue": true + } + } + ] + }, + { + "componentName": "Form.Item", + "id": "node_dockd5nrh9pp", + "props": { + "style": { + "marginBottom": "0", + "minWidth": "200px", + "minHeight": "28px" + }, + "label": "商品类目" + }, + "children": [ + { + "componentName": "Input", + "id": "node_dockd5nrh9pr", + "props": { + "hasBorder": true, + "size": "medium", + "autoComplete": "off" + } + } + ] + } + ] + } + ] + } + ] + } \ No newline at end of file diff --git a/packages/editor-setters/src/events-setter/index.scss b/packages/editor-setters/src/events-setter/index.scss index 04e174828..375b2820f 100644 --- a/packages/editor-setters/src/events-setter/index.scss +++ b/packages/editor-setters/src/events-setter/index.scss @@ -67,7 +67,7 @@ .event-menu { max-height: 300px; - width: 230px; + width: 256px; overflow-x: hidden; position: absolute; top: 67px; diff --git a/packages/editor-setters/src/events-setter/index.tsx b/packages/editor-setters/src/events-setter/index.tsx index 6f364cdfe..1b2ade2fe 100644 --- a/packages/editor-setters/src/events-setter/index.tsx +++ b/packages/editor-setters/src/events-setter/index.tsx @@ -29,30 +29,31 @@ export default class EventsSetter extends Component<{ selectType: null, nativeEventList: [], lifeCycleEventList: [], - eventDataList: this.props.value || [], + eventDataList: (this.props?.value?.eventDataList ? this.props.value.eventDataList : this.props?.value) || [], relatedEventName: '', }; // constructor (){ // super(); // debugger; - // if (!this.props || !this.props.value){ - // this.setState({ - // eventDataList:[] - // }) - // } + // // if (!this.props || !this.props.value){ + // // this.setState({ + // // eventDataList:[] + // // }) + // // } // } - static getDerivedStateFromProps(nextProps, prevState) { - // const { value } = nextProps; - // debugger; - // if (value !== prevState.eventDataList) { - // return { - // value, - // }; - // } - return null; - } + // static getDerivedStateFromProps(nextProps, prevState) { + // debugger; + // // const { value } = nextProps; + // // debugger; + // // if (value !== prevState.eventDataList) { + // // return { + // // value, + // // }; + // // } + // return null; + // } private bindEventName:String; @@ -310,7 +311,7 @@ export default class EventsSetter extends Component<{ }; deleteEvent = (eventName: String) => { - const { eventDataList } = this.state; + const { eventDataList,eventList} = this.state; eventDataList.map((item, index) => { if (item.name === eventName) { eventDataList.splice(index, 1); @@ -320,7 +321,7 @@ export default class EventsSetter extends Component<{ this.setState({ eventDataList, }); - + this.props.onChange({eventDataList,eventList}); this.updateEventListStatus(eventName, true); }; @@ -332,7 +333,7 @@ export default class EventsSetter extends Component<{ bindEvent = (relatedEventName: String) => { - const {eventDataList} = this.state; + const {eventDataList,eventList} = this.state; eventDataList.map(item => { if (item.name === this.bindEventName) { item.relatedEventName = relatedEventName; @@ -344,7 +345,7 @@ export default class EventsSetter extends Component<{ }) - this.props.onChange(eventDataList); + this.props.onChange({eventDataList,eventList}); //this.closeDialog(); }; diff --git a/packages/editor-skeleton/src/transducers/addon-combine.ts b/packages/editor-skeleton/src/transducers/addon-combine.ts index ea8718b56..678861296 100644 --- a/packages/editor-skeleton/src/transducers/addon-combine.ts +++ b/packages/editor-skeleton/src/transducers/addon-combine.ts @@ -206,7 +206,12 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp return val; }, - setValue(field: SettingTarget, eventDataList: any[]) { + setValue(field: SettingTarget, eventData) { + const {eventDataList,eventList} = eventData; + eventList.map((item)=>{ + field.parent.clearPropValue(item.name); + return item; + }) eventDataList.map((item) => { field.parent.setPropValue(item.name, { type: 'JSFunction', diff --git a/packages/editor-skeleton/src/transducers/parse-props.ts b/packages/editor-skeleton/src/transducers/parse-props.ts index 0ae73b371..06eb544d9 100644 --- a/packages/editor-skeleton/src/transducers/parse-props.ts +++ b/packages/editor-skeleton/src/transducers/parse-props.ts @@ -188,7 +188,7 @@ function propTypeToSetter(propType: PropType): SetterType { }; } -const EVENT_RE = /^on[A-Z][\w]*$/; +const EVENT_RE = /^on|after[A-Z][\w]*$/; export default function(metadata: TransformedComponentMetadata): TransformedComponentMetadata { const { configure = {} } = metadata; diff --git a/packages/plugin-sample-preview/src/index.tsx b/packages/plugin-sample-preview/src/index.tsx index 27cb93fcc..5a1efd7b0 100644 --- a/packages/plugin-sample-preview/src/index.tsx +++ b/packages/plugin-sample-preview/src/index.tsx @@ -2,7 +2,7 @@ import React, { useState, ComponentType } from 'react'; import { Button, Dialog } from '@alifd/next'; import { PluginProps, NpmInfo } from '@ali/lowcode-types'; import { Designer } from '@ali/lowcode-designer'; -import { buildComponents } from '@ali/lowcode-utils'; +import { buildComponents, assetBundle, AssetList, AssetLevel, AssetLoader } from '@ali/lowcode-utils'; import ReactRenderer from '@ali/lowcode-react-renderer'; import './index.scss'; @@ -16,15 +16,34 @@ const SamplePreview = ({ editor }: PluginProps) => { const designer = editor.get(Designer); if (designer) { const assets = await editor.get('assets'); + const { packages } = assets; + const { componentsMap, schema } = designer; + console.info('save schema:', designer, assets); const libraryMap = {}; - assets.packages.forEach(({ package, library }) => { + const libraryAsset: AssetList = []; + packages.forEach(({ package, library, urls }) => { libraryMap[package] = library; + if (urls) { + libraryAsset.push(urls); + } }); + + const vendors = [ + assetBundle(libraryAsset, AssetLevel.Library), + ]; + console.log('libraryMap&vendors', libraryMap, vendors); + + // TODO asset may cause pollution + const assetLoader = new AssetLoader(); + await assetLoader.load(libraryAsset); + const components = buildComponents(libraryMap, componentsMap); + console.log('components', components); + setData({ - schema: designer.schema.componentsTree[0], - components: buildComponents(libraryMap, designer.componentsMap), + schema: schema.componentsTree[0], + components, }); setVisible(true); } diff --git a/packages/plugin-source-editor/src/index.tsx b/packages/plugin-source-editor/src/index.tsx index 5ee8296be..4985679cc 100644 --- a/packages/plugin-source-editor/src/index.tsx +++ b/packages/plugin-source-editor/src/index.tsx @@ -275,9 +275,9 @@ export default class SourceEditor extends Component<{ -
+ {/*
-
+
*/} ); } diff --git a/packages/react-simulator-renderer/src/renderer.ts b/packages/react-simulator-renderer/src/renderer.ts index 61edf182c..836aa5e29 100644 --- a/packages/react-simulator-renderer/src/renderer.ts +++ b/packages/react-simulator-renderer/src/renderer.ts @@ -5,15 +5,16 @@ import SimulatorRendererView from './renderer-view'; import { computed, obx } from '@recore/obx'; import { Asset } from '@ali/lowcode-utils'; import { getClientRects } from './utils/get-client-rects'; -import loader from './utils/loader'; import { reactFindDOMNodes, FIBER_KEY } from './utils/react-find-dom-nodes'; -import { isElement, cursor, setNativeSelection, buildComponents, getSubComponent } from '@ali/lowcode-utils'; +import { isElement, cursor, setNativeSelection, buildComponents, getSubComponent, AssetLoader } from '@ali/lowcode-utils'; import { RootSchema, ComponentSchema, TransformStage } from '@ali/lowcode-types'; // just use types import { BuiltinSimulatorRenderer, NodeInstance, Component } from '@ali/lowcode-designer'; import Slot from './builtin-components/slot'; import Leaf from './builtin-components/leaf'; +const loader = new AssetLoader(); + export class SimulatorRenderer implements BuiltinSimulatorRenderer { readonly isSimulatorRenderer = true; private dispose?: () => void; diff --git a/packages/react-simulator-renderer/src/utils/loader.ts b/packages/react-simulator-renderer/src/utils/loader.ts deleted file mode 100644 index 3bba55ba1..000000000 --- a/packages/react-simulator-renderer/src/utils/loader.ts +++ /dev/null @@ -1,113 +0,0 @@ -import { load, evaluate } from './script'; -import StylePoint from './style'; -import { - Asset, - AssetLevel, - AssetLevels, - AssetType, - AssetList, - isAssetBundle, - isAssetItem, - assetItem, - AssetItem, - isCSSUrl, -} from '@ali/lowcode-utils'; - -function parseAssetList(scripts: any, styles: any, assets: AssetList, level?: AssetLevel) { - for (const asset of assets) { - parseAsset(scripts, styles, asset, level); - } -} - -function parseAsset(scripts: any, styles: any, asset: Asset | undefined | null, level?: AssetLevel) { - if (!asset) { - return; - } - if (Array.isArray(asset)) { - return parseAssetList(scripts, styles, asset, level); - } - - if (isAssetBundle(asset)) { - if (asset.assets) { - if (Array.isArray(asset.assets)) { - parseAssetList(scripts, styles, asset.assets, asset.level || level); - } else { - parseAsset(scripts, styles, asset.assets, asset.level || level); - } - return; - } - return; - } - - if (!isAssetItem(asset)) { - asset = assetItem(isCSSUrl(asset) ? AssetType.CSSUrl : AssetType.JSUrl, asset, level)!; - } - - let lv = asset.level || level; - - if (!lv || AssetLevel[lv] == null) { - lv = AssetLevel.App; - } - - asset.level = lv; - if (asset.type === AssetType.CSSUrl || asset.type == AssetType.CSSText) { - styles[lv].push(asset); - } else { - scripts[lv].push(asset); - } -} - -export class AssetLoader { - async load(asset: Asset) { - const styles: any = {}; - const scripts: any = {}; - AssetLevels.forEach(lv => { - styles[lv] = []; - scripts[lv] = []; - }); - parseAsset(scripts, styles, asset); - const styleQueue: AssetItem[] = styles[AssetLevel.Environment].concat( - styles[AssetLevel.Library], - styles[AssetLevel.Theme], - styles[AssetLevel.Runtime], - styles[AssetLevel.App], - ); - const scriptQueue: AssetItem[] = scripts[AssetLevel.Environment].concat( - scripts[AssetLevel.Library], - scripts[AssetLevel.Theme], - scripts[AssetLevel.Runtime], - scripts[AssetLevel.App], - ); - await Promise.all( - styleQueue.map(({ content, level, type, id }) => this.loadStyle(content, level!, type === AssetType.CSSUrl, id)), - ); - await Promise.all(scriptQueue.map(({ content, type }) => this.loadScript(content, type === AssetType.JSUrl))); - } - - private stylePoints = new Map(); - private loadStyle(content: string | undefined | null, level: AssetLevel, isUrl?: boolean, id?: string) { - if (!content) { - return; - } - let point: StylePoint | undefined; - if (id) { - point = this.stylePoints.get(id); - if (!point) { - point = new StylePoint(level, id); - this.stylePoints.set(id, point); - } - } else { - point = new StylePoint(level); - } - return isUrl ? point.applyUrl(content) : point.applyText(content); - } - - private loadScript(content: string | undefined | null, isUrl?: boolean) { - if (!content) { - return; - } - return isUrl ? load(content) : evaluate(content); - } -} - -export default new AssetLoader(); diff --git a/packages/react-simulator-renderer/src/utils/style.ts b/packages/react-simulator-renderer/src/utils/style.ts deleted file mode 100644 index 74f4eddd4..000000000 --- a/packages/react-simulator-renderer/src/utils/style.ts +++ /dev/null @@ -1,73 +0,0 @@ -import { createDefer } from './create-defer'; - -export default class StylePoint { - private lastContent: string | undefined; - private lastUrl: string | undefined; - private placeholder: Element | Text; - - constructor(readonly level: number, readonly id?: string) { - let placeholder: any; - if (id) { - placeholder = document.head.querySelector(`style[data-id="${id}"]`); - } - if (!placeholder) { - placeholder = document.createTextNode(''); - const meta = document.head.querySelector(`meta[level="${level}"]`); - if (meta) { - document.head.insertBefore(placeholder, meta); - } else { - document.head.appendChild(placeholder); - } - } - this.placeholder = placeholder; - } - - applyText(content: string) { - if (this.lastContent === content) { - return; - } - this.lastContent = content; - this.lastUrl = undefined; - const element = document.createElement('style'); - element.setAttribute('type', 'text/css'); - if (this.id) { - element.setAttribute('data-id', this.id); - } - element.appendChild(document.createTextNode(content)); - document.head.insertBefore(element, this.placeholder.parentNode === document.head ? this.placeholder.nextSibling : null); - document.head.removeChild(this.placeholder); - this.placeholder = element; - } - - applyUrl(url: string) { - if (this.lastUrl === url) { - return; - } - this.lastContent = undefined; - this.lastUrl = url; - const element = document.createElement('link'); - element.onload = onload; - element.onerror = onload; - - const i = createDefer(); - function onload(e: any) { - element.onload = null; - element.onerror = null; - if (e.type === 'load') { - i.resolve(); - } else { - i.reject(); - } - } - - element.href = url; - element.rel = 'stylesheet'; - if (this.id) { - element.setAttribute('data-id', this.id); - } - document.head.insertBefore(element, this.placeholder.parentNode === document.head ? this.placeholder.nextSibling : null); - document.head.removeChild(this.placeholder); - this.placeholder = element; - return i.promise(); - } -} diff --git a/packages/utils/src/asset.ts b/packages/utils/src/asset.ts index 79ab83531..f6f842160 100644 --- a/packages/utils/src/asset.ts +++ b/packages/utils/src/asset.ts @@ -1,3 +1,7 @@ +import { isCSSUrl } from './is-css-url'; +import { createDefer } from './create-defer'; +import { load, evaluate } from './script'; + export interface AssetItem { type: AssetType; content?: string | null; @@ -88,3 +92,172 @@ export function assetItem(type: AssetType, content?: string | null, level?: Asse id, }; } + +export class StylePoint { + private lastContent: string | undefined; + private lastUrl: string | undefined; + private placeholder: Element | Text; + + constructor(readonly level: number, readonly id?: string) { + let placeholder: any; + if (id) { + placeholder = document.head.querySelector(`style[data-id="${id}"]`); + } + if (!placeholder) { + placeholder = document.createTextNode(''); + const meta = document.head.querySelector(`meta[level="${level}"]`); + if (meta) { + document.head.insertBefore(placeholder, meta); + } else { + document.head.appendChild(placeholder); + } + } + this.placeholder = placeholder; + } + + applyText(content: string) { + if (this.lastContent === content) { + return; + } + this.lastContent = content; + this.lastUrl = undefined; + const element = document.createElement('style'); + element.setAttribute('type', 'text/css'); + if (this.id) { + element.setAttribute('data-id', this.id); + } + element.appendChild(document.createTextNode(content)); + document.head.insertBefore(element, this.placeholder.parentNode === document.head ? this.placeholder.nextSibling : null); + document.head.removeChild(this.placeholder); + this.placeholder = element; + } + + applyUrl(url: string) { + if (this.lastUrl === url) { + return; + } + this.lastContent = undefined; + this.lastUrl = url; + const element = document.createElement('link'); + element.onload = onload; + element.onerror = onload; + + const i = createDefer(); + function onload(e: any) { + element.onload = null; + element.onerror = null; + if (e.type === 'load') { + i.resolve(); + } else { + i.reject(); + } + } + + element.href = url; + element.rel = 'stylesheet'; + if (this.id) { + element.setAttribute('data-id', this.id); + } + document.head.insertBefore(element, this.placeholder.parentNode === document.head ? this.placeholder.nextSibling : null); + document.head.removeChild(this.placeholder); + this.placeholder = element; + return i.promise(); + } +} + +function parseAssetList(scripts: any, styles: any, assets: AssetList, level?: AssetLevel) { + for (const asset of assets) { + parseAsset(scripts, styles, asset, level); + } +} + +function parseAsset(scripts: any, styles: any, asset: Asset | undefined | null, level?: AssetLevel) { + if (!asset) { + return; + } + if (Array.isArray(asset)) { + return parseAssetList(scripts, styles, asset, level); + } + + if (isAssetBundle(asset)) { + if (asset.assets) { + if (Array.isArray(asset.assets)) { + parseAssetList(scripts, styles, asset.assets, asset.level || level); + } else { + parseAsset(scripts, styles, asset.assets, asset.level || level); + } + return; + } + return; + } + + if (!isAssetItem(asset)) { + asset = assetItem(isCSSUrl(asset) ? AssetType.CSSUrl : AssetType.JSUrl, asset, level)!; + } + + let lv = asset.level || level; + + if (!lv || AssetLevel[lv] == null) { + lv = AssetLevel.App; + } + + asset.level = lv; + if (asset.type === AssetType.CSSUrl || asset.type == AssetType.CSSText) { + styles[lv].push(asset); + } else { + scripts[lv].push(asset); + } +} + +export class AssetLoader { + async load(asset: Asset) { + const styles: any = {}; + const scripts: any = {}; + AssetLevels.forEach(lv => { + styles[lv] = []; + scripts[lv] = []; + }); + parseAsset(scripts, styles, asset); + const styleQueue: AssetItem[] = styles[AssetLevel.Environment].concat( + styles[AssetLevel.Library], + styles[AssetLevel.Theme], + styles[AssetLevel.Runtime], + styles[AssetLevel.App], + ); + const scriptQueue: AssetItem[] = scripts[AssetLevel.Environment].concat( + scripts[AssetLevel.Library], + scripts[AssetLevel.Theme], + scripts[AssetLevel.Runtime], + scripts[AssetLevel.App], + ); + await Promise.all( + styleQueue.map(({ content, level, type, id }) => this.loadStyle(content, level!, type === AssetType.CSSUrl, id)), + ); + await Promise.all(scriptQueue.map(({ content, type }) => this.loadScript(content, type === AssetType.JSUrl))); + } + + private stylePoints = new Map(); + private loadStyle(content: string | undefined | null, level: AssetLevel, isUrl?: boolean, id?: string) { + if (!content) { + return; + } + let point: StylePoint | undefined; + if (id) { + point = this.stylePoints.get(id); + if (!point) { + point = new StylePoint(level, id); + this.stylePoints.set(id, point); + } + } else { + point = new StylePoint(level); + } + return isUrl ? point.applyUrl(content) : point.applyText(content); + } + + private loadScript(content: string | undefined | null, isUrl?: boolean) { + if (!content) { + return; + } + return isUrl ? load(content) : evaluate(content); + } +} diff --git a/packages/utils/src/build-components.ts b/packages/utils/src/build-components.ts index 10fef43d0..7dfeed3bc 100644 --- a/packages/utils/src/build-components.ts +++ b/packages/utils/src/build-components.ts @@ -1,5 +1,5 @@ -import { ComponentType } from 'react'; -import { NpmInfo} from '@ali/lowcode-types'; +import { ComponentType, forwardRef, createElement } from 'react'; +import { NpmInfo } from '@ali/lowcode-types'; import { isReactComponent } from './is-react'; import { isESModule } from './is-es-module'; @@ -11,8 +11,16 @@ function accessLibrary(library: string | object) { if (typeof library !== 'string') { return library; } + + return (window as any)[library] || generateHtmlComp(library); +} - return (window as any)[library] || library; +export function generateHtmlComp(library: string) { + if (['a', 'img', 'div', 'span', 'svg'].includes(library)) { + return forwardRef((props, ref) => { + return createElement(library, { ref, ...props }, props.children); + }); + } } export function getSubComponent(library: any, paths: string[]) { diff --git a/packages/react-simulator-renderer/src/utils/create-defer.ts b/packages/utils/src/create-defer.ts similarity index 100% rename from packages/react-simulator-renderer/src/utils/create-defer.ts rename to packages/utils/src/create-defer.ts diff --git a/packages/react-simulator-renderer/src/utils/script.ts b/packages/utils/src/script.ts similarity index 100% rename from packages/react-simulator-renderer/src/utils/script.ts rename to packages/utils/src/script.ts