linkmore-design/lib/left-table/index.js

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _icons = require("@ant-design/icons");
var _index = require("../index");
var _react = _interopRequireWildcard(require("react"));
var _Popover = _interopRequireDefault(require("../filter/Popover"));
var _iconFont = _interopRequireDefault(require("../icon-font"));
function TitleWithDelete({
  title,
  onRemove = () => {}
}) {
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "title-box"
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: "title-name"
  }, title), /*#__PURE__*/_react.default.createElement(_iconFont.default, {
    onClick: onRemove,
    className: "icon",
    type: "lm-icon-delete"
  })));
}
function traverse(children) {
  if (!Array.isArray(children)) {
    return null;
  }
  return children.map((value, index) => {
    return {
      ...value,
      title: /*#__PURE__*/_react.default.createElement(TitleWithDelete, {
        title: value.title,
        onRemove: () => {
          value.onRemove && value.onRemove(value, index);
        }
      }),
      children: value.children ? traverse(value.children) : null
    };
  });
}
function BottomNode({
  onAdd
}) {
  return /*#__PURE__*/_react.default.createElement(_index.Button, {
    type: "dashed"
  }, /*#__PURE__*/_react.default.createElement(_iconFont.default, {
    onClick: onAdd,
    className: "icon",
    type: "lm-icon-plus"
  }), "\u65B0\u589E");
}
const LeftSide = props => {
  const {
    useToggle,
    toggleTree,
    treeData,
    treeType,
    modeType = 'readonly',
    showType = 'primary',
    onAdd = () => {},
    onHeaderClick = () => {},
    bottomNode = null,
    ...rest
  } = props;
  // 带有删除的
  if (modeType === 'edit' && treeData.category) {
    treeData.category = traverse(treeData.category);
  }
  const [useTree, setTree] = (0, _react.useState)({
    title: '分类',
    treeData: treeData.category
  });
  (0, _react.useEffect)(() => {
    useTree.treeData = treeData.category;
    setTree({
      ...useTree
    });
  }, [treeData]);

  // 左侧树分类变化事件
  const getTreeTypeChange = value => {
    const title = treeType.data.find(v => v.value === value.value).label;
    const nValue = {
      title,
      treeData: treeData[value.value]
    };
    setTree(nValue);
  };
  const modeTypeCls = showType === 'ghost' ? 'lm_ghost' : '';
  return /*#__PURE__*/_react.default.createElement("div", {
    className: useToggle ? `lm_grid_tree ${modeTypeCls}` : `lm_grid_tree grid_toggle ${modeTypeCls}`
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "grid_tree_title",
    onClick: e => {
      onHeaderClick && onHeaderClick(e);
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "grid_tree_title_left"
  }, /*#__PURE__*/_react.default.createElement("span", null, useTree.title)), treeType && /*#__PURE__*/_react.default.createElement(_Popover.default, {
    item: treeType,
    config: {
      arrow: false,
      placement: 'bottomRight',
      overlayStyle: {
        width: 168,
        paddingTop: 0
      }
    },
    getChange: e => {
      getTreeTypeChange(e);
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "grid_tree_title_right"
  }, /*#__PURE__*/_react.default.createElement(_index.Button, {
    type: "text"
  }, /*#__PURE__*/_react.default.createElement(_icons.EllipsisOutlined, null))))), /*#__PURE__*/_react.default.createElement(_index.Tree, (0, _extends2.default)({
    treeData: useTree.treeData
  }, rest, {
    rootClassName: "lm_tree_warp"
  })), modeType !== 'readonly' && /*#__PURE__*/_react.default.createElement("div", {
    className: "bottom_node"
  }, bottomNode || /*#__PURE__*/_react.default.createElement(BottomNode, {
    onAdd: onAdd
  })), /*#__PURE__*/_react.default.createElement("div", {
    className: "toggle_btn",
    onClick: toggleTree
  }, /*#__PURE__*/_react.default.createElement(_icons.LeftOutlined, null)));
};
var _default = LeftSide;
exports.default = _default;