wix-style-react
Version:
wix-style-react
56 lines • 3.48 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import Text from '../Text';
import { dataHooks } from './constants';
import Tab from './Tab';
import { st, classes, vars } from './CardFolderTabs.st.css';
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.propTypes = {
/** Applies a data-hook HTML attribute that can be used in the tests. */
dataHook: PropTypes.string,
/** Specifies a CSS class name to be appended to the component’s root element. */
className: PropTypes.string,
/** Specifies an id of a currently visible tab. */
activeId: PropTypes.string.isRequired,
/** Defines a callback function which is called on tab change. An id of a newly selected tab is passed as a parameter. */
onTabChange: PropTypes.func,
/** Defines a maximum width of a tab button. */
maxTabWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
/** Stretches tabs to fill a 100% of a parent container width */
fluid: PropTypes.bool,
/** Specifies whether text that exceeds tab width is truncated with ellipsis. If false, text will wrap to another line. */
ellipsis: PropTypes.bool,
/** Controls tab label font size */
size: PropTypes.oneOf(['medium', 'small']),
};
CardFolderTabs.defaultProps = {
maxTabWidth: '138px',
ellipsis: true,
size: 'medium',
fluid: false,
};
CardFolderTabs.Tab = Tab;
export default CardFolderTabs;
//# sourceMappingURL=CardFolderTabs.js.map