z-react-ui/lib/org-tree/index.js

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

"use strict";

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

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

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

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

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

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

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

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

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

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

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

  var _useMemo = (0, _react.useMemo)(function () {
    return props;
  }, [props]),
      horizontal = _useMemo.horizontal,
      expandAll = _useMemo.expandAll,
      activeId = _useMemo.activeId,
      node = _useMemo.node,
      data = _useMemo.data,
      _onClick = _useMemo.onClick,
      _onConditionClick = _useMemo.onConditionClick,
      _useMemo$renderConten = _useMemo.renderContent,
      renderContent = _useMemo$renderConten === void 0 ? function (data) {
    return data.label;
  } : _useMemo$renderConten,
      restProps = (0, _objectWithoutProperties2.default)(_useMemo, ["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: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, 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;