import '../css/UploadProgressBar.scss';
|
import React from 'react';
|
import PropTypes from 'prop-types';
|
import { _, interpolate } from '../classes/gettext';
|
import Utils from '../classes/Utils';
|
|
class UploadProgressBar extends React.Component {
|
static propTypes = {
|
progress: PropTypes.number,
|
totalBytesSent: PropTypes.number,
|
totalBytes: PropTypes.number,
|
totalCount: PropTypes.number // number of files
|
}
|
|
render() {
|
let percentage = (this.props.progress !== undefined ?
|
this.props.progress :
|
0).toFixed(2);
|
let bytes = this.props.totalBytesSent !== undefined && this.props.totalBytes !== undefined ?
|
' ' + interpolate(_("remaining to upload: %(bytes)s"), { bytes: Utils.bytesToSize(this.props.totalBytes - this.props.totalBytesSent)}) :
|
"";
|
|
let active = percentage < 100 ? "active" : "";
|
|
let label = active ?
|
interpolate(_('%(count)s files %(remaining)s'), { count: this.props.totalCount, remaining: bytes }) :
|
interpolate(_('%(count)s files uploaded successfully'), { count: this.props.totalCount });
|
|
return (
|
<div className="upload-progress-bar">
|
<div className="progress">
|
<div className={'progress-bar progress-bar-success progress-bar-striped ' + active} style={{width: percentage + '%'}}>
|
{percentage}%
|
</div>
|
</div>
|
<div className="text-left small upload-label">
|
{label}
|
</div>
|
</div>
|
);
|
}
|
}
|
|
export default UploadProgressBar;
|
