From 7c6b074e6d2818ce29193c870777bc7f0e0c7ed4 Mon Sep 17 00:00:00 2001 From: DrMint Date: Sat, 7 May 2022 14:00:00 +0200 Subject: [PATCH] Replaced faulty lightbox with custom basic lightbox --- package-lock.json | 111 ++++++++++-------------------------- package.json | 2 +- src/components/LightBox.tsx | 59 +++++++++++++------ src/components/Popup.tsx | 2 +- 4 files changed, 72 insertions(+), 102 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2d5b4f1..8dc4cf2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,7 +19,7 @@ "nodemailer": "^6.7.3", "react": "17.0.2", "react-dom": "17.0.2", - "react-image-lightbox": "^5.1.4", + "react-hotkeys-hook": "^3.4.4", "react-swipeable": "^6.2.1", "turndown": "^7.1.1" }, @@ -4986,11 +4986,6 @@ "integrity": "sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==", "dev": true }, - "node_modules/exenv": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz", - "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=" - }, "node_modules/external-editor": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz", @@ -5570,6 +5565,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/hotkeys-js": { + "version": "3.8.7", + "resolved": "https://registry.npmjs.org/hotkeys-js/-/hotkeys-js-3.8.7.tgz", + "integrity": "sha512-ckAx3EkUr5XjDwjEHDorHxRO2Kb7z6Z2Sxul4MbBkN8Nho7XDslQsgMJT+CiJ5Z4TgRxxvKHEpuLE3imzqy4Lg==" + }, "node_modules/http-cache-semantics": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz", @@ -7589,6 +7589,7 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "dev": true, "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -7695,46 +7696,23 @@ "react": "17.0.2" } }, - "node_modules/react-image-lightbox": { - "version": "5.1.4", - "resolved": "https://registry.npmjs.org/react-image-lightbox/-/react-image-lightbox-5.1.4.tgz", - "integrity": "sha512-kTiAODz091bgT7SlWNHab0LSMZAPJtlNWDGKv7pLlLY1krmf7FuG1zxE0wyPpeA8gPdwfr3cu6sPwZRqWsc3Eg==", + "node_modules/react-hotkeys-hook": { + "version": "3.4.4", + "resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-3.4.4.tgz", + "integrity": "sha512-vaORq07rWgmuF3owWRhgFV/3VL8/l2q9lz0WyVEddJnWTtKW+AOgU5YgYKuwN6h6h7bCcLG3MFsJIjCrM/5DvQ==", "dependencies": { - "prop-types": "^15.7.2", - "react-modal": "^3.11.1" + "hotkeys-js": "3.8.7" }, "peerDependencies": { - "react": "16.x || 17.x", - "react-dom": "16.x || 17.x" + "react": ">=16.8.1", + "react-dom": ">=16.8.1" } }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" - }, - "node_modules/react-lifecycles-compat": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", - "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" - }, - "node_modules/react-modal": { - "version": "3.14.4", - "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.14.4.tgz", - "integrity": "sha512-8surmulejafYCH9wfUmFyj4UfbSJwjcgbS9gf3oOItu4Hwd6ivJyVBETI0yHRhpJKCLZMUtnhzk76wXTsNL6Qg==", - "dependencies": { - "exenv": "^1.2.0", - "prop-types": "^15.7.2", - "react-lifecycles-compat": "^3.0.0", - "warning": "^4.0.3" - }, - "engines": { - "node": ">=8" - }, - "peerDependencies": { - "react": "^0.14.0 || ^15.0.0 || ^16 || ^17", - "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17" - } + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", + "dev": true }, "node_modules/react-swipeable": { "version": "6.2.1", @@ -8728,14 +8706,6 @@ "node": ">=12" } }, - "node_modules/warning": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", - "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", - "dependencies": { - "loose-envify": "^1.0.0" - } - }, "node_modules/wcwidth": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz", @@ -12852,11 +12822,6 @@ "integrity": "sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==", "dev": true }, - "exenv": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz", - "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=" - }, "external-editor": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz", @@ -13295,6 +13260,11 @@ "has-symbols": "^1.0.2" } }, + "hotkeys-js": { + "version": "3.8.7", + "resolved": "https://registry.npmjs.org/hotkeys-js/-/hotkeys-js-3.8.7.tgz", + "integrity": "sha512-ckAx3EkUr5XjDwjEHDorHxRO2Kb7z6Z2Sxul4MbBkN8Nho7XDslQsgMJT+CiJ5Z4TgRxxvKHEpuLE3imzqy4Lg==" + }, "http-cache-semantics": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz", @@ -14746,6 +14716,7 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "dev": true, "requires": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -14819,35 +14790,19 @@ "scheduler": "^0.20.2" } }, - "react-image-lightbox": { - "version": "5.1.4", - "resolved": "https://registry.npmjs.org/react-image-lightbox/-/react-image-lightbox-5.1.4.tgz", - "integrity": "sha512-kTiAODz091bgT7SlWNHab0LSMZAPJtlNWDGKv7pLlLY1krmf7FuG1zxE0wyPpeA8gPdwfr3cu6sPwZRqWsc3Eg==", + "react-hotkeys-hook": { + "version": "3.4.4", + "resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-3.4.4.tgz", + "integrity": "sha512-vaORq07rWgmuF3owWRhgFV/3VL8/l2q9lz0WyVEddJnWTtKW+AOgU5YgYKuwN6h6h7bCcLG3MFsJIjCrM/5DvQ==", "requires": { - "prop-types": "^15.7.2", - "react-modal": "^3.11.1" + "hotkeys-js": "3.8.7" } }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" - }, - "react-lifecycles-compat": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", - "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" - }, - "react-modal": { - "version": "3.14.4", - "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.14.4.tgz", - "integrity": "sha512-8surmulejafYCH9wfUmFyj4UfbSJwjcgbS9gf3oOItu4Hwd6ivJyVBETI0yHRhpJKCLZMUtnhzk76wXTsNL6Qg==", - "requires": { - "exenv": "^1.2.0", - "prop-types": "^15.7.2", - "react-lifecycles-compat": "^3.0.0", - "warning": "^4.0.3" - } + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", + "dev": true }, "react-swipeable": { "version": "6.2.1", @@ -15579,14 +15534,6 @@ "integrity": "sha512-41BrgH+dIbCFXClcSapVs5M6GkENd3gQOJpEfPDNa71LsUGMXDL0jMWpI/Rh7WhX+Aalfz2TTS3Zt5pUsbnhLg==", "dev": true }, - "warning": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", - "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", - "requires": { - "loose-envify": "^1.0.0" - } - }, "wcwidth": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz", diff --git a/package.json b/package.json index 749cd13..7af19cc 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ "nodemailer": "^6.7.3", "react": "17.0.2", "react-dom": "17.0.2", - "react-image-lightbox": "^5.1.4", + "react-hotkeys-hook": "^3.4.4", "react-swipeable": "^6.2.1", "turndown": "^7.1.1" }, diff --git a/src/components/LightBox.tsx b/src/components/LightBox.tsx index 4864815..fa521da 100644 --- a/src/components/LightBox.tsx +++ b/src/components/LightBox.tsx @@ -1,6 +1,8 @@ -import { useMediaMobile } from "hooks/useMediaQuery"; -import { Dispatch, SetStateAction } from "react"; -import Lightbox from "react-image-lightbox"; +import { Dispatch, SetStateAction, useCallback } from "react"; +import { useHotkeys } from "react-hotkeys-hook"; +import Img from "./Img"; +import Button from "./Inputs/Button"; +import Popup from "./Popup"; interface Props { setState: @@ -14,25 +16,46 @@ interface Props { export default function LightBox(props: Props): JSX.Element { const { state, setState, images, index, setIndex } = props; - const mobile = useMediaMobile(); + const handlePrevious = useCallback(() => { + setIndex((previousIndex) => (previousIndex > 0 ? previousIndex - 1 : 0)); + }, [setIndex]); + + const handleNext = useCallback(() => { + setIndex((previousIndex) => + previousIndex < images.length - 1 ? previousIndex + 1 : images.length - 1 + ); + }, [images.length, setIndex]); + + useHotkeys("left", handlePrevious); + useHotkeys("right", handleNext); return ( <> {state && ( - document.getElementById("MyAppLayout"), - }} - mainSrc={images[index]} - prevSrc={index > 0 ? images[index - 1] : undefined} - nextSrc={index < images.length ? images[index + 1] : undefined} - onMovePrevRequest={() => setIndex(index - 1)} - onMoveNextRequest={() => setIndex(index + 1)} - imageCaption="" - imageTitle="" - onCloseRequest={() => setState(false)} - imagePadding={mobile ? 0 : 70} - /> + +
+
+ {index > 0 && ( + + )} +
+ + + +
+ {index < images.length - 1 && ( + + )} +
+
+ )} ); diff --git a/src/components/Popup.tsx b/src/components/Popup.tsx index 37be3cc..628c8bf 100644 --- a/src/components/Popup.tsx +++ b/src/components/Popup.tsx @@ -34,7 +34,7 @@ export default function Popup(props: Props): JSX.Element { props.state ? "scale-100" : "scale-0" } ${ props.fillViewport - ? "absolute inset-10 top-20" + ? "absolute inset-10" : "relative max-h-[80vh] overflow-y-auto mobile:w-[85vw]" } ${ props.hideBackground