@findify/react-components
Version:
Findify react UI components
184 lines (166 loc) • 8.35 kB
JavaScript
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/search/MobileFacets
*/
import Branch from "../../common/Branch";
import FacetTitles from "./Titles";
import Component from "../../Facet/Component";
import Button from "../../Button";
import cx from 'classnames';
import Icon from "../../Icon";
import Text from "../../Text";
var styles = {
"modal": "findify-components-search--mobile-facets__modal",
"filter-count": "findify-components-search--mobile-facets__filter-count",
"back-button": "findify-components-search--mobile-facets__back-button",
"header": "findify-components-search--mobile-facets__header",
"body": "findify-components-search--mobile-facets__body",
"footer": "findify-components-search--mobile-facets__footer",
"title": "findify-components-search--mobile-facets__title",
"facet-title": "findify-components-search--mobile-facets__facet-title",
"flex-fix": "findify-components-search--mobile-facets__flex-fix",
"selected-values": "findify-components-search--mobile-facets__selected-values",
"container": "findify-components-search--mobile-facets__container",
"rating": "findify-components-search--mobile-facets__rating",
"expand": "findify-components-search--mobile-facets__expand",
"expanded-list": "findify-components-search--mobile-facets__expanded-list",
"range": "findify-components-search--mobile-facets__range",
"facet-root": "findify-components-search--mobile-facets__facet-root",
"filterCount": "findify-components-search--mobile-facets__filter-count",
"backButton": "findify-components-search--mobile-facets__back-button",
"facetTitle": "findify-components-search--mobile-facets__facet-title",
"flexFix": "findify-components-search--mobile-facets__flex-fix",
"selectedValues": "findify-components-search--mobile-facets__selected-values",
"expandedList": "findify-components-search--mobile-facets__expanded-list",
"facetRoot": "findify-components-search--mobile-facets__facet-root"
};
import { useFacets, useQuery } from '@findify/react-connect';
import { memo, useCallback, useMemo, useState } from 'react';
import useTranslations from "../../../helpers/useTranslations";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var FacetContent = function FacetContent(_ref) {
var active = _ref.active,
config = _ref.config,
_ref$theme = _ref.theme,
theme = _ref$theme === void 0 ? styles : _ref$theme;
var _config = config.merge(config.getIn(['facets', 'filters', active.get('name')]));
return /*#__PURE__*/_jsx("div", {
className: cx(theme.container, theme[_config.get('type')]),
children: /*#__PURE__*/_jsx(Component, {
isExpanded: true,
isMobile: true,
type: _config.get('type'),
facet: active,
config: _config
})
});
};
/** Props that MobileFacets view accepts */
export default /*#__PURE__*/memo(function (_ref2) {
var _config$getIn, _query$get2;
var _ref2$theme = _ref2.theme,
theme = _ref2$theme === void 0 ? styles : _ref2$theme,
hideModal = _ref2.hideModal;
var _useFacets = useFacets(),
facets = _useFacets.facets,
config = _useFacets.config,
update = _useFacets.update;
var _useQuery = useQuery(),
query = _useQuery.query;
var translate = useTranslations();
var _useState = useState(null),
_useState2 = _slicedToArray(_useState, 2),
activeFacetName = _useState2[0],
setActiveFacet = _useState2[1];
var total = useMemo(function () {
var _query$get;
return ((_query$get = query.get('filters')) === null || _query$get === void 0 ? void 0 : _query$get.reduce(function (acc, filter) {
return acc + (/category[2-9]/.test(filter.get('name')) ? 0 : filter.get('values').size);
}, 0)) || 0;
}, [query]);
var activeFacet = useMemo(function () {
return facets.find(function (f) {
return f.get('name') === activeFacetName;
});
}, [activeFacetName]);
var filtersSelected = useMemo(function () {
if (!activeFacet) return 0;
return activeFacet.get('values').filter(function (item) {
return item.get('selected');
}).size;
}, [activeFacet]);
var selectFacet = useCallback(function (name) {
setActiveFacet(name || null);
}, []);
var onReset = useCallback(function () {
update('filters', function (f) {
return f === null || f === void 0 ? void 0 : f.clear();
});
}, []);
return /*#__PURE__*/_jsxs("div", {
className: cx(theme.modal, 'mobile'),
children: [/*#__PURE__*/_jsxs("div", {
className: theme.header,
children: [/*#__PURE__*/_jsxs("div", {
className: theme.title,
children: [!activeFacet ? /*#__PURE__*/_jsx(Text, {
primary: true,
uppercase: true,
children: translate('facets.filters')
}) : null, !activeFacet && total ? /*#__PURE__*/_jsxs(Text, {
secondary: true,
uppercase: true,
className: theme.filterCount,
children: ["(", total, ")"]
}) : null, activeFacet ? /*#__PURE__*/_jsx(Text, {
primary: true,
uppercase: true,
children: (_config$getIn = config.getIn(['facets', 'filters', activeFacet === null || activeFacet === void 0 ? void 0 : activeFacet.get('name')])) === null || _config$getIn === void 0 ? void 0 : _config$getIn.get('label')
}) : null, activeFacet && filtersSelected ? /*#__PURE__*/_jsxs(Text, {
secondary: true,
uppercase: true,
className: theme.filterCount,
children: ["(", filtersSelected, ")"]
}) : null]
}), /*#__PURE__*/_jsx(Button, {
onClick: activeFacet ? selectFacet : hideModal,
className: theme.backButton,
children: /*#__PURE__*/_jsx(Icon, {
name: "ArrowBack",
title: translate('facets.back')
})
}), query !== null && query !== void 0 && (_query$get2 = query.get('filters')) !== null && _query$get2 !== void 0 && _query$get2.size ? /*#__PURE__*/_jsx(Button, {
onClick: onReset,
children: /*#__PURE__*/_jsx(Text, {
secondary: true,
uppercase: true,
children: translate('facets.clearAll')
})
}) : null]
}), /*#__PURE__*/_jsx("div", {
className: theme.body,
children: /*#__PURE__*/_jsx(Branch, {
config: config,
theme: theme,
selectFacet: selectFacet,
active: facets.find(function (f) {
return f.get('name') === activeFacetName;
}),
facets: facets,
condition: activeFacet,
right: FacetTitles,
left: FacetContent
})
}), /*#__PURE__*/_jsx(Button, {
className: theme.footer,
onClick: activeFacet ? selectFacet : hideModal,
children: activeFacet ? translate('facets.done') : translate('facets.seeResults')
})]
});
});