@krowdy-ui/views/esm/Filters/FiltersList.js

React components that implement Google's Material Design.

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useMemo, useState } from 'react';
import { List, ListItem, ListItemText, ListSubheader, makeStyles } from '@krowdy-ui/core';
import Search from '@krowdy-ui/views/Search';
import tilderize from '../utils/tilderize';
import escapeRegexp from '../utils/escapeRegexp';
export var useStyles = makeStyles(function (theme) {
  return {
    filtersList: {
      overflow: 'auto',
      paddingTop: 0
    },
    listItem: {
      '&:hover': {
        background: '#F3FBFF',
        color: theme.palette.primary[500]
      },
      color: theme.palette.grey[700],
      cursor: 'pointer',
      fontSize: 12,
      lineHeight: '16px',
      padding: theme.spacing(1, 1.5)
    },
    listSection: {
      backgroundColor: theme.palette.background.paper
    },
    listSubheader: {
      borderBottom: '1px solid',
      borderBottomColor: theme.palette.grey[300],
      color: theme.palette.grey[800],
      fontSize: 12,
      fontWeight: 'bold',
      lineHeight: '20px',
      marginBottom: theme.spacing(0.5),
      marginLeft: theme.spacing(1.5),
      marginRight: theme.spacing(1.5),
      padding: 0,
      paddingBottom: theme.spacing(0.5)
    },
    notFound: {
      '& p': {
        color: theme.palette.grey[500],
        fontWeight: 'bold'
      },
      alignItems: 'center',
      display: 'flex',
      flexDirection: 'column',
      padding: theme.spacing(2.4)
    },
    searchFiltersContainer: {
      padding: theme.spacing(1.5)
    },
    ul: {
      backgroundColor: theme.palette.background.paper,
      padding: 0
    }
  };
}, {
  name: 'KrowdyFilterList'
});

var _ref = /*#__PURE__*/React.createElement("img", {
  alt: "Sin resultados",
  src: "https://s3.amazonaws.com/test.krowdy.apps/portales/sources/empty_content.png",
  width: 140
});

var _ref2 = /*#__PURE__*/React.createElement("p", null, "No se encontraron resultados");

var FiltersList = React.memo(function (props) {
  var filterGroups = props.filterGroups,
      filters = props.filters,
      uniqueFilter = props.uniqueFilter,
      onClickItem = props.onClickItem;
  var classes = useStyles();

  var _useState = useState(''),
      _useState2 = _slicedToArray(_useState, 2),
      search = _useState2[0],
      setSearch = _useState2[1];

  var searchInGroups = function searchInGroups(filterGroups, search) {
    if (!search) return filterGroups;
    var escapedText = tilderize(escapeRegexp(search));
    var searchTerm = new RegExp(escapedText, 'i');
    return filterGroups.map(function (filterGroup) {
      var filtersSearched = filterGroup.children.filter(function (filter) {
        return searchTerm.test(filter.label);
      });
      if (filtersSearched.length) return {
        _id: filterGroup._id,
        children: filtersSearched,
        label: filterGroup.label
      };
      return null;
    }).filter(Boolean);
  };

  var filterGroupsSearched = useMemo(function () {
    return searchInGroups(filterGroups, search);
  } // eslint-disable-next-line react-hooks/exhaustive-deps
  , [filterGroups, search]);

  var _handleChangeSearch = function _handleChangeSearch(event) {
    return setSearch(event.target.value);
  };

  var _handleClickItem = function _handleClickItem(item) {
    return function () {
      return onClickItem(item);
    };
  };

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: classes.searchFiltersContainer
  }, /*#__PURE__*/React.createElement(Search, {
    onChange: _handleChangeSearch,
    placeholder: "Buscar",
    value: search
  })), /*#__PURE__*/React.createElement(List, {
    className: classes.filtersList
  }, !filterGroupsSearched.length && /*#__PURE__*/React.createElement("div", {
    className: classes.notFound
  }, _ref, _ref2), filterGroupsSearched.map(function (filterGroup, index) {
    return /*#__PURE__*/React.createElement("li", {
      className: classes.listSection,
      key: "filterGroup-".concat(index)
    }, /*#__PURE__*/React.createElement("ul", {
      className: classes.ul
    }, /*#__PURE__*/React.createElement(ListSubheader, {
      className: classes.listSubheader,
      disableSticky: false
    }, filterGroup.label), filterGroup.children.map(function (filter) {
      return /*#__PURE__*/React.createElement(ListItem, {
        button: true,
        className: classes.listItem,
        disabled: uniqueFilter ? filters.find(function (_ref3) {
          var key = _ref3.key;
          return filter.key === key;
        }) : false,
        key: "filter-".concat(index, "-").concat(filter._id),
        onClick: _handleClickItem(filter)
      }, /*#__PURE__*/React.createElement(ListItemText, {
        primary: filter.label
      }));
    })));
  })));
});
export default FiltersList;