@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
64 lines (63 loc) • 2.01 kB
JavaScript
"use client";
import { useCallback, useContext, useMemo } from 'react';
import Checkbox from "../checkbox/Checkbox.js";
import Flex from "../flex/Flex.js";
import { FilterContext, FilterItemContext } from "./FilterContext.js";
import FilterItem from "./FilterItem.js";
import { jsx as _jsx } from "react/jsx-runtime";
function FilterSelection({
label,
filterKey,
defaultOpen,
data: options
}) {
const context = useContext(FilterContext);
if (!context) {
throw new Error('Filter.Selection must be used inside a Filter.Root.');
}
const {
state,
setFilter,
removeFilter
} = context;
const itemContext = useContext(FilterItemContext);
const prefix = `${filterKey}/`;
const currentValue = useMemo(() => {
return Object.keys(state.filters).filter(key => key.startsWith(prefix)).map(key => key.slice(prefix.length));
}, [state.filters, prefix]);
const handleChange = useCallback((optionValue, checked) => {
const key = `${prefix}${optionValue}`;
if (checked) {
var _option$label;
const option = options.find(opt => opt.value === optionValue);
setFilter(key, {
value: optionValue,
label: (_option$label = option?.label) !== null && _option$label !== void 0 ? _option$label : optionValue,
categoryLabel: label
});
} else {
if (itemContext) {
setFilter(key, undefined);
} else {
removeFilter(key);
}
}
}, [itemContext, setFilter, removeFilter, prefix, label, options]);
return _jsx(FilterItem, {
label: label,
filterKey: filterKey,
defaultOpen: defaultOpen,
children: _jsx(Flex.Vertical, {
gap: "small",
children: options.map(option => _jsx(Checkbox, {
label: option.label,
checked: currentValue.includes(option.value),
onChange: ({
checked
}) => handleChange(option.value, checked)
}, option.value))
})
});
}
export default FilterSelection;
//# sourceMappingURL=FilterSelection.js.map