@cainiaofe/cn-ui-layout
Version:
- 安装 cone-cli ｜ [Cone-CLI 使用指引](https://alidocs.dingtalk.com/i/nodes/xdqZp24KneBJzvGM6XezJvyb7RA0Nr1E) - `tnpm i -g @alife/cone-cli@latest` - 安装依赖包 - `cone install` - 启动研发 - `cone start`
210 lines (209 loc) • 8.45 kB
JavaScript
import $i18n from "../../locales/i18n";
import isPlainObject from 'lodash/isPlainObject';
import Icon from "./logo";
import { createBlockInitialChildrenSnippet, createBlockSnippet, createEmptyBlockSnippet, createSectionInitialChildren, getObjectSetterSnippet } from "../../common/manager/setter-snippet";
import { BLOCK } from "../../common/util/const";
import { updateSpan } from "../cn-layout-cell/components/split/auto-block";
import LayoutSetter from "../../common/setter/layout-setter";
import UpdateSetter from "../../common/setter/update-setter";
import { replaceNode } from "../../common/util/block";
function handleI18nLabel(label) {
if (isPlainObject(label) && label.type === 'cn-i18n') {
return label.dm || '';
}
return label;
}
var CnLayoutSectionPrototype = {
title: $i18n.get({
id: 'FreeLayoutContainer',
dm: '自由布局容器'
}),
componentName: 'CnLayoutSection',
category: $i18n.get({
id: 'Advanced',
dm: '高级'
}),
icon: Icon,
docUrl: '',
isContainer: true,
initialChildren: createSectionInitialChildren,
// 为直接拖拽进CnLayoutSection的非CnLayoutBlock组件添加块结构
didDropIn: function didDropIn(dropInNode, targetNode) {
var _dropInNode$parent;
if ((dropInNode === null || dropInNode === void 0 ? void 0 : dropInNode.componentName) === 'CnLayoutBlock' || (dropInNode === null || dropInNode === void 0 ? void 0 : (_dropInNode$parent = dropInNode.parent) === null || _dropInNode$parent === void 0 ? void 0 : _dropInNode$parent.id) !== (targetNode === null || targetNode === void 0 ? void 0 : targetNode.id)) {
return;
}
var newSchema = (dropInNode === null || dropInNode === void 0 ? void 0 : dropInNode.componentName) === 'CnCard' ? createEmptyBlockSnippet({
blockProps: {
span: 12
},
blockChildren: dropInNode.schema
}) : createBlockSnippet({
cardProps: {
noPadding: true,
noShadow: true
},
cardChildren: dropInNode.schema
});
try {
replaceNode(dropInNode, newSchema);
} catch (e) {
// FIXME: 编辑器初始化时会触发didDropIn，此时的dropInNode数据结构不完整
}
},
didDropOut: function didDropOut(removedNode) {
updateSpan({
parent: removedNode.parent,
child: removedNode,
type: 'delete'
});
},
snippets: [{
screenshot: 'https://img.alicdn.com/imgextra/i4/O1CN01lrzpI11ueRo9jGONo_!!6000000006062-0-tps-2048-674.jpg',
label: 'CnLayoutSection',
schema: {
componentName: 'CnLayoutSection',
props: {}
}
}],
configure: [{
name: 'isCnLayoutSection',
title: 'CnLayoutSection',
initialValue: true,
display: 'none'
}, {
name: '_context',
title: $i18n.get({
id: 'Context',
dm: '上下文'
}),
initialValue: {
type: 'JSExpression',
value: 'this'
},
display: 'none'
}, {
title: $i18n.get({
id: 'Layout',
dm: '布局'
}),
name: '_layout',
display: 'accordion',
onecodeDisplay: 'visible',
collapsed: false,
setter: getObjectSetterSnippet({
items: [{
name: 'layout',
display: 'plain',
defaultValue: '6:6',
extraProps: {
getValue: function getValue(target) {
var _target$getNode, _node$getChildren, _children$map, _list$join;
var node = target === null || target === void 0 ? void 0 : (_target$getNode = target.getNode) === null || _target$getNode === void 0 ? void 0 : _target$getNode.call(target);
var children = node === null || node === void 0 ? void 0 : (_node$getChildren = node.getChildren) === null || _node$getChildren === void 0 ? void 0 : _node$getChildren.call(node);
var list = children === null || children === void 0 ? void 0 : (_children$map = children.map) === null || _children$map === void 0 ? void 0 : _children$map.call(children, function (child) {
var _child$getPropValue;
return child === null || child === void 0 ? void 0 : (_child$getPropValue = child.getPropValue) === null || _child$getPropValue === void 0 ? void 0 : _child$getPropValue.call(child, 'span');
});
return list === null || list === void 0 ? void 0 : (_list$join = list.join) === null || _list$join === void 0 ? void 0 : _list$join.call(list, ':');
},
setValue: function setValue(target, value) {
var _target$getNode2;
var size = value === null || value === void 0 ? void 0 : value.split(':').length;
var list = value === null || value === void 0 ? void 0 : value.split(':');
var node = target === null || target === void 0 ? void 0 : (_target$getNode2 = target.getNode) === null || _target$getNode2 === void 0 ? void 0 : _target$getNode2.call(target);
node.mergeChildren(function (child, index) {
child.setPropValue('span', +(list === null || list === void 0 ? void 0 : list[index]) || 1);
return index >= size;
}, function (children) {
var l = children.length;
var items = [];
while (l++ < size) {
items.push({
componentName: BLOCK,
props: {
span: +(list === null || list === void 0 ? void 0 : list[l - 1]) || 1
},
children: [createBlockInitialChildrenSnippet({})]
});
}
return items;
}, null);
}
},
setter: /*#__PURE__*/React.createElement(LayoutSetter, null)
}]
})
}, {
setter: function setter(target) {
return /*#__PURE__*/React.createElement(UpdateSetter, {
target: target
});
},
extraProps: {
condition: function condition(target) {
var _target$parent, _target$parent$getPro, _target$parent2, _target$parent2$getPr, _target$parent3;
var title = handleI18nLabel(target === null || target === void 0 ? void 0 : (_target$parent = target.parent) === null || _target$parent === void 0 ? void 0 : (_target$parent$getPro = _target$parent.getPropValue('normalStyle')) === null || _target$parent$getPro === void 0 ? void 0 : _target$parent$getPro.title);
var componentSlot = target === null || target === void 0 ? void 0 : (_target$parent2 = target.parent) === null || _target$parent2 === void 0 ? void 0 : (_target$parent2$getPr = _target$parent2.getPropValue('_layout')) === null || _target$parent2$getPr === void 0 ? void 0 : _target$parent2$getPr.componentSlot;
var extra = target === null || target === void 0 ? void 0 : (_target$parent3 = target.parent) === null || _target$parent3 === void 0 ? void 0 : _target$parent3.getPropValue('extra');
return !!(title || componentSlot || extra);
}
}
}, {
title: $i18n.get({
id: 'Style',
dm: '样式'
}),
name: 'normalStyle',
display: 'accordion',
collapsed: false,
setter: getObjectSetterSnippet({
items: [{
name: 'noPadding',
title: $i18n.get({
id: 'CloseInsideMargin',
dm: '关闭内边距'
}),
display: 'inline',
setter: 'BoolSetter',
defaultValue: true
}]
})
}, {
title: $i18n.get({
id: 'AdvancedConfiguration',
dm: '高级配置'
}),
type: 'group',
collapsed: true,
display: 'accordion',
items: [{
name: 'handleProps',
title: $i18n.get({
id: 'SetComponentPropsManually',
dm: '手动设置组件props'
}),
display: 'inline',
setter: {
title: $i18n.get({
id: 'WritingJsExpressions',
dm: '写js表达式'
}),
componentName: 'CnRowDataSetter',
props: function props() {
return {
list: [],
/* i18n-disable-next-line */
initialCode: "(oldProps, state) =>{\n// 给组件设置新的props。\n// oldProps.xxx = 'xxx';\n// return oldProps;\n }",
tip: $i18n.get({
id: 'OldPropsTheOriginalOldPropsOfThe_2116961506',
dm: 'oldProps: 组件的原始oldProps\nstate：全部的数据，在左侧列表中选择使用。'
})
};
}
}
}]
}]
};
// 原型配置请参考：https://lark.alipay.com/vision/docs/prototype
export { CnLayoutSectionPrototype };