wix-style-react
Version:
wix-style-react
51 lines • 1.95 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import pick from '../../../utils/operators/pick';
import Text from '../../../Text';
import * as TabPropTypes from '../constants/tab-prop-types';
import { classes, st } from '../../Tabs.st.css';
class TabItem extends React.Component {
getItemStyle() {
const { type, width, itemMaxWidth, item: { minWidth, maxWidth }, alignment, } = this.props;
const inlineStyle = {
uniformSide: { width },
compactSide: itemMaxWidth ? { maxWidth: `${itemMaxWidth}pt` } : {},
}[type] || {};
if (minWidth) {
inlineStyle.minWidth = minWidth;
}
if (maxWidth) {
inlineStyle.maxWidth = maxWidth;
}
if (alignment) {
inlineStyle.textAlign = alignment;
}
return inlineStyle;
}
render() {
const { item, onItemClick, isActive, dynamicProperties, size } = this.props;
const containerProps = {
key: item.id,
onClick: () => onItemClick(item),
className: st(classes.tab, {
size,
active: isActive,
}),
style: this.getItemStyle(),
...pick(this.props, dynamicProperties),
};
return (React.createElement("button", { role: "tab", type: "button", "aria-selected": isActive, "data-active": isActive, "data-hook": item.dataHook, ...containerProps, ref: this.createRef },
React.createElement(Text, { size: size, className: classes.tabText, weight: "thin", ellipsis: true }, item.title)));
}
}
TabItem.propTypes = {
itemMaxWidth: PropTypes.number,
isActive: PropTypes.bool,
item: TabPropTypes.item.isRequired,
onItemClick: TabPropTypes.onClick,
type: TabPropTypes.type,
width: TabPropTypes.width,
dynamicProperties: PropTypes.array,
};
export default TabItem;
//# sourceMappingURL=index.js.map