@krowdy-ui/views/es/SuperFilters/FiltersList.js

React components that implement Google's Material Design.

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 const useStyles = makeStyles(theme => ({
  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");

const FiltersList = React.memo(props => {
  const {
    filterGroups,
    filters,
    uniqueFilter,
    onClickItem,
    listRef
  } = props;
  const classes = useStyles();
  const [search, setSearch] = useState('');

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

  const filterGroupsSearched = useMemo(() => searchInGroups(filterGroups, search) // eslint-disable-next-line react-hooks/exhaustive-deps
  , [filterGroups, search]);

  const _handleChangeSearch = event => setSearch(event.target.value);

  const _handleClickItem = item => () => 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,
    ref: listRef
  }, !filterGroupsSearched.length && /*#__PURE__*/React.createElement("div", {
    className: classes.notFound
  }, _ref, _ref2), filterGroupsSearched.map((filterGroup, index) => /*#__PURE__*/React.createElement("li", {
    className: classes.listSection,
    key: `filterGroup-${index}`
  }, /*#__PURE__*/React.createElement("ul", {
    className: classes.ul
  }, /*#__PURE__*/React.createElement(ListSubheader, {
    className: classes.listSubheader,
    disableSticky: false
  }, filterGroup.label), filterGroup.children.map(filter => /*#__PURE__*/React.createElement(ListItem, {
    button: true,
    className: classes.listItem,
    disabled: uniqueFilter ? filters.find(({
      key
    }) => filter.key === key) : false,
    key: `filter-${index}-${filter._id}`,
    onClick: _handleClickItem(filter)
  }, /*#__PURE__*/React.createElement(ListItemText, {
    primary: filter.label
  }))))))));
});
export default FiltersList;