@findify/react-components
Version:
Findify react UI components
253 lines (231 loc) • 9.51 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/RangeFacet
*/
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import cx from 'classnames';
import MapArray from "../common/MapArray";
import Button from "../Button";
import Text from "../Text";
import Grid from "../common/Grid";
import Checkbox from "../common/Checkbox";
import content from "./content";
import useTranslations from "../../helpers/useTranslations";
import { useConfig } from '@findify/react-connect';
var styles = {
"root": "findify-components--range-facet",
"range": "findify-components--range-facet__range",
"input-block": "findify-components--range-facet__input-block",
"input-wrap": "findify-components--range-facet__input-wrap",
"input": "findify-components--range-facet__input",
"currency": "findify-components--range-facet__currency",
"submit": "findify-components--range-facet__submit",
"divider": "findify-components--range-facet__divider",
"slider": "findify-components--range-facet__slider",
"thumb": "findify-components--range-facet__thumb",
"track": "findify-components--range-facet__track",
"inputBlock": "findify-components--range-facet__input-block",
"inputWrap": "findify-components--range-facet__input-wrap"
};
import Loadable from 'react-loadable';
import chunks from "../../helpers/chunks";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var Slider = Loadable({
loader: chunks.components.rangeSlider,
loading: function loading() {
return null;
}
});
var PriceInput = function PriceInput(_ref) {
var theme = _ref.theme,
currency = _ref.currency,
min = _ref.min,
max = _ref.max,
onBlur = _ref.onBlur,
resetOn = _ref.resetOn,
precision = _ref.precision,
reference = _ref.reference,
label = _ref.label;
var handleWrapperClick = useCallback(function () {
var _reference$current;
if (reference.current) (_reference$current = reference.current) === null || _reference$current === void 0 ? void 0 : _reference$current.focus();
}, [reference]);
var handleKeyPress = useCallback(function (e) {
if (e.key === 'Enter') onBlur(e);
}, []);
useEffect(function () {
if (reference.current) reference.current.value = null;
}, [resetOn]);
var step = useMemo(function () {
return precision ? "0.".concat(Array.from({
length: precision
}, function (_, i) {
return i + 1 === precision ? '1' : '0';
}).join('')) : '1';
}, []);
return /*#__PURE__*/_jsxs("div", {
className: theme.inputWrap,
onClick: handleWrapperClick,
children: [/*#__PURE__*/_jsx("span", {
className: theme.currency,
children: currency
}), /*#__PURE__*/_jsx("input", {
type: "number",
inputMode: "numeric",
pattern: "[0-9]*",
className: theme.input,
max: max,
min: min,
onBlur: onBlur,
onKeyPress: handleKeyPress,
ref: reference,
step: step,
"aria-label": label
}), /*#__PURE__*/_jsx("div", {
className: theme.border
})]
});
};
export default (function (_ref2) {
var _ref2$theme = _ref2.theme,
theme = _ref2$theme === void 0 ? styles : _ref2$theme,
facetConfig = _ref2.config,
facet = _ref2.facet,
hidden = _ref2.hidden,
isMobile = _ref2.isMobile;
var _useConfig = useConfig(),
config = _useConfig.config;
var translate = useTranslations();
var minInput = useRef(null);
var maxInput = useRef(null);
var _useState = useState([]),
_useState2 = _slicedToArray(_useState, 2),
_useState2$ = _slicedToArray(_useState2[0], 2),
from = _useState2$[0],
to = _useState2$[1],
setState = _useState2[1];
var _useMemo = useMemo(function () {
return [facetConfig.get('pullSelected') ? facet.get('values').filter(function (i) {
return i.get('selected');
}) : facet.get('values'), facetConfig.get('pullSelected') ? facet.get('values').filter(function (i) {
return !i.get('selected');
}) : facet.get('values')];
}, [facet]),
_useMemo2 = _slicedToArray(_useMemo, 2),
selectedItems = _useMemo2[0],
notSelectedItems = _useMemo2[1];
/** Invoked when minimum range is changed */
var onChangeMin = useCallback(function (e) {
var _value = parseFloat(e.target.value);
if (isNaN(_value)) return;
var value = Number(_value > (to || facet.get('max')) ? to || facet.get('max') : _value < facet.get('min') ? facet.get('min') : _value).toFixed(facetConfig.get('precision', 0));
e.target.value = value;
setState(function (s) {
return [value, s[1]];
});
}, [from, to]);
/** Invoked when maximum range is changed */
var onChangeMax = useCallback(function (e) {
var _value = parseFloat(e.target.value);
if (isNaN(_value)) return;
var value = Number(_value < (from || facet.get('min')) ? from || facet.get('min') : _value > facet.get('max') ? facet.get('max') : _value).toFixed(facetConfig.get('precision', 0));
e.target.value = value;
setState(function (s) {
return [s[0], value];
});
}, [from, to]);
var onSubmit = useCallback(function (e) {
e.preventDefault();
if (!from && !to) return;
facet.setValue({
from: from,
to: to
});
setState([]);
if (minInput.current && maxInput.current) {
minInput.current.value = maxInput.current.value = '';
}
}, [from, to]);
var onSliderChange = useCallback(function (_ref3) {
var _ref4 = _slicedToArray(_ref3, 2),
min = _ref4[0],
max = _ref4[1];
var range = facet.get('max') - facet.get('min');
var minValue = (range / 100 * min || facet.get('min')).toFixed(facetConfig.get('precision', 0));
var maxValue = (facet.get('max') / 100 * max).toFixed(facetConfig.get('precision', 0));
if (minInput.current && maxInput.current) {
minInput.current.value = minValue;
maxInput.current.value = maxValue;
}
setState([minValue, maxValue]);
}, []);
return /*#__PURE__*/_jsxs("div", {
className: theme.root,
id: "facet-".concat(facet.get('name')),
role: "region",
hidden: hidden,
children: [facetConfig.get('pullSelected') ? /*#__PURE__*/_jsx(MapArray, {
array: selectedItems,
factory: Checkbox,
content: content,
config: config,
isMobile: isMobile
}) : null, /*#__PURE__*/_jsx(MapArray, {
array: notSelectedItems,
factory: Checkbox,
content: content,
config: config,
isMobile: isMobile
}), /*#__PURE__*/_jsxs(Grid, {
wrapperComponent: "form",
onSubmit: onSubmit,
columns: "3|fit|3|auto",
className: cx(theme.range, theme.inputBlock),
children: [/*#__PURE__*/_jsx(PriceInput, {
theme: theme,
currency: config.getIn(['currency', 'symbol']),
max: to,
min: facet.get('min'),
resetOn: facet,
onBlur: onChangeMin,
reference: minInput,
precision: facetConfig.get('precision', 0),
label: "fromprice"
}), /*#__PURE__*/_jsx("div", {
className: theme.divider,
children: "-"
}), /*#__PURE__*/_jsx(PriceInput, {
theme: theme,
currency: config.getIn(['currency', 'symbol']),
min: from,
max: facet.get('max'),
resetOn: facet,
onBlur: onChangeMax,
reference: maxInput,
precision: facetConfig.get('precision', 0),
label: "toprice"
}), /*#__PURE__*/_jsx(Button, {
className: theme.submit,
type: "submit",
onClick: onSubmit,
children: /*#__PURE__*/_jsx(Text, {
primary: true,
uppercase: true,
children: translate('facets.submit')
})
})]
}), config.get('slider') ? /*#__PURE__*/_jsx(Slider, {
className: theme.slider,
thumbClassName: theme.thumb,
trackClassName: theme.track,
defaultValue: [0, 100],
onChange: onSliderChange
}) : null]
});
});