41 lines
1.1 KiB
JavaScript
41 lines
1.1 KiB
JavaScript
import React from 'react';
|
|
|
|
export default class ProgressBar extends React.PureComponent
|
|
{
|
|
state = { width: '' }
|
|
|
|
render()
|
|
{
|
|
return <div className="progress-bar" ref="pbar" style={{ display: this.props.text ? '' : 'none' }}>
|
|
<div className="pending" style={{ width: this.state.width }}>{this.props.text} ({this.props.progress||0}%)</div>
|
|
<div className="clip" style={{ width: (this.props.progress||0)+'%', overflow: 'hidden' }}>
|
|
<div className="done" ref="pdone" style={{ width: this.state.width }}>{this.props.text} ({this.props.progress||0}%)</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
componentDidUpdate(prevProps, prevState)
|
|
{
|
|
if (!prevState.width)
|
|
{
|
|
setTimeout(this.onResize, 50);
|
|
}
|
|
}
|
|
|
|
onResize = () =>
|
|
{
|
|
this.setState({ width: this.refs.pbar.offsetWidth });
|
|
}
|
|
|
|
componentDidMount()
|
|
{
|
|
window.addEventListener('resize', this.onResize);
|
|
this.onResize();
|
|
}
|
|
|
|
componentWillUnmount()
|
|
{
|
|
window.removeEventListener('resize', this.onResize);
|
|
}
|
|
}
|