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

DNB Eufemia Design System UI Library

import { cloneElement, Fragment, isValidElement, 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";
function highlightText(text, searchValue, keyPrefix) {
  if (!searchValue || !text) {
    return text;
  }
  const escapedSearch = searchValue.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  const regex = new RegExp(`(${escapedSearch})`, 'gi');
  const exactRegex = new RegExp(`^${escapedSearch}$`, 'i');
  const parts = text.split(regex);
  if (parts.length === 1) {
    return text;
  }
  return parts.map((part, index) => {
    if (exactRegex.test(part)) {
      return _jsx("mark", {
        className: "dnb-forms-field-multi-selection__highlighting",
        children: part
      }, `${keyPrefix}-${index}`);
    }
    return part;
  });
}
function highlightSearchValue(node, searchValue, keyPrefix) {
  if (!searchValue) {
    return node;
  }
  if (Array.isArray(node)) {
    return node.map((child, index) => highlightSearchValue(child, searchValue, `${keyPrefix}-${index}`));
  }
  if (typeof node === 'string' || typeof node === 'number') {
    return highlightText(String(node), searchValue, keyPrefix);
  }
  if (isValidElement(node)) {
    const children = node.props.children;
    if (typeof children === 'undefined') {
      return node;
    }
    return cloneElement(node, undefined, highlightSearchValue(children, searchValue, `${keyPrefix}-children`));
  }
  return node;
}
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: highlightSearchValue(item.title, searchValue, `${itemPath}-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: highlightSearchValue(item.text, searchValue, `${itemPath}-text`)
            }), item.description && _jsx("span", {
              className: "dnb-t__size--small dnb-forms-field-multi-selection__item-description",
              children: highlightSearchValue(item.description, searchValue, `${itemPath}-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: clsx('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