ソースを参照

Added progressBar modal close Button

Abhinav-grd 4 年 前
コミット
8cbff31c36

+ 0 - 2
src/pages/gallery/components/CollectionDropZone.tsx

@@ -33,8 +33,6 @@ function CollectionDropZone({
             if (err.response) {
                 setBannerErrorCode(err.response.status);
             }
-        } finally {
-            setProgressView(false);
         }
     };
     return (

+ 0 - 2
src/pages/gallery/components/CreateCollection.tsx

@@ -76,8 +76,6 @@ export default function CreateCollection(props) {
             if (err.response) {
                 setBannerErrorCode(err.response.status);
             }
-        } finally {
-            setProgressView(false);
         }
     };
     return (

+ 1 - 0
src/pages/gallery/components/Upload.tsx

@@ -35,6 +35,7 @@ export default function Upload(props) {
                 uploadStage={uploadStage}
                 uploadErrors={uploadErrors}
                 show={progressView}
+                closeModal={() => setProgressView(false)}
                 onHide={init}
             />
         </>

+ 27 - 13
src/pages/gallery/components/UploadProgress.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Alert, Modal, ProgressBar } from 'react-bootstrap';
+import { Alert, Button, Modal, ProgressBar } from 'react-bootstrap';
 import constants from 'utils/strings/constants';
 
 export default function UploadProgress({
@@ -7,6 +7,7 @@ export default function UploadProgress({
     uploadStage,
     now,
     uploadErrors,
+    closeModal,
     ...props
 }) {
     return (
@@ -36,19 +37,32 @@ export default function UploadProgress({
                         <ProgressBar animated now={now} />
                     </>
                 )}
-                {uploadErrors.length && (
-                    <Alert variant="danger">
-                        <div
-                            style={{
-                                overflow: 'auto',
-                                height: '100px',
-                            }}
+                {uploadErrors.length > 0 && (
+                    <>
+                        <Alert variant="danger">
+                            <div
+                                style={{
+                                    overflow: 'auto',
+                                    height: '100px',
+                                }}
+                            >
+                                {uploadErrors.map((error) => (
+                                    <li key={error.message}>{error.message}</li>
+                                ))}
+                            </div>
+                        </Alert>
+                    </>
+                )}
+                {now === 100 && (
+                    <Modal.Footer>
+                        <Button
+                            variant="dark"
+                            style={{ width: '100%' }}
+                            onClick={closeModal}
                         >
-                            {uploadErrors.map((error) => (
-                                <li>{error.message}</li>
-                            ))}
-                        </div>
-                    </Alert>
+                            {constants.CLOSE}
+                        </Button>
+                    </Modal.Footer>
                 )}
             </Modal.Body>
         </Modal>