linkmore-design
Version:
🌈 🚀lm组件库。🚀
134 lines (133 loc) • 5.06 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
var _excluded = ["useToggle", "toggleTree", "treeData", "treeType", "modeType", "showType", "onAdd", "onHeaderClick", "bottomNode"];
import { EllipsisOutlined, LeftOutlined } from '@ant-design/icons';
import { Button, Tree } from "../index";
import React, { useState, useEffect } from 'react';
import PopFilter from "../filter/Popover";
import IconFont from "../icon-font";
function TitleWithDelete(_ref) {
var title = _ref.title,
_ref$onRemove = _ref.onRemove,
onRemove = _ref$onRemove === void 0 ? function () {} : _ref$onRemove;
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
className: "title-box"
}, /*#__PURE__*/React.createElement("span", {
className: "title-name"
}, title), /*#__PURE__*/React.createElement(IconFont, {
onClick: onRemove,
className: "icon",
type: "lmweb-delete"
})));
}
function traverse(children) {
if (!Array.isArray(children)) {
return null;
}
return children.map(function (value, index) {
return _objectSpread(_objectSpread({}, value), {}, {
title: /*#__PURE__*/React.createElement(TitleWithDelete, {
title: value.title,
onRemove: function onRemove() {
value.onRemove && value.onRemove(value, index);
}
}),
children: value.children ? traverse(value.children) : null
});
});
}
function BottomNode(_ref2) {
var onAdd = _ref2.onAdd;
return /*#__PURE__*/React.createElement(Button, {
type: "dashed"
}, /*#__PURE__*/React.createElement(IconFont, {
onClick: onAdd,
className: "icon",
type: "lmweb-plus"
}), "\u65B0\u589E");
}
var LeftSide = function LeftSide(props) {
var useToggle = props.useToggle,
toggleTree = props.toggleTree,
treeData = props.treeData,
treeType = props.treeType,
_props$modeType = props.modeType,
modeType = _props$modeType === void 0 ? 'readonly' : _props$modeType,
_props$showType = props.showType,
showType = _props$showType === void 0 ? 'primary' : _props$showType,
_props$onAdd = props.onAdd,
onAdd = _props$onAdd === void 0 ? function () {} : _props$onAdd,
_props$onHeaderClick = props.onHeaderClick,
onHeaderClick = _props$onHeaderClick === void 0 ? function () {} : _props$onHeaderClick,
_props$bottomNode = props.bottomNode,
bottomNode = _props$bottomNode === void 0 ? null : _props$bottomNode,
rest = _objectWithoutProperties(props, _excluded);
// 带有删除的
if (modeType === 'edit' && treeData.category) {
treeData.category = traverse(treeData.category);
}
var _useState = useState({
title: '分类',
treeData: treeData.category
}),
_useState2 = _slicedToArray(_useState, 2),
useTree = _useState2[0],
setTree = _useState2[1];
useEffect(function () {
useTree.treeData = treeData.category;
setTree(_objectSpread({}, useTree));
}, [treeData]);
// 左侧树分类变化事件
var getTreeTypeChange = function getTreeTypeChange(value) {
var title = treeType.data.find(function (v) {
return v.value === value.value;
}).label;
var nValue = {
title: title,
treeData: treeData[value.value]
};
setTree(nValue);
};
var modeTypeCls = showType === 'ghost' ? 'lm_ghost' : '';
return /*#__PURE__*/React.createElement("div", {
className: useToggle ? "lm_grid_tree ".concat(modeTypeCls) : "lm_grid_tree grid_toggle ".concat(modeTypeCls)
}, /*#__PURE__*/React.createElement("div", {
className: "grid_tree_title",
onClick: function onClick(e) {
onHeaderClick && onHeaderClick(e);
}
}, /*#__PURE__*/React.createElement("div", {
className: "grid_tree_title_left"
}, /*#__PURE__*/React.createElement("span", null, useTree.title)), treeType && /*#__PURE__*/React.createElement(PopFilter, {
item: treeType,
config: {
arrow: false,
placement: 'bottomRight',
overlayStyle: {
width: 168,
paddingTop: 0
}
},
getChange: function getChange(e) {
getTreeTypeChange(e);
}
}, /*#__PURE__*/React.createElement("div", {
className: "grid_tree_title_right"
}, /*#__PURE__*/React.createElement(Button, {
type: "text"
}, /*#__PURE__*/React.createElement(EllipsisOutlined, null))))), /*#__PURE__*/React.createElement(Tree, _extends({
treeData: useTree.treeData
}, rest, {
rootClassName: "lm_tree_warp"
})), modeType !== 'readonly' && /*#__PURE__*/React.createElement("div", {
className: "bottom_node"
}, bottomNode || /*#__PURE__*/React.createElement(BottomNode, {
onAdd: onAdd
})), /*#__PURE__*/React.createElement("div", {
className: "toggle_btn",
onClick: toggleTree
}, /*#__PURE__*/React.createElement(LeftOutlined, null)));
};
export default LeftSide;