@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 _includes = _interopRequireDefault(require("core-js-pure/stable/instance/includes.js"));
var _react = require("react");
var _clsx = 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 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 (0, _jsxRuntime.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 ((0, _react.isValidElement)(node)) {
    const children = node.props.children;
    if (typeof children === 'undefined') {
      return node;
    }
    return (0, _react.cloneElement)(node, undefined, highlightSearchValue(children, searchValue, `${keyPrefix}-children`));
  }
  return node;
}
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?.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 (0, _jsxRuntime.jsxs)(_react.Fragment, {
        children: [(0, _jsxRuntime.jsxs)("li", {
          className: (0, _clsx.clsx)('dnb-forms-field-multi-selection__item', item.children && 'dnb-forms-field-multi-selection__item--parent', (0, _includes.default)(tempValue).call(tempValue, 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 : (0, _includes.default)(tempValue).call(tempValue, 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) && (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: highlightSearchValue(item.text, searchValue, `${itemPath}-text`)
            }), item.description && (0, _jsxRuntime.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 && (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: (0, _clsx.clsx)('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