From c1a7d5a41bd637d76fcdc1b7b4d808cc334e1a00 Mon Sep 17 00:00:00 2001
From: Xiao Lin <xiao@linxtion.com>
Date: Sun, 2 Oct 2022 22:10:27 -0700
Subject: [PATCH] fix: Setting showThumbnail false breaks #703

---
 .gitignore          |  2 +-
 src/ImageGallery.js | 28 ++++++++++++++++++++++------
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/.gitignore b/.gitignore
index 60a419f2..55941712 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,7 +1,7 @@
 node_modules
 npm-debug.log
 .DS_Store
-
+.notes
 .idea
 
 build/
diff --git a/src/ImageGallery.js b/src/ImageGallery.js
index ee5efc52..3696831f 100644
--- a/src/ImageGallery.js
+++ b/src/ImageGallery.js
@@ -150,9 +150,20 @@ class ImageGallery extends React.Component {
       this.initThumbnailWrapperResizeObserver(this.thumbnailsWrapper);
     }
 
+    // re-inititalize if thumbnails are shown again
+    if (showThumbnailsChanged && showThumbnails) {
+      this.initThumbnailWrapperResizeObserver(this.thumbnailsWrapper);
+    }
+
+    // remove thumbnails resize observer if not showing thumbnails
+    if (showThumbnailsChanged && !showThumbnails) {
+      this.removeThumbnailsResizeObserver();
+    }
+
     if (itemsSizeChanged || showThumbnailsChanged) {
       this.handleResize();
     }
+
     if (prevState.currentIndex !== currentIndex) {
       this.slideThumbnailBar();
     }
@@ -965,18 +976,21 @@ class ImageGallery extends React.Component {
     }
   }
 
+  removeThumbnailsResizeObserver() {
+    if (this.resizeThumbnailWrapperObserver
+        && this.thumbnailsWrapper && this.thumbnailsWrapper.current) {
+      this.resizeThumbnailWrapperObserver.unobserve(this.thumbnailsWrapper.current);
+      this.resizeThumbnailWrapperObserver = null;
+    }
+  }
+
   removeResizeObserver() {
     if (this.resizeSlideWrapperObserver
         && this.imageGallerySlideWrapper && this.imageGallerySlideWrapper.current) {
       this.resizeSlideWrapperObserver.unobserve(this.imageGallerySlideWrapper.current);
       this.resizeSlideWrapperObserver = null;
     }
-
-    if (this.resizeThumbnailWrapperObserver
-        && this.thumbnailsWrapper && this.thumbnailsWrapper.current) {
-      this.resizeThumbnailWrapperObserver.unobserve(this.thumbnailsWrapper.current);
-      this.resizeThumbnailWrapperObserver = null;
-    }
+    this.removeThumbnailsResizeObserver();
   }
 
   handleResize() {
@@ -1002,6 +1016,7 @@ class ImageGallery extends React.Component {
   }
 
   initSlideWrapperResizeObserver(element) {
+    if (element && !element.current) return;
     // keeps track of gallery height changes for vertical thumbnail height
     this.resizeSlideWrapperObserver = new ResizeObserver(debounce((entries) => {
       if (!entries) return;
@@ -1013,6 +1028,7 @@ class ImageGallery extends React.Component {
   }
 
   initThumbnailWrapperResizeObserver(element) {
+    if (element && !element.current) return; // thumbnails are not always available
     this.resizeThumbnailWrapperObserver = new ResizeObserver(debounce((entries) => {
       if (!entries) return;
       entries.forEach((entry) => {