60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
import * as React from 'react';
|
|
import ProgressBar from '../../components/progress_bar';
|
|
|
|
const style = require('../style.css');
|
|
|
|
const initialState = {
|
|
progress: 0,
|
|
buffer: 10,
|
|
};
|
|
|
|
class ProgressBarTest extends React.Component<any, any> {
|
|
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;
|