@kenshooui/material-tree/dist/material-tree.esm.js

Material Tree is an enrichment to React Tree component.

import React from 'react';
import Tree from '@kenshooui/react-tree';
import ListItemText from '@material-ui/core/ListItemText';
import { makeStyles } from '@material-ui/core/styles';
import { ChevronRight, Search, Clear, ChevronLeft, Warning } from '@material-ui/icons';
import ListItem from '@material-ui/core/ListItem';
import Typography from '@material-ui/core/Typography';
import InputAdornment from '@material-ui/core/InputAdornment';
import InputBase from '@material-ui/core/InputBase';
import Divider from '@material-ui/core/Divider';
import CardActions from '@material-ui/core/CardActions';
import IconButton from '@material-ui/core/IconButton';
import Card from '@material-ui/core/Card';
import List from '@material-ui/core/List';
import makeStyles$1 from '@material-ui/core/styles/makeStyles';

var useStyles = makeStyles({
  selected: {
    fontWeight: function fontWeight(props) {
      return props.isSelected ? 600 : 400;
    }
  }
});

var BasicItem = function BasicItem(_ref) {
  var _ref$label = _ref.label,
      label = _ref$label === void 0 ? "" : _ref$label,
      _ref$isSelected = _ref.isSelected,
      isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected;
  var classes = useStyles({
    isSelected: isSelected
  });
  return React.createElement(ListItemText, {
    primary: React.createElement("span", {
      className: classes.selected
    }, label)
  });
};

var useStyles$1 = makeStyles({
  boldText: {
    fontWeight: 600,
    color: "#268DEC"
  },
  selected: {
    fontWeight: function fontWeight(props) {
      return props.isSelected ? 600 : 400;
    }
  }
});

var SearchedItem = function SearchedItem(_ref) {
  var _ref$item = _ref.item,
      item = _ref$item === void 0 ? [""] : _ref$item,
      _ref$searchIndex = _ref.searchIndex,
      searchIndex = _ref$searchIndex === void 0 ? 0 : _ref$searchIndex,
      _ref$searchTerm = _ref.searchTerm,
      searchTerm = _ref$searchTerm === void 0 ? "" : _ref$searchTerm,
      _ref$isSelected = _ref.isSelected,
      isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected;
  var classes = useStyles$1({
    isSelected: isSelected
  });
  var leaf = item[item.length - 1];
  var 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
  });
};

var noop = function noop() {};

var MaterialItemRenderer = function MaterialItemRenderer(props) {
  var _selectedItem$item;

  var _props$searchTerm = props.searchTerm,
      searchTerm = _props$searchTerm === void 0 ? "" : _props$searchTerm,
      _props$item = props.item;
  _props$item = _props$item === void 0 ? {
    item: [""],
    hasChild: false,
    currentDepth: 0
  } : _props$item;

  var item = _props$item.item,
      hasChild = _props$item.hasChild,
      currentDepth = _props$item.currentDepth,
      _props$onClick = props.onClick,
      _onClick = _props$onClick === void 0 ? noop : _props$onClick,
      selectedItem = props.selectedItem,
      _props$forwardIconRen = props.forwardIconRenderer,
      ForwardIcon = _props$forwardIconRen === void 0 ? ChevronRight : _props$forwardIconRen;

  var isItemSelected = item.toString() === (selectedItem === null || selectedItem === void 0 ? void 0 : (_selectedItem$item = selectedItem.item) === null || _selectedItem$item === void 0 ? void 0 : _selectedItem$item.toString());
  var searchIndex = item[item.length - 1].toLowerCase().indexOf(searchTerm.trim().toLowerCase());
  return React.createElement(ListItem, {
    button: true,
    onClick: function onClick() {
      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));
};

var useStyles$2 = makeStyles(function () {
  return {
    root: {
      padding: "8px 16px"
    }
  };
});

var noop$1 = function noop() {};

var MaterialInputRenderer = function MaterialInputRenderer(_ref) {
  var inputRef = _ref.inputRef,
      _ref$searchTerm = _ref.searchTerm,
      searchTerm = _ref$searchTerm === void 0 ? "" : _ref$searchTerm,
      _ref$onInputChange = _ref.onInputChange,
      onInputChange = _ref$onInputChange === void 0 ? noop$1 : _ref$onInputChange,
      _ref$inputIconRendere = _ref.inputIconRenderer,
      InputIcon = _ref$inputIconRendere === void 0 ? Search : _ref$inputIconRendere,
      _ref$clearIconRendere = _ref.clearIconRenderer,
      ClearIcon = _ref$clearIconRendere === void 0 ? Clear : _ref$clearIconRendere;
  var 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));
};

