import React from 'react';
|
import PropTypes from 'prop-types';
|
|
class ProgressBar extends React.Component {
|
static propTypes = {
|
current: PropTypes.number.isRequired, // processed files so far
|
total: PropTypes.number.isRequired, // number of files
|
template: PropTypes.oneOfType([
|
PropTypes.string,
|
PropTypes.func
|
]).isRequired // String or callback for label
|
}
|
|
render() {
|
let { current, total } = this.props;
|
if (total == 0) total = 1;
|
|
const percentage = ((current / total) * 100).toFixed(2);
|
const active = percentage < 100 ? "active" : "";
|
|
const label = typeof this.props.template === 'string' ?
|
this.props.template :
|
this.props.template({current, total, active, percentage});
|
|
return (
|
<div>
|
<div className="progress">
|
<div className={'progress-bar progress-bar-success progress-bar-striped ' + active} style={{width: percentage + '%'}}>
|
{percentage}%
|
</div>
|
</div>
|
{label !== "" ?
|
<div className="text-left small">
|
{label}
|
</div>
|
: ""}
|
</div>
|
);
|
}
|
}
|
|
export default ProgressBar;
|
