@boomerang-io/carbon-addons-boomerang-react
Version:
Carbon Addons for Boomerang apps
33 lines (30 loc) • 2.17 kB
JavaScript
import React from 'react';
import { Toggle } from '@carbon/react';
import { Information } from '@carbon/react/icons';
import TooltipHover from '../TooltipHover/TooltipHover.js';
import cx from 'classnames';
import { prefix } from '../../internal/settings.js';
/*
IBM Confidential
694970X, 69497O0
© Copyright IBM Corp. 2022, 2024
*/
function ToggleComponent({ helperText, id, invalid, invalidText, reversed, label, labelText, labelA = "", labelB = "", orientation = "horizontal", tooltipClassName = `${prefix}--bmrg-toggle__tooltip`, tooltipContent, tooltipProps = { direction: "top" }, ...toggleProps }) {
const labelValue = label || labelText;
const labelTextId = !labelValue ? undefined : `${id}-label`;
return (React.createElement("div", { className: `${prefix}--bmrg-toggle__container` },
React.createElement("div", { key: id, className: cx(`${prefix}--bmrg-toggle`, {
"--reversed": reversed,
"--vertical": orientation === "vertical",
}) },
labelValue && (React.createElement(React.Fragment, null,
React.createElement("div", { className: `${prefix}--bmrg-toggle__title` },
React.createElement("label", { id: labelTextId, className: `${prefix}--label`, htmlFor: id, style: { marginBottom: "0" } }, labelValue),
tooltipContent && (React.createElement("div", { className: tooltipClassName },
React.createElement(TooltipHover, { ...tooltipProps, tooltipText: tooltipContent },
React.createElement(Information, { size: 16, fill: "currentColor" }))))))),
React.createElement(Toggle, { id: id, "aria-labelledby": labelTextId, labelA: labelA, labelB: labelB, labelText: "", ...toggleProps })),
invalid && (React.createElement("div", { className: cx(`${prefix}--bmrg-toggle__invalid-text`, `${prefix}--form-requirement`), style: { marginBottom: "0" } }, invalidText)),
helperText && !invalid && (React.createElement("div", { className: `${prefix}--form__helper-text`, style: { marginBottom: "0" } }, helperText))));
}
export { ToggleComponent as default };