orcs-design-system/es/components/TreeNav/index.js

TeamForm's Design System, aka: ORCS

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
const _excluded = ["data"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
/* eslint-disable */
import React from "react";
import styled, { useTheme } from "styled-components";
import { css } from "@styled-system/css";
import PropTypes from "prop-types";
import { themeGet } from "@styled-system/theme-get";
import Icon from "../Icon";
import Badge from "../Badge";
import Checkbox from "../Checkbox";
import { Small } from "../Typography";
import { Tree } from "react-arborist";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const TreeItemWrapper = /*#__PURE__*/styled("button").withConfig({
  displayName: "TreeItemWrapper",
  componentId: "sc-13iwmeo-0"
})(props => css({
  appearance: "none",
  border: "none",
  fontFamily: "inherit",
  background: "none",
  padding: "5px",
  width: "100%",
  display: "flex",
  justifyContent: "space-between",
  alignItems: "center",
  marginRight: "5px",
  cursor: "pointer",
  borderRadius: themeGet("radii.2")(props),
  transition: themeGet("transition.transitionDefault")(props),
  "&:hover, &:focus": {
    outline: "none",
    backgroundColor: themeGet("colors.primary10")(props)
  }
}));
const Node = _ref => {
  let {
    node,
    style
  } = _ref;
  /* This node instance can do many things. See the API reference. */
  return /*#__PURE__*/_jsxs(TreeItemWrapper, {
    style: style,
    className: "treeitem-wrapper",
    onClick: () => node.toggle(),
    children: [node.isLeaf ? /*#__PURE__*/_jsx(Icon, {
      icon: ["fas", "chevron-down"],
      title: "Select item",
      mr: "xs",
      ml: "s",
      size: "sm",
      rotation: 270,
      color: "transparent"
    }) : node.isOpen ? /*#__PURE__*/_jsx(Icon, {
      icon: ["fas", "chevron-down"],
      title: "Collapse item",
      transform: "up-1",
      mr: "xs",
      ml: "s",
      size: "sm"
    }) : /*#__PURE__*/_jsx(Icon, {
      icon: ["fas", "chevron-down"],
      title: "Expand item",
      transform: "up-1",
      mr: "xs",
      ml: "s",
      size: "sm",
      rotation: 270
    }), node.data.checkbox && /*#__PURE__*/_jsx(Checkbox, {
      onChange: node.data.checkboxOnChange
    }), /*#__PURE__*/_jsx(Small, {
      children: node.data.name
    }), node.data.badgeText && /*#__PURE__*/_jsx(Badge, {
      variant: node.data.badgeColour,
      ml: "auto",
      children: node.data.badgeText
    })]
  });
};
Node.propTypes = {
  isLeaf: PropTypes.bool,
  data: PropTypes.array
};
const parsePx = v => {
  if (v == null) return null;
  const n = parseFloat(String(v));
  return Number.isNaN(n) ? null : n;
};
const TreeNav = _ref2 => {
  var _theme$appScale, _theme$appScale2;
  let {
      data
    } = _ref2,
    props = _objectWithoutProperties(_ref2, _excluded);
  const theme = /*#__PURE__*/useTheme();
  const rowHeight = parsePx(theme === null || theme === void 0 || (_theme$appScale = theme.appScale) === null || _theme$appScale === void 0 ? void 0 : _theme$appScale.treeRowHeight);
  const indent = parsePx(theme === null || theme === void 0 || (_theme$appScale2 = theme.appScale) === null || _theme$appScale2 === void 0 ? void 0 : _theme$appScale2.treeIndent);
  return /*#__PURE__*/_jsx(Tree, _objectSpread(_objectSpread({
    initialData: data
  }, props), {}, {
    overscanCount: 5,
    rowHeight: rowHeight,
    indent: indent,
    children: Node
  }));
};
TreeNav.propTypes = {
  data: PropTypes.array
};

/** @component */
TreeNav.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "TreeNav",
  "props": {
    "data": {
      "description": "",
      "type": {
        "name": "array"
      },
      "required": false
    }
  }
};
export default TreeNav;