Merge branch 'feat/joint-editor' of gitlab.alibaba-inc.com:ali-lowcode/ali-lowcode-engine into feat/joint-editor

This commit is contained in:
下羊 2020-03-24 10:13:46 +08:00
commit f7baf5be32
2 changed files with 503 additions and 163 deletions

View File

@ -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: {}
}
}
}
]
}]
]
}
]
}
]
};

View File

@ -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);
}
}