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

Findify react UI components

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

/**
 * @module components/Facet
 */
import cx from 'classnames';
import Button from "../Button";
import Text from "../Text";
import Icon from "../Icon";
import Component from "./Component";
import { useCallback, useEffect, useMemo, useRef } from 'react';
import { jsxs as _jsxs } from "react/jsx-runtime";
import { jsx as _jsx } from "react/jsx-runtime";
var styles = {
  "root": "findify-components--facet",
  "horizontal": "findify-components--facet__horizontal",
  "title": "findify-components--facet__title",
  "text": "findify-components--facet__text",
  "icon": "findify-components--facet__icon",
  "body": "findify-components--facet__body",
  "expanded": "findify-components--facet__expanded"
};
export default (function (_ref) {
  var _cx;

  var _ref$theme = _ref.theme,
      theme = _ref$theme === void 0 ? styles : _ref$theme,
      item = _ref.item,
      _config = _ref.config,
      isMobile = _ref.isMobile,
      isHorizontal = _ref.isHorizontal,
      onToggle = _ref.onToggle,
      openFacets = _ref.openFacets;

  var _useRef = useRef(_config.merge(_config.getIn(['facets', 'filters', item.get('name')]))),
      config = _useRef.current;

  var selectedItemsCount = useMemo(function () {
    return item.get('values').filter(function (item) {
      return item.get('selected');
    }).size;
  }, [item]);
  var title = config.get('label') || item.get('name');
  var isOpen = openFacets.includes(item.get('name'));
  var onClick = useCallback(function () {
    onToggle(item.get('name'));
  }, []);
  useEffect(function () {
    window.dispatchEvent(new Event('resize'));
  }, [isOpen]);
  return /*#__PURE__*/_jsxs("div", {
    className: cx(theme.root, (_cx = {}, _defineProperty(_cx, theme.horizontal, isHorizontal), _defineProperty(_cx, theme.mobile, isMobile), _defineProperty(_cx, theme.expanded, isOpen), _cx)),
    children: [/*#__PURE__*/_jsxs(Button, {
      className: theme.title,
      onClick: onClick,
      "aria-expanded": isOpen,
      "aria-controls": "facet-".concat(item.get('name')),
      tabIndex: 0,
      children: [/*#__PURE__*/_jsxs(Text, {
        primary: true,
        uppercase: true,
        className: theme.text,
        children: [title, " ", selectedItemsCount ? "(".concat(selectedItemsCount, ")") : '']
      }), /*#__PURE__*/_jsx(Icon, {
        name: isOpen ? 'Minus' : 'Plus',
        className: theme.icon,
        title: isOpen ? 'Collapse list' : 'Expand list'
      })]
    }), /*#__PURE__*/_jsx("div", {
      className: theme.body,
      hidden: !isOpen,
      children: /*#__PURE__*/_jsx(Component, {
        facet: item,
        config: config,
        isMobile: isMobile
      })
    })]
  });
});