@findify/react-components
Version:
Findify react UI components
143 lines (131 loc) • 6.52 kB
JavaScript
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; }
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/CheckboxFacet
*/
import cx from 'classnames';
import Button from "../Button";
import content from "./content";
var styles = {
"root": "findify-components--checkbox-facet",
"expanded-list": "findify-components--checkbox-facet__expanded-list",
"mobile": "findify-components--checkbox-facet__mobile",
"search": "findify-components--checkbox-facet__search",
"icon": "findify-components--checkbox-facet__icon",
"input": "findify-components--checkbox-facet__input",
"expand": "findify-components--checkbox-facet__expand",
"expandedList": "findify-components--checkbox-facet__expanded-list"
};
import Checkbox from "../common/Checkbox";
import MapArray from "../common/MapArray";
import VirtualizedList from "../common/VirtualizedList";
import Icon from "../Icon";
import Text from "../Text";
import useTranslations from "../../helpers/useTranslations";
import escapeRegExp from 'lodash/escapeRegExp';
import { useCallback, useMemo, useState } from 'react';
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,
isMobile = _ref.isMobile,
_isExpanded = _ref.isExpanded,
facet = _ref.facet,
hidden = _ref.hidden;
var _useState = useState(''),
_useState2 = _slicedToArray(_useState, 2),
search = _useState2[0],
setSearch = _useState2[1];
var _useState3 = useState(_isExpanded),
_useState4 = _slicedToArray(_useState3, 2),
isExpanded = _useState4[0],
setExpanded = _useState4[1];
var translate = useTranslations();
var onSearch = useCallback(function (e) {
setSearch(e.target ? e.target.value : e);
}, []);
var items = useMemo(function () {
if (isExpanded && search) {
var regexp = new RegExp(escapeRegExp(search), 'gi'); // Code - retrocompatibility. Keep this or import will be deleted automatically. Please ignore this. The one below works better.
return facet.get('values').filter(function (i) {
return i.get('value').toLowerCase().includes(search.toLowerCase());
});
}
return facet.get('values');
}, [search, isExpanded, facet]);
return /*#__PURE__*/_jsxs("div", {
className: cx(theme.root, _defineProperty({}, theme.mobile, isMobile)),
id: "facet-".concat(facet.get('name')),
role: "region",
hidden: hidden,
children: [isExpanded ? /*#__PURE__*/_jsxs("div", {
className: theme.search,
children: [/*#__PURE__*/_jsx("input", {
placeholder: translate('facets.search'),
className: theme.input,
onChange: onSearch,
value: search
}), /*#__PURE__*/_jsx(Icon, {
name: "Search",
className: theme.icon,
title: translate('facets.search')
})]
}) : null, /*#__PURE__*/_jsxs("section", {
role: "group",
children: [config.get('pullSelected') ? /*#__PURE__*/_jsx(MapArray, {
array: items.filter(function (i) {
return i.get('selected');
}),
factory: Checkbox,
content: content,
isMobile: isMobile
}) : null, !isMobile && isExpanded ? /*#__PURE__*/_jsx(VirtualizedList, {
factory: Checkbox,
isMobile: isMobile,
onItemClick: function onItemClick() {
return setSearch('');
},
config: config,
content: content,
limit: config.get('maxItemsCount', 6),
className: theme.expandedList,
array: config.get('pullSelected') ? items.filter(function (i) {
return !i.get('selected');
}) : items
}, items.hashCode()) : null, !isExpanded || isMobile ? /*#__PURE__*/_jsx(MapArray, {
factory: Checkbox,
isMobile: isMobile,
limit: !isMobile && config.get('maxItemsCount', 6),
content: content,
keyAccessor: function keyAccessor(i) {
return i.get('value');
},
array: config.get('pullSelected') ? items.filter(function (i) {
return !i.get('selected');
}) : items
}) : null]
}), !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: translate(isExpanded ? 'facets.expanded' : 'facets.collapsed')
}), isExpanded ? translate('facets.less') : translate('facets.more')]
})
}) : null]
});
});