@wix/design-system
Version:
@wix/design-system
35 lines • 1.87 kB
JavaScript
import React, { useMemo } from 'react';
import pick from '../../../utils/operators/pick';
import Text from '../../../Text';
import { classes, st } from '../../Tabs.st.css.js';
const TabItem = ({ item, onItemClick, isActive, dynamicProperties, size, type, alignment, width, itemMaxWidth, scrollOnOverflow, ...restProps }) => {
const { minWidth, maxWidth } = item;
const itemStyle = useMemo(() => {
let inlineStyle = {};
if (type === 'uniformSide' && width) {
inlineStyle = { width };
}
else if (type === 'compactSide' && itemMaxWidth) {
inlineStyle = { maxWidth: `${itemMaxWidth}pt` };
}
if (minWidth) {
inlineStyle.minWidth = minWidth;
}
if (maxWidth) {
inlineStyle.maxWidth = maxWidth;
}
return inlineStyle;
}, [type, width, itemMaxWidth, minWidth, maxWidth]);
const handleKeyDown = (e) => {
if (e.key === ' ' || e.key === 'Space' || e.key === 'Enter') {
e.preventDefault();
onItemClick?.(item);
}
};
return (React.createElement("button", { role: "tab", type: "button", "aria-selected": isActive, "data-active": isActive, "data-hook": item.dataHook, key: item.id, onClick: onItemClick ? () => onItemClick(item) : undefined, style: itemStyle, ...pick(restProps, dynamicProperties), className: st(classes.tab, { size, active: isActive, type, alignment }), onKeyDown: handleKeyDown },
item.prefix && React.createElement("div", { className: st(classes.affix) }, item.prefix),
React.createElement(Text, { size: size, className: classes.tabText, weight: "thin", ellipsis: !scrollOnOverflow }, item.title),
item.suffix && React.createElement("div", { className: st(classes.affix) }, item.suffix)));
};
export default TabItem;
//# sourceMappingURL=TabItem.js.map