@kenshooui/material-tree/dist/material-tree.cjs.prod.js

Material Tree is an enrichment to React Tree component.

"use strict";

function _interopDefault(ex) {
  return ex && "object" == typeof ex && "default" in ex ? ex.default : ex;
}

Object.defineProperty(exports, "__esModule", {
  value: !0
});

var React = _interopDefault(require("react")), Tree = _interopDefault(require("@kenshooui/react-tree")), ListItemText = _interopDefault(require("@material-ui/core/ListItemText")), styles = require("@material-ui/core/styles"), icons = require("@material-ui/icons"), ListItem = _interopDefault(require("@material-ui/core/ListItem")), Typography = _interopDefault(require("@material-ui/core/Typography")), InputAdornment = _interopDefault(require("@material-ui/core/InputAdornment")), InputBase = _interopDefault(require("@material-ui/core/InputBase")), Divider = _interopDefault(require("@material-ui/core/Divider")), CardActions = _interopDefault(require("@material-ui/core/CardActions")), IconButton = _interopDefault(require("@material-ui/core/IconButton")), Card = _interopDefault(require("@material-ui/core/Card")), List = _interopDefault(require("@material-ui/core/List")), makeStyles = _interopDefault(require("@material-ui/core/styles/makeStyles")), useStyles = styles.makeStyles({
  selected: {
    fontWeight: function(props) {
      return props.isSelected ? 600 : 400;
    }
  }
}), BasicItem = function(_ref) {
  var _ref$label = _ref.label, label = void 0 === _ref$label ? "" : _ref$label, _ref$isSelected = _ref.isSelected, classes = useStyles({
    isSelected: void 0 !== _ref$isSelected && _ref$isSelected
  });
  return React.createElement(ListItemText, {
    primary: React.createElement("span", {
      className: classes.selected
    }, label)
  });
}, useStyles$1 = styles.makeStyles({
  boldText: {
    fontWeight: 600,
    color: "#268DEC"
  },
  selected: {
    fontWeight: function(props) {
      return props.isSelected ? 600 : 400;
    }
  }
}), SearchedItem = function(_ref) {
  var _ref$item = _ref.item, item = void 0 === _ref$item ? [ "" ] : _ref$item, _ref$searchIndex = _ref.searchIndex, searchIndex = void 0 === _ref$searchIndex ? 0 : _ref$searchIndex, _ref$searchTerm = _ref.searchTerm, searchTerm = void 0 === _ref$searchTerm ? "" : _ref$searchTerm, _ref$isSelected = _ref.isSelected, classes = useStyles$1({
    isSelected: void 0 !== _ref$isSelected && _ref$isSelected
  }), leaf = item[item.length - 1], parents = item.slice(0, item.length - 1).join(" / ");
  return React.createElement(ListItemText, {
    primary: React.createElement(React.Fragment, null, React.createElement(Typography, {
      component: "span",
      className: classes.selected
    }, leaf.substring(0, searchIndex)), React.createElement(Typography, {
      component: "span",
      className: classes.boldText
    }, leaf.substring(searchIndex, searchIndex + searchTerm.length)), React.createElement(Typography, {
      component: "span",
      className: classes.selected
    }, leaf.substring(searchIndex + searchTerm.length))),
    secondary: parents
  });
}, noop = function() {}, MaterialItemRenderer = function(props) {
  var _selectedItem$item, _props$searchTerm = props.searchTerm, searchTerm = void 0 === _props$searchTerm ? "" : _props$searchTerm, _props$item = props.item, item = (_props$item = void 0 === _props$item ? {
    item: [ "" ],
    hasChild: !1,
    currentDepth: 0
  } : _props$item).item, hasChild = _props$item.hasChild, currentDepth = _props$item.currentDepth, _props$onClick = props.onClick, _onClick = void 0 === _props$onClick ? noop : _props$onClick, selectedItem = props.selectedItem, _props$forwardIconRen = props.forwardIconRenderer, ForwardIcon = void 0 === _props$forwardIconRen ? icons.ChevronRight : _props$forwardIconRen, isItemSelected = item.toString() === (null == selectedItem ? void 0 : null === (_selectedItem$item = selectedItem.item) || void 0 === _selectedItem$item ? void 0 : _selectedItem$item.toString()), searchIndex = item[item.length - 1].toLowerCase().indexOf(searchTerm.trim().toLowerCase());
  return React.createElement(ListItem, {
    button: !0,
    onClick: function() {
      return _onClick(item[currentDepth], item, hasChild);
    }
  }, "" !== searchTerm && React.createElement(SearchedItem, {
    item: item,
    searchIndex: searchIndex,
    searchTerm: searchTerm.trim(),
    isSelected: isItemSelected && item[item.length - 1] === selectedItem.leaf
  }), "" === searchTerm && React.createElement(BasicItem, {
    label: item[currentDepth],
    isSelected: isItemSelected && item[currentDepth] === selectedItem.leaf
  }), hasChild && React.createElement(ForwardIcon, null));
}, useStyles$2 = styles.makeStyles((function() {
  return {
    root: {
      padding: "8px 16px"
    }
  };
})), noop$1 = function() {}, MaterialInputRenderer = function(_ref) {
  var inputRef = _ref.inputRef, _ref$searchTerm = _ref.searchTerm, searchTerm = void 0 === _ref$searchTerm ? "" : _ref$searchTerm, _ref$onInputChange = _ref.onInputChange, onInputChange = void 0 === _ref$onInputChange ? noop$1 : _ref$onInputChange, _ref$inputIconRendere = _ref.inputIconRenderer, InputIcon = void 0 === _ref$inputIconRendere ? icons.Search : _ref$inputIconRendere, _ref$clearIconRendere = _ref.clearIconRenderer, ClearIcon = void 0 === _ref$clearIconRendere ? icons.Clear : _ref$clearIconRendere, classes = useStyles$2();
  return React.createElement("div", {
    ref: inputRef
  }, React.createElement(CardActions, {
    className: classes.root
  }, React.createElement(InputBase, {
    value: searchTerm,
    onChange: onInputChange,
    startAdornment: React.createElement(InputAdornment, {
      position: "start"
    }, React.createElement(InputIcon, null)),
    endAdornment: "" !== searchTerm && React.createElement(IconButton, {
      size: "small"
    }, React.createElement(ClearIcon, {
      onClick: onInputChange
    }))
  })), React.createElement(Divider, null));
}, useStyles$3 = styles.makeStyles({
  root: {
    width: function(props) {
      return props.width;
    },
    height: function(props) {
      return props.height;
    }
  }
}), MaterialUIContainerRenderer = function(props) {
  var containerRef = props.containerRef, children = props.children, width = props.width, height = props.height, classes = useStyles$3({
    width: width,
    height: height
  });
  return React.createElement(Card, {
    ref: containerRef,
    raised: !0,
    className: classes.root
  }, children);
}, useStyles$4 = styles.makeStyles((function() {
  return {
    root: {
      padding: "8px 16px"
    },
    button: {
      marginLeft: -8
    }
  };
})), noop$2 = function() {}, MaterialHeaderRenderer = function(_ref) {
  var headerRef = _ref.headerRef, _ref$parents = _ref.parents, parents = void 0 === _ref$parents ? [] : _ref$parents, _ref$onClick = _ref.onClick, onClick = void 0 === _ref$onClick ? noop$2 : _ref$onClick, _ref$title = _ref.title, title = void 0 === _ref$title ? "" : _ref$title, _ref$backIconRenderer = _ref.backIconRenderer, BackIcon = void 0 === _ref$backIconRenderer ? icons.ChevronLeft : _ref$backIconRenderer, classes = useStyles$4();
  return React.createElement("div", {
    ref: headerRef
  }, React.createElement(CardActions, {
    className: classes.root
  }, parents.length > 0 && React.createElement(IconButton, {
    className: classes.button,
    size: "small"
  }, React.createElement(BackIcon, {
    onClick: onClick
  })), React.createElement(Typography, {
    variant: "subtitle1"
  }, parents.length > 0 ? parents[parents.length - 1] : title)), React.createElement(Divider, null));
}, ITEMS_PADDING = 16, useStyles$5 = makeStyles({
  root: {
    overflowY: "auto",
    overflowX: "hidden",
    maxHeight: function(props) {
      return props.height - ITEMS_PADDING;
    }
  }
}), MaterialItemsRenderer = function(_ref) {
  var children = _ref.children, height = _ref.height, classes = useStyles$5({
    height: height
  });
  return React.createElement(List, {
    className: classes.root,
    component: "nav"
  }, children);
}, ITEMS_PADDING$1 = 16, useStyles$6 = makeStyles({
  root: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    height: function(props) {
      return props.height - ITEMS_PADDING$1;
    }
  }
}), MaterialNoResultsRenderer = function(_ref) {
  var text = _ref.text, height = _ref.height, _ref$noResultsIconRen = _ref.noResultsIconRenderer, NoResultsIcon = void 0 === _ref$noResultsIconRen ? icons.Warning : _ref$noResultsIconRen, classes = useStyles$6({
    height: height
  });
  return React.createElement("div", {
    className: classes.root
  }, React.createElement(NoResultsIcon, {
    fontSize: "large",
    color: "disabled"
  }), React.createElement(Typography, {
    variant: "subtitle1"
  }, text));
}, noop$3 = function() {}, MaterialTree = function(_ref) {
  var _ref$structure = _ref.structure, structure = void 0 === _ref$structure ? [] : _ref$structure, _ref$title = _ref.title, title = void 0 === _ref$title ? "" : _ref$title, _ref$onSelect = _ref.onSelect, onSelect = void 0 === _ref$onSelect ? noop$3 : _ref$onSelect, width = _ref.width, height = _ref.height, _ref$treeContainerRen = _ref.treeContainerRenderer, treeContainerRenderer = void 0 === _ref$treeContainerRen ? MaterialUIContainerRenderer : _ref$treeContainerRen, _ref$headerRenderer = _ref.headerRenderer, headerRenderer = void 0 === _ref$headerRenderer ? MaterialHeaderRenderer : _ref$headerRenderer, backIconRenderer = _ref.backIconRenderer, _ref$inputRenderer = _ref.inputRenderer, inputRenderer = void 0 === _ref$inputRenderer ? MaterialInputRenderer : _ref$inputRenderer, inputIconRenderer = _ref.inputIconRenderer, clearIconRenderer = _ref.clearIconRenderer, _ref$itemRenderer = _ref.itemRenderer, itemRenderer = void 0 === _ref$itemRenderer ? MaterialItemRenderer : _ref$itemRenderer, forwardIconRenderer = _ref.forwardIconRenderer, _ref$itemsRenderer = _ref.itemsRenderer, itemsRenderer = void 0 === _ref$itemsRenderer ? MaterialItemsRenderer : _ref$itemsRenderer, _ref$noResultsRendere = _ref.noResultsRenderer, noResultsRenderer = void 0 === _ref$noResultsRendere ? MaterialNoResultsRenderer : _ref$noResultsRendere, noResultsText = _ref.noResultsText, noResultsIconRenderer = _ref.noResultsIconRenderer, selectedItem = _ref.selectedItem;
  return React.createElement(Tree, {
    structure: structure,
    title: title,
    onSelect: onSelect,
    width: width,
    height: height,
    treeContainerRenderer: treeContainerRenderer,
    headerRenderer: headerRenderer,
    backIconRenderer: backIconRenderer,
    inputRenderer: inputRenderer,
    inputIconRenderer: inputIconRenderer,
    clearIconRenderer: clearIconRenderer,
    itemRenderer: itemRenderer,
    forwardIconRenderer: forwardIconRenderer,
    itemsRenderer: itemsRenderer,
    noResultsRenderer: noResultsRenderer,
    noResultsText: noResultsText,
    noResultsIconRenderer: noResultsIconRenderer,
    selectedItem: selectedItem
  });
};

exports.default = MaterialTree;