diff --git a/packages/editor/src/config/assets.js b/packages/editor/src/config/assets.js index 7e7c40fef..ce83e3438 100644 --- a/packages/editor/src/config/assets.js +++ b/packages/editor/src/config/assets.js @@ -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: {} } } - } - ] - }] + ] + } + ] } ] }; diff --git a/packages/plugin-settings/src/builtin-setters/array-setter/index.tsx b/packages/plugin-settings/src/builtin-setters/array-setter/index.tsx index 8d050d849..96688d593 100644 --- a/packages/plugin-settings/src/builtin-setters/array-setter/index.tsx +++ b/packages/plugin-settings/src/builtin-setters/array-setter/index.tsx @@ -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 { 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 { 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); } }