zp-bee/lib/org-tree/index.js

zp-bee，是一款基于 Dumi，由 React + TypeScript 开发的组件库 🎉。

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireWildcard(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _TreeNode = _interopRequireDefault(require("./TreeNode"));

var _hooks = require("../_hooks");

var __rest = void 0 && (void 0).__rest || function (s, e) {
  var t = {};

  for (var p in s) {
    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  }

  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};

//组件
var defaultNode = {
  id: 'id',
  label: 'label',
  expand: 'expand',
  children: 'children'
};

var OrgTree = function OrgTree(props) {
  var forceUpdate = (0, _hooks.useForceUpdate)();

  var _a = (0, _react.useMemo)(function () {
    return props;
  }, [props]),
      horizontal = _a.horizontal,
      expandAll = _a.expandAll,
      activeId = _a.activeId,
      node = _a.node,
      data = _a.data,
      _onClick = _a.onClick,
      _onConditionClick = _a.onConditionClick,
      _a$renderContent = _a.renderContent,
      renderContent = _a$renderContent === void 0 ? function (data) {
    return data.label;
  } : _a$renderContent,
      restProps = __rest(_a, ["horizontal", "expandAll", "activeId", "node", "data", "onClick", "onConditionClick", "renderContent"]);

  (0, _react.useEffect)(function () {
    if (expandAll) toggleExpand(data, true);
  }, []);

  var handleExpand = function handleExpand(_e, nodeData) {
    if ('expand' in nodeData) {
      nodeData.expand = !nodeData.expand;

      if (!nodeData.expand && nodeData.children) {
        collapse(nodeData.children);
      }

      forceUpdate();
    } else {
      nodeData.expand = true;
      forceUpdate();
    }
  };

  var collapse = function collapse(list) {
    list.forEach(function (child) {
      if (child.expand) {
        child.expand = false;
      }

      child.children && collapse(child.children);
    });
  };

  var toggleExpand = function toggleExpand(data, val) {
    if (Array.isArray(data)) {
      data.forEach(function (item) {
        item.expand = val;

        if (item.children) {
          toggleExpand(item.children, val);
        }
      });
    } else {
      data.expand = val;

      if (data.children) {
        toggleExpand(data.children, val);
      }
    }

    forceUpdate();
  };

  return /*#__PURE__*/_react.default.createElement("div", {
    className: "org-tree-container"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)('org-tree', {
      horizontal: horizontal
    })
  }, /*#__PURE__*/_react.default.createElement(_TreeNode.default, Object.assign({
    data: data,
    activeId: activeId,
    node: Object.assign(Object.assign({}, defaultNode), node),
    onExpand: function onExpand(e, nodeData) {
      return handleExpand(e, nodeData);
    },
    onClick: function onClick(e, nodeData) {
      return _onClick && _onClick(e, nodeData);
    },
    onConditionClick: function onConditionClick(e, nodeData) {
      return _onConditionClick && _onConditionClick(e, nodeData);
    },
    renderContent: renderContent
  }, restProps))));
};

var _default = OrgTree;
exports.default = _default;