react-hierarchy-chart/dist/esm/index.js

`ReactHierarchyChart` is an React Component for Vertical or Horizontal Hierarchy/Tree View. It can be used to show parent child view, Organization structure, Tree view. with your flaxible dynamic template design with controls.

import React from 'react';

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$1 = ".react-hierarchy-node-container {\n  display: flex;\n  align-items: center;\n  flex: 1;\n}\n.react-hierarchy-node-container-vertical {\n  flex-direction: column;\n}\n.react-hierarchy-node-container .react-hierarchy-node {\n  display: flex;\n  align-items: center;\n}\n.react-hierarchy-node-container .react-hierarchy-node .node-line {\n  background-color: darkgrey;\n}\n.react-hierarchy-node-container .react-hierarchy-node .node-line-horizontal {\n  width: 1em;\n  height: 0.1em;\n}\n.react-hierarchy-node-container .react-hierarchy-node .node-line-vertical {\n  height: 1em;\n  width: 0.1em;\n}\n.react-hierarchy-node-container .react-hierarchy-node .node-box {\n  display: flex;\n  align-items: center;\n  color: black;\n  border-radius: 0.2em;\n  box-shadow: 0.05em 0.05em 0.2em 0.05em rgba(0, 0, 0, 0.168627451);\n}\n.react-hierarchy-node-container .react-hierarchy-node-horizontal {\n  padding: 1em 0;\n}\n.react-hierarchy-node-container .react-hierarchy-node-vertical {\n  flex-direction: column;\n  padding: 0 1em;\n}\n.react-hierarchy-node-container .react-hierarchy-children {\n  display: flex;\n  flex: 1;\n}\n.react-hierarchy-node-container .react-hierarchy-children-horizontal {\n  flex-direction: column;\n}\n.react-hierarchy-node-container .react-hierarchy-children .children-container {\n  display: flex;\n}\n.react-hierarchy-node-container .react-hierarchy-children .children-container:first-child > .lines-container .lines:first-child {\n  background-color: transparent;\n}\n.react-hierarchy-node-container .react-hierarchy-children .children-container:last-child > .lines-container .lines:last-child {\n  background-color: transparent;\n}\n.react-hierarchy-node-container .react-hierarchy-children .children-container-vertical {\n  flex-direction: column;\n}\n.react-hierarchy-node-container .react-hierarchy-children .children-container .lines {\n  flex: 1;\n  background-color: darkgrey;\n}\n.react-hierarchy-node-container .react-hierarchy-children .children-container .lines-container {\n  display: flex;\n}\n.react-hierarchy-node-container .react-hierarchy-children .children-container .lines-container-vertical .lines {\n  height: 0.1em;\n}\n.react-hierarchy-node-container .react-hierarchy-children .children-container .lines-container-horizontal {\n  flex-direction: column;\n}\n.react-hierarchy-node-container .react-hierarchy-children .children-container .lines-container-horizontal .lines {\n  width: 0.1em;\n  background-color: darkgrey;\n}\n.react-hierarchy-node-container .react-hierarchy-children .children-container .m-line {\n  width: 0.1em;\n  height: 0.1em;\n  background-color: darkgrey;\n}";
styleInject(css_248z$1);

var HierarchyNode = function (_a) {
    var _b, _c;
    var node = _a.node, direction = _a.direction, randerNode = _a.randerNode, hasParent = _a.hasParent;
    return React.createElement("div", { className: "react-hierarchy-node-container react-hierarchy-node-container-".concat(direction) },
        React.createElement("div", { className: "react-hierarchy-node react-hierarchy-node-".concat(direction) },
            hasParent && React.createElement("div", { className: "node-line node-line-".concat(direction) }),
            React.createElement("div", { className: "node-box ngx-hierarchy-border ".concat(node.cssClass) }, randerNode(node)),
            ((_b = node === null || node === void 0 ? void 0 : node.childs) === null || _b === void 0 ? void 0 : _b.length) ? React.createElement("div", { className: "node-line node-line-".concat(direction) }) : React.createElement(React.Fragment, null)),
        ((_c = node.childs) === null || _c === void 0 ? void 0 : _c.length) &&
            React.createElement("div", { className: "react-hierarchy-children react-hierarchy-children-".concat(direction) }, node.childs.map(function (child, index) {
                var _a;
                (((_a = node.childs) === null || _a === void 0 ? void 0 : _a.length) || 0) - 1 === index;
                return (React.createElement("div", { className: "children-container children-container-".concat(direction), key: "HierarchyNodeChild".concat(child.key || Date.now) },
                    React.createElement("div", { className: "lines-container lines-container-".concat(direction) },
                        React.createElement("div", { className: "lines" }),
                        React.createElement("div", { className: "m-line" }),
                        React.createElement("div", { className: "lines" })),
                    React.createElement(HierarchyNode, { node: child, direction: direction, randerNode: randerNode, hasParent: true })));
            })));
};

var css_248z = ".react-hierarchy-container {\n  display: flex;\n}\n.react-hierarchy-container .react-hierarchy-root-vertical {\n  display: flex;\n  margin-bottom: 2%;\n  width: 100%;\n}\n.react-hierarchy-container .react-hierarchy-root-horizontal {\n  display: flex;\n  width: 100%;\n}\n.react-hierarchy-container .ngx-hierarchy-border {\n  border: 1px solid darkgrey;\n}";
styleInject(css_248z);

var ReactHierarchy = function (_a) {
    var nodes = _a.nodes, direction = _a.direction, randerNode = _a.randerNode;
    return (React.createElement("div", { className: "react-hierarchy-container", key: Date.now() }, nodes.map(function (node, index) { return React.createElement("div", { className: "react-hierarchy-root-".concat(direction), key: "HierarchyNodeP".concat(node.key || Date.now) },
        React.createElement(HierarchyNode, { node: node, direction: direction, randerNode: randerNode })); })));
};

export { HierarchyNode, ReactHierarchy as ReactHiererchyChart };
//# sourceMappingURL=index.js.map