@alilc/lowcode-editor-skeleton
Version:
alibaba lowcode editor skeleton
401 lines (399 loc) • 11 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = _default;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slot = require("../icons/slot");
var _lowcodeDesigner = require("@alilc/lowcode-designer");
function _default(metadata) {
var componentName = metadata.componentName,
_metadata$configure = metadata.configure,
configure = _metadata$configure === void 0 ? {} : _metadata$configure;
// 如果已经处理过，不再重新执行一遍
if (configure.combined) {
return metadata;
}
if (componentName === 'Leaf') {
return (0, _extends2["default"])({}, metadata, {
configure: (0, _extends2["default"])({}, configure, {
combined: [{
name: 'children',
title: {
type: 'i18n',
'zh-CN': '内容设置',
'en-US': 'Content'
},
setter: {
componentName: 'MixedSetter',
props: {
// TODO:
setters: [{
componentName: 'StringSetter',
props: {
// TODO: textarea mode
multiline: true
},
initialValue: ''
}, {
componentName: 'ExpressionSetter',
initialValue: {
type: 'JSExpression',
value: ''
}
}]
}
}
}]
})
});
}
var _ref = configure,
props = _ref.props,
_ref$supports = _ref.supports,
supports = _ref$supports === void 0 ? {} : _ref$supports;
var isRoot = componentName === 'Page' || componentName === 'Component';
var eventsDefinition = [];
var supportedLifecycles = supports.lifecycles || (isRoot ?
/* [
{
description: '初始化时',
name: 'constructor',
},
{
description: '装载后',
name: 'componentDidMount',
},
{
description: '更新时',
name: 'componentDidUpdate',
},
{
description: '卸载时',
name: 'componentWillUnmount',
},
] */
null : null);
if (supportedLifecycles) {
eventsDefinition.push({
type: 'lifeCycleEvent',
title: '生命周期',
list: supportedLifecycles.map(function (event) {
return typeof event === 'string' ? {
name: event
} : event;
})
});
}
if (supports.events) {
eventsDefinition.push({
type: 'events',
title: '事件',
list: (supports.events || []).map(function (event) {
return typeof event === 'string' ? {
name: event
} : event;
})
});
}
// 通用设置
var propsGroup = props ? [].concat(props) : [];
var basicInfo = {};
if (componentName === 'Slot') {
if (!configure.component) {
configure.component = {
isContainer: true
};
} else if (typeof configure.component === 'object') {
configure.component.isContainer = true;
}
basicInfo.icon = _slot.IconSlot;
propsGroup = [{
name: (0, _lowcodeDesigner.getConvertedExtraKey)('title'),
title: {
type: 'i18n',
'en-US': 'Slot Title',
'zh-CN': '插槽标题'
},
setter: 'StringSetter',
defaultValue: '插槽容器'
}];
}
// propsGroup.push({
// name: '#generals',
// title: { type: 'i18n', 'zh-CN': '通用', 'en-US': 'General' },
// items: [
// {
// name: 'id',
// title: 'ID',
// setter: 'StringSetter',
// },
// {
// name: 'key',
// title: 'Key',
// // todo: use Mixin
// setter: 'StringSetter',
// },
// {
// name: 'ref',
// title: 'Ref',
// setter: 'StringSetter',
// },
// {
// name: '!more',
// title: '更多',
// setter: 'PropertiesSetter',
// },
// ],
// });
var stylesGroup = [];
var advancedGroup = [];
if (propsGroup) {
var l = propsGroup.length;
while (l-- > 0) {
var item = propsGroup[l];
// if (item.type === 'group' && (item.title === '高级' || item.title?.label === '高级')) {
// advancedGroup = item.items || [];
// propsGroup.splice(l, 1);
// }
if (item.name === '__style__' || item.name === 'style' || item.name === 'containerStyle' || item.name === 'pageStyle') {
var _item$extraProps;
propsGroup.splice(l, 1);
stylesGroup.push(item);
if ((_item$extraProps = item.extraProps) !== null && _item$extraProps !== void 0 && _item$extraProps.defaultCollapsed && item.name !== 'containerStyle') {
item.extraProps.defaultCollapsed = false;
}
}
}
}
var combined = [{
title: {
type: 'i18n',
'zh-CN': '属性',
'en-US': 'Props'
},
name: '#props',
items: propsGroup
}];
if (supports.className) {
stylesGroup.push({
name: 'className',
title: {
type: 'i18n',
'zh-CN': '类名绑定',
'en-US': 'ClassName'
},
setter: 'ClassNameSetter'
});
}
if (supports.style) {
stylesGroup.push({
name: 'style',
title: {
type: 'i18n',
'zh-CN': '行内样式',
'en-US': 'Style'
},
setter: 'StyleSetter',
extraProps: {
display: 'block'
}
});
}
if (stylesGroup.length > 0) {
combined.push({
name: '#styles',
title: {
type: 'i18n',
'zh-CN': '样式',
'en-US': 'Styles'
},
items: stylesGroup
});
}
if (eventsDefinition.length > 0) {
combined.push({
name: '#events',
title: {
type: 'i18n',
'zh-CN': '事件',
'en-US': 'Events'
},
items: [{
name: '__events',
title: {
type: 'i18n',
'zh-CN': '事件设置',
'en-US': 'Events'
},
setter: {
componentName: 'EventsSetter',
props: {
definition: eventsDefinition
}
},
getValue: function getValue(field, val) {
return val;
},
setValue: function setValue(field, eventData) {
var eventDataList = eventData.eventDataList,
eventList = eventData.eventList;
Array.isArray(eventList) && eventList.map(function (item) {
field.parent.clearPropValue(item.name);
return item;
});
Array.isArray(eventDataList) && eventDataList.map(function (item) {
field.parent.setPropValue(item.name, {
type: 'JSFunction',
// 需要传下入参
value: "function(){return this." + item.relatedEventName + ".apply(this,Array.prototype.slice.call(arguments).concat([" + (item.paramStr ? item.paramStr : '') + "])) }"
});
return item;
});
}
}]
});
}
if (!isRoot) {
if (supports.condition !== false) {
advancedGroup.push({
name: (0, _lowcodeDesigner.getConvertedExtraKey)('condition'),
title: {
type: 'i18n',
'zh-CN': '是否渲染',
'en-US': 'Condition'
},
defaultValue: true,
setter: [{
componentName: 'BoolSetter'
}, {
componentName: 'VariableSetter'
}],
extraProps: {
display: 'block'
}
});
}
if (supports.loop !== false) {
advancedGroup.push({
name: '#loop',
title: {
type: 'i18n',
'zh-CN': '循环',
'en-US': 'Loop'
},
items: [{
name: (0, _lowcodeDesigner.getConvertedExtraKey)('loop'),
title: {
type: 'i18n',
'zh-CN': '循环数据',
'en-US': 'Loop Data'
},
setter: [{
componentName: 'JsonSetter',
props: {
label: {
type: 'i18n',
'zh-CN': '编辑数据',
'en-US': 'Edit Data'
},
defaultValue: '[]'
}
}, {
componentName: 'VariableSetter'
}]
}, {
name: (0, _lowcodeDesigner.getConvertedExtraKey)('loopArgs.0'),
title: {
type: 'i18n',
'zh-CN': '迭代变量名',
'en-US': 'Loop Item'
},
setter: {
componentName: 'StringSetter',
props: {
placeholder: {
type: 'i18n',
'zh-CN': '默认为: item',
'en-US': 'Defaults: item'
}
}
}
}, {
name: (0, _lowcodeDesigner.getConvertedExtraKey)('loopArgs.1'),
title: {
type: 'i18n',
'zh-CN': '索引变量名',
'en-US': 'Loop Index'
},
setter: {
componentName: 'StringSetter',
props: {
placeholder: {
type: 'i18n',
'zh-CN': '默认为: index',
'en-US': 'Defaults: index'
}
}
}
}, {
name: 'key',
title: {
type: 'i18n',
'zh-CN': '循环 Key',
'en-US': 'Loop Key'
},
setter: [{
componentName: 'StringSetter'
}, {
componentName: 'VariableSetter'
}]
}],
extraProps: {
display: 'accordion'
}
});
}
if (supports.condition !== false || supports.loop !== false) {
advancedGroup.push({
name: 'key',
title: {
label: {
type: 'i18n',
'zh-CN': '渲染唯一标识 (key)',
'en-US': 'Render unique identifier (key)'
},
tip: {
type: 'i18n',
'zh-CN': '搭配「条件渲染」或「循环渲染」时使用，和 react 组件中的 key 原理相同，点击查看帮助',
'en-US': 'Used with 「Conditional Rendering」or「Cycle Rendering」, the same principle as the key in the react component, click to view the help'
},
docUrl: 'https://www.yuque.com/lce/doc/qm75w3'
},
setter: [{
componentName: 'StringSetter'
}, {
componentName: 'VariableSetter'
}],
extraProps: {
display: 'block'
}
});
}
}
if (advancedGroup.length > 0) {
combined.push({
name: '#advanced',
title: {
type: 'i18n',
'zh-CN': '高级',
'en-US': 'Advanced'
},
items: advancedGroup
});
}
return (0, _extends2["default"])({}, metadata, basicInfo, {
configure: (0, _extends2["default"])({}, configure, {
combined: combined
})
});
}