@progress/sitefinity-nextjs-sdk
Version:
Provides OOB widgets developed using the Next.js framework, which includes an abstraction layer for Sitefinity communication. Additionally, it offers an expanded API, typings, and tools for further development and integration.
71 lines (70 loc) • 7.45 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useRef, useState } from 'react';
import { SearchFacetModelExtensions } from '../search-facets-class';
import { computeFacetRangeLabelForType, computeFacetRangeValueForType, getCheckboxId, isEventCodeAllowed } from './utils';
export function FacetCustomRange(props) {
const { facet, facetElement, fromValue, toValue, selectedFacets, customRangeApplied } = { ...props };
const fromRef = useRef(null);
const toRef = useRef(null);
const [customRange, setCustomRange] = useState({ facetFieldName: '', facetChipValue: '', defaultValue: '', facetChipLabel: '', inputId: '' });
useEffect(() => {
if (Object.values(customRange).some(v => v !== '')) {
customRangeApplied(customRange.facetFieldName, customRange.facetChipValue, customRange.defaultValue, customRange.facetChipLabel, customRange.inputId);
}
}, [customRange]); // eslint-disable-line
useEffect(() => {
const isFacetElementInAppliedFilters = () => facet.FacetElements.some((e) => {
const key = getCheckboxId(facet.FacetFieldName, e.FacetValue);
const isIncluded = Object.values(selectedFacets).filter(v => v.facetName === facet.FacetFieldName)?.some(k => getCheckboxId(k.facetName, k.facetValue) === key);
return isIncluded;
});
const isCustmFacetInAppliedFilters = () => Object.values(selectedFacets).filter(v => v.facetName === facet.FacetFieldName).some((e) => {
const sfKey = getCheckboxId(e.facetName, e.facetValue);
const fv = fromRef?.current?.value ?? '';
const tv = toRef?.current?.value ?? '';
if (fv !== '' && tv !== '') {
let facetChipValue = computeFacetRangeValueForType(facet.FacetFieldType, fv, tv);
let inputId = getCheckboxId(facet.FacetFieldName, facetChipValue);
return inputId === sfKey;
}
return false;
});
if (Object.values(selectedFacets).filter(v => v.facetName === facet.FacetFieldName).length === 0 || isFacetElementInAppliedFilters() || !isCustmFacetInAppliedFilters()) {
if (fromRef?.current && toRef?.current) {
fromRef.current.value = '';
toRef.current.value = '';
}
}
}, [selectedFacets]); // eslint-disable-line
const customRangeSelectedEventHandler = () => {
const facetFieldName = facet.FacetFieldName;
const facetFieldType = facet.FacetFieldType;
if (facetFieldName && facetFieldType) {
let fromInput = fromRef.current;
let toInput = toRef.current;
if (fromInput && toInput) {
let fromValue = fromInput.value;
let toValue = toInput.value;
if (fromValue !== null && fromValue !== undefined && fromValue !== '' && toValue !== null && toValue !== undefined && toValue !== '') {
let facetChipValue = computeFacetRangeValueForType(facetFieldType, fromValue, toValue);
let facetChipLabel = computeFacetRangeLabelForType(facetFieldType, fromValue, toValue);
// if the entered custom range exist in the generated facet - select them and don't create Custom range applied element
let inputId = getCheckboxId(facetFieldName, facetChipValue);
let defaultValue = facetElement && facetElement.FacetValue ? facetElement.FacetValue : '';
setCustomRange({ facetFieldName, facetChipValue, defaultValue, facetChipLabel, inputId });
}
}
}
};
return (_jsxs(_Fragment, { children: [SearchFacetModelExtensions.ShowNumberCustomRange(facet) && _jsxs("div", { className: "mt-2 d-flex flex-row align-items-center", children: [_jsx("div", { className: "-sc-w-5rem", children: (facet.FacetFieldType === 'NumberWhole')
? _jsx("input", { type: "number", ref: fromRef, id: `from-${facet.FacetFieldName}`, className: "form-control", "data-custom-range": "true", defaultValue: fromValue, placeholder: "Min", onKeyDown: (event) => {
return isEventCodeAllowed(event.code) ? event : event.preventDefault();
} })
: _jsx("input", { type: "number", ref: fromRef, id: `from-${facet.FacetFieldName}`, className: "form-control", "data-custom-range": "true", defaultValue: fromValue, placeholder: "Min" }) }), _jsx("span", { className: "mx-2", children: "\u2014" }), _jsx("div", { className: "-sc-w-5rem", children: facet.FacetFieldType === 'NumberWhole'
? _jsx("input", { type: "number", ref: toRef, id: `to-${facet.FacetFieldName}`, className: "form-control", "data-custom-range": "true", defaultValue: toValue, placeholder: "Max", onKeyDown: (event) => {
return isEventCodeAllowed(event.code) ? event : event.preventDefault();
} })
: _jsx("input", { type: "number", ref: toRef, id: `to-${facet.FacetFieldName}`, className: "form-control", "data-custom-range": "true", defaultValue: toValue, placeholder: "Max" }) }), _jsx("button", { type: "button", onClick: () => customRangeSelectedEventHandler(), id: `custom-range-btn-${facet.FacetFieldName}`, className: "btn btn-outline-secondary ms-2 d-flex align-items-center", "data-custom-range-name": facet.FacetFieldName, "data-custom-range-type": facet.FacetFieldType, "aria-label": `Custom range for ${facet.FacetFieldName}`, children: _jsx("svg", { xmlns: "https://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", className: "my-1", viewBox: "0 0 16 16", children: _jsx("path", { fillRule: "evenodd", d: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" }) }) })] }), SearchFacetModelExtensions.ShowDateCustomRanges(facet) &&
_jsxs("div", { className: "mt-2 d-flex flex-row align-items-center", children: [_jsx("div", { className: "-sc-w-10rem", children: _jsx("input", { type: "date", ref: fromRef, id: `from-${facet.FacetFieldName}`, className: "form-control", "data-custom-range": "true", defaultValue: fromValue, "aria-label": `From ${facet.FacetFieldName}` }) }), _jsx("span", { className: "mx-2", children: "\u2014" }), _jsx("div", { className: "-sc-w-10rem", children: _jsx("input", { type: "date", ref: toRef, id: `to-${facet.FacetFieldName}`, className: "form-control", "data-custom-range": "true", defaultValue: toValue, "aria-label": `To ${facet.FacetFieldName}` }) }), _jsx("button", { type: "button", onClick: () => customRangeSelectedEventHandler(), id: `custom-range-btn-${facet.FacetFieldName}`, className: "btn btn-outline-secondary ms-2 d-flex align-items-center", "data-custom-range-name": facet.FacetFieldName, "data-custom-range-type": facet.FacetFieldType, "aria-label": `Custom range for ${facet.FacetFieldName}`, children: _jsx("svg", { xmlns: "https://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", className: "my-1", viewBox: "0 0 16 16", children: _jsx("path", { fillRule: "evenodd", d: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" }) }) })] })] }));
}