2017-07-22 21:27:38 +05:30
|
|
|
// @flow
|
|
|
|
import React from 'react';
|
|
|
|
|
|
|
|
import classNames from 'classnames';
|
|
|
|
|
2017-08-05 00:57:02 +05:30
|
|
|
import { COLOR_GREEN } from 'components/ui';
|
|
|
|
|
2017-07-22 21:27:38 +05:30
|
|
|
import styles from './stepper.scss';
|
|
|
|
|
2017-08-05 00:57:02 +05:30
|
|
|
import type { Color } from 'components/ui';
|
|
|
|
|
2017-07-22 21:27:38 +05:30
|
|
|
export default function Stepper({
|
|
|
|
totalSteps,
|
2017-08-05 00:57:02 +05:30
|
|
|
activeStep,
|
|
|
|
color = COLOR_GREEN
|
2017-09-09 20:34:26 +05:30
|
|
|
}: {
|
2017-07-22 21:27:38 +05:30
|
|
|
totalSteps: number,
|
2017-08-05 00:57:02 +05:30
|
|
|
activeStep: number,
|
2019-01-28 00:42:58 +05:30
|
|
|
color?: Color,
|
2017-07-22 21:27:38 +05:30
|
|
|
}) {
|
|
|
|
return (
|
2017-08-05 00:57:02 +05:30
|
|
|
<div className={classNames(styles.steps, styles[`${color}Steps`])}>
|
2017-07-22 21:27:38 +05:30
|
|
|
{(new Array(totalSteps)).fill(0).map((_, step) => (
|
|
|
|
<div className={classNames(styles.step, {
|
|
|
|
[styles.activeStep]: step <= activeStep
|
|
|
|
})} key={step} />
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
);
|
2017-08-02 21:50:17 +05:30
|
|
|
}
|