@dnb/eufemia/cjs/extensions/forms/Field/MultiSelection/MultiSelectionItemList.js

DNB Eufemia Design System UI Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.MultiSelectionItemList = MultiSelectionItemList;
var _react = require("react");
var _clsx = _interopRequireDefault(require("clsx"));
var _index = require("../../../../components/index.js");
var _ScrollView = _interopRequireDefault(require("../../../../fragments/scroll-view/ScrollView.js"));
var _index2 = require("../../../../elements/index.js");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function MultiSelectionItemList({
  disabled,
  filteredItems,
  tempValue,
  searchValue,
  showSelectAll,
  htmlAttributes,
  translation,
  getParentState,
  onToggleItem,
  onToggleParent,
  onToggleSelectAll,
  selectableFilteredFlat,
  allFilteredSelected,
  someFilteredSelected
}) {
  const handleItemClick = (0, _react.useCallback)((event, item) => {
    if (disabled || item.disabled) {
      return;
    }
    const target = event.target;
    if (target !== null && target !== void 0 && target.closest('.dnb-checkbox__input') || target !== null && target !== void 0 && 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 (0, _jsxRuntime.jsxs)(_react.Fragment, {
        children: [(0, _jsxRuntime.jsxs)("li", {
          className: (0, _clsx.default)('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: [(0, _jsxRuntime.jsx)(_index.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) && (0, _jsxRuntime.jsxs)("div", {
            className: "dnb-forms-field-multi-selection__item-details",
            children: [item.text && (0, _jsxRuntime.jsx)("span", {
              className: "dnb-t__size--small dnb-forms-field-multi-selection__item-text",
              children: item.text
            }), item.description && (0, _jsxRuntime.jsx)("span", {
              className: "dnb-t__size--small dnb-forms-field-multi-selection__item-description",
              children: item.description
            })]
          })]
        }), item.children && item.children.length > 0 && (0, _jsxRuntime.jsx)("ul", {
          className: "dnb-forms-field-multi-selection__nested-items",
          children: renderItems(item.children, depth + 1, itemPath)
        })]
      }, item.value);
    });
  };
  return (0, _jsxRuntime.jsx)(_ScrollView.default, {
    className: 'dnb-forms-field-multi-selection__items',
    children: (0, _jsxRuntime.jsxs)("ul", {
      className: "dnb-forms-field-multi-selection__list",
      children: [showSelectAll && selectableFilteredFlat.length > 0 && (0, _jsxRuntime.jsx)("li", {
        className: "dnb-forms-field-multi-selection__item dnb-forms-field-multi-selection__item--select-all",
        children: (0, _jsxRuntime.jsx)(_index.Checkbox, {
          checked: allFilteredSelected,
          indeterminate: someFilteredSelected,
          onChange: onToggleSelectAll,
          disabled: disabled,
          label: translation.selectAll,
          className: "dnb-forms-field-multi-selection__checkbox"
        })
      }), filteredItems.length === 0 && searchValue ? (0, _jsxRuntime.jsx)("li", {
        className: "dnb-forms-field-multi-selection__no-options",
        children: (0, _jsxRuntime.jsx)(_index2.P, {
          className: "dnb-forms-field-multi-selection__no-options-text",
          children: translation.noOptions
        })
      }) : renderItems(filteredItems)]
    })
  });
}
//# sourceMappingURL=MultiSelectionItemList.js.map