wix-style-react
Version:
wix-style-react
101 lines • 4.47 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import Text from '../Text';
import TextButton from '../TextButton';
import { st, classes } from './VerticalTabsItem.st.css';
import VerticalTabsContext from '../VerticalTabs/VerticalTabsContext';
import { withFocusable } from '../common/Focusable';
import dataHooks from './dataHooks';
/** Internal Component to be used by VerticalTabs */
class VerticalTabsItem extends React.PureComponent {
constructor() {
super(...arguments);
this._onKeyDown = e => {
const { id } = this.props;
if (e.key === 'Enter') {
this.context.onChange(id);
}
};
}
_renderText() {
const { children, type, disabled } = this.props;
const { size } = this.context;
const isTitle = type === 'title';
const isTiny = size === 'tiny';
const getTextSize = () => {
if (isTiny) {
if (isTitle) {
return 'tiny';
}
return 'small';
}
if (isTitle) {
return 'small';
}
return size;
};
return type === 'action' ? (React.createElement(TextButton, { className: classes.textButton, weigh: "thin", size: isTiny ? 'small' : size, dataHook: dataHooks.verticalTabsItemText }, children)) : (React.createElement(Text, { className: classes.text, light: isTitle, secondary: isTitle, skin: disabled ? 'disabled' : 'standard', weight: isTiny && isTitle ? 'bold' : 'thin', size: getTextSize(), dataHook: dataHooks.verticalTabsItemText }, children));
}
_renderPrefix() {
const { prefixIcon, type } = this.props;
const { size } = this.context;
return React.cloneElement(prefixIcon, {
size: size === 'medium' ? 24 : 18,
'data-hook': dataHooks.verticalTabsItemPrefixIcon,
className: st(classes.prefixIcon, { action: type === 'action' }),
});
}
_renderSuffix() {
const { suffixIcon } = this.props;
const { size } = this.context;
return React.cloneElement(suffixIcon, {
size: size === 'medium' ? 24 : 18,
className: classes.suffixIcon,
'data-hook': dataHooks.verticalTabsItemSuffixIcon,
});
}
render() {
const { id, dataHook, disabled, prefixIcon, suffixIcon, tabIndex, type, focusableOnFocus, focusableOnBlur, } = this.props;
const { size } = this.context;
const isTiny = size === 'tiny';
const selected = id !== undefined &&
this.context.activeTabId !== undefined &&
id === this.context.activeTabId;
return (React.createElement("div", { className: st(classes.root, {
disabled,
action: type === 'action',
title: type === 'title',
tiny: isTiny,
suffixIcon: !!suffixIcon,
prefixIcon: !!prefixIcon,
selected,
}), onFocus: focusableOnFocus, onBlur: focusableOnBlur, id: id, tabIndex: tabIndex, role: "menuitem", ref: ref => (this.innerComponentRef = ref), "data-hook": dataHook, onClick: !disabled ? () => this.context.onChange(id) : undefined, onKeyDown: !disabled ? e => this._onKeyDown(e) : undefined },
prefixIcon && this._renderPrefix(),
this._renderText(),
suffixIcon && this._renderSuffix()));
}
}
VerticalTabsItem.displayName = 'VerticalTabsItem';
VerticalTabsItem.propTypes = {
/** type of vertical tab item. can be of the following: 'tab' (default), 'action', 'title' */
type: PropTypes.oneOf(['tab', 'action', 'title']),
/** Data attribute for testing purposes */
dataHook: PropTypes.string,
/** Prefix Icon - should be <code>Icon</code>*/
prefixIcon: PropTypes.node,
/** Suffix Icon - should be <code>Icon</code> or <code>IconButton</code> with the <code>size="tiny"</code> prop*/
suffixIcon: PropTypes.node,
/** Children - only single child is allowed here */
children: PropTypes.node,
/** Disabled */
disabled: PropTypes.bool,
/** identifier to help identify the current selected tab */
id: PropTypes.number,
};
VerticalTabsItem.defaultProps = {
type: 'tab',
tabIndex: 0,
};
VerticalTabsItem.contextType = VerticalTabsContext;
export default withFocusable(VerticalTabsItem);
//# sourceMappingURL=VerticalTabsItem.js.map