Montassar Ghanmy
38 lines
788 B
React
Executable File
38 lines
788 B
React
Executable File
import React, { Component } from 'react';
|
|
|
|
import './step-counter.scss';
|
|
|
|
export default class StepCounter extends React.Component {
|
|
/*
|
|
props : {
|
|
current : int
|
|
total : int
|
|
}
|
|
*/
|
|
constructor() {
|
|
super();
|
|
}
|
|
displayStep() {
|
|
var ret = [];
|
|
for (var i = 0; i < this.props.total; i++) {
|
|
ret.push(
|
|
<div
|
|
key={'step-' + i}
|
|
className={'step ' + (i <= this.props.current - 1 ? 'setSelected' : '')}
|
|
style={{ flex: 1 / this.props.total }}
|
|
/>,
|
|
);
|
|
}
|
|
return ret;
|
|
}
|
|
render() {
|
|
return (
|
|
<div className="stepCounter" style={{ maxWidth: this.props.total * 80 }}>
|
|
{this.displayStep().map(item => {
|
|
return item;
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
}
|