react-image-gallery 1.2.11 → 1.3.0

package/src/{ImageGallery.js → components/ImageGallery.jsx}

@@ -1,42 +1,31 @@
-import clsx from 'clsx';
-import React from 'react';
-import throttle from 'lodash-es/throttle';
-import debounce from 'lodash-es/debounce';
-import isEqual from 'react-fast-compare';
-import ResizeObserver from 'resize-observer-polyfill';
-import {
-  LEFT,
-  RIGHT,
-  UP,
-  DOWN,
-} from 'react-swipeable';
-import {
-  arrayOf,
-  bool,
-  func,
-  number,
-  oneOf,
-  shape,
-  string,
-} from 'prop-types';
-import Item from 'src/Item';
-import Fullscreen from 'src/controls/Fullscreen';
-import LeftNav from 'src/controls/LeftNav';
-import RightNav from 'src/controls/RightNav';
-import PlayPause from 'src/controls/PlayPause';
-import SwipeWrapper from 'src/SwipeWrapper';
+import clsx from "clsx";
+import React from "react";
+import throttle from "lodash-es/throttle";
+import debounce from "lodash-es/debounce";
+import isEqual from "react-fast-compare";
+import ResizeObserver from "resize-observer-polyfill";
+import { LEFT, RIGHT, UP, DOWN } from "react-swipeable";
+import { arrayOf, bool, func, number, oneOf, shape, string } from "prop-types";
+import Item from "src/components/Item";
+import Fullscreen from "src/components/controls/Fullscreen";
+import LeftNav from "src/components/controls/LeftNav";
+import RightNav from "src/components/controls/RightNav";
+import PlayPause from "src/components/controls/PlayPause";
+import SwipeWrapper from "src/components/SwipeWrapper";
 
 const screenChangeEvents = [
-  'fullscreenchange',
-  'MSFullscreenChange',
-  'mozfullscreenchange',
-  'webkitfullscreenchange',
+  "fullscreenchange",
+  "MSFullscreenChange",
+  "mozfullscreenchange",
+  "webkitfullscreenchange",
 ];
 
