wix-style-react
Version:
wix-style-react
70 lines • 3.29 kB
JavaScript
import React from 'react';
import { withFocusable } from '../../common/Focusable';
import { ChevronRight } from '@wix/wix-ui-icons-common';
import Text from '../../Text';
import StepMarker from './StepMarker';
import { Type, StepType, DataHook } from '../constants';
import { st, classes } from './Step.st.css';
class Step extends React.PureComponent {
constructor() {
super(...arguments);
this.state = {
isHovered: false,
// Used to update <Text ellipsis> when CSS transition has ended
// (otherwise the logic to show/hide tooltip will not be applied)
transitionSequence: 1,
};
this._handleMouseEnter = () => {
this.setState({ isHovered: true });
};
this._handleMouseLeave = () => {
this.setState({ isHovered: false });
};
this._handleTransitionEnd = event => {
const { transitionSequence } = this.state;
if (event.propertyName === 'flex-shrink') {
this.setState({ transitionSequence: transitionSequence + 1 });
}
};
this._handleClick = () => {
this._isClickable() && this.props.onClick();
};
this._isClickable = () => {
const { onClick, type, active } = this.props;
return type !== StepType.Disabled && !active && !!onClick;
};
this._getFocusProps = () => {
const { onClick, focusableOnFocus, focusableOnBlur, type } = this.props;
if (onClick && type !== StepType.Disabled) {
return {
onFocus: focusableOnFocus,
onBlur: focusableOnBlur,
tabIndex: 0,
};
}
return { tabIndex: -1 };
};
}
render() {
const { type, styleType, active, last, number, text, className, ...otherProps } = this.props;
const { isHovered, transitionSequence } = this.state;
const isClickable = this._isClickable();
return (React.createElement("button", { className: st(classes.root, {
type,
styleType,
selected: active,
hovered: isHovered,
clickable: isClickable,
}, className), "data-hook": DataHook.Step, "data-type": type, "data-active": active, onMouseEnter: this._handleMouseEnter, onMouseLeave: this._handleMouseLeave, onClick: this._handleClick, onTransitionEnd: this._handleTransitionEnd, ...this._getFocusProps() },
React.createElement("div", { className: classes.content },
React.createElement(StepMarker, { number: number, active: active, type: type, styleType: styleType, hovered: isHovered && isClickable, className: classes.marker }),
React.createElement(Text, { key: transitionSequence, ellipsis: true, weight: "thin", size: styleType === Type.Text ? 'medium' : 'small', showTooltip: !active, dataHook: DataHook.StepText, className: classes.text }, text)),
!last && React.createElement(ChevronRight, { className: classes.arrow })));
}
}
Step.displayName = 'Step';
Step.defaultProps = {
type: StepType.Normal,
};
export default withFocusable(Step);
//# sourceMappingURL=Step.js.map