@boomerang-io/carbon-addons-boomerang-react
Version:
Carbon Addons for Boomerang apps
43 lines (40 loc) • 3.06 kB
JavaScript
import React from 'react';
import { RadioButtonGroup, RadioButton } 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 RadioGroupComponent({ defaultSelected, disabled, helperText, id, label, labelText, name, onChange, options, orientation, radioGroupProps, radioButtonProps, tooltipClassName = `${prefix}--bmrg-radio-group__tooltip`, tooltipContent, tooltipProps = { direction: "top" }, value, columnHeight = "6rem", verticalWrapped = false, }) {
const labelValue = label || labelText;
const labelTextId = !labelValue ? undefined : `${id}-label`;
const isVertical = orientation === "vertical";
const hasVerticalHelperText = isVertical && helperText;
const hasHorizontalHelperText = !isVertical && helperText;
// add "title" attribute to radio buttons labels so they show a tooltip with the content
React.useEffect(() => {
if (Array.isArray(options)) {
options.forEach((option, index) => {
const inputElement = document.getElementById(option.value);
if (Boolean(inputElement) && inputElement !== null) {
inputElement.parentNode?.children[1]?.children[1]?.setAttribute("title", options[index].labelText);
}
});
}
});
return (
//Defined a css var --height to be used on the wrapped container to determine the number of radios displayed in each column
React.createElement("div", { key: id, className: `${prefix}--bmrg-radio-group`, style: { ["--height"]: columnHeight } },
labelValue && (React.createElement("div", { className: `${prefix}--bmrg-radio-group__title` },
React.createElement("div", { id: labelTextId, className: `${prefix}--label` }, labelValue),
tooltipContent && (React.createElement("div", { className: tooltipClassName },
React.createElement(TooltipHover, { ...tooltipProps, tooltipText: tooltipContent },
React.createElement(Information, { size: 16, fill: "currentColor" })))))),
hasVerticalHelperText && (React.createElement("div", { className: `${prefix}--form__helper-text`, style: { marginBottom: "0.375rem" } }, helperText)),
React.createElement(RadioButtonGroup, { className: isVertical && verticalWrapped ? `${prefix}--bmrg-radio-group__container` : undefined, defaultSelected: defaultSelected, disabled: disabled, name: name, onChange: onChange, orientation: orientation, valueSelected: value, ...radioGroupProps }, options.map((option) => (React.createElement(RadioButton, { disabled: option.disabled, id: option.value, key: option.value, labelText: option.labelText, value: option.value, ...radioButtonProps })))),
hasHorizontalHelperText && React.createElement("div", { className: `${prefix}--form__helper-text` }, helperText)));
}
export { RadioGroupComponent as default };