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

description

"use strict";

exports.__esModule = true;
exports.defaultChildren = exports.TreeItem = void 0;

var _react = _interopRequireDefault(require("react"));

var _core = require("@bianic-ui/core");

var _fa = require("react-icons/fa");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

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

var TreeItem = function TreeItem(_ref) {
  var _ref$hasNodes = _ref.hasNodes,
      hasNodes = _ref$hasNodes === void 0 ? false : _ref$hasNodes,
      _ref$isOpen = _ref.isOpen,
      isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
      _ref$level = _ref.level,
      level = _ref$level === void 0 ? 0 : _ref$level,
      _ref$label = _ref.label,
      label = _ref$label === void 0 ? "unknown" : _ref$label,
      active = _ref.active,
      onClick = _ref.onClick,
      toggleNode = _ref.toggleNode,
      focused = _ref.focused,
      _ref$openedIcon = _ref.openedIcon,
      openedIcon = _ref$openedIcon === void 0 ? /*#__PURE__*/_react["default"].createElement(_core.ListIcon, {
    my: "auto",
    as: _fa.FaChevronDown,
    color: "#21BA45"
  }) : _ref$openedIcon,
      _ref$closedIcon = _ref.closedIcon,
      closedIcon = _ref$closedIcon === void 0 ? /*#__PURE__*/_react["default"].createElement(_core.ListIcon, {
    my: "auto",
    as: _fa.FaChevronRight,
    color: "#CBD0E0"
  }) : _ref$closedIcon,
      _ref$iconSize = _ref.iconSize,
      iconSize = _ref$iconSize === void 0 ? 2 : _ref$iconSize,
      _ref$defaultPadding = _ref.defaultPadding,
      defaultPadding = _ref$defaultPadding === void 0 ? 8 : _ref$defaultPadding,
      _ref$levelSpace = _ref.levelSpace,
      levelSpace = _ref$levelSpace === void 0 ? 24 : _ref$levelSpace,
      _ref$cursor = _ref.cursor,
      cursor = _ref$cursor === void 0 ? "pointer" : _ref$cursor,
      _ref$parentBorder = _ref.parentBorder,
      parentBorder = _ref$parentBorder === void 0 ? "3px" : _ref$parentBorder,
      _ref$parentHighlight = _ref.parentHighlight,
      parentHighlight = _ref$parentHighlight === void 0 ? "linear-gradient(0deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), #21BA45;" : _ref$parentHighlight,
      _ref$style = _ref.style,
      style = _ref$style === void 0 ? {} : _ref$style,
      openNodes = _ref.openNodes,
      searchTerm = _ref.searchTerm,
      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 = function handleClick(e) {
    hasNodes && toggleNode && toggleNode();
    e.stopPropagation();
  };

  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_core.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["default"].createElement(_core.Box, {
    as: _core.Flex,
    h: "1.5em",
    my: "3px"
  }, /*#__PURE__*/_react["default"].createElement(_core.Text, {
    background: bgColorOpen,
    rounded: radius,
    px: level === 0 ? ICON_SIZE : 0
  }, " ", label, " "))));
};

exports.TreeItem = TreeItem;

var defaultChildren = function defaultChildren(_ref2) {
  var search = _ref2.search,
      items = _ref2.items;

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

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

    return /*#__PURE__*/_react["default"].createElement(TreeItem, _extends({
      key: key
    }, props));
  })));
};

exports.defaultChildren = defaultChildren;
//# sourceMappingURL=renderProps.js.map