@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`
357 lines (354 loc) • 18.7 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _i18n = _interopRequireDefault(require("../../../locales/i18n"));
var _react = _interopRequireDefault(require("react"));
var _setterSnippet = require("../../manager/setter-snippet");
var _block = require("../../util/block");
var _dom = require("../../../lowcode/cn-layout-section/components/dom");
require("./index.scss");
var _window, _window$getCnLowcodeS;
function _createForOfIteratorHelperLoose(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (t) return (t = t.call(r)).next.bind(t); if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var o = 0; return function () { return o >= r.length ? { done: !0 } : { done: !1, value: r[o++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
var _ref = window.CNUI || {},
CnButton = _ref.CnButton,
CnBalloon = _ref.CnBalloon;
// 当前是主端还是辅端 main/ onecode
var endType = (_window = window) === null || _window === void 0 ? void 0 : (_window$getCnLowcodeS = _window.getCnLowcodeStoreItem) === null || _window$getCnLowcodeS === void 0 ? void 0 : _window$getCnLowcodeS.call(_window, '__next_cone_client__');
// 一码多端辅端模式
var oneCodeMode = endType === 'onecode';
/**
* @description 虚拟布局视图Setter
*/
var LayoutSetter = exports["default"] = /*#__PURE__*/function (_React$Component) {
function LayoutSetter(props) {
var _this$props, _this$props$prop, _this$props$prop$getN;
var _this;
_this = _React$Component.call(this, props) || this;
_this.sectionNode = void 0;
_this.changeLayout = function (_ref2) {
var _newLineDetailStr$spl;
var currentLine = _ref2.currentLine,
oldLineDetail2 = _ref2.oldLineDetail2,
newLineDetailStr = _ref2.newLineDetailStr,
list = _ref2.list;
// [6,6] 0行 [{index:0,value:6},{index:1,value:6}] '4:4:4'
var newLineDetail = (_newLineDetailStr$spl = newLineDetailStr.split(':')) === null || _newLineDetailStr$spl === void 0 ? void 0 : _newLineDetailStr$spl.map(function (item) {
return +item;
});
// 块个数相同，调整块span
if (newLineDetail.length === oldLineDetail2.length) {
oldLineDetail2.forEach(function (item, index) {
// 调整块span
_this.adjustBlockSpan(item.index, newLineDetail[index]);
});
} else if (newLineDetail.length > oldLineDetail2.length) {
// 块个数增加，新增块
var addList = newLineDetail.slice(oldLineDetail2.length);
oldLineDetail2.forEach(function (item, index) {
// 调整块span
_this.adjustBlockSpan(item.index, newLineDetail[index]);
});
if (oneCodeMode) {
var lastBlock = oldLineDetail2[oldLineDetail2.length - 1];
addList.forEach(function (item, index) {
// 调整块span
_this.adjustBlockSpan((lastBlock === null || lastBlock === void 0 ? void 0 : lastBlock.index) + index + 1, item);
});
} else {
var _oldLineDetail;
// 调整块span
_this.insertNewBlock((_oldLineDetail = oldLineDetail2[oldLineDetail2.length - 1]) === null || _oldLineDetail === void 0 ? void 0 : _oldLineDetail.index, addList);
}
} else if (newLineDetail.length < oldLineDetail2.length) {
oldLineDetail2.forEach(function (item, index) {
// 调整块span
_this.adjustBlockSpan(item.index, newLineDetail[index]);
});
var removeList = oldLineDetail2.slice(newLineDetail.length);
var nextList = list[currentLine + 1] || [];
_this.batchSetBlockSpan([].concat(removeList, nextList));
}
};
// 调整某个块的span值
_this.adjustBlockSpan = function (blockIndex, newSpan) {
if (typeof blockIndex === 'number' && typeof newSpan === 'number') {
var _this$sectionNode, _this$sectionNode$sch;
var children = ((_this$sectionNode = _this.sectionNode) === null || _this$sectionNode === void 0 ? void 0 : (_this$sectionNode$sch = _this$sectionNode.schema) === null || _this$sectionNode$sch === void 0 ? void 0 : _this$sectionNode$sch.children) || [];
var childrenListSchema = Array.isArray(children) ? children : [children];
var targetNode = childrenListSchema[blockIndex];
if (targetNode !== null && targetNode !== void 0 && targetNode.id) {
var _this$sectionNode2, _this$sectionNode2$do, _this$sectionNode2$do2, _this$sectionNode2$do3;
// @ts-ignore 上游类型定义错误
(_this$sectionNode2 = _this.sectionNode) === null || _this$sectionNode2 === void 0 ? void 0 : (_this$sectionNode2$do = _this$sectionNode2.document) === null || _this$sectionNode2$do === void 0 ? void 0 : (_this$sectionNode2$do2 = _this$sectionNode2$do.getNodeById) === null || _this$sectionNode2$do2 === void 0 ? void 0 : (_this$sectionNode2$do3 = _this$sectionNode2$do2.call(_this$sectionNode2$do, targetNode === null || targetNode === void 0 ? void 0 : targetNode.id)) === null || _this$sectionNode2$do3 === void 0 ? void 0 : _this$sectionNode2$do3.setPropValue('span', newSpan);
}
}
};
_this.insertNewBlock = function (blockIndex, addList) {
if (typeof blockIndex === 'number' && Array.isArray(addList) && addList.length > 0) {
var _this$sectionNode3, _this$sectionNode3$ge, _parentNode$getPropVa, _this$sectionNode4, _this$sectionNode5, _this$sectionNode5$sc, _targetNode;
var parentNode = (_this$sectionNode3 = _this.sectionNode) === null || _this$sectionNode3 === void 0 ? void 0 : (_this$sectionNode3$ge = _this$sectionNode3.getNode()) === null || _this$sectionNode3$ge === void 0 ? void 0 : _this$sectionNode3$ge.parent;
var cardProps = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.componentName) === 'CnCard' && (parentNode === null || parentNode === void 0 ? void 0 : (_parentNode$getPropVa = parentNode.getPropValue) === null || _parentNode$getPropVa === void 0 ? void 0 : _parentNode$getPropVa.call(parentNode, 'shape')) !== 'group' ? {
shape: 'simple',
noPadding: true,
noShadow: true
} : {};
var toAddChildren = addList.map(function (item) {
var blockSchema = (0, _setterSnippet.createBlockSnippet)({
blockProps: {
span: Number(item)
},
cardProps: cardProps
});
return blockSchema;
});
var oldSchema = (0, _extends2["default"])({}, (_this$sectionNode4 = _this.sectionNode) === null || _this$sectionNode4 === void 0 ? void 0 : _this$sectionNode4.schema);
var children = ((_this$sectionNode5 = _this.sectionNode) === null || _this$sectionNode5 === void 0 ? void 0 : (_this$sectionNode5$sc = _this$sectionNode5.schema) === null || _this$sectionNode5$sc === void 0 ? void 0 : _this$sectionNode5$sc.children) || [];
var oldChildren = Array.isArray(children) ? children : [children];
var targetNode = oldChildren[blockIndex];
if (blockIndex === -1) {
targetNode = oldChildren[0];
}
if ((_targetNode = targetNode) !== null && _targetNode !== void 0 && _targetNode.id) {
var _this$sectionNode6, _this$sectionNode6$im;
var newChildren = [].concat(oldChildren);
newChildren.splice.apply(newChildren, [blockIndex + 1, 0].concat(toAddChildren));
oldSchema.children = newChildren;
// @ts-ignore 上游类型定义错误
(_this$sectionNode6 = _this.sectionNode) === null || _this$sectionNode6 === void 0 ? void 0 : (_this$sectionNode6$im = _this$sectionNode6.importSchema) === null || _this$sectionNode6$im === void 0 ? void 0 : _this$sectionNode6$im.call(_this$sectionNode6, oldSchema);
}
}
};
// 删除当前行
_this.removeBlock = function (removeList) {
if (Array.isArray(removeList) && removeList.length > 0) {
var _this$sectionNode7;
var removeList2 = removeList.map(function (item) {
return item.index;
});
// @ts-ignore ...
(_this$sectionNode7 = _this.sectionNode) === null || _this$sectionNode7 === void 0 ? void 0 : _this$sectionNode7.mergeChildren(function (child, index) {
if (removeList2.includes(index)) {
return true;
}
return false;
}, function () {});
}
};
// 高亮画布中当前hover的虚拟行
_this.highLightCurrentLine = function (current) {
if (Array.isArray(current)) {
var _document$getElements, _document$getElements2, _this$sectionNode8, _this$sectionNode8$sc;
// @ts-ignore 获取iframe中内容
var doc = (_document$getElements = document.getElementsByName('SimulatorRenderer')) === null || _document$getElements === void 0 ? void 0 : (_document$getElements2 = _document$getElements[0]) === null || _document$getElements2 === void 0 ? void 0 : _document$getElements2.contentDocument;
_this.resetHighLight();
var children = ((_this$sectionNode8 = _this.sectionNode) === null || _this$sectionNode8 === void 0 ? void 0 : (_this$sectionNode8$sc = _this$sectionNode8.schema) === null || _this$sectionNode8$sc === void 0 ? void 0 : _this$sectionNode8$sc.children) || [];
var childrenListSchema = Array.isArray(children) ? children : [children];
current.forEach(function (item) {
var _ref3 = item || {},
index = _ref3.index;
var targetNode = childrenListSchema[index];
if (targetNode !== null && targetNode !== void 0 && targetNode.id) {
var targetDom = doc.querySelector("[componentid=\"" + (targetNode === null || targetNode === void 0 ? void 0 : targetNode.id) + "\"]");
if (targetDom) {
targetDom.style.border = '1px solid #1677ff';
}
}
});
}
};
// 取消画布中当前高亮的虚拟行
_this.resetHighLight = function () {
var _document$getElements3, _document$getElements4;
// @ts-ignore 获取iframe中内容
var doc = (_document$getElements3 = document.getElementsByName('SimulatorRenderer')) === null || _document$getElements3 === void 0 ? void 0 : (_document$getElements4 = _document$getElements3[0]) === null || _document$getElements4 === void 0 ? void 0 : _document$getElements4.contentDocument;
var all = doc === null || doc === void 0 ? void 0 : doc.getElementsByClassName('cn-layout-block');
if ((all === null || all === void 0 ? void 0 : all.length) > 0) {
for (var _iterator = _createForOfIteratorHelperLoose(all), _step; !(_step = _iterator()).done;) {
var item = _step.value;
if (item) {
item.style.border = 'none';
}
}
}
};
// 合并行
_this.batchSetBlockSpan = function (totalList) {
var newSpan = Math.floor(12 / (totalList === null || totalList === void 0 ? void 0 : totalList.length));
if (newSpan < 1) {
return;
}
totalList.forEach(function (item) {
// 调整块span
_this.adjustBlockSpan(item.index, newSpan);
});
};
_this.renderMergeButton = function (newList, index) {
if (index === 0) {
return null;
}
var first = newList[index - 1];
var second = newList[index];
if ((first === null || first === void 0 ? void 0 : first.length) + (second === null || second === void 0 ? void 0 : second.length) <= 12) {
return /*#__PURE__*/_react["default"].createElement(CnButton, {
onClick: function onClick() {
_this.batchSetBlockSpan([].concat(first, second));
},
size: 'small'
}, _i18n["default"].get({
id: 'Manual.MergeLines',
dm: '合并{pre}, {next}行'
}, {
pre: index,
next: index + 1
}));
}
return null;
};
_this.sectionNode = (_this$props = _this.props) === null || _this$props === void 0 ? void 0 : (_this$props$prop = _this$props.prop) === null || _this$props$prop === void 0 ? void 0 : (_this$props$prop$getN = _this$props$prop.getNode) === null || _this$props$prop$getN === void 0 ? void 0 : _this$props$prop$getN.call(_this$props$prop);
return _this;
}
(0, _inheritsLoose2["default"])(LayoutSetter, _React$Component);
var _proto = LayoutSetter.prototype;
_proto.render = function render() {
var _newList,
_this2 = this;
var _ref4 = this.props || {},
value = _ref4.value;
var newList = [];
if (value) {
var _value$split;
newList = (0, _block.groupColumn)(value === null || value === void 0 ? void 0 : (_value$split = value.split) === null || _value$split === void 0 ? void 0 : _value$split.call(value, ':'));
}
return /*#__PURE__*/_react["default"].createElement("div", {
className: "cn-layout-setter-wrap"
}, ((_newList = newList) === null || _newList === void 0 ? void 0 : _newList.length) > 0 ? newList.map(function (current, index) {
var item = current.map(function (temp) {
return temp.value;
});
var currentValue = item.join(':');
if (Array.isArray(item) && item.length === 1) {
currentValue = "" + item[0];
}
return /*#__PURE__*/_react["default"].createElement("div", {
onMouseEnter: function onMouseEnter() {
_this2.highLightCurrentLine(current);
},
onMouseLeave: function onMouseLeave() {
_this2.resetHighLight();
},
className: "cn-layout-setter-item"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "cn-layout-setter-item-title"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "cn-layout-setter-item-title-left"
}, /*#__PURE__*/_react["default"].createElement("span", null, _i18n["default"].get({
id: 'Section',
dm: '第'
}), index + 1, _i18n["default"].get({
id: 'Line',
dm: '行'
})), /*#__PURE__*/_react["default"].createElement("div", {
className: "cn-layout-setter-item-insert"
}, _this2.renderMergeButton(newList, index), !oneCodeMode && /*#__PURE__*/_react["default"].createElement(CnBalloon, {
v2: true,
popupStyle: {
minWidth: '312px'
},
closable: false,
align: 't',
trigger: /*#__PURE__*/_react["default"].createElement(CnButton, {
size: 'small'
}, index === 0 ? _i18n["default"].get({
id: 'Manual.InsertBefore',
dm: '第{line}行前插入新行'
}, {
line: index + 1
}) : _i18n["default"].get({
id: 'Manual.InsertBetween',
dm: '在{pre}, {next}行之间插入行'
}, {
pre: index,
next: index + 1
}))
}, /*#__PURE__*/_react["default"].createElement("div", {
className: 'cn-layout-setter-item-content'
}, (0, _dom.makeColumnDom)({
value: '',
onClick: function onClick(newV) {
_this2.insertNewBlock(current[0].index === 0 ? -1 : current[0].index - 1, newV.split(':'));
}
}))))), /*#__PURE__*/_react["default"].createElement("div", {
className: "cn-layout-setter-item-delete"
}, !oneCodeMode && /*#__PURE__*/_react["default"].createElement(CnButton, {
onClick: function onClick() {
_this2.removeBlock(current);
},
size: 'small',
warning: true
}, _i18n["default"].get({
id: 'TERM.Delete',
dm: '删除'
})))), /*#__PURE__*/_react["default"].createElement("div", {
className: "cn-layout-setter-item-content"
}, (0, _dom.makeColumnDom)({
value: currentValue,
onClick: function onClick(newV) {
_this2.changeLayout({
currentLine: index,
oldLineDetail2: current,
newLineDetailStr: newV,
list: newList
});
}
}), /*#__PURE__*/_react["default"].createElement("span", {
className: "cn-layout-setter-item-tip"
}, currentValue)), index === newList.length - 1 && !oneCodeMode && /*#__PURE__*/_react["default"].createElement("div", {
className: "cn-layout-setter-item-title",
style: {
marginTop: '5px'
}
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "cn-layout-setter-item-insert"
}, /*#__PURE__*/_react["default"].createElement(CnBalloon, {
v2: true,
closable: false,
align: 't',
popupStyle: {
minWidth: '312px'
},
trigger: /*#__PURE__*/_react["default"].createElement(CnButton, {
size: 'small'
}, _i18n["default"].get({
id: 'InsertNewLineAtEnd',
dm: '末尾插入新行'
}))
}, /*#__PURE__*/_react["default"].createElement("div", {
className: 'cn-layout-setter-item-content'
}, (0, _dom.makeColumnDom)({
value: '',
onClick: function onClick(newV) {
_this2.insertNewBlock(current[(current === null || current === void 0 ? void 0 : current.length) - 1].index, newV.split(':'));
}
})))), /*#__PURE__*/_react["default"].createElement("div", {
style: {
opacity: 0
},
className: "cn-layout-setter-item-delete"
}, /*#__PURE__*/_react["default"].createElement(CnButton, {
size: 'small',
warning: true
}, _i18n["default"].get({
id: 'TERM.Delete',
dm: '删除'
})))));
}) : null);
};
return LayoutSetter;
}(_react["default"].Component);
module.exports = exports.default;
module.exports.default = exports.default;