@wix/design-system
Version:
@wix/design-system
37 lines • 2.46 kB
JavaScript
import React from 'react';
import Text from '../Text';
import { dataHooks } from './constants';
import Tab from './Tab';
import { st, classes, vars } from './CardFolderTabs.st.css.js';
import { withFocusable } from '../common/Focusable';
const tabButton = ({ className, id, name, disabled, selected, maxTabWidth, onTabChange, focusableOnFocus, focusableOnBlur, fluid, ellipsis, size, beforeSelected, afterSelected, }) => {
return (React.createElement("button", { "data-hook": dataHooks.tabButton(id), className: st(classes.button, {
selected,
disabled,
fluid,
beforeSelected,
afterSelected,
}, className), style: fluid ? {} : { [vars['maxWidth']]: maxTabWidth }, onClick: () => onTabChange(id), disabled: disabled, key: id, onFocus: focusableOnFocus, onBlur: focusableOnBlur },
React.createElement(Text, { dataHook: dataHooks.tabText(id), ellipsis: ellipsis, className: classes.buttonText, size: size }, name)));
};
const TabButton = withFocusable(tabButton);
class CardFolderTabs extends React.PureComponent {
render() {
const { dataHook, className, children, activeId, maxTabWidth, onTabChange, fluid, ellipsis, size, } = this.props;
const cardFolderTabs = Array.isArray(children) ? children : [children];
const selectedTabIndex = cardFolderTabs.findIndex(tab => activeId === tab.props.id);
return (React.createElement("div", { className: st(classes.root, { fluid }, className), "data-hook": dataHook },
React.createElement("div", { "data-hook": dataHooks.header, className: classes.headerWrapper }, cardFolderTabs.map(({ props }, index) => (React.createElement(TabButton, { key: props.id, ...props, selected: activeId === props.id, beforeSelected: index === selectedTabIndex - 1, afterSelected: index === selectedTabIndex + 1, maxTabWidth: maxTabWidth, fluid: fluid, ellipsis: ellipsis, size: size, onTabChange: typeof onTabChange === 'function' ? onTabChange : undefined })))),
React.createElement("div", { "data-hook": dataHooks.content, className: classes.tabContentWrapper }, cardFolderTabs.filter(tab => activeId === tab.props.id))));
}
}
CardFolderTabs.displayName = 'CardFolderTabs';
CardFolderTabs.defaultProps = {
maxTabWidth: '138px',
ellipsis: true,
size: 'medium',
fluid: false,
};
CardFolderTabs.Tab = Tab;
export default CardFolderTabs;
//# sourceMappingURL=CardFolderTabs.js.map