github/lowcode-engine
1
0
Fork 0
mirror of https://github.com/alibaba/lowcode-engine.git synced 2025-12-15 05:36:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

update setter demo

Browse Source
This commit is contained in:
kangwei 2020-03-17 18:09:45 +08:00
parent 60ccf04915
commit d6fbfaa80e
2 changed files with 503 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

642
packages/editor/src/config/assets.js
View File

@ -21,24 +21,24 @@ export default {
supportedLifecycles: [ supportedLifecycles: [
{ {
description: '初始化时', description: '初始化时',
name: 'constructor', name: 'constructor'
}, },
{ {
description: '装载后', description: '装载后',
name: 'componentDidMount', name: 'componentDidMount'
}, },
{ {
description: '更新时', description: '更新时',
name: 'componentDidMount', name: 'componentDidMount'
}, },
{ {
description: '卸载时', description: '卸载时',
name: 'componentWillUnmount', name: 'componentWillUnmount'
}, }
] ]
}, },
component: { component: {
isContainer: true, isContainer: true
} }
} }
}, },
@ -47,7 +47,7 @@ export default {
title: '容器', title: '容器',
configure: { configure: {
component: { component: {
isContainer: true, isContainer: true
} }
} }
}, },
@ -495,7 +495,7 @@ export default {
], ],
configure: { configure: {
component: { component: {
isContainer: true, isContainer: true
} }
} }
}, },
@ -1208,14 +1208,16 @@ export default {
defaultValue: 'single', defaultValue: 'single',
dataSource: [ dataSource: [
{ {
value: 'single', value: 'single',
label: 'single' label: 'single'
}, { },
value: 'multiple', {
label: 'multiple' value: 'multiple',
}, { label: 'multiple'
value: 'tag', },
label: 'tag' {
value: 'tag',
label: 'tag'
} }
] ]
} }
@ -1230,14 +1232,16 @@ export default {
defaultValue: 'single', defaultValue: 'single',
dataSource: [ dataSource: [
{ {
value: 'single', value: 'single',
label: 'single' label: 'single'
}, { },
value: 'multiple', {
label: 'multiple' value: 'multiple',
}, { label: 'multiple'
value: 'tag', },
label: 'tag' {
value: 'tag',
label: 'tag'
} }
] ]
} }
@ -1245,91 +1249,8 @@ export default {
}, },
{ {
name: 'value', name: 'value',
title: '当前值，用于受控模式', title: '受控值',
placeholder: '混合', setter: 'StringSetter',
setter: {
componentName: 'MixinSetter',
props: {
types: [{
name: 'StringSetter',
// 当前mixin setter API
props: {}
}, {
name: 'ExpressionSetter',
props: {}
}, {
name: 'RadioGroupSetter',
// 当前mixin setter API
props: {
hasClear: true,
dataSource: [{
label: '上',
value: 't',
},
{
label: '右',
value: 'r',
},
{
label: '下',
value: 'b',
},
{
label: '左',
value: 'l',
}]
}
}],
defaultType: 'SelectSetter'
},
},
},
{
name: 'defaultValue',
title: '当前值，用于受控模式',
placeholder: '混合',
setter: {
componentName: 'MixinSetter',
props: {
types: [{
name: 'StringSetter',
// 当前mixin setter API
props: {}
}, {
name: 'TextAreaSetter',
props: {}
}, {
name: 'SelectSetter',
// 当前mixin setter API
props: {
hasClear: true,
dataSource: [{
label: '上',
value: 't',
},
{
label: '右',
value: 'r',
},
{
label: '下',
value: 'b',
},
{
label: '左',
value: 'l',
}]
}
}, {
name: 'NumberSetter',
props: {}
}, {
name: 'BoolSetter',
props: {}
}],
defaultType: 'SelectSetter'
},
},
}, },
{ {
name: 'hasBorder', name: 'hasBorder',
@ -1341,16 +1262,6 @@ export default {
} }
} }
}, },
{
name: 'searchValue',
title: '受控搜索值，一般不需要设置\n@type {[type]}',
setter: 'TextAreaSetter'
},
{
name: 'searchValue',
title: '受控搜索值，一般不需要设置\n@type {[type]}',
setter: 'StringSetter'
},
{ {
name: 'maxTagCount', name: 'maxTagCount',
title: '最多显示多少个 tag', title: '最多显示多少个 tag',
@ -1362,24 +1273,453 @@ export default {
setter: 'ExpressionSetter' setter: 'ExpressionSetter'
}, },
{ {
name: 'date', name: 'MixinSetter',
title: '测试日期', placeholder: '混合',
setter: 'DateSetter' setter: {
componentName: 'MixinSetter',
props: {
types: [
{
name: 'StringSetter',
// 当前mixin setter API
props: {}
},
{
name: 'TextAreaSetter',
props: {}
},
{
name: 'SelectSetter',
// 当前mixin setter API
props: {
hasClear: true,
dataSource: [
{
label: '上',
value: 't'
},
{
label: '右',
value: 'r'
},
{
label: '下',
value: 'b'
},
{
label: '左',
value: 'l'
}
]
}
},
{
name: 'NumberSetter',
props: {}
},
{
name: 'BoolSetter',
props: {}
}
],
defaultType: 'SelectSetter'
}
}
}, },
{ {
name: 'date', type: 'group',
title: '测试日期-年', name: '扩展 Setter',
setter: 'DateYearSetter' items: [
{
name: 'TextAreaSetter',
setter: 'TextAreaSetter'
},
{
name: 'date',
title: '测试日期',
setter: 'DateSetter'
},
{
name: 'date',
title: '测试日期-年',
setter: 'DateYearSetter'
},
{
name: 'date',
title: '测试日期-月',
setter: 'DateMonthSetter'
},
{
name: 'date',
title: '测试日期-区间',
setter: 'DateRangeSetter'
}
]
}, },
{ {
name: 'date', type: 'group',
title: '测试日期-月', name: 'ArraySetter',
setter: 'DateMonthSetter' items: [
{
name: 'arrayValue1',
title: '字符数组',
setter: {
componentName: 'ArraySetter',
props: {
itemSetter: {
componentName: 'StringSetter',
initialValue: ''
}
}
}
},
{
name: 'arrayValue2',
title: '数字数组',
setter: {
componentName: 'ArraySetter',
props: {
itemSetter: {
componentName: 'NumberSetter',
initialValue: 0
}
}
}
},
{
name: 'arrayValue3',
title: '混合数组',
setter: {
componentName: 'ArraySetter',
props: {
itemSetter: {
componentName: 'MixinSetter',
props: {
types: [
{
name: 'StringSetter',
// 当前mixin setter API
props: {}
},
{
name: 'ExpressionSetter',
props: {}
},
{
name: 'RadioGroupSetter',
// 当前mixin setter API
props: {
hasClear: true,
dataSource: [
{
label: '上',
value: 't'
},
{
label: '右',
value: 'r'
},
{
label: '下',
value: 'b'
},
{
label: '左',
value: 'l'
}
]
}
}
],
defaultType: 'SelectSetter'
}
}
}
}
},
{
name: 'arrayValue4',
title: '对象数组',
setter: {
componentName: 'ArraySetter',
props: {
itemSetter: {
componentName: 'ObjectSetter',
props: {
config: {
items: [{
name: 'username',
title: '姓名',
setter: 'StringSetter',
important: true,
}, {
name: 'phone',
title: '电话',
setter: 'StringSetter',
important: true,
}, {
name: 'age',
title: '年龄',
setter: 'NumberSetter'
}, {
name: 'married',
title: '婚否',
setter: 'BoolSetter'
}, {
type: 'group',
title: 'work',
items: [
{
name: 'job',
title: '工作岗位',
setter: {
componentName: 'SelectSetter',
props: {
dataSource: [{
label: '工程师',
value: 1
}, {
label: '高级工程师',
value: 2
}, {
label: '资深工程师',
value: 3
}]
}
}
},
{
name: 'address',
title: '工作地点',
setter: 'TextAreaSetter'
}
]
}],
}
},
initialValue: {},
}
}
}
},
{
name: 'arrayValue5',
title: '对象数组',
setter: {
componentName: 'ArraySetter',
props: {
itemSetter: {
componentName: 'ObjectSetter',
props: {
config: {
items: [{
name: 'username',
title: '姓名',
setter: 'StringSetter',
important: true,
}, {
name: 'age',
title: '年龄',
setter: 'NumberSetter',
important: true,
}, {
name: 'married',
title: '婚否',
setter: 'BoolSetter',
important: true,
}, {
name: 'log',
title: '到访记录',
setter: {
componentName: 'ArraySetter',
props: {
itemSetter: 'StringSetter'
}
},
important: true,
}, {
type: 'group',
title: 'work',
items: [
{
name: 'job',
title: '工作岗位',
setter: {
componentName: 'SelectSetter',
props: {
dataSource: [{
label: '工程师',
value: 1
}, {
label: '高级工程师',
value: 2
}, {
label: '资深工程师',
value: 3
}]
}
}
},
{
name: 'address',
title: '工作地点',
setter: 'TextAreaSetter'
}
]
}],
}
},
initialValue: {},
},
mode: 'popup'
}
}
},
],
extraProps: {
defaultCollapsed: false,
}
}, },
{ {
name: 'date', type: 'group',
title: '测试日期-区间', name: 'ObjectSetter',
setter: 'DateRangeSetter' items: [
{
name: 'objectValue1',
title: '对象数据1',
setter: {
componentName: 'ObjectSetter',
props: {
config: {
items: [{
name: 'username',
title: '姓名',
setter: 'StringSetter',
important: true,
}, {
name: 'age',
title: '年龄',
setter: 'NumberSetter',
important: true,
}, {
name: 'married',
title: '婚否',
setter: 'BoolSetter',
important: true,
}, {
name: 'log',
title: '到访记录',
setter: {
componentName: 'ArraySetter',
props: {
itemSetter: 'StringSetter'
}
},
important: true,
}, {
type: 'group',
title: 'work',
items: [
{
name: 'job',
title: '工作岗位',
setter: {
componentName: 'SelectSetter',
props: {
dataSource: [{
label: '工程师',
value: 1
}, {
label: '高级工程师',
value: 2
}, {
label: '资深工程师',
value: 3
}]
}
}
},
{
name: 'address',
title: '工作地点',
setter: 'TextAreaSetter'
}
]
}],
}
},
initialValue: {},
}
},
{
name: 'objectValue2',
title: '对象数据2',
setter: {
componentName: 'ObjectSetter',
props: {
mode: 'popup',
config: {
items: [{
name: 'username',
title: '姓名',
setter: 'StringSetter',
important: true,
}, {
name: 'age',
title: '年龄',
setter: 'NumberSetter',
important: true,
}, {
name: 'married',
title: '婚否',
setter: 'BoolSetter',
important: true,
}, {
name: 'log',
title: '到访记录',
setter: {
componentName: 'ArraySetter',
props: {
itemSetter: 'StringSetter'
}
},
important: true,
}, {
type: 'group',
title: 'work',
items: [
{
name: 'job',
title: '工作岗位',
setter: {
componentName: 'SelectSetter',
props: {
dataSource: [{
label: '工程师',
value: 1
}, {
label: '高级工程师',
value: 2
}, {
label: '资深工程师',
value: 3
}]
}
}
},
{
name: 'address',
title: '工作地点',
setter: 'TextAreaSetter'
}
]
}],
}
},
initialValue: {},
}
}
]
} }
] ]
} }
@ -1493,7 +1833,8 @@ export default {
} }
} }
] ]
}, { },
{
componentName: 'Select', componentName: 'Select',
libraryId: 2, libraryId: 2,
title: '选择框', title: '选择框',
@ -1509,7 +1850,8 @@ export default {
} }
} }
] ]
}, { },
{
componentName: 'NumberPicker', componentName: 'NumberPicker',
libraryId: 2, libraryId: 2,
title: '数字', title: '数字',
@ -1527,26 +1869,28 @@ export default {
] ]
} }
] ]
}, { },
{
title: '其他', title: '其他',
icon: '', icon: '',
children: [{ children: [
componentName: 'Div', {
libraryId: 3, componentName: 'Div',
title: '容器', libraryId: 3,
icon: '', title: '容器',
snippets: [ icon: '',
{ snippets: [
title: '默认', {
screenshot: '', title: '默认',
schema: { screenshot: '',
componentName: 'Div', schema: {
props: { componentName: 'Div',
props: {}
} }
} }
} ]
] }
}] ]
} }
] ]
}; };

