59 lines
1.5 KiB
JavaScript
59 lines
1.5 KiB
JavaScript
import React from 'react';
|
|
import ProgressBar from '../../components/progress_bar';
|
|
import style from '../style';
|
|
|
|
const initialState = {
|
|
progress: 0,
|
|
buffer: 10
|
|
};
|
|
|
|
class ProgressBarTest extends React.Component {
|
|
state = initialState;
|
|
|
|
componentWillMount () {
|
|
this.simulateProgress();
|
|
}
|
|
|
|
simulateProgress () {
|
|
setTimeout(() => {
|
|
if (this.state.progress < 100) {
|
|
this.increaseProgress();
|
|
if (this.state.progress > this.state.buffer) this.increaseBuffer();
|
|
} else {
|
|
this.setState(initialState);
|
|
}
|
|
this.simulateProgress();
|
|
}, (Math.random() * 1 + 1) * 1000);
|
|
}
|
|
|
|
increaseProgress () {
|
|
this.setState({
|
|
progress: Math.random() * 30 + this.state.progress
|
|
});
|
|
}
|
|
|
|
increaseBuffer () {
|
|
this.setState({
|
|
buffer: Math.random() * (100 - this.state.progress) + this.state.progress
|
|
});
|
|
}
|
|
|
|
render () {
|
|
return (
|
|
<section>
|
|
<h5>Progress bars</h5>
|
|
<p style={{margin: '10px auto'}}>Determinate</p>
|
|
<ProgressBar mode='determinate' value={this.state.progress} buffer={this.state.buffer}/>
|
|
<p style={{margin: '10px auto'}}>Indeterminate...</p>
|
|
<ProgressBar mode='indeterminate'/>
|
|
<p style={{margin: '10px auto'}}>Circular</p>
|
|
<ProgressBar type='circular' mode='indeterminate'/>
|
|
<p style={{margin: '10px auto'}}>Circular with custom size</p>
|
|
<ProgressBar className={style.customSizedProgress} type='circular' mode='indeterminate' theme={style} />
|
|
</section>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default ProgressBarTest;
|