@carbon/react
Version:
React components for the Carbon Design System
109 lines (107 loc) • 2.9 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 { noopFn } from "../../internal/noopFn.js";
import { IconButton } from "../IconButton/index.js";
import classNames from "classnames";
import { forwardRef, useState } from "react";
import PropTypes from "prop-types";
import { jsx } from "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 = forwardRef((props, ref) => {
const { align, children, className, disabled, enterDelayMs, index, leaveDelayMs = 0, name, onClick = noopFn, onKeyDown = noopFn, selected = false, size, text, ...other } = props;
const prefix = usePrefix();
const [isHovered, setIsHovered] = 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 = classNames(className, `${prefix}--content-switcher-btn`, { [`${prefix}--content-switcher--selected`]: selected });
const iconButtonClasses = classNames(`${prefix}--content-switcher-popover__wrapper`, {
[`${prefix}--content-switcher-popover--selected`]: selected,
[`${prefix}--content-switcher-popover--disabled`]: disabled
});
return /* @__PURE__ */ jsx(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: PropTypes.oneOf([
"top",
"top-left",
"top-right",
"bottom",
"bottom-left",
"bottom-right",
"left",
"right"
]),
children: PropTypes.node,
className: PropTypes.string,
disabled: PropTypes.bool,
enterDelayMs: PropTypes.number,
index: PropTypes.number,
leaveDelayMs: PropTypes.number,
name: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
onClick: PropTypes.func,
onKeyDown: PropTypes.func,
selected: PropTypes.bool,
size: PropTypes.oneOf([
"sm",
"md",
"lg"
]),
text: PropTypes.string
};
//#endregion
export { IconSwitch as default };