mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2025-12-12 19:52:51 +00:00
update setter demo
This commit is contained in:
kangwei
parent
60ccf04915
commit
d6fbfaa80e
@ -21,24 +21,24 @@ export default {
|
||||
supportedLifecycles: [
|
||||
{
|
||||
description: '初始化时',
|
||||
name: 'constructor',
|
||||
name: 'constructor'
|
||||
},
|
||||
{
|
||||
description: '装载后',
|
||||
name: 'componentDidMount',
|
||||
name: 'componentDidMount'
|
||||
},
|
||||
{
|
||||
description: '更新时',
|
||||
name: 'componentDidMount',
|
||||
name: 'componentDidMount'
|
||||
},
|
||||
{
|
||||
description: '卸载时',
|
||||
name: 'componentWillUnmount',
|
||||
},
|
||||
name: 'componentWillUnmount'
|
||||
}
|
||||
]
|
||||
},
|
||||
component: {
|
||||
isContainer: true,
|
||||
isContainer: true
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -47,7 +47,7 @@ export default {
|
||||
title: '容器',
|
||||
configure: {
|
||||
component: {
|
||||
isContainer: true,
|
||||
isContainer: true
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -495,7 +495,7 @@ export default {
|
||||
],
|
||||
configure: {
|
||||
component: {
|
||||
isContainer: true,
|
||||
isContainer: true
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -1208,14 +1208,16 @@ export default {
|
||||
defaultValue: 'single',
|
||||
dataSource: [
|
||||
{
|
||||
value: 'single',
|
||||
label: 'single'
|
||||
}, {
|
||||
value: 'multiple',
|
||||
label: 'multiple'
|
||||
}, {
|
||||
value: 'tag',
|
||||
label: 'tag'
|
||||
value: 'single',
|
||||
label: 'single'
|
||||
},
|
||||
{
|
||||
value: 'multiple',
|
||||
label: 'multiple'
|
||||
},
|
||||
{
|
||||
value: 'tag',
|
||||
label: 'tag'
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -1230,14 +1232,16 @@ export default {
|
||||
defaultValue: 'single',
|
||||
dataSource: [
|
||||
{
|
||||
value: 'single',
|
||||
label: 'single'
|
||||
}, {
|
||||
value: 'multiple',
|
||||
label: 'multiple'
|
||||
}, {
|
||||
value: 'tag',
|
||||
label: 'tag'
|
||||
value: 'single',
|
||||
label: 'single'
|
||||
},
|
||||
{
|
||||
value: 'multiple',
|
||||
label: 'multiple'
|
||||
},
|
||||
{
|
||||
value: 'tag',
|
||||
label: 'tag'
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -1245,91 +1249,8 @@ export default {
|
||||
},
|
||||
{
|
||||
name: 'value',
|
||||
title: '当前值，用于受控模式',
|
||||
placeholder: '混合',
|
||||
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'
|
||||
},
|
||||
},
|
||||
title: '受控值',
|
||||
setter: 'StringSetter',
|
||||
},
|
||||
{
|
||||
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',
|
||||
title: '最多显示多少个 tag',
|
||||
@ -1362,24 +1273,453 @@ export default {
|
||||
setter: 'ExpressionSetter'
|
||||
},
|
||||
{
|
||||
name: 'date',
|
||||
title: '测试日期',
|
||||
setter: 'DateSetter'
|
||||
name: 'MixinSetter',
|
||||
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: 'date',
|
||||
title: '测试日期-年',
|
||||
setter: 'DateYearSetter'
|
||||
type: 'group',
|
||||
name: '扩展 Setter',
|
||||
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',
|
||||
title: '测试日期-月',
|
||||
setter: 'DateMonthSetter'
|
||||
type: 'group',
|
||||
name: 'ArraySetter',
|
||||
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',
|
||||
title: '测试日期-区间',
|
||||
setter: 'DateRangeSetter'
|
||||
type: 'group',
|
||||
name: 'ObjectSetter',
|
||||
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',
|
||||
libraryId: 2,
|
||||
title: '选择框',
|
||||
@ -1509,7 +1850,8 @@ export default {
|
||||
}
|
||||
}
|
||||
]
|
||||
}, {
|
||||
},
|
||||
{
|
||||
componentName: 'NumberPicker',
|
||||
libraryId: 2,
|
||||
title: '数字',
|
||||
@ -1527,26 +1869,28 @@ export default {
|
||||
]
|
||||
}
|
||||
]
|
||||
}, {
|
||||
},
|
||||
{
|
||||
title: '其他',
|
||||
icon: '',
|
||||
children: [{
|
||||
componentName: 'Div',
|
||||
libraryId: 3,
|
||||
title: '容器',
|
||||
icon: '',
|
||||
snippets: [
|
||||
{
|
||||
title: '默认',
|
||||
screenshot: '',
|
||||
schema: {
|
||||
componentName: 'Div',
|
||||
props: {
|
||||
children: [
|
||||
{
|
||||
componentName: 'Div',
|
||||
libraryId: 3,
|
||||
title: '容器',
|
||||
icon: '',
|
||||
snippets: [
|
||||
{
|
||||
title: '默认',
|
||||
screenshot: '',
|
||||
schema: {
|
||||
componentName: 'Div',
|
||||
props: {}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}]
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { Component, Fragment } from 'react';
|
||||
import { Icon, Button, Message } from '@alifd/next';
|
||||
import Sortable from './sortable';
|
||||
import { SettingField, SetterType, FieldConfig } from '../../main';
|
||||
import { SettingField, SetterType, FieldConfig, SetterConfig } from '../../main';
|
||||
import './style.less';
|
||||
import { createSettingFieldView } from '../../settings-pane';
|
||||
import { PopupContext, PopupPipe } from '../../popup';
|
||||
@ -44,7 +44,8 @@ export class ListSetter extends Component<ArraySetterProps, ArraySetterState> {
|
||||
const item = field.createField({
|
||||
name: i,
|
||||
setter: props.itemSetter,
|
||||
forceInline: 2,
|
||||
// FIXME:
|
||||
forceInline: 1,
|
||||
});
|
||||
items[i] = item;
|
||||
itemsMap.set(item.id, item);
|
||||
@ -88,7 +89,8 @@ export class ListSetter extends Component<ArraySetterProps, ArraySetterState> {
|
||||
const item = this.props.field.createField({
|
||||
name: items.length,
|
||||
setter: itemSetter,
|
||||
forceInline: 2,
|
||||
// FIXME:
|
||||
forceInline: 1,
|
||||
});
|
||||
items.push(item);
|
||||
itemsMap.set(item.id, item);
|
||||
@ -219,10 +221,7 @@ class TableSetter extends ListSetter {
|
||||
export default class ArraySetter extends Component<{
|
||||
value: any[];
|
||||
field: SettingField;
|
||||
itemConfig?: {
|
||||
setter?: SetterType;
|
||||
defaultValue?: any | ((field: SettingField) => any);
|
||||
};
|
||||
itemSetter?: SetterType;
|
||||
mode?: 'popup' | 'list';
|
||||
forceInline?: boolean;
|
||||
multiValue?: boolean;
|
||||
@ -231,16 +230,13 @@ export default class ArraySetter extends Component<{
|
||||
private pipe: any;
|
||||
render() {
|
||||
const { mode, forceInline, ...props } = this.props;
|
||||
const { field, itemConfig } = props;
|
||||
const { field, itemSetter } = props;
|
||||
let columns: FieldConfig[] | undefined;
|
||||
const setter: any = itemConfig?.setter;
|
||||
if (setter?.componentName === 'ObjectSetter') {
|
||||
const items: FieldConfig[] = setter.props?.config?.items;
|
||||
if ((itemSetter as SetterConfig)?.componentName === 'ObjectSetter') {
|
||||
const items: FieldConfig[] = (itemSetter as any).props?.config?.items;
|
||||
if (items && Array.isArray(items)) {
|
||||
columns = items.filter(item => item.isRequired || item.important || (item.setter as any)?.isRequired);
|
||||
if (columns.length === 3) {
|
||||
columns = columns.slice(0, 3);
|
||||
} else if (columns.length > 3) {
|
||||
if (columns.length > 4) {
|
||||
columns = columns.slice(0, 4);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user