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

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

import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import React, { useEffect, useMemo } from 'react';
import classnames from 'classnames';
import TreeNode from './TreeNode';
import { useForceUpdate } from '../_hooks'; //组件

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

var OrgTree = function OrgTree(props) {
  var forceUpdate = useForceUpdate();

  var _useMemo = 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 = _objectWithoutProperties(_useMemo, ["horizontal", "expandAll", "activeId", "node", "data", "onClick", "onConditionClick", "renderContent"]);

  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.createElement("div", {
    className: "org-tree-container"
  }, /*#__PURE__*/React.createElement("div", {
    className: classnames('org-tree', {
      horizontal: horizontal
    })
  }, /*#__PURE__*/React.createElement(TreeNode, Object.assign({
    data: data,
    activeId: activeId,
    node: _objectSpread(_objectSpread({}, 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))));
};

export default OrgTree;