24
packages/plugin-settings/src/builtin-setters/array-setter/index.tsx
View File

@ -1,7 +1,7 @@
import { Component, Fragment } from 'react'; import { Component, Fragment } from 'react';
import { Icon, Button, Message } from '@alifd/next'; import { Icon, Button, Message } from '@alifd/next';
import Sortable from './sortable'; import Sortable from './sortable';
import { SettingField, SetterType, FieldConfig } from '../../main'; import { SettingField, SetterType, FieldConfig, SetterConfig } from '../../main';
import './style.less'; import './style.less';
import { createSettingFieldView } from '../../settings-pane'; import { createSettingFieldView } from '../../settings-pane';
import { PopupContext, PopupPipe } from '../../popup'; import { PopupContext, PopupPipe } from '../../popup';
@ -44,7 +44,8 @@ export class ListSetter extends Component<ArraySetterProps, ArraySetterState> {
const item = field.createField({ const item = field.createField({
name: i, name: i,
setter: props.itemSetter, setter: props.itemSetter,
forceInline: 2, // FIXME:
forceInline: 1,
}); });
items[i] = item; items[i] = item;
itemsMap.set(item.id, item); itemsMap.set(item.id, item);
@ -88,7 +89,8 @@ export class ListSetter extends Component<ArraySetterProps, ArraySetterState> {
const item = this.props.field.createField({ const item = this.props.field.createField({
name: items.length, name: items.length,
setter: itemSetter, setter: itemSetter,
forceInline: 2, // FIXME:
forceInline: 1,
}); });
items.push(item); items.push(item);
itemsMap.set(item.id, item); itemsMap.set(item.id, item);
@ -219,10 +221,7 @@ class TableSetter extends ListSetter {
export default class ArraySetter extends Component<{ export default class ArraySetter extends Component<{
value: any[]; value: any[];
field: SettingField; field: SettingField;
itemConfig?: { itemSetter?: SetterType;
setter?: SetterType;
defaultValue?: any | ((field: SettingField) => any);
};
mode?: 'popup' | 'list'; mode?: 'popup' | 'list';
forceInline?: boolean; forceInline?: boolean;
multiValue?: boolean; multiValue?: boolean;
@ -231,16 +230,13 @@ export default class ArraySetter extends Component<{
private pipe: any; private pipe: any;
render() { render() {
const { mode, forceInline, ...props } = this.props; const { mode, forceInline, ...props } = this.props;
const { field, itemConfig } = props; const { field, itemSetter } = props;
let columns: FieldConfig[] | undefined; let columns: FieldConfig[] | undefined;
const setter: any = itemConfig?.setter; if ((itemSetter as SetterConfig)?.componentName === 'ObjectSetter') {
if (setter?.componentName === 'ObjectSetter') { const items: FieldConfig[] = (itemSetter as any).props?.config?.items;
const items: FieldConfig[] = setter.props?.config?.items;
if (items && Array.isArray(items)) { if (items && Array.isArray(items)) {
columns = items.filter(item => item.isRequired || item.important || (item.setter as any)?.isRequired); columns = items.filter(item => item.isRequired || item.important || (item.setter as any)?.isRequired);
if (columns.length === 3) { if (columns.length > 4) {
columns = columns.slice(0, 3);
} else if (columns.length > 3) {
columns = columns.slice(0, 4); columns = columns.slice(0, 4);
} }
} }