feat: Make thumbnails optional

Author: oluwatobiss

src/ImageGallery.tsx

@@ -15,6 +15,7 @@ export function ImageGallery({
   const [imageSrc, setImageSrc] = useState<string | undefined>(undefined);
   const [slideNumber, setSlideNumber] = useState(1);
   const [showModalControls, setShowModalControls] = useState(false);
+  const [showThumbnails, setShowThumbnails] = useState(false);
   const [fullscreen, setFullscreen] = useState(false);
   const dialogRef = useRef<HTMLDialogElement | null>(null);
   const lightboxRef = useRef<HTMLElement | null>(null);
@@ -201,6 +202,17 @@ export function ImageGallery({
             ...modalToolbarStyle,
           }}
         >
+          <button
+            type="button"
+            aria-label="Show thumbnails"
+            style={modalToolbarBtnStyle}
+            title="Show thumbnails"
+            onClick={() => setShowThumbnails(!showThumbnails)}
+          >
+            {SvgElement(
+              <path d="M1 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1zM1 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1zM1 12a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1z" />
+            )}
+          </button>
           <button
             type="button"
             aria-label="Go full screen (Keyboard shortcut f)"
@@ -241,7 +253,12 @@ export function ImageGallery({
             )}
           </button>
         </span>
-        <section style={modalSlideShowSectionStyle}>
+        <section
+          style={{
+            height: showThumbnails ? "80vh" : "100vh",
+            ...modalSlideShowSectionStyle,
+          }}
+        >
           <button
             type="button"
             aria-label="Previous image"
@@ -263,7 +280,10 @@ export function ImageGallery({
           <img
             src={imageSrc}
             alt={imagesInfoArray[slideNumber - 1].alt}
-            style={modalImageStyle}
+            style={{
+              height: showThumbnails ? "80vh" : "100vh",
+              ...modalImageStyle,
+            }}
           />
           <button
             type="button"
@@ -284,7 +304,12 @@ export function ImageGallery({
             )}
           </button>
         </section>
-        <section style={modalThumbnailSectionStyle}>
+        <section
+          style={{
+            opacity: showThumbnails ? 1 : 0,
+            ...modalThumbnailSectionStyle,
+          }}
+        >
           {imagesInfoArray.map((imageInfo, index) => (
             <img
               ref={slideNumber - 1 === index ? activeThumbImgRef : null}

src/ImageGalleryStyles.ts

@@ -6,7 +6,6 @@ export function imageGalleryStyles(
   gapSize?: number,
   fixedCaption?: boolean
 ): ImageGalleryStylesType {
-  const modalSlideShowSectionHeight = "80vh";
   const modalThumbnailSectionHeight = "20vh";
   const galleryContainerStyle: React.CSSProperties = {
     columnCount,
@@ -91,12 +90,12 @@ export function imageGalleryStyles(
     display: "flex",
     alignItems: "center",
     width: "inherit",
-    height: `${modalSlideShowSectionHeight}`,
+    transition: "height .7s linear",
   };
   const modalImageStyle: React.CSSProperties = {
     margin: "auto",
     maxWidth: "100vw",
-    maxHeight: `${modalSlideShowSectionHeight}`,
+    transition: "height .7s linear",
   };
   const modalSlideBtnStyle: React.CSSProperties = {
     position: "absolute",