diff --git a/packages/showcases/package.json b/packages/showcases/package.json
index 68f3cf6..873f9b8 100644
--- 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
index edd40a1..de05b55 100644
--- 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 (
-
+ >
)
}
;
diff --git a/packages/showcases/src/pages/NoSSR/pdf.tsx b/packages/showcases/src/pages/NoSSR/pdf.tsx
index 66f2383..6b21259 100644
--- 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([]);
const [results, setResults] = useState([]);
const [searching, setSearching] = useState(false);
-
+ const [viewedPDF, setViewedPDF] = useState("")
const jinaClient = new JinaClient(PDF_API_URL, customReqSerializer, customResSerializer)
@@ -63,10 +75,21 @@ 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(false)
-
+
+
return (
setHovered(false)}
>
{
+ setViewedPDF(pdf)
+ openModal()
+ }}
/>
+
+
diff --git a/packages/showcases/src/styles/globals.css b/packages/showcases/src/styles/globals.css
index bd6213e..bed4045 100644
--- a/packages/showcases/src/styles/globals.css
+++ b/packages/showcases/src/styles/globals.css
@@ -1,3 +1,7 @@
@tailwind base;
@tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
+
+.annotationLayer {
+ display: none;
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 7206b88..fa64aee 100644
--- 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"