github.com/minio/console@v1.4.1/web-app/src/screens/Console/Buckets/ListBuckets/Objects/Preview/PreviewPDF.tsx (about)

     1  // This file is part of MinIO Console Server
     2  // Copyright (c) 2023 MinIO, Inc.
     3  //
     4  // This program is free software: you can redistribute it and/or modify
     5  // it under the terms of the GNU Affero General Public License as published by
     6  // the Free Software Foundation, either version 3 of the License, or
     7  // (at your option) any later version.
     8  //
     9  // This program is distributed in the hope that it will be useful,
    10  // but WITHOUT ANY WARRANTY; without even the implied warranty of
    11  // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    12  // GNU Affero General Public License for more details.
    13  //
    14  // You should have received a copy of the GNU Affero General Public License
    15  // along with this program.  If not, see <http://www.gnu.org/licenses/>.
    16  
    17  import React, { Fragment, useState } from "react";
    18  import { Document, Page, pdfjs } from "react-pdf";
    19  import { Box, Button, InformativeMessage } from "mds";
    20  
    21  pdfjs.GlobalWorkerOptions.workerSrc = "./scripts/pdf.worker.min.js";
    22  
    23  interface IPreviewPDFProps {
    24    path: string;
    25    loading: boolean;
    26    onLoad: () => void;
    27    downloadFile: () => void;
    28  }
    29  
    30  const PreviewPDF = ({
    31    path,
    32    loading,
    33    onLoad,
    34    downloadFile,
    35  }: IPreviewPDFProps) => {
    36    const [errorState, setErrorState] = useState<boolean>(false);
    37    const [totalPages, setTotalPages] = useState<number>(0);
    38  
    39    if (!path) {
    40      return null;
    41    }
    42  
    43    const renderPages = totalPages > 5 ? 5 : totalPages;
    44    const arrayCreate = Array.from(Array(renderPages).keys());
    45  
    46    return (
    47      <Fragment>
    48        {errorState && totalPages === 0 && (
    49          <InformativeMessage
    50            variant={"error"}
    51            title={"Error"}
    52            message={
    53              <Fragment>
    54                File preview couldn't be displayed, Please try Download instead.
    55                <Box
    56                  sx={{
    57                    display: "flex",
    58                    justifyContent: "center",
    59                    marginTop: 12,
    60                  }}
    61                >
    62                  <Button
    63                    id={"download-preview"}
    64                    onClick={downloadFile}
    65                    variant={"callAction"}
    66                  >
    67                    Download File
    68                  </Button>
    69                </Box>
    70              </Fragment>
    71            }
    72            sx={{ marginBottom: 10 }}
    73          />
    74        )}
    75        {!loading && !errorState && (
    76          <InformativeMessage
    77            variant={"warning"}
    78            title={"File Preview"}
    79            message={
    80              <Fragment>
    81                This is a File Preview for the first {arrayCreate.length} pages of
    82                the document, if you wish to work with the full document please
    83                download instead.
    84                <Box
    85                  sx={{
    86                    display: "flex",
    87                    justifyContent: "center",
    88                    marginTop: 12,
    89                  }}
    90                >
    91                  <Button
    92                    id={"download-preview"}
    93                    onClick={downloadFile}
    94                    variant={"callAction"}
    95                  >
    96                    Download File
    97                  </Button>
    98                </Box>
    99              </Fragment>
   100            }
   101            sx={{ marginBottom: 10 }}
   102          />
   103        )}
   104        {!errorState && (
   105          <Box
   106            sx={{
   107              overflowY: "auto",
   108              "& .react-pdf__Page__canvas": {
   109                margin: "0 auto",
   110                backgroundColor: "transparent",
   111              },
   112            }}
   113          >
   114            <Document
   115              file={path}
   116              onLoadSuccess={({ _pdfInfo }) => {
   117                setTotalPages(_pdfInfo.numPages || 0);
   118                setErrorState(false);
   119                onLoad();
   120              }}
   121              onLoadError={(error) => {
   122                setErrorState(true);
   123                onLoad();
   124                console.error(error);
   125              }}
   126            >
   127              {arrayCreate.map((item) => (
   128                <Page
   129                  pageNumber={item + 1}
   130                  key={`render-page-${item}`}
   131                  renderAnnotationLayer={false}
   132                  renderTextLayer={false}
   133                  renderForms={false}
   134                />
   135              ))}
   136            </Document>
   137          </Box>
   138        )}
   139      </Fragment>
   140    );
   141  };
   142  
   143  export default PreviewPDF;