joint events-setter

This commit is contained in:
kangwei 2020-03-16 16:07:10 +08:00
parent 573f91507c
commit c44481f9a4

View File

@ -178,7 +178,10 @@ registerMetadataTransducer(metadata => {
metadata.props.forEach(prop => { metadata.props.forEach(prop => {
const { name, propType } = prop; const { name, propType } = prop;
if (name === 'children' && (component.isContainer || (propType === 'node' || propType === 'element' || propType === 'any'))) { if (
name === 'children' &&
(component.isContainer || propType === 'node' || propType === 'element' || propType === 'any')
) {
if (component.isContainer !== false) { if (component.isContainer !== false) {
component.isContainer = true; component.isContainer = true;
return; return;
@ -221,7 +224,7 @@ registerMetadataTransducer(metadata => {
}; };
}); });
registerMetadataTransducer((metadata) => { registerMetadataTransducer(metadata => {
const { configure = {}, componentName } = metadata; const { configure = {}, componentName } = metadata;
const { component = {} } = configure as any; const { component = {} } = configure as any;
if (!component.nestingRule) { if (!component.nestingRule) {
@ -261,107 +264,135 @@ registerMetadataTransducer((metadata) => {
}; };
}); });
registerMetadataTransducer((metadata) => { registerMetadataTransducer(metadata => {
const { componentName, configure = {} } = metadata; const { componentName, configure = {} } = metadata;
if (componentName === 'Leaf') { if (componentName === 'Leaf') {
return { return {
...metadata, ...metadata,
configure: { configure: {
...configure, ...configure,
combined: [{ combined: [
name: 'children', {
title: '内容设置', name: 'children',
setter: { title: '内容设置',
componentName: 'MixinSetter', setter: {
props: { componentName: 'MixinSetter',
setters: [{ props: {
componentName: 'StringSetter', setters: [
props: { {
// todo: componentName: 'StringSetter',
multiline: true, props: {
}, // todo:
initialValue: '', multiline: true,
}, { },
componentName: 'ExpressionSetter', initialValue: '',
initialValue: { },
type: 'JSExpression', {
value: '', componentName: 'ExpressionSetter',
}, initialValue: {
}], type: 'JSExpression',
value: '',
},
},
],
},
}, },
}, },
}], ],
}, },
}; };
} }
const { props, events, styles } = configure as any; const { props, events, styles } = configure as any;
let supportEvents: any; let eventsDefinition: any;
let isRoot: boolean = false; let isRoot: boolean = false;
if (componentName === 'Page' || componentName === 'Component') { if (componentName === 'Page' || componentName === 'Component') {
isRoot = true; isRoot = true;
supportEvents = [{ // 平台配置的,一般只有根节点才会配置
description: '初始化时', eventsDefinition = {
name: 'constructor' type: 'lifeCycleEvent',
}, { title: '生命周期',
description: '装载后', list: [
name: 'componentDidMount' {
}, { description: '初始化时',
description: '更新时', name: 'constructor',
name: 'componentDidMount' },
}, { {
description: '卸载时', description: '装载后',
name: 'componentWillUnmount' name: 'componentDidMount',
}] },
{
description: '更新时',
name: 'componentDidMount',
},
{
description: '卸载时',
name: 'componentWillUnmount',
},
]
};
} else { } else {
supportEvents = (events?.supportEvents || []).map((event: any) => { eventsDefinition = {
return typeof event === 'string' ? { type: 'events',
name: event, title: '事件',
} : event; list: (events?.supportEvents || []).map((event: any) => {
}); return typeof event === 'string'
? {
name: event,
}
: event;
}),
};
} }
// 通用设置 // 通用设置
const propsGroup = props || []; const propsGroup = props || [];
propsGroup.push({ propsGroup.push({
name: '#generals', name: '#generals',
title: '通用', title: '通用',
items: [{ items: [
name: 'id', {
title: 'ID', name: 'id',
setter: 'StringSetter', title: 'ID',
}, { setter: 'StringSetter',
name: 'key', },
title: 'Key', {
// todo: use Mixin name: 'key',
setter: 'StringSetter', title: 'Key',
}, { // todo: use Mixin
name: 'ref', setter: 'StringSetter',
title: 'Ref', },
setter: 'StringSetter', {
}, { name: 'ref',
name: '!more', title: 'Ref',
title: '更多', setter: 'StringSetter',
setter: 'PropertiesSetter' },
}] {
name: '!more',
title: '更多',
setter: 'PropertiesSetter',
},
],
}); });
const combined = [{ const combined = [
title: '属性', {
name: '#props', title: '属性',
items: propsGroup, name: '#props',
}]; items: propsGroup,
},
];
const stylesGroup = []; const stylesGroup = [];
if (styles?.supportClassName) { if (styles?.supportClassName) {
stylesGroup.push({ stylesGroup.push({
name: 'className', name: 'className',
title: '类名绑定', title: '类名绑定',
setter: 'ClassNameSetter' setter: 'ClassNameSetter',
}); });
} }
if (styles?.supportInlineStyle) { if (styles?.supportInlineStyle) {
stylesGroup.push({ stylesGroup.push({
name: 'style', name: 'style',
title: '行内样式', title: '行内样式',
setter: 'StyleSetter' setter: 'StyleSetter',
}); });
} }
if (stylesGroup.length > 0) { if (stylesGroup.length > 0) {
@ -372,55 +403,27 @@ registerMetadataTransducer((metadata) => {
}); });
} }
if (supportEvents) { if (eventsDefinition) {
combined.push({ combined.push({
name: '#events', name: '#events',
title: '事件', title: '事件',
items: [{ items: [
name: '!events', {
title: '事件设置', name: '!events',
setter: { title: '事件设置',
componentName: 'EventsSetter', setter: {
props: { componentName: 'EventsSetter',
definition: [] props: {
} definition: eventsDefinition,
},
},
getValue(field: SettingField) {
return [];
},
setValue(field: SettingField) {},
}, },
],
// 先简单mock一下
definition:[
// {
// type: 'lifeCycleEvent', // 平台配置的,一般只有根节点才会配置
// title: '生命周期',
// list: [{
// title: '装载时',
// name: 'componentDidMount'
// },{
// title: '卸载时',
// name: 'componentWillUnmount'
// }]
// },
{
type: 'events', // 组件自定义的
list: [{
name:'onClick',
title:'点击回调'
},
{
name:'onChange',
title:'变更回调'
},
{
name:'onSubmit'
}]
}],
getValue(field: SettingField) {
return [];
},
setValue(field: SettingField) {
}
}]
}); });
} }
@ -429,60 +432,71 @@ registerMetadataTransducer((metadata) => {
combined.push({ combined.push({
name: '#advanced', name: '#advanced',
title: '高级', title: '高级',
items: [] items: [],
}); });
} else { } else {
combined.push({ combined.push({
name: '#advanced', name: '#advanced',
title: '高级', title: '高级',
items: [{ items: [
name: '__condition', {
title: '条件显示', name: '__condition',
setter: 'ExpressionSetter' title: '条件显示',
}, {
name: '#loop',
title: '循环',
items: [{
name: '__loop',
title: '循环数据',
setter: {
componentName: 'MixinSetter',
props: {
setters: [{
componentName: 'JSONSetter',
props: {
mode: 'popup',
placeholder: '编辑数据'
}
}, {
componentName: 'ExpressionSetter',
props: {
placeholder: '绑定数据'
}
}]
}
}
}, {
name: '__loopArgs.0',
title: '迭代变量名',
setter: {
componentName: 'StringSetter',
placeholder: '默认为 item'
}
}, {
name: '__loopArgs.1',
title: '索引变量名',
setter: {
componentName: 'StringSetter',
placeholder: '默认为 index'
}
}, {
name: 'key',
title: 'Key',
setter: 'ExpressionSetter', setter: 'ExpressionSetter',
}] },
}] {
}) name: '#loop',
title: '循环',
items: [
{
name: '__loop',
title: '循环数据',
setter: {
componentName: 'MixinSetter',
props: {
setters: [
{
componentName: 'JSONSetter',
props: {
mode: 'popup',
placeholder: '编辑数据',
},
},
{
componentName: 'ExpressionSetter',
props: {
placeholder: '绑定数据',
},
},
],
},
},
},
{
name: '__loopArgs.0',
title: '迭代变量名',
setter: {
componentName: 'StringSetter',
placeholder: '默认为 item',
},
},
{
name: '__loopArgs.1',
title: '索引变量名',
setter: {
componentName: 'StringSetter',
placeholder: '默认为 index',
},
},
{
name: 'key',
title: 'Key',
setter: 'ExpressionSetter',
},
],
},
],
});
} }
return { return {