@wix/design-system
Version:
@wix/design-system
32 lines • 1.39 kB
JavaScript
import React from 'react';
import Step from './components/Step';
import { StepType } from './constants';
import { st, classes } from './Stepper.st.css.js';
/** Stepper */
class Stepper extends React.PureComponent {
constructor() {
super(...arguments);
this._getActiveStepType = () => {
const { activeStep, steps } = this.props;
const step = steps[activeStep];
return step.type !== StepType.Disabled ? step.type : undefined;
};
}
render() {
const { dataHook, steps, type, fit, activeStep, onClick, size } = this.props;
return (React.createElement("div", { className: st(classes.root, { fit }), "data-hook": dataHook, "data-type": type, "data-size": size, "data-fit": fit }, steps.map((step, index) => {
const isLastStep = index === steps.length - 1;
const isActiveStep = index === activeStep;
return (React.createElement(Step, { ...step, key: index, number: index + 1, active: isActiveStep, last: isLastStep, type: isActiveStep ? this._getActiveStepType() : step.type, size: size, styleType: type, onClick: onClick && (() => onClick(index)) }));
})));
}
}
Stepper.displayName = 'Stepper';
Stepper.defaultProps = {
steps: [],
type: 'circle',
size: 'small',
fit: 'compact',
};
export default Stepper;
//# sourceMappingURL=Stepper.js.map