feat: basic PDF Modal

jina-ai · Sep 10, 2021 · 26d1f85 · 26d1f85
1 parent f9a30f5
commit 26d1f85
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 13 deletions.
diff --git a/packages/showcases/package.json b/packages/showcases/package.json
@@ -18,6 +18,7 @@
     "next": "11.0.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-modal": "^3.14.3",
     "react-pdf": "^5.3.2",
     "styled-jsx-plugin-postcss": "^4.0.1"
   },
@@ -26,6 +27,7 @@
     "@testing-library/react-hooks": "^7.0.1",
     "@types/jest": "^27.0.1",
     "@types/react": "17.0.14",
+    "@types/react-modal": "^3.12.1",
     "@types/react-pdf": "^5.0.5",
     "@types/styled-jsx": "^3.4.4",
     "autoprefixer": "^10.3.1",

diff --git a/packages/showcases/src/components/common/PdfViewer.tsx b/packages/showcases/src/components/common/PdfViewer.tsx
@@ -40,7 +40,7 @@ export const PdfViewer = ({
         const [currentPage, setCurrentPage] = useState(1);
 
         const container = useCallback((node) => {
-            if (node) setWidth(node.getBoundingClientRect().width - 20);
+
         }, []);
 
 
@@ -61,18 +61,26 @@ export const PdfViewer = ({
 
 
         return (
-            <div className="h-full w-full" ref={container}>
-                <div className="overflow-y-auto w-full h-full">
-                    <Document file={src} onLoadSuccess={onLoad}>
-                        <Page pageNumber={currentPage} width={width}/>
-                    </Document>
-                </div>
+            <>
+                <Document file={src} onLoadSuccess={onLoad}>
+                    <Page pageNumber={currentPage} width={width}/>
+                </Document>
+                <style jsx>
+                    {
+                        `
+                          .react-pdf__Page__annotations annotationLayer {
+                            display: none;
+                          }
+
+                        `
+                    }
+                </style>
 
                 <div className="absolute h-8 left-0 right-0 bottom-0 grid grid-cols-2 gap-2 select-none">
                     <PageButton action={prevPage} canAct={hasPrevPage}/>
                     <PageButton action={nextPage} canAct={hasNextPage} next/>
                 </div>
-            </div>
+            </>
         )
     }
 ;
diff --git a/packages/showcases/src/pages/NoSSR/pdf.tsx b/packages/showcases/src/pages/NoSSR/pdf.tsx
@@ -13,6 +13,8 @@ import React, {useState} from "react";
 import Results from "../../components/Results";
 import downloadButton from '../../images/download-button.svg'
 import Image from "next/image";
+import Modal from 'react-modal';
+import { PdfViewer } from "../../components/common/PdfViewer";
 
 const PDF_API_URL = "http://34.89.253.237:80"
 
@@ -45,13 +47,23 @@ const customResSerializer = (response: AnyObject, version: string) => {
     return {queries, results}
 }
 
+const customStyles = {
+    content: {
+        top: '50%',
+        left: '50%',
+        right: 'auto',
+        bottom: 'auto',
+        marginRight: '-50%',
+        transform: 'translate(-50%, -50%)',
+    },
+};
 
 export default function PDF() {
 
     const [queries, setQueries] = useState<SimpleQueries>([]);
     const [results, setResults] = useState<SimpleResults[]>([]);
     const [searching, setSearching] = useState(false);
-
+    const [viewedPDF, setViewedPDF] = useState<string>("")
 
     const jinaClient = new JinaClient(PDF_API_URL, customReqSerializer, customResSerializer)
 
@@ -63,18 +75,32 @@ export default function PDF() {
         setQueries(queries);
     }
 
+    const [modalIsOpen, setIsOpen] = React.useState(false);
+
+    function openModal() {
+        setIsOpen(true);
+    }
+
+    function closeModal() {
+        setIsOpen(false);
+    }
+
     const CustomResultItem = (result: CustomResult) => {
         const {thumbnail, pdf_name, pdf, page} = result.result
         const [hovered, setHovered] = useState<boolean>(false)
-
+
+
         return (
             <div className="max-w-lg">
                 <div className="relative rounded-xl border border-primary-500 m-b-3 overflow-hidden h-96"
                      onMouseOver={() => setHovered(true)}
                      onMouseLeave={() => setHovered(false)}
                 >
                     <img className={"cursor-pointer " + (hovered && "thumpnail-hovered ")} src={thumbnail}
-
+                    onClick={() => {
+                        setViewedPDF(pdf)
+                        openModal()
+                    }}
                     />
                     <style jsx>
                         {`
@@ -102,6 +128,23 @@ export default function PDF() {
 
     return (
         <>
+            <Modal
+                isOpen={modalIsOpen}
+                onRequestClose={closeModal}
+                style={customStyles}
+                contentLabel="PDF"
+            >
+                <div className="modal flex flex-col items-center">
+                    <PdfViewer src={viewedPDF}/>
+                    <style jsx>
+                        {`
+                          .modal {
+                            width: 60vh;
+                          }
+                        `}
+                    </style>
+                </div>
+            </Modal>
             <SearchBar searching={searching} search={search}/>
             <Results results={results} CustomResultItem={CustomResultItem}/>
             <FlowDiagram/>

diff --git a/packages/showcases/src/styles/globals.css b/packages/showcases/src/styles/globals.css
@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+.annotationLayer {
+    display: none;
+}
diff --git a/yarn.lock b/yarn.lock
@@ -821,6 +821,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-modal@^3.12.1":
+  version "3.12.1"
+  resolved "https://registry.yarnpkg.com/@types/react-modal/-/react-modal-3.12.1.tgz#fd1558762ed96020291b831190c85bc721aad3c1"
+  integrity sha512-pgq/jAnSJqHX7NXTFyUSXwlFOBUGngBXavFmAIKE7bkM7WNKyF/9XvmMr2+eIBOvR8waiA0Nj2qHfDZqMgeT6w==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-pdf@^5.0.5":
   version "5.0.5"
   resolved "https://registry.yarnpkg.com/@types/react-pdf/-/react-pdf-5.0.5.tgz#2b24d5a4aeaf3a2790a76030ad3228e2f7a6ad9a"
@@ -2416,6 +2423,11 @@ execa@^5.0.0:
     signal-exit "^3.0.3"
     strip-final-newline "^2.0.0"
 
+exenv@^1.2.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
+  integrity sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=
+
 exit@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
@@ -3863,7 +3875,7 @@ lodash@4.x, lodash@^4.17.13, lodash@^4.17.15, lodash@^4.17.21, lodash@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -4780,6 +4792,21 @@ react-is@^16.8.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-lifecycles-compat@^3.0.0:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
+
+react-modal@^3.14.3:
+  version "3.14.3"
+  resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.14.3.tgz#7eb7c5ec85523e5843e2d4737cc17fc3f6aeb1c0"
+  integrity sha512-+C2KODVKyu20zHXPJxfOOcf571L1u/EpFlH+oS/3YDn8rgVE51QZuxuuIwabJ8ZFnOEHaD+r6XNjqwtxZnXO0g==
+  dependencies:
+    exenv "^1.2.0"
+    prop-types "^15.7.2"
+    react-lifecycles-compat "^3.0.0"
+    warning "^4.0.3"
+
 react-pdf@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/react-pdf/-/react-pdf-5.3.2.tgz#517109d2a32ea7450dea49f7e5cc8e10bd2cfc4b"
@@ -5828,6 +5855,13 @@ walker@^1.0.7:
   dependencies:
     makeerror "1.0.x"
 
+warning@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
+  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
+  dependencies:
+    loose-envify "^1.0.0"
+
 watchpack@2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.1.1.tgz#e99630550fca07df9f90a06056987baa40a689c7"