@wix/design-system
Version:
@wix/design-system
36 lines • 1.99 kB
JavaScript
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { st, classes, cssStates } from './VerticalTabsIconItem.st.css.js';
import VerticalTabsContext from '../VerticalTabs/VerticalTabsContext';
import { DATA_HOOKS } from './VerticalTabsIconItem.constants';
import { withFocusable } from '../common/Focusable';
import { SIZE } from '../VerticalTabs/VerticalTabs.constants';
export const VerticalTabsIconItem = ({ id, dataHook = DATA_HOOKS.ICON_WRAPPER, disabled, focusableOnFocus, focusableOnBlur, tabIndex, 'aria-controls': ariaControls, 'aria-label': ariaLabel, children, }) => {
const { activeTabId, onChange, size, skin } = useContext(VerticalTabsContext);
const selected = id !== undefined && activeTabId !== undefined && id === activeTabId;
function onKeyDown(e) {
if ((e.key === ' ' || e.key === 'Space' || e.key === 'Enter') &&
id !== undefined) {
onChange?.(id);
}
}
return (React.createElement("div", { id: String(id), className: st(classes.root, cssStates({
size,
skin,
selected,
disabled,
})), "data-hook": dataHook, role: "tab", tabIndex: tabIndex ?? (disabled ? -1 : 0), "aria-disabled": disabled, "aria-selected": selected, "aria-controls": ariaControls, "aria-label": ariaLabel, onFocus: focusableOnFocus, onBlur: focusableOnBlur, onClick: !disabled && id !== undefined ? () => onChange?.(id) : undefined, onKeyDown: !disabled ? e => onKeyDown(e) : undefined }, children
? React.cloneElement(children, {
size: size === SIZE.MEDIUM ? 24 : 18,
})
: null));
};
VerticalTabsIconItem.propTypes = {
id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
dataHook: PropTypes.string,
disabled: PropTypes.bool,
'aria-controls': PropTypes.string,
children: PropTypes.any,
};
export default withFocusable(VerticalTabsIconItem);
//# sourceMappingURL=VerticalTabsIconItem.js.map