var useStyles$3 = makeStyles({
  root: {
    width: function width(props) {
      return props.width;
    },
    height: function height(props) {
      return props.height;
    }
  }
});

var MaterialUIContainerRenderer = function MaterialUIContainerRenderer(props) {
  var containerRef = props.containerRef,
      children = props.children,
      width = props.width,
      height = props.height;
  var classes = useStyles$3({
    width: width,
    height: height
  });
  return React.createElement(Card, {
    ref: containerRef,
    raised: true,
    className: classes.root
  }, children);
};

var useStyles$4 = makeStyles(function () {
  return {
    root: {
      padding: "8px 16px"
    },
    button: {
      marginLeft: -8
    }
  };
});

var noop$2 = function noop() {};

var MaterialHeaderRenderer = function MaterialHeaderRenderer(_ref) {
  var headerRef = _ref.headerRef,
      _ref$parents = _ref.parents,
      parents = _ref$parents === void 0 ? [] : _ref$parents,
      _ref$onClick = _ref.onClick,
      onClick = _ref$onClick === void 0 ? noop$2 : _ref$onClick,
      _ref$title = _ref.title,
      title = _ref$title === void 0 ? "" : _ref$title,
      _ref$backIconRenderer = _ref.backIconRenderer,
      BackIcon = _ref$backIconRenderer === void 0 ? ChevronLeft : _ref$backIconRenderer;
  var 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));
};

var ITEMS_PADDING = 16;
var useStyles$5 = makeStyles$1({
  root: {
    overflowY: "auto",
    overflowX: "hidden",
    maxHeight: function maxHeight(props) {
      return props.height - ITEMS_PADDING;
    }
  }
});

var MaterialItemsRenderer = function MaterialItemsRenderer(_ref) {
  var children = _ref.children,
      height = _ref.height;
  var classes = useStyles$5({
    height: height
  });
  return React.createElement(List, {
    className: classes.root,
    component: "nav"
  }, children);
};

var ITEMS_PADDING$1 = 16;
var useStyles$6 = makeStyles$1({
  root: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    height: function height(props) {
      return props.height - ITEMS_PADDING$1;
    }
  }
});

var MaterialNoResultsRenderer = function MaterialNoResultsRenderer(_ref) {
  var text = _ref.text,
      height = _ref.height,
      _ref$noResultsIconRen = _ref.noResultsIconRenderer,
      NoResultsIcon = _ref$noResultsIconRen === void 0 ? Warning : _ref$noResultsIconRen;
  var 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));
};

var noop$3 = function noop() {};

var MaterialTree = function MaterialTree(_ref) {
  var _ref$structure = _ref.structure,
      structure = _ref$structure === void 0 ? [] : _ref$structure,
      _ref$title = _ref.title,
      title = _ref$title === void 0 ? "" : _ref$title,
      _ref$onSelect = _ref.onSelect,
      onSelect = _ref$onSelect === void 0 ? noop$3 : _ref$onSelect,
      width = _ref.width,
      height = _ref.height,
      _ref$treeContainerRen = _ref.treeContainerRenderer,
      treeContainerRenderer = _ref$treeContainerRen === void 0 ? MaterialUIContainerRenderer : _ref$treeContainerRen,
      _ref$headerRenderer = _ref.headerRenderer,
      headerRenderer = _ref$headerRenderer === void 0 ? MaterialHeaderRenderer : _ref$headerRenderer,
      backIconRenderer = _ref.backIconRenderer,
      _ref$inputRenderer = _ref.inputRenderer,
      inputRenderer = _ref$inputRenderer === void 0 ? MaterialInputRenderer : _ref$inputRenderer,
      inputIconRenderer = _ref.inputIconRenderer,
      clearIconRenderer = _ref.clearIconRenderer,
      _ref$itemRenderer = _ref.itemRenderer,
      itemRenderer = _ref$itemRenderer === void 0 ? MaterialItemRenderer : _ref$itemRenderer,
      forwardIconRenderer = _ref.forwardIconRenderer,
      _ref$itemsRenderer = _ref.itemsRenderer,
      itemsRenderer = _ref$itemsRenderer === void 0 ? MaterialItemsRenderer : _ref$itemsRenderer,
      _ref$noResultsRendere = _ref.noResultsRenderer,
      noResultsRenderer = _ref$noResultsRendere === void 0 ? 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
  });
};

export default MaterialTree;