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

React components that implement Google's Material Design.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.useStyles = void 0;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

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

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

var _Search = _interopRequireDefault(require("@krowdy-ui/views/Search"));

var _tilderize = _interopRequireDefault(require("../utils/tilderize"));

var _escapeRegexp = _interopRequireDefault(require("../utils/escapeRegexp"));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var useStyles = (0, _core.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'
});
exports.useStyles = useStyles;

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

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

var FiltersList = _react["default"].memo(function (props) {
  var filterGroups = props.filterGroups,
      filters = props.filters,
      uniqueFilter = props.uniqueFilter,
      onClickItem = props.onClickItem;
  var classes = useStyles();

  var _useState = (0, _react.useState)(''),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      search = _useState2[0],
      setSearch = _useState2[1];

  var searchInGroups = function searchInGroups(filterGroups, search) {
    if (!search) return filterGroups;
    var escapedText = (0, _tilderize["default"])((0, _escapeRegexp["default"])(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 = (0, _react.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["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.searchFiltersContainer
  }, /*#__PURE__*/_react["default"].createElement(_Search["default"], {
    onChange: _handleChangeSearch,
    placeholder: "Buscar",
    value: search
  })), /*#__PURE__*/_react["default"].createElement(_core.List, {
    className: classes.filtersList
  }, !filterGroupsSearched.length && /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.notFound
  }, _ref, _ref2), filterGroupsSearched.map(function (filterGroup, index) {
    return /*#__PURE__*/_react["default"].createElement("li", {
      className: classes.listSection,
      key: "filterGroup-".concat(index)
    }, /*#__PURE__*/_react["default"].createElement("ul", {
      className: classes.ul
    }, /*#__PURE__*/_react["default"].createElement(_core.ListSubheader, {
      className: classes.listSubheader,
      disableSticky: false
    }, filterGroup.label), filterGroup.children.map(function (filter) {
      return /*#__PURE__*/_react["default"].createElement(_core.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["default"].createElement(_core.ListItemText, {
        primary: filter.label
      }));
    })));
  })));
});

var _default = FiltersList;
exports["default"] = _default;