@carbon/react
Version:
React components for the Carbon Design System
116 lines (114 loc) • 4.68 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.
*/
const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_usePrefix = require("../../internal/usePrefix.js");
const require_Text = require("../Text/Text.js");
const require_useControllableState = require("../../internal/useControllableState.js");
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let react_jsx_runtime = require("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 = require_usePrefix.usePrefix();
const buttonElement = (0, react.useRef)(null);
const [checked, setChecked] = require_useControllableState.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 = (0, classnames.default)(`${prefix}--toggle`, {
[`${prefix}--toggle--disabled`]: disabled,
[`${prefix}--toggle--readonly`]: readOnly
}, className);
const labelTextClasses = (0, classnames.default)(`${prefix}--toggle__label-text`, { [`${prefix}--visually-hidden`]: hideLabel });
const appearanceClasses = (0, classnames.default)(`${prefix}--toggle__appearance`, { [`${prefix}--toggle__appearance--sm`]: isSm });
const switchClasses = (0, classnames.default)(`${prefix}--toggle__switch`, { [`${prefix}--toggle__switch--checked`]: checked });
const labelId = `${id}_label`;
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
className: wrapperClasses,
onClick: !labelText ? (e) => {
if (buttonElement.current && e.target !== buttonElement.current && !disabled) {
handleClick(e);
buttonElement.current.focus();
}
} : void 0,
children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)(LabelComponent, {
id: labelId,
htmlFor: ariaLabelledby ? void 0 : id,
className: `${prefix}--toggle__label`,
children: [labelText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
className: labelTextClasses,
children: labelText
}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
className: appearanceClasses,
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: switchClasses,
children: isSm && !readOnly && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
"aria-hidden": "true",
focusable: "false",
className: `${prefix}--toggle__check`,
width: "6px",
height: "5px",
viewBox: "0 0 6 5",
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" })
})
}), renderSideLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
className: `${prefix}--toggle__text`,
"aria-hidden": "true",
children: sideLabel
})]
})]
})]
});
}
Toggle.propTypes = {
"aria-labelledby": prop_types.default.string,
className: prop_types.default.string,
defaultToggled: prop_types.default.bool,
disabled: prop_types.default.bool,
hideLabel: prop_types.default.bool,
id: prop_types.default.string.isRequired,
labelA: prop_types.default.node,
labelB: prop_types.default.node,
labelText: prop_types.default.string,
onClick: prop_types.default.func,
onToggle: prop_types.default.func,
readOnly: prop_types.default.bool,
size: prop_types.default.oneOf(["sm", "md"]),
toggled: prop_types.default.bool
};
//#endregion
exports.default = Toggle;