@carbon/react
Version:
React components for the Carbon Design System
113 lines (111 loc) • 3.4 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_noopFn = require("../../internal/noopFn.js");
const require_index = require("../IconButton/index.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/Switch/IconSwitch.tsx
/**
* Copyright IBM Corp. 2016, 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.
*/
const IconSwitch = (0, react.forwardRef)((props, ref) => {
const { align, children, className, disabled, enterDelayMs, index, leaveDelayMs = 0, name, onClick = require_noopFn.noopFn, onKeyDown = require_noopFn.noopFn, selected = false, size, text, ...other } = props;
const prefix = require_usePrefix.usePrefix();
const [isHovered, setIsHovered] = (0, react.useState)(false);
const handleClick = (event) => {
event.preventDefault();
onClick({
index,
name,
text
});
};
const handleKeyDown = (event) => {
onKeyDown({
index,
name,
text,
key: event.key || event.which
});
};
const handleMouseEnter = () => {
setIsHovered(true);
};
const handleMouseLeave = () => {
setIsHovered(false);
};
const classes = (0, classnames.default)(className, `${prefix}--content-switcher-btn`, { [`${prefix}--content-switcher--selected`]: selected });
const iconButtonClasses = (0, classnames.default)(`${prefix}--content-switcher-popover__wrapper`, {
[`${prefix}--content-switcher-popover--selected`]: selected,
[`${prefix}--content-switcher-popover--disabled`]: disabled
});
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.IconButton, {
label: text,
type: "button",
ref,
role: "tab",
tabIndex: selected || isHovered ? 0 : -1,
onMouseEnter: handleMouseEnter,
onMouseLeave: handleMouseLeave,
onFocus: handleMouseEnter,
onBlur: handleMouseLeave,
"aria-selected": selected,
"aria-label": text,
wrapperClasses: iconButtonClasses,
...other,
align,
className: classes,
disabled,
enterDelayMs,
leaveDelayMs,
onClick: handleClick,
onKeyDown: handleKeyDown,
size,
children
});
});
IconSwitch.displayName = "IconSwitch";
IconSwitch.propTypes = {
align: prop_types.default.oneOf([
"top",
"top-left",
"top-right",
"bottom",
"bottom-left",
"bottom-right",
"left",
"right"
]),
children: prop_types.default.node,
className: prop_types.default.string,
disabled: prop_types.default.bool,
enterDelayMs: prop_types.default.number,
index: prop_types.default.number,
leaveDelayMs: prop_types.default.number,
name: prop_types.default.oneOfType([prop_types.default.string, prop_types.default.number]),
onClick: prop_types.default.func,
onKeyDown: prop_types.default.func,
selected: prop_types.default.bool,
size: prop_types.default.oneOf([
"sm",
"md",
"lg"
]),
text: prop_types.default.string
};
//#endregion
exports.default = IconSwitch;