@boomerang-io/carbon-addons-boomerang-react
Version:
Carbon Addons for Boomerang apps
71 lines (68 loc) • 4.18 kB
JavaScript
import React, { useState } from 'react';
import { Information } from '@carbon/react/icons';
import cx from 'classnames';
import TooltipHover from '../TooltipHover/TooltipHover.js';
import { prefix } from '../../internal/settings.js';
/*
IBM Confidential
694970X, 69497O0
© Copyright IBM Corp. 2022, 2024
*/
const ButtonTypes = {
Negative: "negative",
Positive: "positive",
};
function DecisionButtons({ canUncheck = false, className, defaultSelected, disabled, helperText, id, items, label, labelPosition = "right", labelText, name, onChange = () => void 0, orientation = "horizontal", tooltipClassName = `${prefix}--bmrg-radio-group__tooltip`, tooltipContent, tooltipProps, selectedItem: propsSelectedItem, }) {
const [stateSelected, setSelected] = useState(propsSelectedItem || defaultSelected);
const selectedItem = propsSelectedItem ?? stateSelected; // Externally controlled if value props exists
const getDecisionButtons = () => {
const children = items.map((item, index) => {
const { icon: Icon, label, type, value } = item;
const selected = value === selectedItem;
const wrapperClasses = cx(`${prefix}--bmrg-decision-button-wrapper`, {
[`${prefix}--bmrg-decision-button-wrapper--${orientation}`]: orientation === "vertical",
});
const contentClasses = cx(`${prefix}--bmrg-decision-button`, {
[`${prefix}--bmrg-decision-button--positive`]: type === ButtonTypes.Positive,
[`${prefix}--bmrg-decision-button--negative`]: type === ButtonTypes.Negative,
});
return (React.createElement("label", { className: wrapperClasses, key: `${name}-${value}-${index}`, htmlFor: `${name}-${value}-${index}` },
React.createElement("input", { checked: selected, id: `${name}-${value}-${index}`, name: name, onClick: handleChange, readOnly: true, type: "radio", value: value }),
React.createElement("div", { className: contentClasses },
React.createElement("span", null, label),
Icon && React.createElement(Icon, { className: `${prefix}--bmrg-decision-button-icon` }))));
});
return children;
};
const handleChange = (evt) => {
const { value } = evt.target;
if (value !== selectedItem) {
setSelected(value);
onChange && onChange(value, name, evt);
}
else if (canUncheck) {
setSelected("");
onChange && onChange("", name, evt);
}
};
const isVertical = orientation === "vertical";
const hasVerticalHelperText = isVertical && helperText;
const hasHorizontalHelperText = !isVertical && helperText;
const wrapperClasses = cx(`${prefix}--radio-button-group`, className, {
[`${prefix}--radio-button-group--${orientation}`]: isVertical,
[`${prefix}--radio-button-group--disabled`]: disabled,
});
const labelValue = label || labelText;
const labelTextId = !labelValue ? undefined : `${id}-label`;
return (React.createElement("div", { className: `${prefix}--bmrg-decision-buttons` },
labelValue && (React.createElement("div", { className: `${prefix}--bmrg-decision-buttons__title` },
React.createElement("div", { id: labelTextId, className: `${prefix}--label` }, labelValue),
tooltipContent && (React.createElement("div", { className: tooltipClassName },
React.createElement(TooltipHover, { ...tooltipProps, onClick: (e) => e.preventDefault(), tooltipText: tooltipContent },
React.createElement(Information, { size: 16, fill: "currentColor" })))))),
hasVerticalHelperText && React.createElement("div", { className: `${prefix}--form__helper-text`, style: { marginBottom: "0.5rem" } }, helperText),
React.createElement("div", { className: `${prefix}--form-item` },
React.createElement("div", { className: wrapperClasses }, getDecisionButtons())),
hasHorizontalHelperText && React.createElement("div", { className: `${prefix}--form__helper-text` }, helperText)));
}
export { DecisionButtons as default };