github/lowcode-engine
1
0
Fork 0
mirror of https://github.com/alibaba/lowcode-engine.git synced 2026-02-28 04:40:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

1. Form 组件优化；

Browse Source 
2. IconSetter 优化；
This commit is contained in:
金禅 2020-08-13 23:36:05 +08:00
parent 236b885cae
commit c5c2cbc972
3 changed files with 214 additions and 302 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

498
packages/demo/public/assets.json
View File

@ -4509,7 +4509,13 @@
},
{
"name": "visible",
"propType": "JSExpression",
"propType": {
"type": "oneOfType",
"value": [
"JSExpression",
"bool"
]
},
"description": "是否显示",
"defaultValue": false
},
@ -4979,12 +4985,6 @@
"subName": ""
},
"props": [
{
"name": "prefix",
"propType": "string",
"description": "样式前缀",
"defaultValue": "next-"
},
{
"name": "inline",
"propType": "bool",
@ -4992,6 +4992,10 @@
},
{
"name": "size",
"title": {
"label": "Size",
"tip": "单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。\n@enumdesc 大, 中, 小"
},
"propType": {
"type": "oneOf",
"value": [
@ -5010,6 +5014,10 @@
},
{
"name": "labelAlign",
"title": {
"label": "标签的位置",
"tip": "上, 左, 内"
},
"propType": {
"type": "oneOf",
"value": [
@ -5032,74 +5040,11 @@
},
"description": "标签的左右对齐方式\n@enumdesc 左, 右"
},
{
"name": "field",
"propType": "any",
"description": "field 实例, 传 false 会禁用 field"
},
{
"name": "saveField",
"propType": "func",
"description": "保存 Form 自动生成的 field 对象"
},
{
"name": "labelCol",
"propType": {
"type": "shape",
"value": [{
"name": "span",
"description": "fixedSpan",
"propType": "number"
},{
"name": "fixedSpan",
"description": "fixedSpan",
"propType": "number"
},{
"name": "offset",
"description": "offset",
"propType": "number"
},{
"name": "fixedOffset",
"description": "fixedOffset",
"propType": "number"
}]
},
"description": "控制第一级 Item 的 labelCol"
},
{
"name": "wrapperCol",
"propType": {
"type": "shape",
"value": [{
"name": "span",
"description": "fixedSpan",
"propType": "number"
},{
"name": "fixedSpan",
"description": "fixedSpan",
"propType": "number"
},{
"name": "offset",
"description": "offset",
"propType": "number"
},{
"name": "fixedOffset",
"description": "fixedOffset",
"propType": "number"
}]
},
"description": "控制第一级 Item 的 wrapperCol"
},
{
"name": "onSubmit",
"propType": "func",
"description": "form内有 `htmlType=\"submit\"` 的元素的时候会触发"
},
{
"name": "children",
"propType": "any",
"description": "子元素"
},
{
"name": "className",
"propType": "string",
@ -5112,7 +5057,13 @@
},
{
"name": "value",
"propType": "object",
"propType": {
"type": "oneOfType",
"value": [
"Json",
"JSExpression"
]
},
"description": "表单数值"
},
{
@ -5120,22 +5071,6 @@
"propType": "func",
"description": "表单变化回调\n@param {Object} values 表单数据\n@param {Object} item 详细\n@param {String} item.name 变化的组件名\n@param {String} item.value 变化的数据\n@param {Object} item.field field 实例"
},
{
"name": "component",
"propType": {
"type": "oneOfType",
"value": [
"string",
"func"
]
},
"description": "设置标签类型",
"defaultValue": "form"
},
{
"name": "fieldOptions",
"propType": "object"
},
{
"name": "rtl",
"propType": "bool"
@ -5163,11 +5098,16 @@
"propType": "bool",
"description": "是否开启预览态"
}
]
],
"configure": {
"component": {
"isContainer": true
}
}
},
{
"componentName": "Form.Item",
"title": "Form.Item",
"componentName": "FormItem",
"title": "FormItem",
"docUrl": "",
"screenshot": "",
"npm": {
@ -5180,10 +5120,8 @@
},
"props": [
{
"name": "prefix",
"propType": "string",
"description": "样式前缀",
"defaultValue": "next-"
"name": "id",
"propType": "string"
},
{
"name": "rtl",
@ -5196,32 +5134,60 @@
},
{
"name": "labelCol",
"propType": "object",
"propType": {
"type": "shape",
"value": [{
"name": "span",
"description": "span",
"propType": "number"
},{
"name": "offset",
"description": "offset",
"propType": "number"
}]
},
"description": "label 标签布局，通 `<Col>` 组件，设置 span offset 值，如 {span: 8, offset: 16}，该项仅在垂直表单有效"
},
{
"name": "wrapperCol",
"propType": "object",
"propType": {
"type": "shape",
"value": [{
"name": "span",
"description": "span",
"propType": "number"
},{
"name": "offset",
"description": "offset",
"propType": "number"
}]
},
"description": "需要为输入控件设置布局样式时，使用该属性，用法同 labelCol"
},
{
"name": "help",
"propType": {
"type": "instanceOf",
"value": "node"
"title": {
"label": "自定义提示信息",
"tip": "如不设置，则会根据校验规则自动生成."
},
"propType": "string",
"description": "自定义提示信息，如不设置，则会根据校验规则自动生成."
},
{
"name": "extra",
"propType": {
"type": "instanceOf",
"value": "node"
"title": {
"label": "额外的提示信息",
"tip": "和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 位于错误信息后面"
},
"propType": "string",
"description": "额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 位于错误信息后面"
},
{
"name": "validateState",
"title": {
"label": "校验状态",
"tip": "如不设置，则会根据校验规则自动生成\n@enumdesc 失败, 成功, 校验中, 警告"
},
"propType": {
"type": "oneOf",
"value": [
@ -5233,37 +5199,17 @@
},
"description": "校验状态，如不设置，则会根据校验规则自动生成\n@enumdesc 失败, 成功, 校验中, 警告"
},
{
"name": "hasFeedback",
"propType": "bool",
"description": "配合 validateState 属性使用，是否展示 success/loading 的校验状态图标, 目前只有Input支持",
"defaultValue": false
},
{
"name": "style",
"propType": "object",
"description": "自定义内联样式"
},
{
"name": "id",
"propType": "string"
},
{
"name": "children",
"propType": {
"type": "oneOfType",
"value": [
{
"type": "instanceOf",
"value": "node"
},
"func"
]
},
"description": "node 或者 function(values)"
},
{
"name": "size",
"title": {
"label": "Size",
"tip": "单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。"
},
"propType": {
"type": "oneOf",
"value": [
@ -5276,11 +5222,19 @@
},
{
"name": "fullWidth",
"title": {
"label": "fullWidth",
"tip": "单个 Item 中表单类组件宽度是否是100%"
},
"propType": "bool",
"description": "单个 Item 中表单类组件宽度是否是100%"
},
{
"name": "labelAlign",
"title": {
"label": "标签的位置",
"tip": "上, 左, 内"
},
"propType": {
"type": "oneOf",
"value": [
@ -5293,6 +5247,10 @@
},
{
"name": "labelTextAlign",
"title": {
"label": "标签的左右对齐方式",
"tip": "左, 右"
},
"propType": {
"type": "oneOf",
"value": [
@ -5309,141 +5267,118 @@
},
{
"name": "required",
"title": {
"label": "不能为空",
"tip": "[表单校验] 不能为空"
},
"propType": "bool",
"description": "[表单校验] 不能为空"
},
{
"name": "asterisk",
"propType": "bool",
"description": "required 的星号是否显示"
},
{
"name": "requiredMessage",
"title": {
"label": "自定义错误信息",
"tip": "[表单校验]为空时自定义错误信息"
},
"propType": "string",
"description": "required 自定义错误信息"
},
{
"name": "requiredTrigger",
"propType": {
"type": "oneOfType",
"value": [
"string",
{
"type": "instanceOf",
"value": "array"
}
]
},
"description": "required 自定义触发方式"
},
{
"name": "min",
"title": {
"label": "最小值",
"tip": "[表单校验] 最小值"
},
"propType": "number",
"description": "[表单校验] 最小值"
},
{
"name": "max",
"title": {
"label": "最大值",
"tip": "[表单校验] 最大值"
},
"propType": "number",
"description": "[表单校验] 最大值"
},
{
"name": "minmaxMessage",
"title": {
"label": "min/max message",
"tip": "[表单校验] min/max 自定义错误信息"
},
"propType": "string",
"description": "min/max 自定义错误信息"
},
{
"name": "minmaxTrigger",
"propType": {
"type": "oneOfType",
"value": [
"string",
{
"type": "instanceOf",
"value": "array"
}
]
},
"description": "min/max 自定义触发方式"
},
{
"name": "minLength",
"title": {
"label": "最小长度",
"tip": "[表单校验] 字符串最小长度 / 数组最小个数"
},
"propType": "number",
"description": "[表单校验] 字符串最小长度 / 数组最小个数"
},
{
"name": "maxLength",
"title": {
"label": "最大长度",
"tip": "[表单校验] 字符串最大长度 / 数组最大个数"
},
"propType": "number",
"description": "[表单校验] 字符串最大长度 / 数组最大个数"
},
{
"name": "minmaxLengthMessage",
"title": {
"label": "max|min length error message",
"tip": "[表单校验] minLength/maxLength 自定义错误信息"
},
"propType": "string",
"description": "minLength/maxLength 自定义错误信息"
},
{
"name": "minmaxLengthTrigger",
"propType": {
"type": "oneOfType",
"value": [
"string",
{
"type": "instanceOf",
"value": "array"
}
]
},
"description": "minLength/maxLength 自定义触发方式"
},
{
"name": "length",
"title": {
"label": "长度",
"tip": "[表单校验] 字符串精确长度 / 数组精确个数"
},
"propType": "number",
"description": "[表单校验] 字符串精确长度 / 数组精确个数"
},
{
"name": "lengthMessage",
"title": {
"label": "length error message",
"tip": "[表单校验] minLength/maxLength 自定义错误信息"
},
"propType": "string",
"description": "length 自定义错误信息"
},
{
"name": "lengthTrigger",
"propType": {
"type": "oneOfType",
"value": [
"string",
{
"type": "instanceOf",
"value": "array"
}
]
},
"description": "length 自定义触发方式"
},
{
"name": "pattern",
"propType": "any",
"title": {
"label": "正则",
"tip": "[表单校验] 正则校验"
},
"propType": "string",
"description": "正则校验"
},
{
"name": "patternMessage",
"title": {
"label": "pattern error message",
"tip": "[表单校验] pattern 自定义错误信息"
},
"propType": "string",
"description": "pattern 自定义错误信息"
},
{
"name": "patternTrigger",
"propType": {
"type": "oneOfType",
"value": [
"string",
{
"type": "instanceOf",
"value": "array"
}
]
},
"description": "pattern 自定义触发方式"
},
{
"name": "format",
"title": {
"label": "format",
"tip": "[表单校验] 四种常用的 pattern"
},
"propType": {
"type": "oneOf",
"value": [
@ -5457,42 +5392,18 @@
},
{
"name": "formatMessage",
"title": {
"label": "format error message",
"tip": "[表单校验] format 自定义错误信息"
},
"propType": "string",
"description": "format 自定义错误信息"
},
{
"name": "formatTrigger",
"propType": {
"type": "oneOfType",
"value": [
"string",
{
"type": "instanceOf",
"value": "array"
}
]
},
"description": "format 自定义触发方式"
},
{
"name": "validator",
"propType": "func",
"description": "[表单校验] 自定义校验函数"
},
{
"name": "validatorTrigger",
"propType": {
"type": "oneOfType",
"value": [
"string",
{
"type": "instanceOf",
"value": "array"
}
]
},
"description": "validator 自定义触发方式"
},
{
"name": "autoValidate",
"propType": "bool",
@ -5535,11 +5446,6 @@
"name": "isPreview",
"propType": "bool",
"description": "是否开启预览态"
},
{
"name": "renderPreview",
"propType": "func",
"description": "预览态模式下渲染的内容\n@param {any} value 根据包裹的组件的 value 类型而决定"
}
],
"configure": {
@ -5801,6 +5707,10 @@
"title":"标签文案",
"description": "label"
},
{
"name": "name",
"propType": "string"
},
{
"name": "hasClear",
"propType": "bool",
@ -12528,6 +12438,26 @@
}
]
},
{
"componentName": "Field",
"title": "Field",
"docUrl": "",
"screenshot": "",
"npm": {
"package": "@alifd/next",
"version": "1.19.18",
"exportName": "Field",
"main": "src/index.js",
"destructuring": true,
"subName": ""
},
"props": [
{
"name": "this",
"propType": "any"
}
]
},
{
"componentName": "Avatar",
"title": "Avatar",
@ -14181,18 +14111,24 @@
"schema": {
"componentName": "Form",
"props": {
"labelCol": 4
"labelCol": {
"span": 2,
"labelAlign": "left"
},
"role": "grid"
},
"children": [
{
"componentName": "Form.Item",
"componentName": "FormItem",
"props": {
"name": "email"
"label": "Email: ",
"required": true
},
"children": [
{
"componentName": "Input",
"props": {
"name": "email",
"size": "medium",
"placeholder": "用户名"
}
@ -14200,80 +14136,48 @@
]
},
{
"componentName": "Form.Item",
"componentName": "FormItem",
"props": {
"name": "pwd2"
"label": "Password: ",
"required": true
},
"children": [
{
"componentName": "Input.Password",
"props": {
"placeholder": "密码",
"size": "medium",
"innerAfter": {
"componentName": "Icon",
"props": {
"size": "large",
"style": {
"marginRight": 10,
"color": "#9b9b9b"
},
"type": "help"
}
}
"name": "password",
"placeholder": "请输入密码",
"size": "medium"
}
}
]
},
{
"componentName": "Box",
"componentName": "FormItem",
"props": {
"direction": "column",
"wrap": true,
"style": {
"margin": "5px 0 5px 0"
"wrapperCol": {
"offset": 7
}
},
"children": [
{
"componentName": "Radio.Group",
"componentName": "Form.Submit",
"props": {
"dataSource": [
{
"label": "自动登录",
"value": "auto"
}
]
}
},
{
"componentName": "Button.Group",
"props": {
"style": {
"margin": "10px 0 10px 0"
"type": "primary",
"validate": true,
"onClick": {
"type": "JSFunction",
"value": "(v, e) => { console.log(v, e) }"
}
},
"children": [
{
"componentName": "Button",
"props": {
"type": "normal",
"htmlType": "submit",
"children": "注册"
}
},
{
"componentName": "Button",
"props": {
"type": "primary",
"htmlType": "submit",
"children": "登录",
"style": {
"margin": "0 5px 0 5px"
}
}
}
]
"children": "Submit"
},
{
"componentName": "Form.Reset",
"props": {
"style": {"marginLeft": 10}
},
"children": "Reset"
}
]
}
@ -14283,17 +14187,17 @@
]
},
{
"componentName": "Form.Item",
"componentName": "FormItem",
"title": "表单项",
"icon": "https://img.alicdn.com/tfs/TB1nYqOuW61gK0jSZFlXXXDKFXa-112-64.png",
"package": "@alifd/next",
"library": "Next",
"snippets": [
{
"title": "Form.Item",
"title": "FormItem",
"screenshot": "https://img.alicdn.com/tfs/TB1nYqOuW61gK0jSZFlXXXDKFXa-112-64.png",
"schema": {
"componentName": "Form.Item",
"componentName": "FormItem",
"props": {
"placeholder": "拖动组件到这里"
}
@ -14312,7 +14216,7 @@
"title": "输入框",
"screenshot": "https://img.alicdn.com/tfs/TB1ysp3u8v0gK0jSZKbXXbK2FXa-112-64.png",
"schema": {
"componentName": "Form.Item",
"componentName": "FormItem",
"props": {
"label": "标签",
"labelAlign": "top",

12
packages/editor-setters/src/icon-setter/index.tsx
View File

@ -112,10 +112,12 @@ export default class IconSetter extends PureComponent<IconSetterProps, {}> {
const { icons, value, defaultValue, onChange, placeholder, hasClear, type } = this.props;
const { firstLoad } = this.state;
const _value = typeof value === 'object' ? value?.props?.type : value;
if (firstLoad && defaultValue && typeof value === 'undefined') onChange(defaultValue);
this.setState({
firstLoad: false,
});
if (firstLoad && defaultValue && typeof value === 'undefined') {
onChange(defaultValue);
this.setState({
firstLoad: false,
});
}
const currentIcon = <Icon size="xs" type={_value} />;
const clearIcon = hasClear && (
<Icon
@ -156,7 +158,7 @@ export default class IconSetter extends PureComponent<IconSetterProps, {}> {
>
<ul className="lowcode-icon-list">
{icons.map((icon) => (
<li onClick={() => this.onSelectIcon(icon)}>
<li key={icon} onClick={() => this.onSelectIcon(icon)}>
<Icon type={icon} size="medium" />
</li>
))}

6
packages/editor-skeleton/src/transducers/parse-props.ts
View File

@ -48,6 +48,12 @@ function propTypeToSetter(propType: PropType): SetterType {
isRequired,
initialValue: '',
};
case 'Json':
return {
componentName: 'JsonSetter',
isRequired,
initialValue: '',
};
case 'color':
return {
componentName: 'ColorSetter',