@riil-frontend/component-page-config
Version:
page config components,include components list,component attribute panel and page canvas
279 lines (245 loc) • 10.3 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _collapse = _interopRequireDefault(require("@alifd/next/lib/collapse"));
var _message = _interopRequireDefault(require("@alifd/next/lib/message"));
var _balloon = _interopRequireDefault(require("@alifd/next/lib/balloon"));
var _box = _interopRequireDefault(require("@alifd/next/lib/box"));
var _divider = _interopRequireDefault(require("@alifd/next/lib/divider"));
var _search = _interopRequireDefault(require("@alifd/next/lib/search"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _lodash = _interopRequireDefault(require("lodash"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _componentRiilIcon = _interopRequireDefault(require("@riil-frontend/component-riil-icon"));
require("./index.scss");
var _util = require("../util");
var _constant = require("../constant");
var _IconTitle = _interopRequireDefault(require("./IconTitle"));
function ComList(props) {
var comList = props.comList,
onItemDragStart = props.onItemDragStart,
collapseProps = props.collapseProps,
customGetComRequire = props.customGetComRequire,
onItemDragEnd = props.onItemDragEnd,
comDict = props.comDict,
helpVisible = props.helpVisible;
var _useState = (0, _react.useState)(""),
searchKey = _useState[0],
setSearchKey = _useState[1];
var _useState2 = (0, _react.useState)([]),
expandedKeys = _useState2[0],
setExpandedKeys = _useState2[1];
var _useState3 = (0, _react.useState)({
config: [],
contentObj: {
children: []
},
otherList: []
}),
data = _useState3[0],
setData = _useState3[1];
(0, _react.useEffect)(function () {
var _config = comList && comList.map(function (ele, index) {
var children = [];
ele.children.forEach(function (item) {
if (!item.importFrom || item.type === _constant.COMLIST_TEMPLATE_TYPE) {
children.push(item);
} else {
var Com = (0, _util.getComRequire)(item.type, comDict, customGetComRequire);
var conf = Com ? _lodash["default"].cloneDeep(Com.config) : null;
conf = (0, _extends2["default"])({}, conf, item.config);
var myConfig = item.config,
other = (0, _objectWithoutPropertiesLoose2["default"])(item, ["config"]);
conf && children.push((0, _extends2["default"])({}, conf, other));
}
});
return (0, _extends2["default"])({}, ele, {
children: children
});
});
var _contentObj = null;
var _otherList = [];
_config.forEach(function (ele) {
if (ele.key === "layout") {
_contentObj = ele;
} else {
_otherList.push(ele);
}
});
_otherList = _otherList.map(function (ele) {
var children = ele.children.filter(function (item) {
if (searchKey === "") {
return item;
}
var name = item.name.toLocaleLowerCase();
return name.includes(searchKey.toLocaleLowerCase());
});
return (0, _extends2["default"])({}, ele, {
children: children
});
});
setData({
config: _config,
contentObj: _contentObj,
otherList: _otherList
});
setExpandedKeys(_otherList.map(function (ele) {
return ele.key;
}));
}, [comList, comDict, searchKey]);
var config = data.config,
contentObj = data.contentObj,
otherList = data.otherList;
return /*#__PURE__*/_react["default"].createElement("div", {
className: "uicbb-com-list-3"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "uicbb-com-list-search"
}, /*#__PURE__*/_react["default"].createElement(_search["default"], {
hasClear: true,
style: {
width: "100%"
},
shape: "simple",
onChange: function onChange(value) {
setSearchKey(value);
}
})), /*#__PURE__*/_react["default"].createElement("div", {
className: "uicbb-com-list-body"
}, contentObj ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
className: "uicbb-com-list-contenter-header"
}, /*#__PURE__*/_react["default"].createElement(_divider["default"], {
direction: "ver"
}), /*#__PURE__*/_react["default"].createElement("span", null, contentObj.title)), /*#__PURE__*/_react["default"].createElement("div", {
className: "uicbb-com-list-contenter-wrap"
}, /*#__PURE__*/_react["default"].createElement(_box["default"], {
direction: "row",
wrap: true,
spacing: 28,
justify: "space-between"
}, contentObj.children.map(function (item, index) {
var _item$attributes;
return /*#__PURE__*/_react["default"].createElement("div", {
key: "comlistContent" + index,
className: "icbb-com-list-item " + ((index === 0 ? helpVisible : false) ? "hover-state" : ""),
draggable: true,
onDragStart: function onDragStart(e) {
e.dataTransfer.setData("text/plain", JSON.stringify(item));
onItemDragStart && onItemDragStart(item, e);
},
onDragEnd: function onDragEnd(e) {
onItemDragEnd && onItemDragEnd(e);
},
onDragOver: function onDragOver(e) {}
}, /*#__PURE__*/_react["default"].createElement(_balloon["default"], {
align: "r",
offset: [6, 0],
closable: false,
visible: index === 0 ? helpVisible : false,
trigger: /*#__PURE__*/_react["default"].createElement("div", {
key: "comlistContent" + index,
className: "uicbb-com-list-item " + ((index === 0 ? helpVisible : false) ? "hover-state" : ""),
draggable: true,
onDragStart: function onDragStart(e) {
e.dataTransfer.setData("text/plain", JSON.stringify(item));
onItemDragStart && onItemDragStart(item, e);
},
onDragEnd: function onDragEnd(e) {
onItemDragEnd && onItemDragEnd(e);
},
onDragOver: function onDragOver(e) {}
}, /*#__PURE__*/_react["default"].createElement(_box["default"], {
className: "uicbb-com-list-item-icon",
align: "center",
justify: "center"
}, /*#__PURE__*/_react["default"].createElement(_componentRiilIcon["default"], {
type: item.icon,
size: "medium"
})), /*#__PURE__*/_react["default"].createElement("div", {
style: {
textAlign: "center"
},
className: "uicbb-com-list-item-label"
}, item.name || (item === null || item === void 0 ? void 0 : (_item$attributes = item.attributes) === null || _item$attributes === void 0 ? void 0 : _item$attributes.comName) || item.type))
}, "\u8BF7\u5148\u62D6\u5165\u5BB9\u5668\uFF0C\u518D\u62D6\u5165\u7EC4\u4EF6"));
})))) : null, /*#__PURE__*/_react["default"].createElement("div", {
className: "uicbb-com-list-divider"
}, /*#__PURE__*/_react["default"].createElement(_divider["default"], null)), /*#__PURE__*/_react["default"].createElement(_collapse["default"], (0, _extends2["default"])({}, collapseProps, {
className: "com-list-collapse collapse-no-title-background",
expandedKeys: expandedKeys,
onExpand: function onExpand(v) {
setExpandedKeys(v);
}
}), otherList.map(function (ele) {
return /*#__PURE__*/_react["default"].createElement(_collapse["default"].Panel, {
className: ele.children.length > 0 ? "" : "empty-content",
key: ele.key,
title: ele.iconInfo ? /*#__PURE__*/_react["default"].createElement(_IconTitle["default"], {
title: ele.title,
iconInfo: ele.iconInfo
}) : ele.title
}, ele.message ? /*#__PURE__*/_react["default"].createElement(_message["default"], {
type: "notice",
closeable: true,
style: {
marginBottom: 16
}
}, ele.message) : null, /*#__PURE__*/_react["default"].createElement(_box["default"], {
direction: "row",
wrap: true,
spacing: [12, 28],
justify: "space-between"
}, ele.children.map(function (item, index) {
var _item$attributes2;
return /*#__PURE__*/_react["default"].createElement("div", {
key: "comlist" + index,
className: "uicbb-com-list-item",
draggable: true,
onDragStart: function onDragStart(e) {
e.dataTransfer.setData("text/plain", JSON.stringify(item));
onItemDragStart && onItemDragStart(item, e);
},
onDragEnd: function onDragEnd(e) {
onItemDragEnd && onItemDragEnd(e);
},
onDragOver: function onDragOver(e) {}
}, /*#__PURE__*/_react["default"].createElement(_box["default"], {
className: "uicbb-com-list-item-icon",
align: "center",
justify: "center"
}, /*#__PURE__*/_react["default"].createElement("img", {
src: item.path + "/assets/icon/" + item.icon + ".svg"
})), /*#__PURE__*/_react["default"].createElement("div", {
style: {
textAlign: "center"
},
className: "uicbb-com-list-item-label"
}, item.name || (item === null || item === void 0 ? void 0 : (_item$attributes2 = item.attributes) === null || _item$attributes2 === void 0 ? void 0 : _item$attributes2.comName) || item.type));
})));
}))));
}
ComList.propTypes = {
/**
* 组件列表数据exp:[{key:'workbench',title:'工作台'，children:[{type: 'component-exp-alarm-list', importFrom: 'npm',icon:'help'}] }],
* */
comList: _propTypes["default"].array,
/**
* 当组件图标拖拽开始时回调
* @type {(config:Object,e:MouseEvent)=>{}} config为拖拽组件的配置数据，e为鼠标event
*/
onItemDragStart: _propTypes["default"].func,
/**
* 透传折叠面板属性
*/
collapseProps: _propTypes["default"].object,
/**
* 自定义组件类引用方法
*/
customGetComRequire: _propTypes["default"].func
};
ComList.defaultProps = {};
var _default = ComList;
exports["default"] = _default;