@boomerang-io/carbon-addons-boomerang-react
Version:
Carbon Addons for Boomerang apps
43 lines (40 loc) • 2.53 kB
JavaScript
import React from 'react';
import { Information } from '@carbon/react/icons';
import cx from 'classnames';
import MultiSelectComboBox from './MultiSelect.js';
import TooltipHover from '../TooltipHover/TooltipHover.js';
import { prefix } from '../../internal/settings.js';
/*
IBM Confidential
694970X, 69497O0
© Copyright IBM Corp. 2022, 2024
*/
/**
* For now we expect that if the prop value is a csv string,
* then the items would be either in the key:value or value:label format.
* The prop value would contain either the keys in the key:value or values in the value:label.
*/
function getFilteredItems({ items, selectedItems }) {
return items.filter((item) => selectedItems.some((selectedItem) => selectedItem === item.key || selectedItem === item.value));
}
function ComboBoxMultiSelect({ disableClear = false, id, initialSelectedItems, items, label, labelText, selectedItems, titleText, tooltipClassName = `${prefix}--bmrg-multi-select__tooltip`, tooltipContent, tooltipProps = { direction: "top" }, ...multiSelectProps }) {
const labelValue = titleText || label || labelText;
let finalInitialSelectedItems = initialSelectedItems;
let finalSelectedItems = selectedItems;
/** Add support for csv strings */
if (typeof finalInitialSelectedItems === "string") {
const initialSelectedItemsArray = finalInitialSelectedItems.split(",");
finalInitialSelectedItems = getFilteredItems({ items, selectedItems: initialSelectedItemsArray });
}
if (typeof finalSelectedItems === "string") {
const selectedItemsArray = finalSelectedItems.split(",");
finalSelectedItems = getFilteredItems({ items, selectedItems: selectedItemsArray });
}
return (React.createElement("div", { key: id, className: cx(`${prefix}--bmrg-multi-select`, { "--disableClear": disableClear }) },
React.createElement(MultiSelectComboBox, { id: id, titleText: labelValue && (React.createElement("div", { style: { display: "flex" } },
React.createElement("div", null, titleText || labelText || label),
tooltipContent && (React.createElement("div", { className: tooltipClassName },
React.createElement(TooltipHover, { ...tooltipProps, tooltipText: tooltipContent },
React.createElement(Information, { size: 16, fill: "currentColor" })))))), initialSelectedItems: finalInitialSelectedItems, selectedItems: finalSelectedItems, items: items, ...multiSelectProps })));
}
export { ComboBoxMultiSelect as default };