react-image-gallery - npm Package Compare versions

Comparing version 0.6.9 to 0.6.10

build/image-gallery.js

@@ -89,3 +89,4 @@ 'use strict';
       offsetPercentage: 0,
-      galleryWidth: 0
+      galleryWidth: 0,
+      thumbnailWidth: 0
     };
@@ -109,5 +110,5 @@ return _this;
     value: function componentDidUpdate(prevProps, prevState) {
-      if (prevState.galleryWidth !== this.state.galleryWidth || prevProps.showThumbnails !== this.props.showThumbnails) {
+      if (prevState.thumbnailWidth !== this.state.thumbnailWidth || prevProps.showThumbnails !== this.props.showThumbnails) {
 
-        // adjust thumbnail container when window width is adjusted
+        // adjust thumbnail container when thumbnail width is adjusted
         this._setThumbsTranslateX(-this._getThumbsTranslateX(this.state.currentIndex > 0 ? 1 : 0) * this.state.currentIndex);
@@ -261,2 +262,6 @@ }
       }
+
+      if (this._imageGalleryThumbnail) {
+        this.setState({ thumbnailWidth: this._imageGalleryThumbnail.offsetWidth });
+      }
     }
@@ -273,3 +278,3 @@ }, {
           if (this._canSlideLeft() && !this._intervalId) {
-            this._slideLeft();;
+            this._slideLeft();
           }
@@ -416,7 +421,7 @@ break;
 
-      var galleryWidth = this.state.galleryWidth;
+      var thumbnailWidth = this.state.thumbnailWidth;
 
 
       if (this._thumbnails) {
-        if (this._thumbnails.scrollWidth <= galleryWidth) {
+        if (this._thumbnails.scrollWidth <= thumbnailWidth) {
           return 0;
@@ -426,3 +431,3 @@ }
         // total scroll-x required to see the last thumbnail
-        var totalScrollX = this._thumbnails.scrollWidth - galleryWidth;
+        var totalScrollX = this._thumbnails.scrollWidth - thumbnailWidth;
         // scroll-x required per index change
@@ -773,3 +778,8 @@ var perIndexScrollX = totalScrollX / (totalThumbnails - 1);
           'div',
-          { className: 'image-gallery-thumbnails' },
+          {
+            className: 'image-gallery-thumbnails',
+            ref: function ref(i) {
+              return _this5._imageGalleryThumbnail = i;
+            }
+          },
           _react2.default.createElement(
@@ -776,0 +786,0 @@ 'div',

package.json

 {
   "name": "react-image-gallery",
-  "version": "0.6.9",
+  "version": "0.6.10",
   "description": "React Carousel, React Image gallery, React Slide Show component",
@@ -5,0 +5,0 @@ "main": "./build/image-gallery",

src/ImageGallery.jsx

@@ -62,3 +62,4 @@ import React from 'react';
       offsetPercentage: 0,
-      galleryWidth: 0
+      galleryWidth: 0,
+      thumbnailWidth: 0
     };
@@ -78,6 +79,6 @@ }
   componentDidUpdate(prevProps, prevState) {
-    if (prevState.galleryWidth !== this.state.galleryWidth ||
+    if (prevState.thumbnailWidth !== this.state.thumbnailWidth ||
         prevProps.showThumbnails !== this.props.showThumbnails) {
 
-      // adjust thumbnail container when window width is adjusted
+      // adjust thumbnail container when thumbnail width is adjusted
       this._setThumbsTranslateX(
@@ -217,2 +218,6 @@ -this._getThumbsTranslateX(
     }
+
+    if (this._imageGalleryThumbnail) {
+      this.setState({thumbnailWidth: this._imageGalleryThumbnail.offsetWidth});
+    }
   }
@@ -228,3 +233,3 @@
         if (this._canSlideLeft() && !this._intervalId) {
-          this._slideLeft();;
+          this._slideLeft();
         }
@@ -360,6 +365,6 @@ break;
 
-    const {galleryWidth} = this.state;
+    const {thumbnailWidth} = this.state;
 
     if (this._thumbnails) {
-      if (this._thumbnails.scrollWidth <= galleryWidth) {
+      if (this._thumbnails.scrollWidth <= thumbnailWidth) {
         return 0;
@@ -369,3 +374,3 @@ }
       // total scroll-x required to see the last thumbnail
-      let totalScrollX = this._thumbnails.scrollWidth - galleryWidth;
+      let totalScrollX = this._thumbnails.scrollWidth - thumbnailWidth;
       // scroll-x required per index change
@@ -701,3 +706,6 @@ let perIndexScrollX = totalScrollX / (totalThumbnails - 1);
           this.props.showThumbnails &&
-            <div className='image-gallery-thumbnails'>
+            <div
+              className='image-gallery-thumbnails'
+              ref={i => this._imageGalleryThumbnail = i}
+            >
               <div
@@ -704,0 +712,0 @@ ref={t => this._thumbnails = t}

No alert changes

Improved metrics

Total package byte prevSize

266385

increased by0.21%

Lines of code

2365

increased by0.68%

No dependency changes