@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`
238 lines (236 loc) • 7.06 kB
JavaScript
var _getLowCodeCoreUtil;
import $i18n from "../../locales/i18n";
import Icon from "./logo";
import { updateSpan } from "../cn-layout-cell/components/split/auto-block";
import { getLowCodeCoreUtil } from "../../common/util/util";
import IdSetter from "../../common/setter/id-setter";
import { getGroupSetterSnippet, getMixedSetterSnippet } from "../../common/manager/setter-snippet";
import ColumnSelectSetter from "../../common/setter/column-select-setter";
import { calculateAfterGroupList } from "../../common/util/block";
var getAcc = function getAcc(arr, index) {
if (Array.isArray(arr) && arr.length > 0) {
return arr.reduce(function (last, count, i) {
if (i <= index) {
return +count + last;
}
return last;
}, 0);
}
return 0;
};
var CnLayoutBlockPrototype = {
title: $i18n.get({
id: 'Block',
dm: '块'
}),
componentName: 'CnLayoutBlock',
icon: Icon,
docUrl: '',
isContainer: true,
canResizing: function canResizing(node, triggerDirection) {
updateSpan({
parent: node.parent,
child: node,
type: 'refresh'
});
// 只开放块右侧句柄
if (['e'].includes(triggerDirection)) {
return true;
}
return false;
},
onResizeStart: function onResizeStart(e, d, currentNode) {
var _ref = currentNode || {},
parent = _ref.parent;
if (parent) {
var parentNode = parent.getDOMNode();
if (parentNode) {
currentNode.parentRect = parentNode.getBoundingClientRect();
}
}
currentNode.lastDeltaX = 0;
currentNode.lastGroupList = '';
},
onResize: function onResize(e, d, currentNode) {
var _currentNode$parent;
// 获取合法移动位移
// 判断是否要变化
// 更新鼠标开始位置，更新span信息
var deltaX = e.deltaX,
trigger = e.trigger;
var parentIndex = currentNode.index;
var lastFlatenMap = currentNode === null || currentNode === void 0 ? void 0 : (_currentNode$parent = currentNode.parent) === null || _currentNode$parent === void 0 ? void 0 : _currentNode$parent.lastFlatenMap;
if (!lastFlatenMap || !deltaX) {
return;
}
var _lastFlatenMap$parent = lastFlatenMap[parentIndex],
groupInnerIndex = _lastFlatenMap$parent.groupInnerIndex,
groupList = _lastFlatenMap$parent.groupList;
var latestDeltaX = deltaX - currentNode.lastDeltaX || 0;
var afterGroupList = calculateAfterGroupList({
beforeGroupList: groupList.split(','),
direction: latestDeltaX > 0 ? 'r' : 'l',
groupInnerIndex: groupInnerIndex
});
var groupAccInnerIndex = trigger === 'e' ? groupInnerIndex : groupInnerIndex - 1;
if (!(afterGroupList !== null && afterGroupList !== void 0 && afterGroupList.length)) {
return;
}
var step = getAcc(afterGroupList, groupAccInnerIndex) - getAcc(groupList.split(','), groupAccInnerIndex);
if (currentNode.movementAtOnce === step && currentNode.lastGroupList === groupList) {
return;
}
var stepPx = currentNode.parentRect.width / 12 * step;
var tolerance = 40;
if (Math.abs(latestDeltaX) > Math.abs(stepPx) - tolerance) {
currentNode.movementAtOnce = step;
currentNode.lastGroupList = groupList;
currentNode.lastDeltaX += stepPx;
updateSpan({
parent: currentNode.parent,
child: currentNode,
type: 'resize',
offset: step
});
}
},
onResizeEnd: function onResizeEnd(e, d, currentNode) {
currentNode.movementAtOnce = 'clear';
},
configure: [{
name: 'isCnLayoutBlock',
title: 'CnLayoutBlock',
initialValue: true,
display: 'none'
}, {
name: '_context',
title: $i18n.get({
id: 'Context',
dm: '上下文'
}),
initialValue: {
type: 'JSExpression',
value: 'this'
},
display: 'none'
}, {
title: $i18n.get({
id: 'Style',
dm: '样式'
}),
type: 'group',
display: 'accordion',
collapsed: false,
items: [{
name: 'hidden',
display: 'inline',
title: $i18n.get({
id: 'WhetherToHide',
dm: '是否隐藏'
}),
setter: 'VariableSetter',
supportVariable: true
}, {
name: 'foldable',
title: $i18n.get({
id: 'OpenDeploymentStow',
dm: '开启展开收起'
}),
initialValue: false,
display: 'inline',
setter: 'BoolSetter'
}]
}, getGroupSetterSnippet({
items: [{
name: 'span',
title: $i18n.get({
id: 'HowManyColumnsInARow12Total',
dm: '在一行中占几列(共12列)'
}),
display: 'inline',
setter: getMixedSetterSnippet({
setters: [{
componentName: ColumnSelectSetter,
title: $i18n.get({
id: 'GraphicSelection',
dm: '图形选择'
})
}, {
componentName: 'NumberSetter',
title: $i18n.get({
id: 'DigitalInput',
dm: '数字输入'
})
}]
})
}],
outerConfig: {
title: $i18n.get({
id: 'Layout',
dm: '布局'
})
}
}), {
name: 'buttons',
title: $i18n.get({
id: 'BottomButtonBar',
dm: '底部按钮栏'
}),
display: 'accordion',
// collapsed:false,
initialValue: [],
setter: (_getLowCodeCoreUtil = getLowCodeCoreUtil('button.createButtonListSetters')) === null || _getLowCodeCoreUtil === void 0 ? void 0 : _getLowCodeCoreUtil({
position: getLowCodeCoreUtil('enumMap.ButtonPosition.blockButton'),
supportCnFormat: true
})
}, {
title: $i18n.get({
id: 'AdvancedConfiguration',
dm: '高级配置'
}),
type: 'group',
collapsed: true,
display: 'accordion',
items: [{
name: '_nodeId',
title: $i18n.get({
id: 'NodeID',
dm: '节点 ID'
}),
display: 'inline',
initialValue: function initialValue() {
return this.getNode().id;
},
setter: /*#__PURE__*/React.createElement(IdSetter, null)
}, {
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: [],
initialCode: $i18n.get({
id: 'OldPropsStateProps',
dm: "(oldProps, state) =>{\n // 给组件设置新的props。\n // oldProps.xxx = 'xxx';\n // return oldProps;\n}"
}),
tip: $i18n.get({
id: 'OldPropsTheComponentsOriginalPro_2018921453',
dm: 'oldProps: 组件的原始props\nstate：全部的数据，在左侧列表中选择使用。'
})
};
}
}
}]
}]
};
// 原型配置请参考：https://lark.alipay.com/vision/docs/prototype
export { CnLayoutBlockPrototype };