@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`
127 lines (126 loc) • 6.28 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
var _window, _window$cnLowcodeStor, _window$cnLowcodeStor2;
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; }
import $i18n from "../../../locales/i18n";
import classNames from 'classnames';
import { useState } from 'react';
import { BLOCK, TILE } from "../../../common/util/const";
import { createBlockSnippet } from "../../../common/manager/setter-snippet";
import { makeColumnDom } from "./dom";
import "./index.scss";
var _ref = ((_window = window) === null || _window === void 0 ? void 0 : _window.CNUI) || {},
CnBalloon = _ref.CnBalloon;
var isMobile = ((_window$cnLowcodeStor = window.cnLowcodeStore) === null || _window$cnLowcodeStor === void 0 ? void 0 : (_window$cnLowcodeStor2 = _window$cnLowcodeStor.page) === null || _window$cnLowcodeStor2 === void 0 ? void 0 : _window$cnLowcodeStor2.pageSubtype) === 'MOBILE';
var FUSION_UI_VIEW_PREFIX = 'fd-layout-view';
var addNewBlock = function addNewBlock(_leaf) {
var _leaf$schema, _leaf$document;
var children = _leaf === null || _leaf === void 0 ? void 0 : (_leaf$schema = _leaf.schema) === null || _leaf$schema === void 0 ? void 0 : _leaf$schema.children;
var prevBlockSchema = [].concat((Array.isArray(children) ? children : []) || []).reverse().find(function (n) {
return typeof n === 'object' && [TILE, BLOCK].includes(n.componentName);
}) || createBlockSnippet();
var prevBlockProps = _extends({}, prevBlockSchema.props);
delete prevBlockProps.operation;
var blockSchema = createBlockSnippet({
cardProps: {
title: $i18n.get({
id: 'Title',
dm: '标题'
})
},
blockProps: _extends({}, prevBlockProps, {
span: 12
})
});
var newNode = _leaf === null || _leaf === void 0 ? void 0 : (_leaf$document = _leaf.document) === null || _leaf$document === void 0 ? void 0 : _leaf$document.createNode(blockSchema);
newNode && (_leaf === null || _leaf === void 0 ? void 0 : _leaf.insertAfter(newNode));
};
var batchAddNewBlock = function batchAddNewBlock(_leaf, blockSpanStr) {
var blockSpanList = blockSpanStr === null || blockSpanStr === void 0 ? void 0 : blockSpanStr.split(':');
if (Array.isArray(blockSpanList)) {
var _leaf$parent;
var cardProps = {};
if ((_leaf === null || _leaf === void 0 ? void 0 : (_leaf$parent = _leaf.parent) === null || _leaf$parent === void 0 ? void 0 : _leaf$parent.componentName) === 'CnCard') {
var _leaf$parent$propsDat;
cardProps = {
noPadding: true,
noShadow: true,
title: $i18n.get({
id: 'Title',
dm: '标题'
}),
shape: 'simple'
};
if (((_leaf$parent$propsDat = _leaf.parent.propsData) === null || _leaf$parent$propsDat === void 0 ? void 0 : _leaf$parent$propsDat.shape) === 'group') {
cardProps.noPadding = false;
cardProps.noShadow = false;
cardProps.shape = 'normal';
}
}
for (var _iterator = _createForOfIteratorHelperLoose(blockSpanList), _step; !(_step = _iterator()).done;) {
var _leaf$document2;
var blockSpan = _step.value;
var blockSchema = createBlockSnippet({
cardProps: cardProps,
blockProps: {
span: Number(blockSpan)
}
});
var newNode = _leaf === null || _leaf === void 0 ? void 0 : (_leaf$document2 = _leaf.document) === null || _leaf$document2 === void 0 ? void 0 : _leaf$document2.createNode(blockSchema);
newNode && (_leaf === null || _leaf === void 0 ? void 0 : _leaf.insertAfter(newNode));
}
}
};
/**
* @description 自由布局容器提供的插入新分栏能力
*/
export var AddTile = function AddTile(props) {
var _useState = useState(false),
ballonVisible = _useState[0],
setBallonVisible = _useState[1];
var _ref2 = props || {},
_leaf = _ref2._leaf;
var dom = null;
if (isMobile) {
dom = /*#__PURE__*/React.createElement("div", {
onClick: function onClick() {
return addNewBlock(_leaf);
},
className: FUSION_UI_VIEW_PREFIX + "-icon-add"
});
} else {
var _classNames;
dom = /*#__PURE__*/React.createElement("div", {
className: classNames(FUSION_UI_VIEW_PREFIX + "-icon-add", (_classNames = {}, _classNames[FUSION_UI_VIEW_PREFIX + "-icon-add-focus"] = ballonVisible, _classNames))
});
}
return /*#__PURE__*/React.createElement("div", {
className: FUSION_UI_VIEW_PREFIX + "-block-add"
}, !isMobile && CnBalloon ? /*#__PURE__*/React.createElement(CnBalloon, {
v2: true,
closable: false,
align: 'b',
popupStyle: {
minWidth: '312px'
},
trigger: dom,
onVisibleChange: function onVisibleChange(visible) {
setBallonVisible(visible);
}
}, /*#__PURE__*/React.createElement("div", {
className: "cn-layout-setter-item-container"
}, /*#__PURE__*/React.createElement("div", {
className: "cn-layout-setter-item-title"
}, $i18n.get({
id: 'InsertANewColumnBelowTheCurrentR_1664352081',
dm: '当前行下方插入新分栏'
})), /*#__PURE__*/React.createElement("div", {
className: 'cn-layout-setter-item-content'
}, makeColumnDom({
value: '',
onClick: function onClick(newV) {
batchAddNewBlock(_leaf, newV);
}
})))) : dom);
};