@boomerang-io/carbon-addons-boomerang-react/dist/cjs/components/DecisionButtons/DecisionButtons.js

Carbon Addons for Boomerang apps

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
var icons = require('@carbon/react/icons');
var cx = require('classnames');
var TooltipHover = require('../TooltipHover/TooltipHover.js');
var settings = require('../../internal/settings.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var cx__default = /*#__PURE__*/_interopDefault(cx);

/*
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 = `${settings.prefix}--bmrg-radio-group__tooltip`, tooltipContent, tooltipProps, selectedItem: propsSelectedItem, }) {
    const [stateSelected, setSelected] = React.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__default.default(`${settings.prefix}--bmrg-decision-button-wrapper`, {
                [`${settings.prefix}--bmrg-decision-button-wrapper--${orientation}`]: orientation === "vertical",
            });
            const contentClasses = cx__default.default(`${settings.prefix}--bmrg-decision-button`, {
                [`${settings.prefix}--bmrg-decision-button--positive`]: type === ButtonTypes.Positive,
                [`${settings.prefix}--bmrg-decision-button--negative`]: type === ButtonTypes.Negative,
            });
            return (React__default.default.createElement("label", { className: wrapperClasses, key: `${name}-${value}-${index}`, htmlFor: `${name}-${value}-${index}` },
                React__default.default.createElement("input", { checked: selected, id: `${name}-${value}-${index}`, name: name, onClick: handleChange, readOnly: true, type: "radio", value: value }),
                React__default.default.createElement("div", { className: contentClasses },
                    React__default.default.createElement("span", null, label),
                    Icon && React__default.default.createElement(Icon, { className: `${settings.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__default.default(`${settings.prefix}--radio-button-group`, className, {
        [`${settings.prefix}--radio-button-group--${orientation}`]: isVertical,
        [`${settings.prefix}--radio-button-group--disabled`]: disabled,
    });
    const labelValue = label || labelText;
    const labelTextId = !labelValue ? undefined : `${id}-label`;
    return (React__default.default.createElement("div", { className: `${settings.prefix}--bmrg-decision-buttons` },
        labelValue && (React__default.default.createElement("div", { className: `${settings.prefix}--bmrg-decision-buttons__title` },
            React__default.default.createElement("div", { id: labelTextId, className: `${settings.prefix}--label` }, labelValue),
            tooltipContent && (React__default.default.createElement("div", { className: tooltipClassName },
                React__default.default.createElement(TooltipHover.default, { ...tooltipProps, onClick: (e) => e.preventDefault(), tooltipText: tooltipContent },
                    React__default.default.createElement(icons.Information, { size: 16, fill: "currentColor" })))))),
        hasVerticalHelperText && React__default.default.createElement("div", { className: `${settings.prefix}--form__helper-text`, style: { marginBottom: "0.5rem" } }, helperText),
        React__default.default.createElement("div", { className: `${settings.prefix}--form-item` },
            React__default.default.createElement("div", { className: wrapperClasses }, getDecisionButtons())),
        hasHorizontalHelperText && React__default.default.createElement("div", { className: `${settings.prefix}--form__helper-text` }, helperText)));
}

exports.default = DecisionButtons;