@bianic-ui/tree/dist/esm/renderProps.js

description

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

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; }

import React from "react";
import { List, Input, Box, Text, Flex, ListItem, ListIcon } from "@bianic-ui/core";
import { FaChevronRight, FaChevronDown } from "react-icons/fa";
export var TreeItem = (_ref) => {
  var {
    hasNodes = false,
    isOpen = false,
    level = 0,
    label = "unknown",
    toggleNode,
    openedIcon = /*#__PURE__*/React.createElement(ListIcon, {
      my: "auto",
      as: FaChevronDown,
      color: "#21BA45"
    }),
    closedIcon = /*#__PURE__*/React.createElement(ListIcon, {
      my: "auto",
      as: FaChevronRight,
      color: "#CBD0E0"
    }),
    iconSize = 2,
    defaultPadding = 8,
    levelSpace = 24,
    cursor = "pointer",
    parentBorder = "3px",
    parentHighlight = "linear-gradient(0deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), #21BA45;",
    style = {}
  } = _ref,
      rest = _objectWithoutPropertiesLoose(_ref, ["hasNodes", "isOpen", "level", "label", "active", "onClick", "toggleNode", "focused", "openedIcon", "closedIcon", "iconSize", "defaultPadding", "levelSpace", "cursor", "parentBorder", "parentHighlight", "style", "openNodes", "searchTerm"]);

  var ICON_SIZE = iconSize;
  var DEFAULT_PADDING = defaultPadding;
  var LEVEL_SPACE = levelSpace;
  var bgColorOpen = level === 0 && isOpen ? parentHighlight : "none";
  var radius = isOpen && level === 0 ? parentBorder : "0px";

  var handleClick = e => {
    hasNodes && toggleNode && toggleNode();
    e.stopPropagation();
  };

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ListItem, _extends({
    cursor: "pointer",
    style: {
      paddingLeft: DEFAULT_PADDING + level * LEVEL_SPACE + ICON_SIZE * (hasNodes ? 0 : 12)
    },
    display: "flex",
    onClick: handleClick,
    _focus: {
      shadow: "sm",
      outline: "none",
      zIndex: 999
    },
    _active: {
      backgroundColor: "#21BA4540",
      outline: "none"
    }
  }, rest), hasNodes && (isOpen ? openedIcon : closedIcon), /*#__PURE__*/React.createElement(Box, {
    as: Flex,
    h: "1.5em",
    my: "3px"
  }, /*#__PURE__*/React.createElement(Text, {
    background: bgColorOpen,
    rounded: radius,
    px: level === 0 ? ICON_SIZE : 0
  }, " ", label, " "))));
};
export var defaultChildren = (_ref2) => {
  var {
    search,
    items
  } = _ref2;

  var onSearch = e => {
    var {
      value
    } = e.target;
    search && search(value);
  };

  return /*#__PURE__*/React.createElement(React.Fragment, null, search && /*#__PURE__*/React.createElement(Input, {
    className: "rstm-search",
    "aria-label": "Type and search",
    type: "search",
    placeholder: "Type and search",
    onChange: onSearch
  }), /*#__PURE__*/React.createElement(List, null, items.map((_ref3) => {
    var {
      key
    } = _ref3,
        props = _objectWithoutPropertiesLoose(_ref3, ["key"]);

    return /*#__PURE__*/React.createElement(TreeItem, _extends({
      key: key
    }, props));
  })));
};
//# sourceMappingURL=renderProps.js.map