ente/src/pages/gallery/components/UploadProgress.tsx
2021-01-25 13:25:27 +05:30

32 lines
1.1 KiB
TypeScript

import React from 'react';
import { Alert, Modal, ProgressBar } from 'react-bootstrap';
import constants from 'utils/strings/constants'
export default function UploadProgress({ fileCounter, uploadStage, now, ...props }) {
return (
<Modal
{...props}
size='lg'
aria-labelledby='contained-modal-title-vcenter'
centered
backdrop="static"
>
<Modal.Header>
<Modal.Title id='contained-modal-title-vcenter'>
Uploading Files
</Modal.Title>
</Modal.Header>
<Modal.Body>
{now === 100 ? (
<Alert variant='success'>{constants.UPLOAD[3]}</Alert>
) : (
<>
<Alert variant='info'>{constants.UPLOAD[uploadStage]} {fileCounter?.total != 0 ? `${fileCounter?.current} ${constants.OF} ${fileCounter?.total}` : ''}</Alert>
<ProgressBar animated now={now} />
</>
)}
</Modal.Body>
</Modal>
);
}