@twp0217/react-org-chart/dist/index.esm.js

```typescript import React from 'react'; import OrgChart, { NodeDataType } from '@twp0217/react-org-chart';

import classNames from 'classnames';
import React from 'react';

function ownKeys(object, enumerableOnly) {
  var keys = Object.keys(object);

  if (Object.getOwnPropertySymbols) {
    var symbols = Object.getOwnPropertySymbols(object);

    if (enumerableOnly) {
      symbols = symbols.filter(function (sym) {
        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
      });
    }

    keys.push.apply(keys, symbols);
  }

  return keys;
}

function _objectSpread2(target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i] != null ? arguments[i] : {};

    if (i % 2) {
      ownKeys(Object(source), true).forEach(function (key) {
        _defineProperty(target, key, source[key]);
      });
    } else if (Object.getOwnPropertyDescriptors) {
      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
    } else {
      ownKeys(Object(source)).forEach(function (key) {
        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
      });
    }
  }

  return target;
}

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

function _objectWithoutPropertiesLoose(source, excluded) {
  if (source == null) return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;

  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0) continue;
    target[key] = source[key];
  }

  return target;
}

function _objectWithoutProperties(source, excluded) {
  if (source == null) return {};

  var target = _objectWithoutPropertiesLoose(source, excluded);

  var key, i;

  if (Object.getOwnPropertySymbols) {
    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);

    for (i = 0; i < sourceSymbolKeys.length; i++) {
      key = sourceSymbolKeys[i];
      if (excluded.indexOf(key) >= 0) continue;
      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
      target[key] = source[key];
    }
  }

  return target;
}

function _slicedToArray(arr, i) {
  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}

function _arrayWithHoles(arr) {
  if (Array.isArray(arr)) return arr;
}

function _iterableToArrayLimit(arr, i) {
  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];

  if (_i == null) return;
  var _arr = [];
  var _n = true;
  var _d = false;

  var _s, _e;

  try {
    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
      _arr.push(_s.value);

      if (i && _arr.length === i) break;
    }
  } catch (err) {
    _d = true;
    _e = err;
  } finally {
    try {
      if (!_n && _i["return"] != null) _i["return"]();
    } finally {
      if (_d) throw _e;
    }
  }

  return _arr;
}

function _unsupportedIterableToArray(o, minLen) {
  if (!o) return;
  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
  var n = Object.prototype.toString.call(o).slice(8, -1);
  if (n === "Object" && o.constructor) n = o.constructor.name;
  if (n === "Map" || n === "Set") return Array.from(o);
  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}

function _arrayLikeToArray(arr, len) {
  if (len == null || len > arr.length) len = arr.length;

  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];

  return arr2;
}

function _nonIterableRest() {
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}

var DefaultOrgChart = function DefaultOrgChart(props) {
  var _data$children;

  var data = props.data,
      _props$expandAll = props.expandAll,
      expandAll = _props$expandAll === void 0 ? true : _props$expandAll,
      _props$expandable = props.expandable,
      expandable = _props$expandable === void 0 ? false : _props$expandable,
      customRenderNode = props.renderNode,
      onExpand = props.onExpand,
      _onClick = props.onClick;

  var _React$useState = React.useState(false),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      expanded = _React$useState2[0],
      setExpanded = _React$useState2[1];

  var childrenLength = ((_data$children = data.children) === null || _data$children === void 0 ? void 0 : _data$children.length) || 0;
  var colSpan = childrenLength * 2;
  /**
   * 渲染节点
   * @param data
   * @returns
   */

  var renderNode = function renderNode(data) {
    var contentNode = /*#__PURE__*/React.createElement("div", {
      className: "node-content",
      title: data.label
    }, data.label);
    return /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
      colSpan: colSpan
    }, /*#__PURE__*/React.createElement("div", {
      className: classNames('node', data.className),
      style: data.style,
      onClick: function onClick() {
        return _onClick && _onClick(data);
      }
    }, !!customRenderNode ? customRenderNode(data, contentNode) : contentNode)));
  };
  /**
   * 处理展开
   */


  var handleExpandChange = function handleExpandChange() {
    var newExpanded = !expanded;
    setExpanded(newExpanded);
    onExpand && onExpand(newExpanded, data);
  };
  /**
   * 渲染垂直线
   * @returns
   */


  var renderVerticalLine = function renderVerticalLine() {
    return /*#__PURE__*/React.createElement("td", {
      colSpan: colSpan
    }, /*#__PURE__*/React.createElement("div", {
      className: "vertical-line"
    }), expandable ? /*#__PURE__*/React.createElement("div", {
      className: classNames({
        'expand-icon': expandable,
        'expand-icon-expanded': expandable && expanded,
        'expand-icon-collapsed': expandable && !expanded
      }),
      onClick: function onClick() {
        return handleExpandChange();
      }
    }) : null);
  };
  /**
   * 渲染连接线
   * @returns
   */


  var renderConnectLines = function renderConnectLines() {
    var lines = [];

    for (var index = 0; index < colSpan; index++) {
      lines.push( /*#__PURE__*/React.createElement("td", {
        key: index,
        className: classNames('line', {
          left: index % 2 === 0,
          right: index % 2 !== 0,
          top: index !== colSpan - 1 && index !== 0
        })
      }, "\xA0"));
    }

    return lines;
  };
  /**
   * 渲染子节点
   * @param datas
   * @returns
   */


  var renderChildren = function renderChildren() {
    var datas = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];

    if (datas.length > 0) {
      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("tr", {
        className: 'lines'
      }, renderVerticalLine()), /*#__PURE__*/React.createElement("tr", {
        className: classNames('lines', {
          hidden: !expanded
        })
      }, renderConnectLines()), /*#__PURE__*/React.createElement("tr", {
        className: classNames('nodes', {
          hidden: !expanded
        })
      }, datas.map(function (data) {
        return /*#__PURE__*/React.createElement("td", {
          key: data.key,
          colSpan: 2
        }, /*#__PURE__*/React.createElement(DefaultOrgChart, _objectSpread2(_objectSpread2({}, props), {}, {
          data: data
        })));
      })));
    }

    return;
  };

  React.useEffect(function () {
    setExpanded(expandAll);
  }, [expandAll]);
  return /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, renderNode(data), renderChildren(data.children)));
};

function styleInject(css, ref) {
  if ( ref === void 0 ) ref = {};
  var insertAt = ref.insertAt;

  if (!css || typeof document === 'undefined') { return; }

  var head = document.head || document.getElementsByTagName('head')[0];
  var style = document.createElement('style');
  style.type = 'text/css';

  if (insertAt === 'top') {
    if (head.firstChild) {
      head.insertBefore(style, head.firstChild);
    } else {
      head.appendChild(style);
    }
  } else {
    head.appendChild(style);
  }

  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
}

var css_248z = ".OrgChart-module_orgChartContainer__x-d1w {\n  display: inline-block;\n}\n.OrgChart-module_orgChartContainer__x-d1w table {\n  border-collapse: separate;\n  border-spacing: 0;\n  line-height: 1.5715;\n}\n.OrgChart-module_orgChartContainer__x-d1w table tr.hidden {\n  display: none !important;\n}\n.OrgChart-module_orgChartContainer__x-d1w table tr.lines {\n  position: relative;\n}\n.OrgChart-module_orgChartContainer__x-d1w table tr.lines .expand-icon {\n  display: inline-block;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  background-color: #1890ff;\n  position: absolute;\n  left: 50%;\n  bottom: 0;\n  margin-left: -8px;\n  margin-bottom: -8px;\n  z-index: 99;\n  cursor: pointer;\n}\n.OrgChart-module_orgChartContainer__x-d1w table tr.lines .expand-icon-expanded::before,\n.OrgChart-module_orgChartContainer__x-d1w table tr.lines .expand-icon-collapsed::before {\n  content: '';\n  width: 8px;\n  height: 2px;\n  background-color: #fff;\n  position: absolute;\n  top: 7px;\n  left: 4px;\n}\n.OrgChart-module_orgChartContainer__x-d1w table tr.lines .expand-icon-collapsed::after {\n  content: '';\n  width: 2px;\n  height: 8px;\n  background-color: #fff;\n  position: absolute;\n  top: 4px;\n  left: 7px;\n}\n.OrgChart-module_orgChartContainer__x-d1w table tr.lines .expand-icon:hover {\n  background-color: #0084fe;\n}\n.OrgChart-module_orgChartContainer__x-d1w table tr.lines td {\n  height: 20px;\n}\n.OrgChart-module_orgChartContainer__x-d1w table tr.lines td .vertical-line {\n  width: 1px;\n  height: 100%;\n  background-color: #1890ff;\n  display: inline-block;\n}\n.OrgChart-module_orgChartContainer__x-d1w table tr.lines td.left {\n  border-right: 1px solid #1890ff;\n}\n.OrgChart-module_orgChartContainer__x-d1w table tr.lines td.right {\n  border-left: 1px solid transparent;\n}\n.OrgChart-module_orgChartContainer__x-d1w table tr.lines td.top {\n  border-top: 1px solid #1890ff;\n}\n.OrgChart-module_orgChartContainer__x-d1w table td {\n  text-align: center;\n  padding: 0;\n  vertical-align: top;\n}\n.OrgChart-module_orgChartContainer__x-d1w table td .node {\n  display: inline-block;\n  border: 1px solid #1890ff;\n  padding: 0.5rem;\n  margin: 0 5px;\n  cursor: pointer;\n}\n";
var styles = {"orgChartContainer":"OrgChart-module_orgChartContainer__x-d1w"};
styleInject(css_248z);

var _excluded = ["data", "className", "style"];

var OrgChart = function OrgChart(props) {
  var data = props.data,
      className = props.className,
      style = props.style,
      otherProps = _objectWithoutProperties(props, _excluded);

  return !!data ? /*#__PURE__*/React.createElement("div", {
    className: classNames(styles.orgChartContainer, className),
    style: style
  }, /*#__PURE__*/React.createElement(DefaultOrgChart, _objectSpread2(_objectSpread2({}, otherProps), {}, {
    data: data
  }))) : null;
};

export default OrgChart;