@boomerang-io/carbon-addons-boomerang-react
Version:
Carbon Addons for Boomerang apps
44 lines (41 loc) • 2.59 kB
JavaScript
import React, { useState } from 'react';
import { Checkbox } from '@carbon/react';
import { Information } from '@carbon/react/icons';
import TooltipHover from '../TooltipHover/TooltipHover.js';
import { prefix } from '../../internal/settings.js';
/*
IBM Confidential
694970X, 69497O0
© Copyright IBM Corp. 2022, 2024
*/
function CheckboxListComponent({ checkboxProps, disabled, helperText, id, initialSelectedItems = [], label, labelText, onChange, options, selectedItems: propsSelectedItems, tooltipClassName = `${prefix}--bmrg-checkbox-list__tooltip`, tooltipContent, tooltipProps = { direction: "top" }, }) {
const [stateSelectedItems, setSelectedItems] = useState(initialSelectedItems);
const selectedItems = propsSelectedItems || stateSelectedItems; // Externally controlled if selectedItems props exists
const handleCheckboxChange = (event, { checked: value, id }) => {
let newSelectedItems = [...stateSelectedItems];
if (value) {
newSelectedItems.push(id);
}
else {
newSelectedItems = newSelectedItems.filter((item) => item !== id);
}
setSelectedItems(newSelectedItems);
if (typeof onChange === "function") {
onChange(value, id, event, newSelectedItems);
}
};
const labelValue = label || labelText;
const labelTextId = !labelValue ? undefined : `${id}-label`;
return (React.createElement("div", { key: id, className: `${prefix}--bmrg-checkbox-list` },
labelValue && (React.createElement("div", { className: `${prefix}--bmrg-checkbox-list__title` },
React.createElement("div", { id: labelTextId, className: `${prefix}--label`, style: { marginBottom: ".3125rem" } }, labelValue),
tooltipContent && (React.createElement("div", { className: tooltipClassName },
React.createElement(TooltipHover, { ...tooltipProps, tooltipText: tooltipContent },
React.createElement(Information, { size: 16, fill: "currentColor" })))))),
helperText && React.createElement("div", { className: `${prefix}--form__helper-text` }, helperText),
React.createElement("div", { className: `${prefix}--bmrg-checkbox-list__list` }, options.map((option) => {
const checked = selectedItems.some((item) => item === option.id);
return (React.createElement(Checkbox, { disabled: disabled, key: option.id, id: option.id, labelText: option.labelText, onChange: handleCheckboxChange, checked: checked, ...checkboxProps }));
}))));
}
export { CheckboxListComponent as default };