-const imageSetType = arrayOf(shape({
-  srcSet: string,
-  media: string,
-}));
+const imageSetType = arrayOf(
+  shape({
+    srcSet: string,
+    media: string,
+  })
+);
 
 function isEnterOrSpaceKey(event) {
   const key = parseInt(event.keyCode || event.which || 0, 10);
@@ -91,7 +80,9 @@ class ImageGallery extends React.Component {
     // Used to update the throttle if slideDuration changes
     this.unthrottledSlideToIndex = this.slideToIndex;
     this.slideToIndex = throttle(
-      this.unthrottledSlideToIndex, props.slideDuration, { trailing: false },
+      this.unthrottledSlideToIndex,
+      props.slideDuration,
+      { trailing: false }
     );
 
     if (props.lazyLoad) {
@@ -105,12 +96,14 @@ class ImageGallery extends React.Component {
       this.play();
     }
     if (useWindowKeyDown) {
-      window.addEventListener('keydown', this.handleKeyDown);
+      window.addEventListener("keydown", this.handleKeyDown);
     } else {
-      this.imageGallery.current.addEventListener('keydown', this.handleKeyDown);
+      this.imageGallery.current.addEventListener("keydown", this.handleKeyDown);
     }
-    window.addEventListener('mousedown', this.handleMouseDown);
-    window.addEventListener('touchmove', this.handleTouchMove, { passive: false });
+    window.addEventListener("mousedown", this.handleMouseDown);
+    window.addEventListener("touchmove", this.handleTouchMove, {
+      passive: false,
+    });
     // we're using resize observer to help with detecting containers size changes as images load
     this.initSlideWrapperResizeObserver(this.imageGallerySlideWrapper);
     this.initThumbnailWrapperResizeObserver(this.thumbnailsWrapper);
@@ -132,10 +125,14 @@ class ImageGallery extends React.Component {
     const itemsSizeChanged = prevProps.items.length !== items.length;
     const itemsChanged = !isEqual(prevProps.items, items);
     const startIndexUpdated = prevProps.startIndex !== startIndex;
-    const thumbnailsPositionChanged = prevProps.thumbnailPosition !== thumbnailPosition;
+    const thumbnailsPositionChanged =
+      prevProps.thumbnailPosition !== thumbnailPosition;
     const showThumbnailsChanged = prevProps.showThumbnails !== showThumbnails;
 
-    if (slideInterval !== prevProps.slideInterval || slideDuration !== prevProps.slideDuration) {
+    if (
+      slideInterval !== prevProps.slideInterval ||
+      slideDuration !== prevProps.slideDuration
+    ) {
       // refresh setInterval
       if (isPlaying) {
         this.pause();
@@ -170,7 +167,9 @@ class ImageGallery extends React.Component {
     // if slideDuration changes, update slideToIndex throttle
     if (prevProps.slideDuration !== slideDuration) {
       this.slideToIndex = throttle(
-        this.unthrottledSlideToIndex, slideDuration, { trailing: false },
+        this.unthrottledSlideToIndex,
+        slideDuration,
+        { trailing: false }
       );
     }
     if (lazyLoad && (!prevProps.lazyLoad || itemsChanged)) {
@@ -179,11 +178,17 @@ class ImageGallery extends React.Component {
 
     if (useWindowKeyDown !== prevProps.useWindowKeyDown) {
       if (useWindowKeyDown) {
-        this.imageGallery.current.removeEventListener('keydown', this.handleKeyDown);
-        window.addEventListener('keydown', this.handleKeyDown);
+        this.imageGallery.current.removeEventListener(
+          "keydown",
+          this.handleKeyDown
+        );
+        window.addEventListener("keydown", this.handleKeyDown);
       } else {
-        window.removeEventListener('keydown', this.handleKeyDown);
-        this.imageGallery.current.addEventListener('keydown', this.handleKeyDown);
+        window.removeEventListener("keydown", this.handleKeyDown);
+        this.imageGallery.current.addEventListener(
+          "keydown",
+          this.handleKeyDown
+        );
       }
     }
 
@@ -192,15 +197,15 @@ class ImageGallery extends React.Component {
       // do not transition when new items are added
       this.setState({
         currentIndex: startIndex,
-        slideStyle: { transition: 'none' },
+        slideStyle: { transition: "none" },
       });
     }
   }
 
   componentWillUnmount() {
     const { useWindowKeyDown } = this.props;
-    window.removeEventListener('mousedown', this.handleMouseDown);
-    window.removeEventListener('touchmove', this.handleTouchMove);
+    window.removeEventListener("mousedown", this.handleMouseDown);
+    window.removeEventListener("touchmove", this.handleTouchMove);
     this.removeScreenChangeEvent();
     this.removeResizeObserver();
     if (this.playPauseIntervalId) {
@@ -211,9 +216,12 @@ class ImageGallery extends React.Component {
       window.clearTimeout(this.transitionTimer);
     }
     if (useWindowKeyDown) {
-      window.removeEventListener('keydown', this.handleKeyDown);
+      window.removeEventListener("keydown", this.handleKeyDown);
     } else {
-      this.imageGallery.current.removeEventListener('keydown', this.handleKeyDown);
+      this.imageGallery.current.removeEventListener(
+        "keydown",
+        this.handleKeyDown
+      );
     }
   }
 
@@ -236,15 +244,39 @@ class ImageGallery extends React.Component {
   }
 
   onThumbnailClick(event, index) {
-    const { onThumbnailClick } = this.props;
+    const { onThumbnailClick, items } = this.props;
+    const { currentIndex } = this.state;
     // blur element to remove outline cause by focus
     event.target.parentNode.parentNode.blur();
-    this.slideToIndex(index, event);
+    if (currentIndex !== index) {
+      if (items.length === 2) {
+        this.slideToIndexWithStyleReset(index, event);
+      } else {
+        this.slideToIndex(index, event);
+      }
+    }
     if (onThumbnailClick) {
       onThumbnailClick(event, index);
     }
   }
 
+  onBulletClick = (event, index) => {
+    const { onBulletClick, items } = this.props;
+    const { currentIndex } = this.state;
+    // blur element to remove outline caused by focus
+    event.target.blur();
+    if (currentIndex !== index) {
+      if (items.length === 2) {
+        this.slideToIndexWithStyleReset(index, event);
+      } else {
+        this.slideToIndex(index, event);
+      }
+    }
+    if (onBulletClick) {
+      onBulletClick(event, index);
+    }
+  };
+
   onThumbnailMouseOver(event, index) {
     if (this.thumbnailMouseOverTimer) {
       window.clearTimeout(this.thumbnailMouseOverTimer);
@@ -290,7 +322,6 @@ class ImageGallery extends React.Component {
 
     if (disableThumbnailScroll) return 0;
 
-
     if (thumbsElement) {
       // total scroll required to see the last thumbnail
       if (this.isThumbnailVertical()) {
@@ -299,7 +330,10 @@ class ImageGallery extends React.Component {
         }
         hiddenScroll = thumbsElement.scrollHeight - thumbnailsWrapperHeight;
       } else {
-        if (thumbsElement.scrollWidth <= thumbnailsWrapperWidth || thumbnailsWrapperWidth <= 0) {
+        if (
+          thumbsElement.scrollWidth <= thumbnailsWrapperWidth ||
+          thumbnailsWrapperWidth <= 0
+        ) {
           return 0;
         }
         hiddenScroll = thumbsElement.scrollWidth - thumbnailsWrapperWidth;
@@ -312,23 +346,50 @@ class ImageGallery extends React.Component {
     return 0;
   }
 
+  getThumbnailPositionClassName(thumbnailPosition) {
+    // get the specific thumbnailPosition className
+    const leftClassName = "image-gallery-thumbnails-left";
+    const rightClassName = "image-gallery-thumbnails-right";
+    const bottomClassName = "image-gallery-thumbnails-bottom";
+    const topClassName = "image-gallery-thumbnails-top";
+
+    switch (thumbnailPosition) {
+      case "left":
+        thumbnailPosition = ` ${leftClassName}`;
+        break;
+      case "right":
+        thumbnailPosition = ` ${rightClassName}`;
+        break;
+      case "bottom":
+        thumbnailPosition = ` ${bottomClassName}`;
+        break;
+      case "top":
+        thumbnailPosition = ` ${topClassName}`;
+        break;
+      default:
+        break;
+    }
+
+    return thumbnailPosition;
+  }
+
   getAlignmentClassName(index) {
     // Necessary for lazing loading
     const { currentIndex } = this.state;
     const { infinite, items } = this.props;
-    let alignment = '';
-    const leftClassName = 'left';
-    const centerClassName = 'center';
-    const rightClassName = 'right';
+    let alignment = "";
+    const leftClassName = "image-gallery-left";
+    const centerClassName = "image-gallery-center";
+    const rightClassName = "image-gallery-right";
 
     switch (index) {
-      case (currentIndex - 1):
+      case currentIndex - 1:
         alignment = ` ${leftClassName}`;
         break;
-      case (currentIndex):
+      case currentIndex:
         alignment = ` ${centerClassName}`;
         break;
-      case (currentIndex + 1):
+      case currentIndex + 1:
         alignment = ` ${rightClassName}`;
         break;
       default:
@@ -358,39 +419,44 @@ class ImageGallery extends React.Component {
     const secondSlideIsNextSlide = index === 1 && currentIndex === 0;
     const swipingEnded = currentSlideOffset === 0;
     const baseTranslateX = -100 * currentIndex;
-    let translateX = baseTranslateX + (index * 100) + currentSlideOffset;
+    let translateX = baseTranslateX + index * 100 + currentSlideOffset;
 
     // keep track of user swiping direction
     // important to understand how to translateX based on last direction
     if (currentSlideOffset > 0) {
-      this.direction = 'left';
+      this.direction = "left";
     } else if (currentSlideOffset < 0) {
-      this.direction = 'right';
+      this.direction = "right";
     }
 
-
     // when swiping between two slides make sure the next and prev slides
     // are on both left and right
-    if (secondSlideIsNextSlide && currentSlideOffset > 0) { // swiping right
+    if (secondSlideIsNextSlide && currentSlideOffset > 0) {
+      // swiping right
       translateX = -100 + currentSlideOffset;
     }
-    if (firstSlideIsNextSlide && currentSlideOffset < 0) { // swiping left
+    if (firstSlideIsNextSlide && currentSlideOffset < 0) {
+      // swiping left
       translateX = 100 + currentSlideOffset;
     }
 
     if (indexChanged) {
       // when indexChanged move the slide to the correct side
-      if (firstSlideWasPrevSlide && swipingEnded && this.direction === 'left') {
+      if (firstSlideWasPrevSlide && swipingEnded && this.direction === "left") {
         translateX = 100;
-      } else if (secondSlideWasPrevSlide && swipingEnded && this.direction === 'right') {
+      } else if (
+        secondSlideWasPrevSlide &&
+        swipingEnded &&
+        this.direction === "right"
+      ) {
         translateX = -100;
       }
     } else {
       // keep the slide on the correct side if the swipe was not successful
-      if (secondSlideIsNextSlide && swipingEnded && this.direction === 'left') {
+      if (secondSlideIsNextSlide && swipingEnded && this.direction === "left") {
         translateX = -100;
       }
-      if (firstSlideIsNextSlide && swipingEnded && this.direction === 'right') {
+      if (firstSlideIsNextSlide && swipingEnded && this.direction === "right") {
         translateX = 100;
       }
     }
@@ -408,18 +474,14 @@ class ImageGallery extends React.Component {
 
   getSlideStyle(index) {
     const { currentIndex, currentSlideOffset, slideStyle } = this.state;
-    const {
-      infinite,
-      items,
-      useTranslate3D,
-      isRTL,
-    } = this.props;
+    const { infinite, items, useTranslate3D, isRTL } = this.props;
     const baseTranslateX = -100 * currentIndex;
     const totalSlides = items.length - 1;
 
     // calculates where the other slides belong based on currentIndex
     // if it is RTL the base line should be reversed
-    let translateX = (baseTranslateX + (index * 100)) * (isRTL ? -1 : 1) + currentSlideOffset;
+    let translateX =
+      (baseTranslateX + index * 100) * (isRTL ? -1 : 1) + currentSlideOffset;
 
     if (infinite && items.length > 2) {
       if (currentIndex === 0 && index === totalSlides) {
@@ -448,13 +510,13 @@ class ImageGallery extends React.Component {
     const isVisible = this.isSlideVisible(index);
 
     return {
-      display: isVisible ? 'inherit' : 'none',
+      display: isVisible ? "inherit" : "none",
       WebkitTransform: translate,
       MozTransform: translate,
       msTransform: translate,
       OTransform: translate,
       transform: translate,
-      ...slideStyle
+      ...slideStyle,
     };
   }
 
@@ -467,7 +529,9 @@ class ImageGallery extends React.Component {
     let translate;
     const { useTranslate3D, isRTL } = this.props;
     const { thumbsTranslate, thumbsStyle } = this.state;
-    const verticalTranslateValue = isRTL ? thumbsTranslate * -1 : thumbsTranslate;
+    const verticalTranslateValue = isRTL
+      ? thumbsTranslate * -1
+      : thumbsTranslate;
 
     if (this.isThumbnailVertical()) {
       translate = `translate(0, ${thumbsTranslate}px)`;
@@ -514,11 +578,13 @@ class ImageGallery extends React.Component {
 
     items.forEach((item, index) => {
       const alignment = this.getAlignmentClassName(index);
-      const originalClass = item.originalClass ? ` ${item.originalClass}` : '';
-      const thumbnailClass = item.thumbnailClass ? ` ${item.thumbnailClass}` : '';
+      const originalClass = item.originalClass ? ` ${item.originalClass}` : "";
+      const thumbnailClass = item.thumbnailClass
+        ? ` ${item.thumbnailClass}`
+        : "";
       const handleRenderItem = item.renderItem || renderItem || this.renderItem;
-      const handleRenderThumbInner = item.renderThumbInner
-        || renderThumbInner || this.renderThumbInner;
+      const handleRenderThumbInner =
+        item.renderThumbInner || renderThumbInner || this.renderThumbInner;
 
       const showItem = !lazyLoad || alignment || this.lazyLoaded[index];
       if (showItem && lazyLoad && !this.lazyLoaded[index]) {
@@ -544,7 +610,11 @@ class ImageGallery extends React.Component {
           onMouseLeave={onMouseLeave}
           role="button"
         >
-          {showItem ? handleRenderItem(item) : <div style={{ height: '100%' }} />}
+          {showItem ? (
+            handleRenderItem(item)
+          ) : (
+            <div style={{ height: "100%" }} />
+          )}
         </div>
       );
 
@@ -553,53 +623,44 @@ class ImageGallery extends React.Component {
       // Don't add thumbnails if there is none
       if (showThumbnails && item.thumbnail) {
         const igThumbnailClass = clsx(
-          'image-gallery-thumbnail',
+          "image-gallery-thumbnail",
           thumbnailClass,
-          { active: currentIndex === index },
+          { active: currentIndex === index }
         );
         thumbnails.push(
           <button
             key={`thumbnail-${index}`}
             type="button"
             tabIndex="0"
-            aria-pressed={currentIndex === index ? 'true' : 'false'}
+            aria-pressed={currentIndex === index ? "true" : "false"}
             aria-label={`Go to Slide ${index + 1}`}
             className={igThumbnailClass}
-            onMouseLeave={slideOnThumbnailOver ? this.onThumbnailMouseLeave : null}
-            onMouseOver={event => this.handleThumbnailMouseOver(event, index)}
-            onFocus={event => this.handleThumbnailMouseOver(event, index)}
-            onKeyUp={event => this.handleThumbnailKeyUp(event, index)}
-            onClick={event => this.onThumbnailClick(event, index)}
+            onMouseLeave={
+              slideOnThumbnailOver ? this.onThumbnailMouseLeave : null
+            }
+            onMouseOver={(event) => this.handleThumbnailMouseOver(event, index)}
+            onFocus={(event) => this.handleThumbnailMouseOver(event, index)}
+            onKeyUp={(event) => this.handleThumbnailKeyUp(event, index)}
+            onClick={(event) => this.onThumbnailClick(event, index)}
           >
             {handleRenderThumbInner(item)}
-          </button>,
+          </button>
         );
       }
 
       if (showBullets) {
-        // generate bullet elements and store them in array
-        const bulletOnClick = (event) => {
-          if (item.bulletOnClick) {
-            item.bulletOnClick({ item, itemIndex: index, currentIndex });
-          }
-          // blur element to remove outline caused by focus
-          event.target.blur();
-          return this.slideToIndex.call(this, index, event);
-        };
-        const igBulletClass = clsx(
-          'image-gallery-bullet',
-          item.bulletClass,
-          { active: currentIndex === index },
-        );
+        const igBulletClass = clsx("image-gallery-bullet", item.bulletClass, {
+          active: currentIndex === index,
+        });
         bullets.push(
           <button
             type="button"
             key={`bullet-${index}`}
             className={igBulletClass}
-            onClick={bulletOnClick}
-            aria-pressed={currentIndex === index ? 'true' : 'false'}
+            onClick={(event) => this.onBulletClick(event, index)}
+            aria-pressed={currentIndex === index ? "true" : "false"}
             aria-label={`Go to Slide ${index + 1}`}
-          />,
+          />
         );
       }
     });
@@ -621,13 +682,20 @@ class ImageGallery extends React.Component {
     const totalSlides = items.length - 1;
 
     // we want to show the in between slides transition
-    const slidingMoreThanOneSlideLeftOrRight = Math.abs(previousIndex - currentIndex) > 1;
-    const notGoingFromFirstToLast = !(previousIndex === 0 && currentIndex === totalSlides);
-    const notGoingFromLastToFirst = !(previousIndex === totalSlides && currentIndex === 0);
+    const slidingMoreThanOneSlideLeftOrRight =
+      Math.abs(previousIndex - currentIndex) > 1;
+    const notGoingFromFirstToLast = !(
+      previousIndex === 0 && currentIndex === totalSlides
+    );
+    const notGoingFromLastToFirst = !(
+      previousIndex === totalSlides && currentIndex === 0
+    );
 
-    return slidingMoreThanOneSlideLeftOrRight
-      && notGoingFromFirstToLast
-      && notGoingFromLastToFirst;
+    return (
+      slidingMoreThanOneSlideLeftOrRight &&
+      notGoingFromFirstToLast &&
+      notGoingFromLastToFirst
+    );
   }
 
   isFirstOrLastSlide(index) {
@@ -638,14 +706,15 @@ class ImageGallery extends React.Component {
     return isLastSlide || isFirstSlide;
   }
 
-
   slideIsTransitioning(index) {
     /*
     returns true if the gallery is transitioning and the index is not the
     previous or currentIndex
     */
     const { isTransitioning, previousIndex, currentIndex } = this.state;
-    const indexIsNotPreviousOrNextSlide = !(index === previousIndex || index === currentIndex);
+    const indexIsNotPreviousOrNextSlide = !(
+      index === previousIndex || index === currentIndex
+    );
     return isTransitioning && indexIsNotPreviousOrNextSlide;
   }
 
@@ -662,8 +731,10 @@ class ImageGallery extends React.Component {
       so unless were going from first to last or vice versa we don't want the first
       or last slide to show up during the transition
     */
-    return !this.slideIsTransitioning(index)
-      || (this.ignoreIsTransitioning() && !this.isFirstOrLastSlide(index));
+    return (
+      !this.slideIsTransitioning(index) ||
+      (this.ignoreIsTransitioning() && !this.isFirstOrLastSlide(index))
+    );
   }
 
   slideThumbnailBar() {
@@ -689,13 +760,13 @@ class ImageGallery extends React.Component {
   }
 
   canSlideLeft() {
-    const { infinite, isRTL } = this.props;
-    return infinite || (isRTL ? this.canSlideNext() : this.canSlidePrevious());
+    const { infinite } = this.props;
+    return infinite || this.canSlidePrevious();
   }
 
   canSlideRight() {
-    const { infinite, isRTL } = this.props;
-    return infinite || (isRTL ? this.canSlidePrevious() : this.canSlideNext());
+    const { infinite } = this.props;
+    return infinite || this.canSlideNext();
   }
 
   canSlidePrevious() {
@@ -711,12 +782,8 @@ class ImageGallery extends React.Component {
 
   handleSwiping({ event, absX, dir }) {
     const { disableSwipe, stopPropagation } = this.props;
-    const {
-      galleryWidth,
-      isTransitioning,
-      swipingUpDown,
-      swipingLeftRight,
-    } = this.state;
+    const { galleryWidth, isTransitioning, swipingUpDown, swipingLeftRight } =
+      this.state;
 
     // if the initial swiping is up/down prevent moving the slides until swipe ends
     if ((dir === UP || dir === DOWN || swipingUpDown) && !swipingLeftRight) {
@@ -740,7 +807,7 @@ class ImageGallery extends React.Component {
     if (!isTransitioning) {
       const side = dir === RIGHT ? 1 : -1;
 
-      let currentSlideOffset = (absX / galleryWidth * 100);
+      let currentSlideOffset = (absX / galleryWidth) * 100;
       if (Math.abs(currentSlideOffset) >= 100) {
         currentSlideOffset = 100;
       }
@@ -759,16 +826,8 @@ class ImageGallery extends React.Component {
     }
   }
 
-  handleThumbnailSwiping({
-    event,
-    absX,
-    absY,
-    dir,
-  }) {
-    const {
-      stopPropagation,
-      swipingThumbnailTransitionDuration,
-    } = this.props;
+  handleThumbnailSwiping({ event, absX, absY, dir }) {
+    const { stopPropagation, swipingThumbnailTransitionDuration } = this.props;
     const {
       thumbsSwipedTranslate,
       thumbnailsWrapperHeight,
@@ -779,7 +838,10 @@ class ImageGallery extends React.Component {
 
     if (this.isThumbnailVertical()) {
       // if the initial swiping is left/right, prevent moving the thumbnail bar until swipe ends
-      if ((dir === LEFT || dir === RIGHT || swipingLeftRight) && !swipingUpDown) {
+      if (
+        (dir === LEFT || dir === RIGHT || swipingLeftRight) &&
+        !swipingUpDown
+      ) {
         if (!swipingLeftRight) {
           this.setState({ swipingLeftRight: true });
         }
@@ -815,19 +877,21 @@ class ImageGallery extends React.Component {
     if (this.isThumbnailVertical()) {
       const slideY = dir === DOWN ? absY : -absY;
       thumbsTranslate = thumbsSwipedTranslate + slideY;
-      totalSwipeableLength = thumbsElement.scrollHeight
-        - thumbnailsWrapperHeight + emptySpaceMargin;
+      totalSwipeableLength =
+        thumbsElement.scrollHeight - thumbnailsWrapperHeight + emptySpaceMargin;
       hasSwipedPassedEnd = Math.abs(thumbsTranslate) > totalSwipeableLength;
       hasSwipedPassedStart = thumbsTranslate > emptySpaceMargin;
-      isThumbnailBarSmallerThanContainer = thumbsElement.scrollHeight <= thumbnailsWrapperHeight;
+      isThumbnailBarSmallerThanContainer =
+        thumbsElement.scrollHeight <= thumbnailsWrapperHeight;
     } else {
       const slideX = dir === RIGHT ? absX : -absX;
       thumbsTranslate = thumbsSwipedTranslate + slideX;
-      totalSwipeableLength = thumbsElement.scrollWidth
-        - thumbnailsWrapperWidth + emptySpaceMargin;
+      totalSwipeableLength =
+        thumbsElement.scrollWidth - thumbnailsWrapperWidth + emptySpaceMargin;
       hasSwipedPassedEnd = Math.abs(thumbsTranslate) > totalSwipeableLength;
       hasSwipedPassedStart = thumbsTranslate > emptySpaceMargin;
-      isThumbnailBarSmallerThanContainer = thumbsElement.scrollWidth <= thumbnailsWrapperWidth;
+      isThumbnailBarSmallerThanContainer =
+        thumbsElement.scrollWidth <= thumbnailsWrapperWidth;
     }
 
     if (isThumbnailBarSmallerThanContainer) {
@@ -899,7 +963,7 @@ class ImageGallery extends React.Component {
     // if it is RTL the direction is reversed
     const swipeDirection = (dir === LEFT ? 1 : -1) * (isRTL ? -1 : 1);
     const isSwipeUpOrDown = dir === UP || dir === DOWN;
-    const isLeftRightFlick = (velocity > flickThreshold) && !isSwipeUpOrDown;
+    const isLeftRightFlick = velocity > flickThreshold && !isSwipeUpOrDown;
     this.handleOnSwipedTo(swipeDirection, isLeftRightFlick);
   }
 
@@ -913,8 +977,10 @@ class ImageGallery extends React.Component {
     }
 
     // If we can't swipe left or right, stay in the current index (noop)
-    if ((swipeDirection === -1 && !this.canSlideLeft())
-        || (swipeDirection === 1 && !this.canSlideRight())) {
+    if (
+      (swipeDirection === -1 && !this.canSlideLeft()) ||
+      (swipeDirection === 1 && !this.canSlideRight())
+    ) {
       slideTo = currentIndex;
     }
 
@@ -931,14 +997,14 @@ class ImageGallery extends React.Component {
 
   handleMouseDown() {
     // keep track of mouse vs keyboard usage for a11y
-    this.imageGallery.current.classList.add('image-gallery-using-mouse');
+    this.imageGallery.current.classList.add("image-gallery-using-mouse");
   }
 
   handleKeyDown(event) {
     const { disableKeyDown, useBrowserFullscreen } = this.props;
     const { isFullscreen } = this.state;
     // keep track of mouse vs keyboard usage for a11y
-    this.imageGallery.current.classList.remove('image-gallery-using-mouse');
+    this.imageGallery.current.classList.remove("image-gallery-using-mouse");
 
     if (disableKeyDown) return;
     const LEFT_ARROW = 37;
@@ -977,17 +1043,27 @@ class ImageGallery extends React.Component {
   }
 
   removeThumbnailsResizeObserver() {
-    if (this.resizeThumbnailWrapperObserver
-        && this.thumbnailsWrapper && this.thumbnailsWrapper.current) {
-      this.resizeThumbnailWrapperObserver.unobserve(this.thumbnailsWrapper.current);
+    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);
+    if (
+      this.resizeSlideWrapperObserver &&
+      this.imageGallerySlideWrapper &&
+      this.imageGallerySlideWrapper.current
+    ) {
+      this.resizeSlideWrapperObserver.unobserve(
+        this.imageGallerySlideWrapper.current
+      );
       this.resizeSlideWrapperObserver = null;
     }
     this.removeThumbnailsResizeObserver();
@@ -1005,9 +1081,13 @@ class ImageGallery extends React.Component {
       this.setState({ galleryWidth: this.imageGallery.current.offsetWidth });
     }
 
-    if (this.imageGallerySlideWrapper && this.imageGallerySlideWrapper.current) {
+    if (
+      this.imageGallerySlideWrapper &&
+      this.imageGallerySlideWrapper.current
+    ) {
       this.setState({
-        gallerySlideWrapperHeight: this.imageGallerySlideWrapper.current.offsetHeight,
+        gallerySlideWrapperHeight:
+          this.imageGallerySlideWrapper.current.offsetHeight,
       });
     }
 
@@ -1018,23 +1098,33 @@ 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;
-      entries.forEach((entry) => {
-        this.setState({ thumbnailsWrapperWidth: entry.contentRect.width }, this.handleResize);
-      });
-    }, 50));
+    this.resizeSlideWrapperObserver = new ResizeObserver(
+      debounce((entries) => {
+        if (!entries) return;
+        entries.forEach((entry) => {
+          this.setState(
+            { thumbnailsWrapperWidth: entry.contentRect.width },
+            this.handleResize
+          );
+        });
+      }, 50)
+    );
     this.resizeSlideWrapperObserver.observe(element.current);
   }
 
   initThumbnailWrapperResizeObserver(element) {
     if (element && !element.current) return; // thumbnails are not always available
-    this.resizeThumbnailWrapperObserver = new ResizeObserver(debounce((entries) => {
-      if (!entries) return;
-      entries.forEach((entry) => {
-        this.setState({ thumbnailsWrapperHeight: entry.contentRect.height }, this.handleResize);
-      });
-    }, 50));
+    this.resizeThumbnailWrapperObserver = new ResizeObserver(
+      debounce((entries) => {
+        if (!entries) return;
+        entries.forEach((entry) => {
+          this.setState(
+            { thumbnailsWrapperHeight: entry.contentRect.height },
+            this.handleResize
+          );
+        });
+      }, 50)
+    );
     this.resizeThumbnailWrapperObserver.observe(element.current);
   }
 
@@ -1055,16 +1145,16 @@ class ImageGallery extends React.Component {
     }
   }
 
-
   handleScreenChange() {
     /*
       handles screen change events that the browser triggers e.g. esc key
     */
     const { onScreenChange, useBrowserFullscreen } = this.props;
-    const fullScreenElement = document.fullscreenElement
-      || document.msFullscreenElement
-      || document.mozFullScreenElement
-      || document.webkitFullscreenElement;
+    const fullScreenElement =
+      document.fullscreenElement ||
+      document.msFullscreenElement ||
+      document.mozFullScreenElement ||
+      document.webkitFullscreenElement;
 
     // check if screenchange element is the gallery
     const isFullscreen = this.imageGallery.current === fullScreenElement;
@@ -1097,51 +1187,63 @@ class ImageGallery extends React.Component {
         onBeforeSlide(nextIndex);
       }
 
-      this.setState({
-        previousIndex: currentIndex,
-        currentIndex: nextIndex,
-        isTransitioning: nextIndex !== currentIndex,
-        currentSlideOffset: 0,
-        slideStyle: { transition: `all ${slideDuration}ms ease-out` },
-      }, this.onSliding);
+      this.setState(
+        {
+          previousIndex: currentIndex,
+          currentIndex: nextIndex,
+          isTransitioning: nextIndex !== currentIndex,
+          currentSlideOffset: 0,
+          slideStyle: { transition: `all ${slideDuration}ms ease-out` },
+        },
+        this.onSliding
+      );
     }
   }
 
   slideLeft(event) {
     const { isRTL } = this.props;
-    this.slideTo(event, isRTL ? 'right' : 'left')
+    this.slideTo(event, isRTL ? "right" : "left");
   }
 
   slideRight(event) {
     const { isRTL } = this.props;
-    this.slideTo(event, isRTL ? 'left' : 'right')
+    this.slideTo(event, isRTL ? "left" : "right");
   }
 
   slideTo(event, direction) {
-    const { currentIndex, currentSlideOffset, isTransitioning } = this.state;
+    const { currentIndex, isTransitioning } = this.state;
     const { items } = this.props;
-    const nextIndex = currentIndex + (direction === 'left' ? -1 : 1)
+    const nextIndex = currentIndex + (direction === "left" ? -1 : 1);
 
     if (isTransitioning) return;
 
     if (items.length === 2) {
-      /*
-        When there are only 2 slides fake a tiny swipe to get the slides
-        on the correct side for transitioning
-      */
-      this.setState({
-        // this will reset once index changes
-        currentSlideOffset: currentSlideOffset + (direction === 'left' ? 0.001 : -0.001),
-        slideStyle: { transition: 'none' }, // move the slide over instantly
-      }, () => {
-        // add 25ms timeout to avoid delay in moving slides over
-        window.setTimeout(() => this.slideToIndex(nextIndex, event), 25);
-      });
+      this.slideToIndexWithStyleReset(nextIndex, event);
     } else {
       this.slideToIndex(nextIndex, event);
     }
   }
 
+  slideToIndexWithStyleReset(nextIndex, event) {
+    /*
+    When there are only 2 slides fake a tiny swipe to get the slides
+    on the correct side for transitioning
+    */
+    const { currentIndex, currentSlideOffset } = this.state;
+    this.setState(
+      {
+        // this will reset once index changes
+        currentSlideOffset:
+          currentSlideOffset + (currentIndex > nextIndex ? 0.001 : -0.001),
+        slideStyle: { transition: "none" }, // move the slide over instantly
+      },
+      () => {
+        // add 25ms timeout to avoid delay in moving slides over
+        window.setTimeout(() => this.slideToIndex(nextIndex, event), 25);
+      }
+    );
+  }
+
   handleThumbnailMouseOver(event, index) {
     const { slideOnThumbnailOver } = this.props;
     if (slideOnThumbnailOver) this.onThumbnailMouseOver(event, index);
@@ -1162,7 +1264,7 @@ class ImageGallery extends React.Component {
 
   isThumbnailVertical() {
     const { thumbnailPosition } = this.props;
-    return thumbnailPosition === 'left' || thumbnailPosition === 'right';
+    return thumbnailPosition === "left" || thumbnailPosition === "right";
   }
 
   addScreenChangeEvent() {
@@ -1234,17 +1336,13 @@ class ImageGallery extends React.Component {
   }
 
   play(shouldCallOnPlay = true) {
-    const {
-      onPlay,
-      slideInterval,
-      slideDuration,
-    } = this.props;
+    const { onPlay, slideInterval, slideDuration } = this.props;
     const { currentIndex } = this.state;
     if (!this.playPauseIntervalId) {
       this.setState({ isPlaying: true });
       this.playPauseIntervalId = window.setInterval(
         this.pauseOrPlay,
-        Math.max(slideInterval, slideDuration),
+        Math.max(slideInterval, slideDuration)
       );
       if (onPlay && shouldCallOnPlay) {
         onPlay(currentIndex);
@@ -1329,24 +1427,18 @@ class ImageGallery extends React.Component {
           loading={item.thumbnailLoading}
           onError={handleThumbnailError}
         />
-        {
-          item.thumbnailLabel && (
-            <div className="image-gallery-thumbnail-label">
-              {item.thumbnailLabel}
-            </div>
-          )
-        }
+        {item.thumbnailLabel && (
+          <div className="image-gallery-thumbnail-label">
+            {item.thumbnailLabel}
+          </div>
+        )}
       </span>
     );
   }
 
   render() {
-    const {
-      currentIndex,
-      isFullscreen,
-      modalFullscreen,
-      isPlaying,
-    } = this.state;
+    const { currentIndex, isFullscreen, modalFullscreen, isPlaying } =
+      this.state;
 
     const {
       additionalClass,
@@ -1371,120 +1463,114 @@ class ImageGallery extends React.Component {
     const thumbnailStyle = this.getThumbnailStyle();
     const { slides, thumbnails, bullets } = this.getSlideItems();
     const slideWrapperClass = clsx(
-      'image-gallery-slide-wrapper',
-      thumbnailPosition,
-      { 'image-gallery-rtl': isRTL },
+      "image-gallery-slide-wrapper",
+      this.getThumbnailPositionClassName(thumbnailPosition),
+      { "image-gallery-rtl": isRTL }
     );
 
     const slideWrapper = (
       <div ref={this.imageGallerySlideWrapper} className={slideWrapperClass}>
         {renderCustomControls && renderCustomControls()}
-        {
-          this.canSlide() ? (
-            <React.Fragment>
-              {
-                showNav && (
-                  <React.Fragment>
-                    {renderLeftNav(this.slideLeft, !this.canSlideLeft())}
-                    {renderRightNav(this.slideRight, !this.canSlideRight())}
-                  </React.Fragment>
-                )
-              }
-              <SwipeWrapper
-                className="image-gallery-swipe"
-                delta={0}
-                onSwiping={this.handleSwiping}
-                onSwiped={this.handleOnSwiped}
-              >
-                <div className="image-gallery-slides">
-                  {slides}
-                </div>
-              </SwipeWrapper>
-            </React.Fragment>
-          ) : (
-            <div className="image-gallery-slides">
-              {slides}
-            </div>
-          )
-        }
+        {this.canSlide() ? (
+          <React.Fragment>
+            {showNav && (
+              <React.Fragment>
+                {renderLeftNav(this.slideLeft, !this.canSlideLeft())}
+                {renderRightNav(this.slideRight, !this.canSlideRight())}
+              </React.Fragment>
+            )}
+            <SwipeWrapper
+              className="image-gallery-swipe"
+              delta={0}
+              onSwiping={this.handleSwiping}
+              onSwiped={this.handleOnSwiped}
+            >
+              <div className="image-gallery-slides">{slides}</div>
+            </SwipeWrapper>
+          </React.Fragment>
+        ) : (
+          <div className="image-gallery-slides">{slides}</div>
+        )}
         {showPlayButton && renderPlayPauseButton(this.togglePlay, isPlaying)}
-        {
-          showBullets && (
-            <div className="image-gallery-bullets">
-              <div
-                className="image-gallery-bullets-container"
-                role="navigation"
-                aria-label="Bullet Navigation"
-              >
-                {bullets}
-              </div>
-            </div>
-          )
-        }
-        {showFullscreenButton && renderFullscreenButton(this.toggleFullScreen, isFullscreen)}
-        {
-          showIndex && (
-            <div className="image-gallery-index">
-              <span className="image-gallery-index-current">
-                {currentIndex + 1}
-              </span>
-              <span className="image-gallery-index-separator">
-                {indexSeparator}
-              </span>
-              <span className="image-gallery-index-total">
-                {items.length}
-              </span>
+        {showBullets && (
+          <div className="image-gallery-bullets">
+            <div
+              className="image-gallery-bullets-container"
+              role="navigation"
+              aria-label="Bullet Navigation"
+            >
+              {bullets}
             </div>
-          )
-        }
+          </div>
+        )}
+        {showFullscreenButton &&
+          renderFullscreenButton(this.toggleFullScreen, isFullscreen)}
+        {showIndex && (
+          <div className="image-gallery-index">
+            <span className="image-gallery-index-current">
+              {currentIndex + 1}
+            </span>
+            <span className="image-gallery-index-separator">
+              {indexSeparator}
+            </span>
+            <span className="image-gallery-index-total">{items.length}</span>
+          </div>
+        )}
       </div>
     );
 
-    const igClass = clsx('image-gallery', additionalClass, { 'fullscreen-modal': modalFullscreen });
-    const igContentClass = clsx('image-gallery-content', thumbnailPosition, { fullscreen: isFullscreen });
+    const igClass = clsx("image-gallery", additionalClass, {
+      "fullscreen-modal": modalFullscreen,
+    });
+    const igContentClass = clsx(
+      "image-gallery-content",
+      this.getThumbnailPositionClassName(thumbnailPosition),
+      { fullscreen: isFullscreen }
+    );
     const thumbnailWrapperClass = clsx(
-      'image-gallery-thumbnails-wrapper',
-      thumbnailPosition,
-      { 'thumbnails-wrapper-rtl': !this.isThumbnailVertical() && isRTL },
-      { 'thumbnails-swipe-horizontal': !this.isThumbnailVertical() && !disableThumbnailSwipe },
-      { 'thumbnails-swipe-vertical': this.isThumbnailVertical() && !disableThumbnailSwipe },
+      "image-gallery-thumbnails-wrapper",
+      this.getThumbnailPositionClassName(thumbnailPosition),
+      { "thumbnails-wrapper-rtl": !this.isThumbnailVertical() && isRTL },
+      {
+        "thumbnails-swipe-horizontal":
+          !this.isThumbnailVertical() && !disableThumbnailSwipe,
+      },
+      {
+        "thumbnails-swipe-vertical":
+          this.isThumbnailVertical() && !disableThumbnailSwipe,
+      }
     );
     return (
-      <div
-        ref={this.imageGallery}
-        className={igClass}
-        aria-live="polite"
-      >
+      <div ref={this.imageGallery} className={igClass} aria-live="polite">
         <div className={igContentClass}>
-          {(thumbnailPosition === 'bottom' || thumbnailPosition === 'right') && slideWrapper}
-          {
-            showThumbnails && thumbnails.length > 0 ? (
-              <SwipeWrapper
-                className={thumbnailWrapperClass}
-                delta={0}
-                onSwiping={!disableThumbnailSwipe && this.handleThumbnailSwiping}
-                onSwiped={!disableThumbnailSwipe && this.handleOnThumbnailSwiped}
+          {(thumbnailPosition === "bottom" || thumbnailPosition === "right") &&
+            slideWrapper}
+          {showThumbnails && thumbnails.length > 0 ? (
+            <SwipeWrapper
+              className={thumbnailWrapperClass}
+              delta={0}
+              onSwiping={!disableThumbnailSwipe && this.handleThumbnailSwiping}
+              onSwiped={!disableThumbnailSwipe && this.handleOnThumbnailSwiped}
+            >
+              <div
+                className="image-gallery-thumbnails"
+                ref={this.thumbnailsWrapper}
+                style={this.getThumbnailBarHeight()}
               >
-                <div
-                  className="image-gallery-thumbnails"
-                  ref={this.thumbnailsWrapper}
-                  style={this.getThumbnailBarHeight()}
+                <nav
+                  ref={this.thumbnails}
+                  className="image-gallery-thumbnails-container"
+                  style={thumbnailStyle}
+                  aria-label="Thumbnail Navigation"
                 >
-                  <nav
-                    ref={this.thumbnails}
-                    className="image-gallery-thumbnails-container"
-                    style={thumbnailStyle}
-                    aria-label="Thumbnail Navigation"
-                  >
-                    {thumbnails}
-                  </nav>
-                </div>
-              </SwipeWrapper>
-            ) : null
-          }
-          {(thumbnailPosition === 'top' || thumbnailPosition === 'left') && slideWrapper}
+                  {thumbnails}
+                </nav>
+              </div>
+            </SwipeWrapper>
+          ) : null}
+          {(thumbnailPosition === "top" || thumbnailPosition === "left") &&
+            slideWrapper}
         </div>
-
       </div>
     );
   }
@@ -1492,32 +1578,34 @@ class ImageGallery extends React.Component {
 
 ImageGallery.propTypes = {
   flickThreshold: number,
-  items: arrayOf(shape({
-    bulletClass: string,
-    bulletOnClick: func,
-    description: string,
-    original: string,
-    originalHeight: number,
-    originalWidth: number,
-    loading: string,
-    thumbnailHeight: number,
-    thumbnailWidth: number,
-    thumbnailLoading: string,
-    fullscreen: string,
-    originalAlt: string,
-    originalTitle: string,
-    thumbnail: string,
-    thumbnailAlt: string,
-    thumbnailLabel: string,
-    thumbnailTitle: string,
-    originalClass: string,
-    thumbnailClass: string,
-    renderItem: func,
-    renderThumbInner: func,
-    imageSet: imageSetType,
-    srcSet: string,
-    sizes: string,
-  })).isRequired,
+  items: arrayOf(
+    shape({
+      bulletClass: string,
+      bulletOnClick: func,
+      description: string,
+      original: string,
+      originalHeight: number,
+      originalWidth: number,
+      loading: string,
+      thumbnailHeight: number,
+      thumbnailWidth: number,
+      thumbnailLoading: string,
+      fullscreen: string,
+      originalAlt: string,
+      originalTitle: string,
+      thumbnail: string,
+      thumbnailAlt: string,
+      thumbnailLabel: string,
+      thumbnailTitle: string,
+      originalClass: string,
+      thumbnailClass: string,
+      renderItem: func,
+      renderThumbInner: func,
+      imageSet: imageSetType,
+      srcSet: string,
+      sizes: string,
+    })
+  ).isRequired,
   showNav: bool,
   autoPlay: bool,
   lazyLoad: bool,
@@ -1534,7 +1622,7 @@ ImageGallery.propTypes = {
   useBrowserFullscreen: bool,
   onErrorImageURL: string,
   indexSeparator: string,
-  thumbnailPosition: oneOf(['top', 'bottom', 'left', 'right']),
+  thumbnailPosition: oneOf(["top", "bottom", "left", "right"]),
   startIndex: number,
   slideDuration: number,
   slideInterval: number,
@@ -1555,6 +1643,7 @@ ImageGallery.propTypes = {
   onTouchStart: func,
   onMouseOver: func,
   onMouseLeave: func,
+  onBulletClick: func,
   onThumbnailError: func,
   onThumbnailClick: func,
   renderCustomControls: func,
@@ -1572,8 +1661,8 @@ ImageGallery.propTypes = {
 };
 
 ImageGallery.defaultProps = {
-  onErrorImageURL: '',
-  additionalClass: '',
+  onErrorImageURL: "",
+  additionalClass: "",
   showNav: true,
   autoPlay: false,
   lazyLoad: false,
@@ -1592,8 +1681,8 @@ ImageGallery.defaultProps = {
   useBrowserFullscreen: true,
   flickThreshold: 0.4,
   stopPropagation: false,
-  indexSeparator: ' / ',
-  thumbnailPosition: 'bottom',
+  indexSeparator: " / ",
+  thumbnailPosition: "bottom",
   startIndex: 0,
   slideDuration: 450,
   swipingTransitionDuration: 0,
@@ -1611,6 +1700,7 @@ ImageGallery.defaultProps = {
   onTouchStart: null,
   onMouseOver: null,
   onMouseLeave: null,
+  onBulletClick: null,
   onThumbnailError: null,
   onThumbnailClick: null,
   renderCustomControls: null,