From f54acd32f5f21d0fccd573a17fb0116b40030c21 Mon Sep 17 00:00:00 2001 From: Mhdi <0MehdiKeramati1@gmail.com> Date: Mon, 15 Jul 2024 18:31:48 +0330 Subject: [PATCH] Updates --- index.esm.js | 167 ++++++++++++++++++++++++ index.esm.js.map | 1 + index.html | 14 ++ index.js | 169 +++++++++++++++++++++++++ index.js.map | 1 + types/App.d.ts | 3 + types/components/AlbumModal.d.ts | 5 + types/components/ImageGallery.d.ts | 5 + types/components/SingleImageModal.d.ts | 5 + types/index.d.ts | 1 + types/main.d.ts | 1 + types/types/index.d.ts | 30 +++++ 12 files changed, 402 insertions(+) create mode 100644 index.esm.js create mode 100644 index.esm.js.map create mode 100644 index.html create mode 100644 index.js create mode 100644 index.js.map create mode 100644 types/App.d.ts create mode 100644 types/components/AlbumModal.d.ts create mode 100644 types/components/ImageGallery.d.ts create mode 100644 types/components/SingleImageModal.d.ts create mode 100644 types/index.d.ts create mode 100644 types/main.d.ts create mode 100644 types/types/index.d.ts diff --git a/index.esm.js b/index.esm.js new file mode 100644 index 0000000..020b3ad --- /dev/null +++ b/index.esm.js @@ -0,0 +1,167 @@ +import React, { useRef, useEffect, useState } from 'react'; + +function styleInject(css, ref) { + if ( ref === void 0 ) ref = {}; + var insertAt = ref.insertAt; + + if (!css || typeof document === 'undefined') { return; } + + var head = document.head || document.getElementsByTagName('head')[0]; + var style = document.createElement('style'); + style.type = 'text/css'; + + if (insertAt === 'top') { + if (head.firstChild) { + head.insertBefore(style, head.firstChild); + } else { + head.appendChild(style); + } + } else { + head.appendChild(style); + } + + if (style.styleSheet) { + style.styleSheet.cssText = css; + } else { + style.appendChild(document.createTextNode(css)); + } +} + +var css_248z$2 = ".modal {\r\n z-index: 20;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100vw;\r\n height: 100vh;\r\n}\r\n\r\n.modal.album-modal {\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n align-items: flex-start;\r\n background-color: rgba(0, 0, 0, 0.8);\r\n overflow-y: auto;\r\n}\r\n\r\n.close-btn {\r\n position: fixed;\r\n top: 3%;\r\n right: 5%;\r\n font-size: 30px;\r\n color: white;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n}\r\n\r\n.album-grid {\r\n animation: scaleUp 0.3s ease-in-out;\r\n transition: 0.5;\r\n padding: 2rem 0;\r\n column-count: 3;\r\n gap: 0.8rem;\r\n width: 70%;\r\n overflow-y: auto;\r\n}\r\n\r\n@keyframes scaleUp {\r\n from {\r\n transform: scale(0.4);\r\n }\r\n to {\r\n transform: scale(1);\r\n }\r\n}\r\n\r\n.album-grid .img-box {\r\n overflow: hidden;\r\n display: inline-block;\r\n width: 100%;\r\n cursor: pointer;\r\n margin-top: 0.5rem;\r\n border-radius: 0.3rem;\r\n}\r\n.album-grid img {\r\n transition: all 0.3s ease-in-out;\r\n border-radius: 0.3rem;\r\n width: 100%;\r\n height: 100%;\r\n}\r\n\r\n.album-grid .img-box:hover img {\r\n transform: scale(1.3);\r\n}\r\n\r\n@keyframes winking {\r\n 0% {\r\n opacity: 1;\r\n border: 2px solid #007bff;\r\n }\r\n 40% {\r\n opacity: 0.5;\r\n border: 2px solid transparent;\r\n }\r\n 70% {\r\n opacity: 1;\r\n border: 2px solid #007bff;\r\n }\r\n 100% {\r\n opacity: 1;\r\n border: 2px solid transparent;\r\n }\r\n}\r\n\r\n.winking-effect {\r\n animation: winking 2.2s ease-in-out;\r\n}\r\n"; +styleInject(css_248z$2); + +var getRandomHeight = function () { + var min = 6; + var max = 20; + var height = Math.random() * (max - min) + min; + return "".concat(height, "rem"); +}; +var AlbumModal = function (props) { + var images = props.images, onClose = props.onClose, onImageClick = props.onImageClick, selectedImageIndex = props.selectedImageIndex; + var selectedImageRef = useRef(null); + useEffect(function () { + if (selectedImageRef.current) { + setTimeout(function () { + var _a; + (_a = selectedImageRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ + behavior: "smooth", + block: "center", + }); + }, 150); + selectedImageRef.current.classList.add("winking-effect"); + setTimeout(function () { + if (selectedImageRef.current) { + selectedImageRef.current.classList.remove("winking-effect"); + } + }, 2200); + } + }, [selectedImageIndex]); + return (React.createElement("div", { className: "modal album-modal" }, + React.createElement("button", { className: "close-btn", onClick: onClose }, "\u00D7"), + React.createElement("div", { className: "album-grid" }, images.map(function (image, index) { return (React.createElement("div", { key: index, className: "img-box" }, + React.createElement("img", { src: image, alt: image, onClick: function () { return onImageClick(index); }, style: { height: getRandomHeight() }, ref: index === selectedImageIndex ? selectedImageRef : null }))); })))); +}; + +var css_248z$1 = ".modal {\r\n z-index: 20;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.modal.single-image-modal {\r\n background-color: rgb(0, 0, 0);\r\n}\r\n\r\n.single-page-close-btn {\r\n position: fixed;\r\n top: 5%;\r\n right: 4%;\r\n font-size: 14px;\r\n color: white;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n}\r\n\r\n.single-image-modal .album-image > img {\r\n max-width: 90%;\r\n max-height: 90%;\r\n object-fit: contain;\r\n position: relative;\r\n}\r\n\r\n.image-counter {\r\n background-color: rgba(0, 0, 0, 0.5);\r\n color: white;\r\n padding: 5px 10px;\r\n border-radius: 15px;\r\n font-size: 14px;\r\n z-index: 10;\r\n}\r\n\r\n.nav-btn {\r\n position: absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n font-size: 40px;\r\n color: white;\r\n background: rgba(0, 0, 0, 0.5);\r\n border: none;\r\n cursor: pointer;\r\n z-index: 10;\r\n padding: 10px;\r\n}\r\n\r\n.single-image-modal {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.main-image-container {\r\n height: 64vh;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.5rem;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.main-image {\r\n max-width: 100%;\r\n max-height: 100%;\r\n object-fit: contain;\r\n transition: transform 0.3s ease-out;\r\n}\r\n\r\n.main-image.next {\r\n animation: slideLeft 0.3s forwards;\r\n}\r\n\r\n.main-image.prev {\r\n animation: slideRight 0.3s forwards;\r\n}\r\n\r\n@keyframes slideLeft {\r\n from {\r\n transform: translateX(100%);\r\n }\r\n to {\r\n transform: translateX(0);\r\n }\r\n}\r\n\r\n@keyframes slideRight {\r\n from {\r\n transform: translateX(-100%);\r\n }\r\n to {\r\n transform: translateX(0);\r\n }\r\n}\r\n\r\n.thumbnail-strip {\r\n margin: 0 auto;\r\n position: absolute;\r\n bottom: 20px;\r\n left: 0;\r\n right: 0;\r\n display: flex;\r\n justify-content: flex-start;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 10px;\r\n max-width: 60%;\r\n overflow-x: auto;\r\n}\r\n.thumbnail-strip::-webkit-scrollbar {\r\n display: none;\r\n}\r\n\r\n.album-image-box {\r\n position: relative;\r\n width: 60px;\r\n height: 60px;\r\n}\r\n\r\n.album-image-box .thumbnail {\r\n width: inherit;\r\n height: inherit;\r\n cursor: pointer;\r\n transition: border-color 0.3s ease;\r\n border-radius: 0.3rem;\r\n opacity: 0.5;\r\n}\r\n\r\n.album-image-box .thumbnail.active {\r\n opacity: 1;\r\n transform: scale(1.2);\r\n}\r\n\r\n.prev-btn {\r\n left: 20px;\r\n}\r\n\r\n.next-btn {\r\n right: 20px;\r\n}\r\n\r\n@media (max-width: 468px) {\r\n .modal {\r\n width: 100%;\r\n position: relative;\r\n }\r\n .modal.single-image-modal {\r\n background-color: transparent;\r\n height: auto;\r\n }\r\n\r\n .image-counter {\r\n bottom: 17%;\r\n right: 1rem;\r\n position: absolute;\r\n }\r\n\r\n .prev-btn {\r\n left: 0;\r\n }\r\n\r\n .next-btn {\r\n right: 0;\r\n }\r\n\r\n .thumbnail-strip {\r\n display: none;\r\n }\r\n\r\n .single-page-close-btn {\r\n display: none;\r\n }\r\n}\r\n"; +styleInject(css_248z$1); + +var SingleImageModal = function (props) { + var images = props.images, currentIndex = props.currentIndex, onClose = props.onClose, onPrev = props.onPrev, onNext = props.onNext, onThumbnailClick = props.onThumbnailClick; + var currentImage = images[currentIndex]; + var thumbnailStripRef = useRef(null); + var _a = useState(null), direction = _a[0], setDirection = _a[1]; + useEffect(function () { + if (thumbnailStripRef.current) { + var activeThumb = thumbnailStripRef.current.querySelector(".active"); + if (activeThumb) { + activeThumb.scrollIntoView({ + behavior: "smooth", + inline: "center", + block: "nearest", + }); + } + } + }, [currentIndex]); + var handleNext = function () { + setDirection("next"); + onNext(); + }; + var handlePrev = function () { + setDirection("prev"); + onPrev(); + }; + return (React.createElement("div", { className: "modal single-image-modal" }, + React.createElement("button", { className: "single-page-close-btn", onClick: onClose }, "Back"), + React.createElement("div", { className: "main-image-container" }, + React.createElement("img", { src: currentImage, alt: currentImage, className: "main-image ".concat(direction), onAnimationEnd: function () { return setDirection(null); } }), + React.createElement("div", { className: "image-counter" }, + currentIndex + 1, + "/", + images.length)), + React.createElement("button", { className: "nav-btn prev-btn", onClick: handlePrev }, "\u2039"), + React.createElement("button", { className: "nav-btn next-btn", onClick: handleNext }, "\u203A"), + React.createElement("div", { className: "thumbnail-strip", ref: thumbnailStripRef }, images.map(function (image, index) { return (React.createElement("div", { className: "album-image-box", key: index }, + React.createElement("img", { src: image, alt: image, className: "thumbnail ".concat(index === currentIndex ? "active" : ""), onClick: function () { return onThumbnailClick(index); } }))); })))); +}; + +var css_248z = ".image-gallery {\r\n max-width: 1000px;\r\n margin: 0 auto;\r\n}\r\n\r\n.image-grid.grid-version1 {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 0.5rem;\r\n}\r\n\r\n.image-grid .img-box {\r\n width: 100%;\r\n height: 6rem;\r\n border-radius: 0.3rem;\r\n cursor: pointer;\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n\r\n.image-grid .img-box > img {\r\n width: inherit;\r\n height: inherit;\r\n}\r\n\r\n.image-grid.grid-version1 .img-box:first-child {\r\n grid-column: 1 / -1;\r\n height: 13rem;\r\n}\r\n.image-grid.grid-version2 {\r\n display: grid;\r\n grid-template-columns: repeat(7, 1fr);\r\n grid-template-areas:\r\n \"myArea1 myArea1 myArea1 myArea1 myArea1 myArea2 myArea2\"\r\n \"myArea1 myArea1 myArea1 myArea1 myArea1 myArea3 myArea3\";\r\n gap: 0.5rem;\r\n}\r\n\r\n.image-grid.grid-version2 .img-box:first-child {\r\n height: 13rem;\r\n grid-area: myArea1;\r\n}\r\n\r\n.image-grid.grid-version2 .img-box:nth-child(2) {\r\n grid-area: myArea2;\r\n}\r\n\r\n.image-grid.grid-version2 .img-box:nth-child(3) {\r\n grid-area: myArea3;\r\n height: 6.5rem;\r\n}\r\n\r\n.image-grid.grid-version2 .img-box:last-child {\r\n width: 8rem;\r\n}\r\n\r\n.image-grid.grid-version2 .img-box:nth-child(5) {\r\n width: 8rem;\r\n}\r\n\r\n.image-grid .img-box:first-child > img {\r\n width: inherit;\r\n height: inherit;\r\n}\r\n\r\n.image-grid .last-image {\r\n color: white;\r\n font-family: \"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif;\r\n font-size: 0.8rem;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background-color: rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n.image-grid .img-box::after {\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: rgba(0, 0, 0, 0.3);\r\n z-index: 1;\r\n opacity: 0;\r\n transition: opacity 0.3s ease;\r\n}\r\n\r\n.image-grid .img-box:hover::after {\r\n opacity: 1;\r\n}\r\n"; +styleInject(css_248z); + +var ImageGallery = function (props) { + var images = props.images, width = props.width, height = props.height, grid = props.grid, fullScreen = props.fullScreen; + var _a = useState(false), showAlbumModal = _a[0], setShowAlbumModal = _a[1]; + var _b = useState(false), showSingleImageModal = _b[0], setShowSingleImageModal = _b[1]; + var _c = useState(0), currentImageIndex = _c[0], setCurrentImageIndex = _c[1]; + var _d = useState(0), selectedImageIndex = _d[0], setSelectedImageIndex = _d[1]; + var _e = useState(false), isMobile = _e[0], setIsMobile = _e[1]; + useEffect(function () { + var checkMobile = function () { + setIsMobile(window.innerWidth <= 468); + }; + checkMobile(); + window.addEventListener("resize", checkMobile); + return function () { return window.removeEventListener("resize", checkMobile); }; + }, []); + var openAlbumModal = function (index) { + setSelectedImageIndex(index); + setShowAlbumModal(true); + }; + var closeAlbumModal = function () { return setShowAlbumModal(false); }; + var openSingleImageModal = function (index) { + setSelectedImageIndex(index); + setShowSingleImageModal(true); + }; + var closeSingleImageModal = function () { return setShowSingleImageModal(false); }; + var handleThumbnailClick = function (index) { + setSelectedImageIndex(index); + }; + var handleNextImage = function () { + setCurrentImageIndex(function (prevIndex) { return (prevIndex + 1) % images.length; }); + }; + var handlePrevImage = function () { + setCurrentImageIndex(function (prevIndex) { return (prevIndex - 1 + images.length) % images.length; }); + }; + if (isMobile) { + return (React.createElement(SingleImageModal, { images: images, currentIndex: currentImageIndex, onClose: function () { }, onPrev: handlePrevImage, onNext: handleNextImage, onThumbnailClick: setCurrentImageIndex })); + } + var gridClassName = grid === "v2" ? "grid-version2" : "grid-version1"; + return (React.createElement("section", { style: { + width: "".concat(fullScreen ? "100%" : width, "px"), + height: "".concat(fullScreen ? "100%" : height, "px"), + }, className: "image-gallery" }, + React.createElement("div", { className: "image-grid ".concat(gridClassName) }, images.slice(0, 10).map(function (image, index) { return (React.createElement("div", { key: index, onClick: function () { return openAlbumModal(index); }, className: "img-box" }, + React.createElement("img", { key: index, src: image, alt: image }), + images.length > 10 && index === 9 && (React.createElement("div", { className: "last-image" }, + "+", + images.length - 10, + " Photos")))); })), + showAlbumModal && (React.createElement(AlbumModal, { images: images, onClose: closeAlbumModal, onImageClick: openSingleImageModal, selectedImageIndex: selectedImageIndex })), + showSingleImageModal && (React.createElement(SingleImageModal, { images: images, currentIndex: selectedImageIndex, onClose: closeSingleImageModal, onPrev: function () { + return setSelectedImageIndex(function (prev) { return (prev - 1 + images.length) % images.length; }); + }, onNext: function () { + return setSelectedImageIndex(function (prev) { return (prev + 1) % images.length; }); + }, onThumbnailClick: handleThumbnailClick })))); +}; + +export { ImageGallery }; +//# sourceMappingURL=index.esm.js.map diff --git a/index.esm.js.map b/index.esm.js.map new file mode 100644 index 0000000..1017946 --- /dev/null +++ b/index.esm.js.map @@ -0,0 +1 @@ +{"version":3,"file":"index.esm.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/components/AlbumModal.tsx","../src/components/SingleImageModal.tsx","../src/components/ImageGallery.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import React, { useRef, useEffect } from \"react\";\r\nimport { AlbumModalProps } from \"../types\";\r\nimport \"../styles/AlbumModal.css\";\r\n\r\nconst getRandomHeight = () => {\r\n const min = 6;\r\n const max = 20;\r\n const height = Math.random() * (max - min) + min;\r\n return `${height}rem`;\r\n};\r\n\r\nconst AlbumModal = (props: AlbumModalProps) => {\r\n const { images, onClose, onImageClick, selectedImageIndex } = props;\r\n const selectedImageRef = useRef(null);\r\n\r\n useEffect(() => {\r\n if (selectedImageRef.current) {\r\n setTimeout(() => {\r\n selectedImageRef.current?.scrollIntoView({\r\n behavior: \"smooth\",\r\n block: \"center\",\r\n });\r\n }, 150);\r\n selectedImageRef.current.classList.add(\"winking-effect\");\r\n setTimeout(() => {\r\n if (selectedImageRef.current) {\r\n selectedImageRef.current.classList.remove(\"winking-effect\");\r\n }\r\n }, 2200);\r\n }\r\n }, [selectedImageIndex]);\r\n\r\n return (\r\n
\r\n \r\n
\r\n {images.map((image, index) => (\r\n
\r\n onImageClick(index)}\r\n style={{ height: getRandomHeight() }}\r\n ref={index === selectedImageIndex ? selectedImageRef : null}\r\n />\r\n
\r\n ))}\r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default AlbumModal;\r\n","import React from \"react\";\r\n\r\nimport { useRef, useEffect, useState } from \"react\";\r\nimport { SingleImageModalProps } from \"../types\";\r\nimport \"../styles/SingleImageModal.css\";\r\n\r\nconst SingleImageModal = (props: SingleImageModalProps) => {\r\n const { images, currentIndex, onClose, onPrev, onNext, onThumbnailClick } =\r\n props;\r\n const currentImage = images[currentIndex];\r\n const thumbnailStripRef = useRef(null);\r\n const [direction, setDirection] = useState<\"next\" | \"prev\" | null>(null);\r\n\r\n useEffect(() => {\r\n if (thumbnailStripRef.current) {\r\n const activeThumb = thumbnailStripRef.current.querySelector(\".active\");\r\n if (activeThumb) {\r\n activeThumb.scrollIntoView({\r\n behavior: \"smooth\",\r\n inline: \"center\",\r\n block: \"nearest\",\r\n });\r\n }\r\n }\r\n }, [currentIndex]);\r\n\r\n const handleNext = () => {\r\n setDirection(\"next\");\r\n onNext();\r\n };\r\n\r\n const handlePrev = () => {\r\n setDirection(\"prev\");\r\n onPrev();\r\n };\r\n\r\n return (\r\n
\r\n \r\n
\r\n setDirection(null)}\r\n />\r\n
\r\n {currentIndex + 1}/{images.length}\r\n
\r\n
\r\n \r\n \r\n
\r\n {images.map((image, index) => (\r\n
\r\n onThumbnailClick(index)}\r\n />\r\n
\r\n ))}\r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default SingleImageModal;\r\n","import React from \"react\";\r\nimport { ImageGalleryProps } from \"../types\";\r\n\r\nimport { useEffect, useState } from \"react\";\r\n\r\nimport AlbumModal from \"./AlbumModal\";\r\nimport SingleImageModal from \"./SingleImageModal\";\r\n\r\nimport \"../styles/ImageGallery.css\";\r\n\r\nconst ImageGallery = (props: ImageGalleryProps) => {\r\n const { images, width, height, grid, fullScreen } = props;\r\n\r\n const [showAlbumModal, setShowAlbumModal] = useState(false);\r\n const [showSingleImageModal, setShowSingleImageModal] = useState(false);\r\n const [currentImageIndex, setCurrentImageIndex] = useState(0);\r\n const [selectedImageIndex, setSelectedImageIndex] = useState(0);\r\n const [isMobile, setIsMobile] = useState(false);\r\n\r\n useEffect(() => {\r\n const checkMobile = () => {\r\n setIsMobile(window.innerWidth <= 468);\r\n };\r\n\r\n checkMobile();\r\n window.addEventListener(\"resize\", checkMobile);\r\n return () => window.removeEventListener(\"resize\", checkMobile);\r\n }, []);\r\n\r\n const openAlbumModal = (index: number) => {\r\n setSelectedImageIndex(index);\r\n setShowAlbumModal(true);\r\n };\r\n\r\n const closeAlbumModal = () => setShowAlbumModal(false);\r\n const openSingleImageModal = (index: number) => {\r\n setSelectedImageIndex(index);\r\n setShowSingleImageModal(true);\r\n };\r\n const closeSingleImageModal = () => setShowSingleImageModal(false);\r\n\r\n const handleThumbnailClick = (index: number) => {\r\n setSelectedImageIndex(index);\r\n };\r\n\r\n const handleNextImage = () => {\r\n setCurrentImageIndex((prevIndex) => (prevIndex + 1) % images.length);\r\n };\r\n\r\n const handlePrevImage = () => {\r\n setCurrentImageIndex(\r\n (prevIndex) => (prevIndex - 1 + images.length) % images.length\r\n );\r\n };\r\n\r\n if (isMobile) {\r\n return (\r\n {}}\r\n onPrev={handlePrevImage}\r\n onNext={handleNextImage}\r\n onThumbnailClick={setCurrentImageIndex}\r\n />\r\n );\r\n }\r\n\r\n const gridClassName = grid === \"v2\" ? \"grid-version2\" : \"grid-version1\";\r\n\r\n return (\r\n \r\n
\r\n {images.slice(0, 10).map((image, index) => (\r\n openAlbumModal(index)}\r\n className=\"img-box\"\r\n >\r\n {image}\r\n\r\n {images.length > 10 && index === 9 && (\r\n
+{images.length - 10} Photos
\r\n )}\r\n
\r\n ))}\r\n \r\n\r\n {showAlbumModal && (\r\n \r\n )}\r\n\r\n {showSingleImageModal && (\r\n \r\n setSelectedImageIndex(\r\n (prev) => (prev - 1 + images.length) % images.length\r\n )\r\n }\r\n onNext={() =>\r\n setSelectedImageIndex((prev) => (prev + 1) % images.length)\r\n }\r\n onThumbnailClick={handleThumbnailClick}\r\n />\r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default ImageGallery;\r\n"],"names":[],"mappings":"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","x_google_ignoreList":[0]} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..6f4fe00 --- /dev/null +++ b/index.html @@ -0,0 +1,14 @@ + + + + + + Your Component Library + + + +
+ + + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..4dc7076 --- /dev/null +++ b/index.js @@ -0,0 +1,169 @@ +'use strict'; + +var React = require('react'); + +function styleInject(css, ref) { + if ( ref === void 0 ) ref = {}; + var insertAt = ref.insertAt; + + if (!css || typeof document === 'undefined') { return; } + + var head = document.head || document.getElementsByTagName('head')[0]; + var style = document.createElement('style'); + style.type = 'text/css'; + + if (insertAt === 'top') { + if (head.firstChild) { + head.insertBefore(style, head.firstChild); + } else { + head.appendChild(style); + } + } else { + head.appendChild(style); + } + + if (style.styleSheet) { + style.styleSheet.cssText = css; + } else { + style.appendChild(document.createTextNode(css)); + } +} + +var css_248z$2 = ".modal {\r\n z-index: 20;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100vw;\r\n height: 100vh;\r\n}\r\n\r\n.modal.album-modal {\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n align-items: flex-start;\r\n background-color: rgba(0, 0, 0, 0.8);\r\n overflow-y: auto;\r\n}\r\n\r\n.close-btn {\r\n position: fixed;\r\n top: 3%;\r\n right: 5%;\r\n font-size: 30px;\r\n color: white;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n}\r\n\r\n.album-grid {\r\n animation: scaleUp 0.3s ease-in-out;\r\n transition: 0.5;\r\n padding: 2rem 0;\r\n column-count: 3;\r\n gap: 0.8rem;\r\n width: 70%;\r\n overflow-y: auto;\r\n}\r\n\r\n@keyframes scaleUp {\r\n from {\r\n transform: scale(0.4);\r\n }\r\n to {\r\n transform: scale(1);\r\n }\r\n}\r\n\r\n.album-grid .img-box {\r\n overflow: hidden;\r\n display: inline-block;\r\n width: 100%;\r\n cursor: pointer;\r\n margin-top: 0.5rem;\r\n border-radius: 0.3rem;\r\n}\r\n.album-grid img {\r\n transition: all 0.3s ease-in-out;\r\n border-radius: 0.3rem;\r\n width: 100%;\r\n height: 100%;\r\n}\r\n\r\n.album-grid .img-box:hover img {\r\n transform: scale(1.3);\r\n}\r\n\r\n@keyframes winking {\r\n 0% {\r\n opacity: 1;\r\n border: 2px solid #007bff;\r\n }\r\n 40% {\r\n opacity: 0.5;\r\n border: 2px solid transparent;\r\n }\r\n 70% {\r\n opacity: 1;\r\n border: 2px solid #007bff;\r\n }\r\n 100% {\r\n opacity: 1;\r\n border: 2px solid transparent;\r\n }\r\n}\r\n\r\n.winking-effect {\r\n animation: winking 2.2s ease-in-out;\r\n}\r\n"; +styleInject(css_248z$2); + +var getRandomHeight = function () { + var min = 6; + var max = 20; + var height = Math.random() * (max - min) + min; + return "".concat(height, "rem"); +}; +var AlbumModal = function (props) { + var images = props.images, onClose = props.onClose, onImageClick = props.onImageClick, selectedImageIndex = props.selectedImageIndex; + var selectedImageRef = React.useRef(null); + React.useEffect(function () { + if (selectedImageRef.current) { + setTimeout(function () { + var _a; + (_a = selectedImageRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ + behavior: "smooth", + block: "center", + }); + }, 150); + selectedImageRef.current.classList.add("winking-effect"); + setTimeout(function () { + if (selectedImageRef.current) { + selectedImageRef.current.classList.remove("winking-effect"); + } + }, 2200); + } + }, [selectedImageIndex]); + return (React.createElement("div", { className: "modal album-modal" }, + React.createElement("button", { className: "close-btn", onClick: onClose }, "\u00D7"), + React.createElement("div", { className: "album-grid" }, images.map(function (image, index) { return (React.createElement("div", { key: index, className: "img-box" }, + React.createElement("img", { src: image, alt: image, onClick: function () { return onImageClick(index); }, style: { height: getRandomHeight() }, ref: index === selectedImageIndex ? selectedImageRef : null }))); })))); +}; + +var css_248z$1 = ".modal {\r\n z-index: 20;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.modal.single-image-modal {\r\n background-color: rgb(0, 0, 0);\r\n}\r\n\r\n.single-page-close-btn {\r\n position: fixed;\r\n top: 5%;\r\n right: 4%;\r\n font-size: 14px;\r\n color: white;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n}\r\n\r\n.single-image-modal .album-image > img {\r\n max-width: 90%;\r\n max-height: 90%;\r\n object-fit: contain;\r\n position: relative;\r\n}\r\n\r\n.image-counter {\r\n background-color: rgba(0, 0, 0, 0.5);\r\n color: white;\r\n padding: 5px 10px;\r\n border-radius: 15px;\r\n font-size: 14px;\r\n z-index: 10;\r\n}\r\n\r\n.nav-btn {\r\n position: absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n font-size: 40px;\r\n color: white;\r\n background: rgba(0, 0, 0, 0.5);\r\n border: none;\r\n cursor: pointer;\r\n z-index: 10;\r\n padding: 10px;\r\n}\r\n\r\n.single-image-modal {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.main-image-container {\r\n height: 64vh;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.5rem;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.main-image {\r\n max-width: 100%;\r\n max-height: 100%;\r\n object-fit: contain;\r\n transition: transform 0.3s ease-out;\r\n}\r\n\r\n.main-image.next {\r\n animation: slideLeft 0.3s forwards;\r\n}\r\n\r\n.main-image.prev {\r\n animation: slideRight 0.3s forwards;\r\n}\r\n\r\n@keyframes slideLeft {\r\n from {\r\n transform: translateX(100%);\r\n }\r\n to {\r\n transform: translateX(0);\r\n }\r\n}\r\n\r\n@keyframes slideRight {\r\n from {\r\n transform: translateX(-100%);\r\n }\r\n to {\r\n transform: translateX(0);\r\n }\r\n}\r\n\r\n.thumbnail-strip {\r\n margin: 0 auto;\r\n position: absolute;\r\n bottom: 20px;\r\n left: 0;\r\n right: 0;\r\n display: flex;\r\n justify-content: flex-start;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 10px;\r\n max-width: 60%;\r\n overflow-x: auto;\r\n}\r\n.thumbnail-strip::-webkit-scrollbar {\r\n display: none;\r\n}\r\n\r\n.album-image-box {\r\n position: relative;\r\n width: 60px;\r\n height: 60px;\r\n}\r\n\r\n.album-image-box .thumbnail {\r\n width: inherit;\r\n height: inherit;\r\n cursor: pointer;\r\n transition: border-color 0.3s ease;\r\n border-radius: 0.3rem;\r\n opacity: 0.5;\r\n}\r\n\r\n.album-image-box .thumbnail.active {\r\n opacity: 1;\r\n transform: scale(1.2);\r\n}\r\n\r\n.prev-btn {\r\n left: 20px;\r\n}\r\n\r\n.next-btn {\r\n right: 20px;\r\n}\r\n\r\n@media (max-width: 468px) {\r\n .modal {\r\n width: 100%;\r\n position: relative;\r\n }\r\n .modal.single-image-modal {\r\n background-color: transparent;\r\n height: auto;\r\n }\r\n\r\n .image-counter {\r\n bottom: 17%;\r\n right: 1rem;\r\n position: absolute;\r\n }\r\n\r\n .prev-btn {\r\n left: 0;\r\n }\r\n\r\n .next-btn {\r\n right: 0;\r\n }\r\n\r\n .thumbnail-strip {\r\n display: none;\r\n }\r\n\r\n .single-page-close-btn {\r\n display: none;\r\n }\r\n}\r\n"; +styleInject(css_248z$1); + +var SingleImageModal = function (props) { + var images = props.images, currentIndex = props.currentIndex, onClose = props.onClose, onPrev = props.onPrev, onNext = props.onNext, onThumbnailClick = props.onThumbnailClick; + var currentImage = images[currentIndex]; + var thumbnailStripRef = React.useRef(null); + var _a = React.useState(null), direction = _a[0], setDirection = _a[1]; + React.useEffect(function () { + if (thumbnailStripRef.current) { + var activeThumb = thumbnailStripRef.current.querySelector(".active"); + if (activeThumb) { + activeThumb.scrollIntoView({ + behavior: "smooth", + inline: "center", + block: "nearest", + }); + } + } + }, [currentIndex]); + var handleNext = function () { + setDirection("next"); + onNext(); + }; + var handlePrev = function () { + setDirection("prev"); + onPrev(); + }; + return (React.createElement("div", { className: "modal single-image-modal" }, + React.createElement("button", { className: "single-page-close-btn", onClick: onClose }, "Back"), + React.createElement("div", { className: "main-image-container" }, + React.createElement("img", { src: currentImage, alt: currentImage, className: "main-image ".concat(direction), onAnimationEnd: function () { return setDirection(null); } }), + React.createElement("div", { className: "image-counter" }, + currentIndex + 1, + "/", + images.length)), + React.createElement("button", { className: "nav-btn prev-btn", onClick: handlePrev }, "\u2039"), + React.createElement("button", { className: "nav-btn next-btn", onClick: handleNext }, "\u203A"), + React.createElement("div", { className: "thumbnail-strip", ref: thumbnailStripRef }, images.map(function (image, index) { return (React.createElement("div", { className: "album-image-box", key: index }, + React.createElement("img", { src: image, alt: image, className: "thumbnail ".concat(index === currentIndex ? "active" : ""), onClick: function () { return onThumbnailClick(index); } }))); })))); +}; + +var css_248z = ".image-gallery {\r\n max-width: 1000px;\r\n margin: 0 auto;\r\n}\r\n\r\n.image-grid.grid-version1 {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 0.5rem;\r\n}\r\n\r\n.image-grid .img-box {\r\n width: 100%;\r\n height: 6rem;\r\n border-radius: 0.3rem;\r\n cursor: pointer;\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n\r\n.image-grid .img-box > img {\r\n width: inherit;\r\n height: inherit;\r\n}\r\n\r\n.image-grid.grid-version1 .img-box:first-child {\r\n grid-column: 1 / -1;\r\n height: 13rem;\r\n}\r\n.image-grid.grid-version2 {\r\n display: grid;\r\n grid-template-columns: repeat(7, 1fr);\r\n grid-template-areas:\r\n \"myArea1 myArea1 myArea1 myArea1 myArea1 myArea2 myArea2\"\r\n \"myArea1 myArea1 myArea1 myArea1 myArea1 myArea3 myArea3\";\r\n gap: 0.5rem;\r\n}\r\n\r\n.image-grid.grid-version2 .img-box:first-child {\r\n height: 13rem;\r\n grid-area: myArea1;\r\n}\r\n\r\n.image-grid.grid-version2 .img-box:nth-child(2) {\r\n grid-area: myArea2;\r\n}\r\n\r\n.image-grid.grid-version2 .img-box:nth-child(3) {\r\n grid-area: myArea3;\r\n height: 6.5rem;\r\n}\r\n\r\n.image-grid.grid-version2 .img-box:last-child {\r\n width: 8rem;\r\n}\r\n\r\n.image-grid.grid-version2 .img-box:nth-child(5) {\r\n width: 8rem;\r\n}\r\n\r\n.image-grid .img-box:first-child > img {\r\n width: inherit;\r\n height: inherit;\r\n}\r\n\r\n.image-grid .last-image {\r\n color: white;\r\n font-family: \"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif;\r\n font-size: 0.8rem;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background-color: rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n.image-grid .img-box::after {\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: rgba(0, 0, 0, 0.3);\r\n z-index: 1;\r\n opacity: 0;\r\n transition: opacity 0.3s ease;\r\n}\r\n\r\n.image-grid .img-box:hover::after {\r\n opacity: 1;\r\n}\r\n"; +styleInject(css_248z); + +var ImageGallery = function (props) { + var images = props.images, width = props.width, height = props.height, grid = props.grid, fullScreen = props.fullScreen; + var _a = React.useState(false), showAlbumModal = _a[0], setShowAlbumModal = _a[1]; + var _b = React.useState(false), showSingleImageModal = _b[0], setShowSingleImageModal = _b[1]; + var _c = React.useState(0), currentImageIndex = _c[0], setCurrentImageIndex = _c[1]; + var _d = React.useState(0), selectedImageIndex = _d[0], setSelectedImageIndex = _d[1]; + var _e = React.useState(false), isMobile = _e[0], setIsMobile = _e[1]; + React.useEffect(function () { + var checkMobile = function () { + setIsMobile(window.innerWidth <= 468); + }; + checkMobile(); + window.addEventListener("resize", checkMobile); + return function () { return window.removeEventListener("resize", checkMobile); }; + }, []); + var openAlbumModal = function (index) { + setSelectedImageIndex(index); + setShowAlbumModal(true); + }; + var closeAlbumModal = function () { return setShowAlbumModal(false); }; + var openSingleImageModal = function (index) { + setSelectedImageIndex(index); + setShowSingleImageModal(true); + }; + var closeSingleImageModal = function () { return setShowSingleImageModal(false); }; + var handleThumbnailClick = function (index) { + setSelectedImageIndex(index); + }; + var handleNextImage = function () { + setCurrentImageIndex(function (prevIndex) { return (prevIndex + 1) % images.length; }); + }; + var handlePrevImage = function () { + setCurrentImageIndex(function (prevIndex) { return (prevIndex - 1 + images.length) % images.length; }); + }; + if (isMobile) { + return (React.createElement(SingleImageModal, { images: images, currentIndex: currentImageIndex, onClose: function () { }, onPrev: handlePrevImage, onNext: handleNextImage, onThumbnailClick: setCurrentImageIndex })); + } + var gridClassName = grid === "v2" ? "grid-version2" : "grid-version1"; + return (React.createElement("section", { style: { + width: "".concat(fullScreen ? "100%" : width, "px"), + height: "".concat(fullScreen ? "100%" : height, "px"), + }, className: "image-gallery" }, + React.createElement("div", { className: "image-grid ".concat(gridClassName) }, images.slice(0, 10).map(function (image, index) { return (React.createElement("div", { key: index, onClick: function () { return openAlbumModal(index); }, className: "img-box" }, + React.createElement("img", { key: index, src: image, alt: image }), + images.length > 10 && index === 9 && (React.createElement("div", { className: "last-image" }, + "+", + images.length - 10, + " Photos")))); })), + showAlbumModal && (React.createElement(AlbumModal, { images: images, onClose: closeAlbumModal, onImageClick: openSingleImageModal, selectedImageIndex: selectedImageIndex })), + showSingleImageModal && (React.createElement(SingleImageModal, { images: images, currentIndex: selectedImageIndex, onClose: closeSingleImageModal, onPrev: function () { + return setSelectedImageIndex(function (prev) { return (prev - 1 + images.length) % images.length; }); + }, onNext: function () { + return setSelectedImageIndex(function (prev) { return (prev + 1) % images.length; }); + }, onThumbnailClick: handleThumbnailClick })))); +}; + +exports.ImageGallery = ImageGallery; +//# sourceMappingURL=index.js.map diff --git a/index.js.map b/index.js.map new file mode 100644 index 0000000..1776991 --- /dev/null +++ b/index.js.map @@ -0,0 +1 @@ +{"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/components/AlbumModal.tsx","../src/components/SingleImageModal.tsx","../src/components/ImageGallery.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import React, { useRef, useEffect } from \"react\";\r\nimport { AlbumModalProps } from \"../types\";\r\nimport \"../styles/AlbumModal.css\";\r\n\r\nconst getRandomHeight = () => {\r\n const min = 6;\r\n const max = 20;\r\n const height = Math.random() * (max - min) + min;\r\n return `${height}rem`;\r\n};\r\n\r\nconst AlbumModal = (props: AlbumModalProps) => {\r\n const { images, onClose, onImageClick, selectedImageIndex } = props;\r\n const selectedImageRef = useRef(null);\r\n\r\n useEffect(() => {\r\n if (selectedImageRef.current) {\r\n setTimeout(() => {\r\n selectedImageRef.current?.scrollIntoView({\r\n behavior: \"smooth\",\r\n block: \"center\",\r\n });\r\n }, 150);\r\n selectedImageRef.current.classList.add(\"winking-effect\");\r\n setTimeout(() => {\r\n if (selectedImageRef.current) {\r\n selectedImageRef.current.classList.remove(\"winking-effect\");\r\n }\r\n }, 2200);\r\n }\r\n }, [selectedImageIndex]);\r\n\r\n return (\r\n
\r\n \r\n
\r\n {images.map((image, index) => (\r\n
\r\n onImageClick(index)}\r\n style={{ height: getRandomHeight() }}\r\n ref={index === selectedImageIndex ? selectedImageRef : null}\r\n />\r\n
\r\n ))}\r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default AlbumModal;\r\n","import React from \"react\";\r\n\r\nimport { useRef, useEffect, useState } from \"react\";\r\nimport { SingleImageModalProps } from \"../types\";\r\nimport \"../styles/SingleImageModal.css\";\r\n\r\nconst SingleImageModal = (props: SingleImageModalProps) => {\r\n const { images, currentIndex, onClose, onPrev, onNext, onThumbnailClick } =\r\n props;\r\n const currentImage = images[currentIndex];\r\n const thumbnailStripRef = useRef(null);\r\n const [direction, setDirection] = useState<\"next\" | \"prev\" | null>(null);\r\n\r\n useEffect(() => {\r\n if (thumbnailStripRef.current) {\r\n const activeThumb = thumbnailStripRef.current.querySelector(\".active\");\r\n if (activeThumb) {\r\n activeThumb.scrollIntoView({\r\n behavior: \"smooth\",\r\n inline: \"center\",\r\n block: \"nearest\",\r\n });\r\n }\r\n }\r\n }, [currentIndex]);\r\n\r\n const handleNext = () => {\r\n setDirection(\"next\");\r\n onNext();\r\n };\r\n\r\n const handlePrev = () => {\r\n setDirection(\"prev\");\r\n onPrev();\r\n };\r\n\r\n return (\r\n
\r\n \r\n
\r\n setDirection(null)}\r\n />\r\n
\r\n {currentIndex + 1}/{images.length}\r\n
\r\n
\r\n \r\n \r\n
\r\n {images.map((image, index) => (\r\n
\r\n onThumbnailClick(index)}\r\n />\r\n
\r\n ))}\r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default SingleImageModal;\r\n","import React from \"react\";\r\nimport { ImageGalleryProps } from \"../types\";\r\n\r\nimport { useEffect, useState } from \"react\";\r\n\r\nimport AlbumModal from \"./AlbumModal\";\r\nimport SingleImageModal from \"./SingleImageModal\";\r\n\r\nimport \"../styles/ImageGallery.css\";\r\n\r\nconst ImageGallery = (props: ImageGalleryProps) => {\r\n const { images, width, height, grid, fullScreen } = props;\r\n\r\n const [showAlbumModal, setShowAlbumModal] = useState(false);\r\n const [showSingleImageModal, setShowSingleImageModal] = useState(false);\r\n const [currentImageIndex, setCurrentImageIndex] = useState(0);\r\n const [selectedImageIndex, setSelectedImageIndex] = useState(0);\r\n const [isMobile, setIsMobile] = useState(false);\r\n\r\n useEffect(() => {\r\n const checkMobile = () => {\r\n setIsMobile(window.innerWidth <= 468);\r\n };\r\n\r\n checkMobile();\r\n window.addEventListener(\"resize\", checkMobile);\r\n return () => window.removeEventListener(\"resize\", checkMobile);\r\n }, []);\r\n\r\n const openAlbumModal = (index: number) => {\r\n setSelectedImageIndex(index);\r\n setShowAlbumModal(true);\r\n };\r\n\r\n const closeAlbumModal = () => setShowAlbumModal(false);\r\n const openSingleImageModal = (index: number) => {\r\n setSelectedImageIndex(index);\r\n setShowSingleImageModal(true);\r\n };\r\n const closeSingleImageModal = () => setShowSingleImageModal(false);\r\n\r\n const handleThumbnailClick = (index: number) => {\r\n setSelectedImageIndex(index);\r\n };\r\n\r\n const handleNextImage = () => {\r\n setCurrentImageIndex((prevIndex) => (prevIndex + 1) % images.length);\r\n };\r\n\r\n const handlePrevImage = () => {\r\n setCurrentImageIndex(\r\n (prevIndex) => (prevIndex - 1 + images.length) % images.length\r\n );\r\n };\r\n\r\n if (isMobile) {\r\n return (\r\n {}}\r\n onPrev={handlePrevImage}\r\n onNext={handleNextImage}\r\n onThumbnailClick={setCurrentImageIndex}\r\n />\r\n );\r\n }\r\n\r\n const gridClassName = grid === \"v2\" ? \"grid-version2\" : \"grid-version1\";\r\n\r\n return (\r\n \r\n
\r\n {images.slice(0, 10).map((image, index) => (\r\n openAlbumModal(index)}\r\n className=\"img-box\"\r\n >\r\n {image}\r\n\r\n {images.length > 10 && index === 9 && (\r\n
+{images.length - 10} Photos
\r\n )}\r\n
\r\n ))}\r\n \r\n\r\n {showAlbumModal && (\r\n \r\n )}\r\n\r\n {showSingleImageModal && (\r\n \r\n setSelectedImageIndex(\r\n (prev) => (prev - 1 + images.length) % images.length\r\n )\r\n }\r\n onNext={() =>\r\n setSelectedImageIndex((prev) => (prev + 1) % images.length)\r\n }\r\n onThumbnailClick={handleThumbnailClick}\r\n />\r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default ImageGallery;\r\n"],"names":["useRef","useEffect","useState"],"mappings":";;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;ACrBA,IAAM,eAAe,GAAG,YAAA;IACtB,IAAM,GAAG,GAAG,CAAC,CAAC;IACd,IAAM,GAAG,GAAG,EAAE,CAAC;AACf,IAAA,IAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE,IAAI,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;IACjD,OAAO,EAAA,CAAA,MAAA,CAAG,MAAM,EAAA,KAAA,CAAK,CAAC;AACxB,CAAC,CAAC;AAEF,IAAM,UAAU,GAAG,UAAC,KAAsB,EAAA;AAChC,IAAA,IAAA,MAAM,GAAgD,KAAK,OAArD,EAAE,OAAO,GAAuC,KAAK,CAAA,OAA5C,EAAE,YAAY,GAAyB,KAAK,CAA9B,YAAA,EAAE,kBAAkB,GAAK,KAAK,mBAAV,CAAW;AACpE,IAAA,IAAM,gBAAgB,GAAGA,YAAM,CAA0B,IAAI,CAAC,CAAC;AAE/D,IAAAC,eAAS,CAAC,YAAA;AACR,QAAA,IAAI,gBAAgB,CAAC,OAAO,EAAE;AAC5B,YAAA,UAAU,CAAC,YAAA;;AACT,gBAAA,CAAA,EAAA,GAAA,gBAAgB,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,cAAc,CAAC;AACvC,oBAAA,QAAQ,EAAE,QAAQ;AAClB,oBAAA,KAAK,EAAE,QAAQ;AAChB,iBAAA,CAAC,CAAC;aACJ,EAAE,GAAG,CAAC,CAAC;YACR,gBAAgB,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;AACzD,YAAA,UAAU,CAAC,YAAA;AACT,gBAAA,IAAI,gBAAgB,CAAC,OAAO,EAAE;oBAC5B,gBAAgB,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;iBAC7D;aACF,EAAE,IAAI,CAAC,CAAC;SACV;AACH,KAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;AAEzB,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mBAAmB,EAAA;AAChC,QAAA,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAC,WAAW,EAAC,OAAO,EAAE,OAAO,EAErC,EAAA,QAAA,CAAA;QACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,YAAY,EAAA,EACxB,MAAM,CAAC,GAAG,CAAC,UAAC,KAAK,EAAE,KAAK,EAAK,EAAA,QAC5B,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,KAAK,EAAE,SAAS,EAAC,SAAS,EAAA;YAClC,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,KAAK,EACV,GAAG,EAAE,KAAK,EACV,OAAO,EAAE,YAAA,EAAM,OAAA,YAAY,CAAC,KAAK,CAAC,CAAnB,EAAmB,EAClC,KAAK,EAAE,EAAE,MAAM,EAAE,eAAe,EAAE,EAAE,EACpC,GAAG,EAAE,KAAK,KAAK,kBAAkB,GAAG,gBAAgB,GAAG,IAAI,EAC3D,CAAA,CACE,EACP,EAAA,CAAC,CACE,CACF,EACN;AACJ,CAAC;;;;;AC9CD,IAAM,gBAAgB,GAAG,UAAC,KAA4B,EAAA;AAC5C,IAAA,IAAA,MAAM,GACZ,KAAK,CAAA,MADO,EAAE,YAAY,GAC1B,KAAK,CADqB,YAAA,EAAE,OAAO,GACnC,KAAK,CAAA,OAD8B,EAAE,MAAM,GAC3C,KAAK,CADsC,MAAA,EAAE,MAAM,GACnD,KAAK,CAAA,MAD8C,EAAE,gBAAgB,GACrE,KAAK,iBADgE,CAC/D;AACR,IAAA,IAAM,YAAY,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;AAC1C,IAAA,IAAM,iBAAiB,GAAGD,YAAM,CAAiB,IAAI,CAAC,CAAC;IACjD,IAAA,EAAA,GAA4BE,cAAQ,CAAyB,IAAI,CAAC,EAAjE,SAAS,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,YAAY,GAAA,EAAA,CAAA,CAAA,CAA0C,CAAC;AAEzE,IAAAD,eAAS,CAAC,YAAA;AACR,QAAA,IAAI,iBAAiB,CAAC,OAAO,EAAE;YAC7B,IAAM,WAAW,GAAG,iBAAiB,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;YACvE,IAAI,WAAW,EAAE;gBACf,WAAW,CAAC,cAAc,CAAC;AACzB,oBAAA,QAAQ,EAAE,QAAQ;AAClB,oBAAA,MAAM,EAAE,QAAQ;AAChB,oBAAA,KAAK,EAAE,SAAS;AACjB,iBAAA,CAAC,CAAC;aACJ;SACF;AACH,KAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;AAEnB,IAAA,IAAM,UAAU,GAAG,YAAA;QACjB,YAAY,CAAC,MAAM,CAAC,CAAC;AACrB,QAAA,MAAM,EAAE,CAAC;AACX,KAAC,CAAC;AAEF,IAAA,IAAM,UAAU,GAAG,YAAA;QACjB,YAAY,CAAC,MAAM,CAAC,CAAC;AACrB,QAAA,MAAM,EAAE,CAAC;AACX,KAAC,CAAC;AAEF,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0BAA0B,EAAA;AACvC,QAAA,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAC,uBAAuB,EAAC,OAAO,EAAE,OAAO,EAEjD,EAAA,MAAA,CAAA;QACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,sBAAsB,EAAA;YACnC,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,YAAY,EACjB,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,aAAc,CAAA,MAAA,CAAA,SAAS,CAAE,EACpC,cAAc,EAAE,YAAA,EAAM,OAAA,YAAY,CAAC,IAAI,CAAC,CAAlB,EAAkB,EACxC,CAAA;YACF,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,eAAe,EAAA;AAC3B,gBAAA,YAAY,GAAG,CAAC;;gBAAG,MAAM,CAAC,MAAM,CAC7B,CACF;AACN,QAAA,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAC,kBAAkB,EAAC,OAAO,EAAE,UAAU,EAE/C,EAAA,QAAA,CAAA;AACT,QAAA,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAC,kBAAkB,EAAC,OAAO,EAAE,UAAU,EAE/C,EAAA,QAAA,CAAA;QACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,iBAAiB,EAAC,GAAG,EAAE,iBAAiB,EACpD,EAAA,MAAM,CAAC,GAAG,CAAC,UAAC,KAAK,EAAE,KAAK,EAAK,EAAA,QAC5B,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,iBAAiB,EAAC,GAAG,EAAE,KAAK,EAAA;AACzC,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,KAAK,EACV,GAAG,EAAE,KAAK,EACV,SAAS,EAAE,YAAa,CAAA,MAAA,CAAA,KAAK,KAAK,YAAY,GAAG,QAAQ,GAAG,EAAE,CAAE,EAChE,OAAO,EAAE,YAAA,EAAM,OAAA,gBAAgB,CAAC,KAAK,CAAC,CAAA,EAAA,EACtC,CAAA,CACE,EARsB,EAS7B,CAAC,CACE,CACF,EACN;AACJ,CAAC;;;;;AC9DK,IAAA,YAAY,GAAG,UAAC,KAAwB,EAAA;IACpC,IAAA,MAAM,GAAsC,KAAK,CAA3C,MAAA,EAAE,KAAK,GAA+B,KAAK,CAApC,KAAA,EAAE,MAAM,GAAuB,KAAK,CAA5B,MAAA,EAAE,IAAI,GAAiB,KAAK,CAAA,IAAtB,EAAE,UAAU,GAAK,KAAK,CAAA,UAAV,CAAW;IAEpD,IAAA,EAAA,GAAsCC,cAAQ,CAAC,KAAK,CAAC,EAApD,cAAc,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,iBAAiB,GAAA,EAAA,CAAA,CAAA,CAAmB,CAAC;IACtD,IAAA,EAAA,GAAkDA,cAAQ,CAAC,KAAK,CAAC,EAAhE,oBAAoB,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,uBAAuB,GAAA,EAAA,CAAA,CAAA,CAAmB,CAAC;IAClE,IAAA,EAAA,GAA4CA,cAAQ,CAAC,CAAC,CAAC,EAAtD,iBAAiB,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,oBAAoB,GAAA,EAAA,CAAA,CAAA,CAAe,CAAC;IACxD,IAAA,EAAA,GAA8CA,cAAQ,CAAC,CAAC,CAAC,EAAxD,kBAAkB,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,qBAAqB,GAAA,EAAA,CAAA,CAAA,CAAe,CAAC;IAC1D,IAAA,EAAA,GAA0BA,cAAQ,CAAC,KAAK,CAAC,EAAxC,QAAQ,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,WAAW,GAAA,EAAA,CAAA,CAAA,CAAmB,CAAC;AAEhD,IAAAD,eAAS,CAAC,YAAA;AACR,QAAA,IAAM,WAAW,GAAG,YAAA;AAClB,YAAA,WAAW,CAAC,MAAM,CAAC,UAAU,IAAI,GAAG,CAAC,CAAC;AACxC,SAAC,CAAC;AAEF,QAAA,WAAW,EAAE,CAAC;AACd,QAAA,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;AAC/C,QAAA,OAAO,YAAM,EAAA,OAAA,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAjD,EAAiD,CAAC;KAChE,EAAE,EAAE,CAAC,CAAC;IAEP,IAAM,cAAc,GAAG,UAAC,KAAa,EAAA;QACnC,qBAAqB,CAAC,KAAK,CAAC,CAAC;QAC7B,iBAAiB,CAAC,IAAI,CAAC,CAAC;AAC1B,KAAC,CAAC;IAEF,IAAM,eAAe,GAAG,YAAA,EAAM,OAAA,iBAAiB,CAAC,KAAK,CAAC,CAAxB,EAAwB,CAAC;IACvD,IAAM,oBAAoB,GAAG,UAAC,KAAa,EAAA;QACzC,qBAAqB,CAAC,KAAK,CAAC,CAAC;QAC7B,uBAAuB,CAAC,IAAI,CAAC,CAAC;AAChC,KAAC,CAAC;IACF,IAAM,qBAAqB,GAAG,YAAA,EAAM,OAAA,uBAAuB,CAAC,KAAK,CAAC,CAA9B,EAA8B,CAAC;IAEnE,IAAM,oBAAoB,GAAG,UAAC,KAAa,EAAA;QACzC,qBAAqB,CAAC,KAAK,CAAC,CAAC;AAC/B,KAAC,CAAC;AAEF,IAAA,IAAM,eAAe,GAAG,YAAA;AACtB,QAAA,oBAAoB,CAAC,UAAC,SAAS,EAAK,EAAA,OAAA,CAAC,SAAS,GAAG,CAAC,IAAI,MAAM,CAAC,MAAM,CAA/B,EAA+B,CAAC,CAAC;AACvE,KAAC,CAAC;AAEF,IAAA,IAAM,eAAe,GAAG,YAAA;QACtB,oBAAoB,CAClB,UAAC,SAAS,EAAA,EAAK,OAAA,CAAC,SAAS,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,CAAA,EAAA,CAC/D,CAAC;AACJ,KAAC,CAAC;IAEF,IAAI,QAAQ,EAAE;AACZ,QAAA,QACE,KAAA,CAAA,aAAA,CAAC,gBAAgB,EAAA,EACf,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,iBAAiB,EAC/B,OAAO,EAAE,YAAA,GAAQ,EACjB,MAAM,EAAE,eAAe,EACvB,MAAM,EAAE,eAAe,EACvB,gBAAgB,EAAE,oBAAoB,EAAA,CACtC,EACF;KACH;AAED,IAAA,IAAM,aAAa,GAAG,IAAI,KAAK,IAAI,GAAG,eAAe,GAAG,eAAe,CAAC;IAExE,QACE,KACE,CAAA,aAAA,CAAA,SAAA,EAAA,EAAA,KAAK,EAAE;YACL,KAAK,EAAE,EAAG,CAAA,MAAA,CAAA,UAAU,GAAG,MAAM,GAAG,KAAK,EAAI,IAAA,CAAA;YACzC,MAAM,EAAE,EAAG,CAAA,MAAA,CAAA,UAAU,GAAG,MAAM,GAAG,MAAM,EAAI,IAAA,CAAA;SAC5C,EACD,SAAS,EAAE,eAAe,EAAA;AAE1B,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,aAAA,CAAA,MAAA,CAAc,aAAa,CAAE,EAAA,EAC1C,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,UAAC,KAAK,EAAE,KAAK,EAAK,EAAA,QACzC,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,KAAK,EACV,OAAO,EAAE,YAAA,EAAM,OAAA,cAAc,CAAC,KAAK,CAAC,CAAA,EAAA,EACpC,SAAS,EAAC,SAAS,EAAA;YAEnB,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAI,CAAA;AAE1C,YAAA,MAAM,CAAC,MAAM,GAAG,EAAE,IAAI,KAAK,KAAK,CAAC,KAChC,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,YAAY,EAAA;;gBAAG,MAAM,CAAC,MAAM,GAAG,EAAE;AAAc,gBAAA,SAAA,CAAA,CAC/D,CACG,EAXmC,EAY1C,CAAC,CACE;QAEL,cAAc,KACb,KAAC,CAAA,aAAA,CAAA,UAAU,IACT,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,eAAe,EACxB,YAAY,EAAE,oBAAoB,EAClC,kBAAkB,EAAE,kBAAkB,EAAA,CACtC,CACH;AAEA,QAAA,oBAAoB,KACnB,KAAA,CAAA,aAAA,CAAC,gBAAgB,EACf,EAAA,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,kBAAkB,EAChC,OAAO,EAAE,qBAAqB,EAC9B,MAAM,EAAE,YAAA;gBACN,OAAA,qBAAqB,CACnB,UAAC,IAAI,IAAK,OAAA,CAAC,IAAI,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,CAA1C,EAA0C,CACrD,CAAA;aAAA,EAEH,MAAM,EAAE,YAAA;AACN,gBAAA,OAAA,qBAAqB,CAAC,UAAC,IAAI,EAAA,EAAK,OAAA,CAAC,IAAI,GAAG,CAAC,IAAI,MAAM,CAAC,MAAM,CAAA,EAAA,CAAC,CAAA;aAAA,EAE7D,gBAAgB,EAAE,oBAAoB,GACtC,CACH,CACO,EACV;AACJ;;;;","x_google_ignoreList":[0]} \ No newline at end of file diff --git a/types/App.d.ts b/types/App.d.ts new file mode 100644 index 0000000..1b8b59f --- /dev/null +++ b/types/App.d.ts @@ -0,0 +1,3 @@ +import React from "react"; +declare function App(): React.JSX.Element; +export default App; diff --git a/types/components/AlbumModal.d.ts b/types/components/AlbumModal.d.ts new file mode 100644 index 0000000..03faed1 --- /dev/null +++ b/types/components/AlbumModal.d.ts @@ -0,0 +1,5 @@ +import React from "react"; +import { AlbumModalProps } from "../types"; +import "../styles/AlbumModal.css"; +declare const AlbumModal: (props: AlbumModalProps) => React.JSX.Element; +export default AlbumModal; diff --git a/types/components/ImageGallery.d.ts b/types/components/ImageGallery.d.ts new file mode 100644 index 0000000..146a72c --- /dev/null +++ b/types/components/ImageGallery.d.ts @@ -0,0 +1,5 @@ +import React from "react"; +import { ImageGalleryProps } from "../types"; +import "../styles/ImageGallery.css"; +declare const ImageGallery: (props: ImageGalleryProps) => React.JSX.Element; +export default ImageGallery; diff --git a/types/components/SingleImageModal.d.ts b/types/components/SingleImageModal.d.ts new file mode 100644 index 0000000..0f43b03 --- /dev/null +++ b/types/components/SingleImageModal.d.ts @@ -0,0 +1,5 @@ +import React from "react"; +import { SingleImageModalProps } from "../types"; +import "../styles/SingleImageModal.css"; +declare const SingleImageModal: (props: SingleImageModalProps) => React.JSX.Element; +export default SingleImageModal; diff --git a/types/index.d.ts b/types/index.d.ts new file mode 100644 index 0000000..2d11cbc --- /dev/null +++ b/types/index.d.ts @@ -0,0 +1 @@ +export { default as ImageGallery } from "./components/ImageGallery"; diff --git a/types/main.d.ts b/types/main.d.ts new file mode 100644 index 0000000..74d5d7e --- /dev/null +++ b/types/main.d.ts @@ -0,0 +1 @@ +import "./styles/Global.css"; diff --git a/types/types/index.d.ts b/types/types/index.d.ts new file mode 100644 index 0000000..aff67ab --- /dev/null +++ b/types/types/index.d.ts @@ -0,0 +1,30 @@ +type BaseImageGalleryProps = { + images: string[]; + grid: "v1" | "v2"; +}; +type FullScreenProps = { + fullScreen: true; + width?: never; + height?: never; +}; +type NonFullScreenProps = { + fullScreen?: false; + width: number; + height: number; +}; +export type ImageGalleryProps = BaseImageGalleryProps & (FullScreenProps | NonFullScreenProps); +export type AlbumModalProps = { + images: string[]; + onClose: () => void; + onImageClick: (index: number) => void; + selectedImageIndex: number; +}; +export type SingleImageModalProps = { + images: string[]; + currentIndex: number; + onClose: () => void; + onPrev: () => void; + onNext: () => void; + onThumbnailClick: (index: number) => void; +}; +export {};