@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.
92 lines (91 loc) • 6.37 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React, { useCallback } from 'react';
import { SearchFacetModelExtensions } from '../search-facets-class';
import { FacetCustomRange } from './facet-custom-range';
import { RANGE_SEPARATOR, getCheckboxId, formatDateValue, DATE_AND_TIME } from './utils';
export function FacetGroup(props) {
const { facet, viewProps, facetValueChanged, deselectFacetGroup, selectedFacets } = { ...props };
const defaultFacetsCollapseCount = 10;
let value = 0;
const [moreLessLabel, setMoreLessLabel] = React.useState({ 'labelToDisplay': viewProps.showMoreLabel, isShowMoreSelected: true });
const showMoreLessClick = () => {
const newMoreLessLabel = moreLessLabel.isShowMoreSelected
? { 'labelToDisplay': viewProps.showLessLabel, isShowMoreSelected: false }
: { 'labelToDisplay': viewProps.showMoreLabel, isShowMoreSelected: true };
setMoreLessLabel(newMoreLessLabel);
};
const facetCheckboxChanged = (e, facetName, facetValue, facetLabel) => {
const checked = e.target.checked;
facetValueChanged(facetName, facetValue, facetValue, facetLabel, !checked, false, null);
};
const customRangeApplied = (facetFieldName, facetChipValue, facetInitialValue, facetChipLabel, checkboxId) => {
let isCustomRange = true;
if (!facetChipValue?.includes(RANGE_SEPARATOR) || facetChipValue === facetInitialValue) {
isCustomRange = false;
}
if (isCustomRange && facetInitialValue !== facetChipValue) {
facetInitialValue = facetChipValue;
}
// uncheckCheckboxesFromGroup
let newSelectedFacets = deselectFacetGroup(facetFieldName);
facetValueChanged(facetFieldName, facetChipValue, facetInitialValue, facetChipLabel, false, isCustomRange, newSelectedFacets);
};
const checkboxChecked = (selectedFacet) => {
return !!selectedFacet && selectedFacet.facetDefaultValue === selectedFacet.facetValue;
};
const getFormattedDate = (selectedFacet, elementNumber) => {
let date = selectedFacet ? selectedFacet.facetValue.split(RANGE_SEPARATOR)[elementNumber] : '';
return formatDateValue(date);
};
const getSelectedFacet = useCallback((rangeFacet) => {
let selectedFacet;
if (!rangeFacet) {
Object.keys(selectedFacets).forEach(key => {
const value = selectedFacets[key];
if (value && facet.FacetFieldName === value.facetName) {
selectedFacet = value;
}
});
}
else {
const checkboxId = getCheckboxId(facet.FacetFieldName, rangeFacet?.FacetValue);
selectedFacet = selectedFacets[checkboxId];
if (selectedFacet && selectedFacet.facetDefaultValue === selectedFacet.facetValue) {
selectedFacet = null;
}
}
return selectedFacet;
}, [selectedFacets]); // eslint-disable-line
const getFormattedValuesToDisplay = (facet, selectedFacet) => {
let fromV;
let toV;
if (facet.FacetFieldType === DATE_AND_TIME) {
fromV = getFormattedDate(selectedFacet, 0);
toV = getFormattedDate(selectedFacet, 1);
}
else {
fromV = selectedFacet ? selectedFacet.facetValue.split(RANGE_SEPARATOR)[0] : '';
toV = selectedFacet ? selectedFacet.facetValue.split(RANGE_SEPARATOR)[1] : '';
}
return [fromV, toV];
};
return (_jsxs(React.Fragment, { children: [(facet.FacetElements.length || SearchFacetModelExtensions.ShowNumberCustomRange(facet) || SearchFacetModelExtensions.ShowDateCustomRanges(facet)) && _jsxs(_Fragment, { children: [_jsx("h4", { className: "h6 fw-normal mt-3", children: facet.FacetTitle }), _jsx("ul", { className: "list-unstyled mb-0", id: `facets-group-list-${facet.FacetFieldName}`, "data-facet-type": facet.FacetFieldType, children: facet.FacetElements.map((facetElement, idx) => {
value++;
const hideElement = (value > defaultFacetsCollapseCount)
&& viewProps.isShowMoreLessButtonActive
&& moreLessLabel['isShowMoreSelected'] === true;
const encodedName = facet.FacetFieldName || '';
const encodedValue = facetElement.FacetValue || '';
const checkboxId = getCheckboxId(encodedName, encodedValue);
const selectedFacet = selectedFacets[checkboxId];
return (_jsxs("li", { className: hideElement ? 'd-none' : 'd-flex', children: [_jsx("input", { type: "checkbox", onChange: (e) => facetCheckboxChanged(e, encodedName, encodedValue, facetElement.FacetLabel), id: checkboxId, "data-facet-key": encodedName, "data-facet-value": encodedValue, checked: checkboxChecked(selectedFacet) }), _jsx("label", { htmlFor: checkboxId, id: `facet-${encodedName}-${encodedValue}`, className: "ps-1", children: facetElement.FacetLabel }), viewProps.displayItemCount && _jsx("span", { className: "small text-muted ps-1", children: `(${facetElement.FacetCount})` })] }, idx));
}) })] }), (facet.FacetElements.length > defaultFacetsCollapseCount && viewProps.isShowMoreLessButtonActive) &&
_jsx("button", { onClick: showMoreLessClick, type: "button", className: "btn btn-link p-0 text-decoration-none", "data-facet-type": facet.FacetFieldName, id: `show-more-less-${facet.FacetFieldName}`, children: moreLessLabel['labelToDisplay'] }), (SearchFacetModelExtensions.ShowNumberCustomRange(facet) || SearchFacetModelExtensions.ShowDateCustomRanges(facet)) &&
(() => {
const rangeFacet = facet.FacetElements.find(x => x.FacetValue?.includes(RANGE_SEPARATOR));
const selectedFacet = getSelectedFacet(rangeFacet);
const [fromV, toV] = getFormattedValuesToDisplay(facet, selectedFacet);
return (_jsx(FacetCustomRange, { facet: facet, facetElement: rangeFacet || {}, fromValue: fromV, toValue: toV, selectedFacets: selectedFacets, customRangeApplied: customRangeApplied }));
})()] }));
}