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

TeamForm's Design System, aka: ORCS

/* eslint-disable */
import React from "react";
import styled 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 = styled("button").withConfig({
  displayName: "TreeNav__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 TreeNav = _ref2 => {
  let {
    data,
    ...props
  } = _ref2;
  return /*#__PURE__*/_jsx(Tree, {
    initialData: data,
    ...props,
    overscanCount: 5,
    rowHeight: 32,
    indent: 14,
    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;