@riil-frontend/component-page-config
Version:
page config components,include components list,component attribute panel and page canvas
256 lines (239 loc) • 8.98 kB
JavaScript
import _Collapse from "@alifd/next/es/collapse";
import _Message from "@alifd/next/es/message";
import _Balloon from "@alifd/next/es/balloon";
import _Box from "@alifd/next/es/box";
import _Divider from "@alifd/next/es/divider";
import _Search from "@alifd/next/es/search";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/extends";
import React, { useState, useEffect } from "react";
import _ from "lodash";
import PropTypes from "prop-types";
import RiilIcon from "@riil-frontend/component-riil-icon";
import "./index.scss";
import { getComRequire } from "../util";
import { COMLIST_TEMPLATE_TYPE } from "../constant";
import IconTitle from "./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 = useState(""),
searchKey = _useState[0],
setSearchKey = _useState[1];
var _useState2 = useState([]),
expandedKeys = _useState2[0],
setExpandedKeys = _useState2[1];
var _useState3 = useState({
config: [],
contentObj: {
children: []
},
otherList: []
}),
data = _useState3[0],
setData = _useState3[1];
useEffect(function () {
var _config = comList && comList.map(function (ele, index) {
var children = [];
ele.children.forEach(function (item) {
if (!item.importFrom || item.type === COMLIST_TEMPLATE_TYPE) {
children.push(item);
} else {
var Com = getComRequire(item.type, comDict, customGetComRequire);
var conf = Com ? _.cloneDeep(Com.config) : null;
conf = _extends({}, conf, item.config);
var myConfig = item.config,
other = _objectWithoutPropertiesLoose(item, ["config"]);
conf && children.push(_extends({}, conf, other));
}
});
return _extends({}, 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 _extends({}, 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.createElement("div", {
className: "uicbb-com-list-3"
}, /*#__PURE__*/React.createElement("div", {
className: "uicbb-com-list-search"
}, /*#__PURE__*/React.createElement(_Search, {
hasClear: true,
style: {
width: "100%"
},
shape: "simple",
onChange: function onChange(value) {
setSearchKey(value);
}
})), /*#__PURE__*/React.createElement("div", {
className: "uicbb-com-list-body"
}, contentObj ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
className: "uicbb-com-list-contenter-header"
}, /*#__PURE__*/React.createElement(_Divider, {
direction: "ver"
}), /*#__PURE__*/React.createElement("span", null, contentObj.title)), /*#__PURE__*/React.createElement("div", {
className: "uicbb-com-list-contenter-wrap"
}, /*#__PURE__*/React.createElement(_Box, {
direction: "row",
wrap: true,
spacing: 28,
justify: "space-between"
}, contentObj.children.map(function (item, index) {
var _item$attributes;
return /*#__PURE__*/React.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.createElement(_Balloon, {
align: "r",
offset: [6, 0],
closable: false,
visible: index === 0 ? helpVisible : false,
trigger: /*#__PURE__*/React.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.createElement(_Box, {
className: "uicbb-com-list-item-icon",
align: "center",
justify: "center"
}, /*#__PURE__*/React.createElement(RiilIcon, {
type: item.icon,
size: "medium"
})), /*#__PURE__*/React.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.createElement("div", {
className: "uicbb-com-list-divider"
}, /*#__PURE__*/React.createElement(_Divider, null)), /*#__PURE__*/React.createElement(_Collapse, _extends({}, collapseProps, {
className: "com-list-collapse collapse-no-title-background",
expandedKeys: expandedKeys,
onExpand: function onExpand(v) {
setExpandedKeys(v);
}
}), otherList.map(function (ele) {
return /*#__PURE__*/React.createElement(_Collapse.Panel, {
className: ele.children.length > 0 ? "" : "empty-content",
key: ele.key,
title: ele.iconInfo ? /*#__PURE__*/React.createElement(IconTitle, {
title: ele.title,
iconInfo: ele.iconInfo
}) : ele.title
}, ele.message ? /*#__PURE__*/React.createElement(_Message, {
type: "notice",
closeable: true,
style: {
marginBottom: 16
}
}, ele.message) : null, /*#__PURE__*/React.createElement(_Box, {
direction: "row",
wrap: true,
spacing: [12, 28],
justify: "space-between"
}, ele.children.map(function (item, index) {
var _item$attributes2;
return /*#__PURE__*/React.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.createElement(_Box, {
className: "uicbb-com-list-item-icon",
align: "center",
justify: "center"
}, /*#__PURE__*/React.createElement("img", {
src: item.path + "/assets/icon/" + item.icon + ".svg"
})), /*#__PURE__*/React.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.array,
/**
* 当组件图标拖拽开始时回调
* @type {(config:Object,e:MouseEvent)=>{}} config为拖拽组件的配置数据，e为鼠标event
*/
onItemDragStart: PropTypes.func,
/**
* 透传折叠面板属性
*/
collapseProps: PropTypes.object,
/**
* 自定义组件类引用方法
*/
customGetComRequire: PropTypes.func
};
ComList.defaultProps = {};
export default ComList;