@findify/react-components/lib/components/CategoryFacet/index.js

Findify react UI components

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

/**
 * @module components/CategoryFacet
 */
import MapArray from "../common/MapArray";
import Item from "./Item";
import Button from "../Button";
import Text from "../Text";
import Icon from "../Icon";
import useTranslations from "../../helpers/useTranslations";
var styles = {
  "root": "findify-components--category-facet",
  "nested": "findify-components--category-facet__nested",
  "content": "findify-components--category-facet__content",
  "item": "findify-components--category-facet__item",
  "mobile": "findify-components--category-facet__mobile",
  "active": "findify-components--category-facet__active",
  "expand": "findify-components--category-facet__expand"
};
import { useMemo, useState } from 'react';
/** CategoryFacet props */

import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export default (function (_ref) {
  var _ref$theme = _ref.theme,
      theme = _ref$theme === void 0 ? styles : _ref$theme,
      config = _ref.config,
      facet = _ref.facet,
      hidden = _ref.hidden,
      isMobile = _ref.isMobile;
  var translate = useTranslations();

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      isExpanded = _useState2[0],
      setExpanded = _useState2[1];

  var _useMemo = useMemo(function () {
    var items = facet.get('values');
    var total = items.reduce(function (acc, v) {
      return acc + v.get('count');
    }, 0);
    return [items, total];
  }, [facet]),
      _useMemo2 = _slicedToArray(_useMemo, 2),
      items = _useMemo2[0],
      total = _useMemo2[1];

  return /*#__PURE__*/_jsxs("div", {
    className: theme.root,
    id: "facet-".concat(facet.get('name')),
    role: "region",
    hidden: hidden,
    children: [/*#__PURE__*/_jsxs(Button, {
      className: theme.item,
      onClick: facet.resetValues,
      children: [/*#__PURE__*/_jsx(Text, {
        lowercase: true,
        primary: true,
        bold: !items.find(function (i) {
          return i.get('selected');
        }),
        className: theme.content,
        children: translate('facets.allCategories')
      }), /*#__PURE__*/_jsxs(Text, {
        secondary: true,
        uppercase: true,
        children: ["(", total, ")"]
      })]
    }), /*#__PURE__*/_jsx(MapArray, {
      config: config,
      array: items,
      factory: Item,
      limit: !isExpanded && config.get('maxItemsCount', 6),
      isMobile: isMobile
    }), items.size > config.get('maxItemsCount', 6) ? /*#__PURE__*/_jsx(Button, {
      className: theme.expand,
      onClick: function onClick() {
        return setExpanded(function (exp) {
          return !exp;
        });
      },
      children: /*#__PURE__*/_jsxs(Text, {
        primary: true,
        uppercase: true,
        children: [/*#__PURE__*/_jsx(Icon, {
          name: isExpanded ? 'Minus' : 'Plus',
          title: isExpanded ? 'Expanded' : 'Collapsed'
        }), isExpanded ? translate('facets.less') : translate('facets.more')]
      })
    }) : null]
  });
});