@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
93 lines • 4.03 kB
JavaScript
import { Fragment, useCallback } from 'react';
import clsx from 'clsx';
import { Checkbox } from "../../../../components/index.js";
import ScrollView from "../../../../fragments/scroll-view/ScrollView.js";
import { P } from "../../../../elements/index.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export function MultiSelectionItemList({
disabled,
filteredItems,
tempValue,
searchValue,
showSelectAll,
htmlAttributes,
translation,
getParentState,
onToggleItem,
onToggleParent,
onToggleSelectAll,
selectableFilteredFlat,
allFilteredSelected,
someFilteredSelected
}) {
const handleItemClick = useCallback((event, item) => {
if (disabled || item.disabled) {
return;
}
const target = event.target;
if (target?.closest('.dnb-checkbox__input') || target?.closest('.dnb-checkbox__label')) {
return;
}
if (item.children) {
onToggleParent(item);
return;
}
onToggleItem(item.value);
}, [disabled, onToggleItem, onToggleParent]);
const renderItems = (items, depth = 0, parentPath = '') => {
return items.map((item, index) => {
const itemPath = parentPath ? `${parentPath}-${index}` : `${index}`;
return _jsxs(Fragment, {
children: [_jsxs("li", {
className: clsx('dnb-forms-field-multi-selection__item', item.children && 'dnb-forms-field-multi-selection__item--parent', tempValue.includes(item.value) && 'dnb-forms-field-multi-selection__item--selected', item.disabled && 'dnb-forms-field-multi-selection__item--disabled', depth > 0 && `dnb-forms-field-multi-selection__item--level-${depth}`),
onClick: event => handleItemClick(event, item),
children: [_jsx(Checkbox, {
checked: item.children ? getParentState(item).checked : tempValue.includes(item.value),
indeterminate: item.children ? getParentState(item).indeterminate : false,
onChange: () => item.children ? onToggleParent(item) : onToggleItem(item.value),
disabled: disabled || item.disabled,
label: item.title,
className: "dnb-forms-field-multi-selection__checkbox",
...htmlAttributes
}), (item.text || item.description) && _jsxs("div", {
className: "dnb-forms-field-multi-selection__item-details",
children: [item.text && _jsx("span", {
className: "dnb-t__size--small dnb-forms-field-multi-selection__item-text",
children: item.text
}), item.description && _jsx("span", {
className: "dnb-t__size--small dnb-forms-field-multi-selection__item-description",
children: item.description
})]
})]
}), item.children && item.children.length > 0 && _jsx("ul", {
className: "dnb-forms-field-multi-selection__nested-items",
children: renderItems(item.children, depth + 1, itemPath)
})]
}, item.value);
});
};
return _jsx(ScrollView, {
className: 'dnb-forms-field-multi-selection__items',
children: _jsxs("ul", {
className: "dnb-forms-field-multi-selection__list",
children: [showSelectAll && selectableFilteredFlat.length > 0 && _jsx("li", {
className: "dnb-forms-field-multi-selection__item dnb-forms-field-multi-selection__item--select-all",
children: _jsx(Checkbox, {
checked: allFilteredSelected,
indeterminate: someFilteredSelected,
onChange: onToggleSelectAll,
disabled: disabled,
label: translation.selectAll,
className: "dnb-forms-field-multi-selection__checkbox"
})
}), filteredItems.length === 0 && searchValue ? _jsx("li", {
className: "dnb-forms-field-multi-selection__no-options",
children: _jsx(P, {
className: "dnb-forms-field-multi-selection__no-options-text",
children: translation.noOptions
})
}) : renderItems(filteredItems)]
})
});
}
//# sourceMappingURL=MultiSelectionItemList.js.map