@carbon/react
Version:
React components for the Carbon Design System
112 lines (110 loc) • 3.96 kB
JavaScript
/**
* Copyright IBM Corp. 2016, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import { usePrefix } from "../../internal/usePrefix.js";
import { Text } from "../Text/Text.js";
import { useControllableState } from "../../internal/useControllableState.js";
import classNames from "classnames";
import { useRef } from "react";
import PropTypes from "prop-types";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/components/Toggle/Toggle.tsx
/**
* Copyright IBM Corp. 2021, 2023
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
function Toggle({ "aria-labelledby": ariaLabelledby, className, defaultToggled = false, disabled = false, hideLabel = false, id, labelA = "Off", labelB = "On", labelText, onClick, onToggle, readOnly, size = "md", toggled, ...other }) {
const prefix = usePrefix();
const buttonElement = useRef(null);
const [checked, setChecked] = useControllableState({
value: toggled,
onChange: onToggle,
defaultValue: defaultToggled
});
function handleClick(e) {
if (!readOnly) setChecked(!checked);
if (onClick) onClick(e);
}
const isSm = size === "sm";
const sideLabel = hideLabel ? labelText : checked ? labelB : labelA;
const renderSideLabel = !(hideLabel && !labelText);
const LabelComponent = labelText ? "label" : "div";
const wrapperClasses = classNames(`${prefix}--toggle`, {
[`${prefix}--toggle--disabled`]: disabled,
[`${prefix}--toggle--readonly`]: readOnly
}, className);
const labelTextClasses = classNames(`${prefix}--toggle__label-text`, { [`${prefix}--visually-hidden`]: hideLabel });
const appearanceClasses = classNames(`${prefix}--toggle__appearance`, { [`${prefix}--toggle__appearance--sm`]: isSm });
const switchClasses = classNames(`${prefix}--toggle__switch`, { [`${prefix}--toggle__switch--checked`]: checked });
const labelId = `${id}_label`;
return /* @__PURE__ */ jsxs("div", {
className: wrapperClasses,
onClick: !labelText ? (e) => {
if (buttonElement.current && e.target !== buttonElement.current && !disabled) {
handleClick(e);
buttonElement.current.focus();
}
} : void 0,
children: [/* @__PURE__ */ jsx("button", {
...other,
ref: buttonElement,
id,
className: `${prefix}--toggle__button`,
role: "switch",
type: "button",
"aria-checked": checked,
"aria-labelledby": ariaLabelledby ?? (labelText ? labelId : void 0),
disabled,
onClick: handleClick
}), /* @__PURE__ */ jsxs(LabelComponent, {
id: labelId,
htmlFor: ariaLabelledby ? void 0 : id,
className: `${prefix}--toggle__label`,
children: [labelText && /* @__PURE__ */ jsx(Text, {
className: labelTextClasses,
children: labelText
}), /* @__PURE__ */ jsxs("div", {
className: appearanceClasses,
children: [/* @__PURE__ */ jsx("div", {
className: switchClasses,
children: isSm && !readOnly && /* @__PURE__ */ jsx("svg", {
"aria-hidden": "true",
focusable: "false",
className: `${prefix}--toggle__check`,
width: "6px",
height: "5px",
viewBox: "0 0 6 5",
children: /* @__PURE__ */ jsx("path", { d: "M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" })
})
}), renderSideLabel && /* @__PURE__ */ jsx(Text, {
className: `${prefix}--toggle__text`,
"aria-hidden": "true",
children: sideLabel
})]
})]
})]
});
}
Toggle.propTypes = {
"aria-labelledby": PropTypes.string,
className: PropTypes.string,
defaultToggled: PropTypes.bool,
disabled: PropTypes.bool,
hideLabel: PropTypes.bool,
id: PropTypes.string.isRequired,
labelA: PropTypes.node,
labelB: PropTypes.node,
labelText: PropTypes.string,
onClick: PropTypes.func,
onToggle: PropTypes.func,
readOnly: PropTypes.bool,
size: PropTypes.oneOf(["sm", "md"]),
toggled: PropTypes.bool
};
//#endregion
export { Toggle as default };