@wix/design-system
Version:
@wix/design-system
53 lines • 2.82 kB
JavaScript
import React, { useCallback, useState } from 'react';
import { withFocusable } from '../../common/Focusable';
import { ChevronRight } from '@wix/wix-ui-icons-common';
import Text from '../../Text';
import StepMarker from './StepMarker';
import { StepType, DataHook } from '../constants';
import { useHover } from '../../common/useHover';
import { st, classes } from './Step.st.css.js';
import { IconThemeContext } from '../../WixDesignSystemIconThemeProvider/IconThemeContext';
const Step = ({ type = StepType.Normal, styleType, active, last, number, text, className, size, onClick, focusableOnFocus, focusableOnBlur, }) => {
const { hovered: isHovered, hoverProps } = useHover();
// Used to update <Text ellipsis> when CSS transition has ended
// (otherwise the logic to show/hide tooltip will not be applied)
const [transitionSequence, setTransitionSequence] = useState(1);
const isClickable = type !== StepType.Disabled && !active && !!onClick;
const handleClick = useCallback(() => {
if (isClickable) {
onClick();
}
}, [isClickable, onClick]);
const handleTransitionEnd = useCallback(event => {
if (event.propertyName === 'flex-shrink') {
setTransitionSequence(prev => prev + 1);
}
}, []);
const focusProps = onClick && type !== StepType.Disabled
? {
onFocus: focusableOnFocus,
onBlur: focusableOnBlur,
tabIndex: 0,
}
: { tabIndex: -1 };
return (React.createElement(IconThemeContext.Consumer, null, ({ icons: themeIcons = {} }) => {
const icons = {
ChevronRight: themeIcons.Step?.ChevronRight || ChevronRight,
};
return (React.createElement("button", { className: st(classes.root, {
type,
styleType,
size,
selected: active,
hovered: isHovered,
clickable: isClickable,
}, className), "data-hook": DataHook.Step, "data-type": type, "data-size": size, "data-active": active, ...hoverProps, onClick: handleClick, onTransitionEnd: handleTransitionEnd, ...focusProps },
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: size, showTooltip: !active, dataHook: DataHook.StepText, className: classes.text }, text)),
!last && React.createElement(icons.ChevronRight, { className: classes.arrow })));
}));
};
Step.displayName = 'Step';
export default withFocusable(Step);
//# sourceMappingURL=Step.js.map