101 lines
3.5 KiB
TypeScript
101 lines
3.5 KiB
TypeScript
import React from 'react';
|
|
import { Alert, Button, Modal, ProgressBar } from 'react-bootstrap';
|
|
import { UPLOAD_STAGES } from 'services/uploadService';
|
|
import constants from 'utils/strings/constants';
|
|
|
|
interface Props {
|
|
fileCounter;
|
|
uploadStage;
|
|
now;
|
|
closeModal;
|
|
fileProgress: Map<string, number>;
|
|
show;
|
|
}
|
|
export default function UploadProgress(props: Props) {
|
|
let fileProgressStatuses = [];
|
|
if (props.fileProgress) {
|
|
for (let [fileName, progress] of props.fileProgress) {
|
|
fileProgressStatuses.push({ fileName, progress });
|
|
}
|
|
fileProgressStatuses.sort((a, b) => {
|
|
if (b.progress !== -1 && a.progress === -1) return 1;
|
|
});
|
|
}
|
|
return (
|
|
<Modal
|
|
show={props.show}
|
|
onHide={props.closeModal}
|
|
size="lg"
|
|
aria-labelledby="contained-modal-title-vcenter"
|
|
centered
|
|
backdrop={
|
|
props.uploadStage !== UPLOAD_STAGES.FINISH ? 'static' : 'true'
|
|
}
|
|
dialogClassName="ente-modal"
|
|
>
|
|
<Modal.Body>
|
|
<div
|
|
style={{
|
|
textAlign: 'center',
|
|
marginBottom: '20px',
|
|
marginTop: '12px',
|
|
}}
|
|
>
|
|
<h4>
|
|
{props.uploadStage == UPLOAD_STAGES.UPLOADING
|
|
? props.fileCounter.total > 1 &&
|
|
constants.UPLOAD[props.uploadStage](
|
|
props.fileCounter
|
|
)
|
|
: constants.UPLOAD[props.uploadStage]}
|
|
</h4>
|
|
</div>
|
|
{props.now === 100 ? (
|
|
fileProgressStatuses.length !== 0 && (
|
|
<Alert variant="warning">
|
|
{constants.FAILED_UPLOAD_FILE_LIST}
|
|
</Alert>
|
|
)
|
|
) : (
|
|
<ProgressBar
|
|
now={props.now}
|
|
animated
|
|
variant={'upload-progress-bar'}
|
|
/>
|
|
)}
|
|
{fileProgressStatuses?.length > 0 && (
|
|
<ul
|
|
style={{
|
|
marginTop: '10px',
|
|
overflow: 'auto',
|
|
maxHeight: '250px',
|
|
}}
|
|
>
|
|
{fileProgressStatuses.map(({ fileName, progress }) => (
|
|
<li style={{ marginTop: '12px' }}>
|
|
{props.now === 100
|
|
? fileName
|
|
: constants.FILE_UPLOAD_PROGRESS(
|
|
fileName,
|
|
progress
|
|
)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
{props.now === 100 && (
|
|
<Modal.Footer style={{ border: 'none' }}>
|
|
<Button
|
|
variant="outline-secondary"
|
|
style={{ width: '100%' }}
|
|
onClick={props.closeModal}
|
|
>
|
|
{constants.CLOSE}
|
|
</Button>
|
|
</Modal.Footer>
|
|
)}
|
|
</Modal.Body>
|
|
</Modal>
|
|
);
|
|
}
|