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"