react-image-gallery - npm Package Compare versions

Comparing version 0.7.10 to 0.7.11

build/image-gallery.js

@@ -89,4 +89,3 @@ 'use strict';
       if (prevProps.slideDuration !== this.props.slideDuration) {
-        this._slideLeft = (0, _lodash2.default)(this._unthrottledSlideLeft, this.props.slideDuration, { trailing: false });
-        this._slideRight = (0, _lodash2.default)(this._unthrottledSlideRight, this.props.slideDuration, { trailing: false });
+        this.slideToIndex = (0, _lodash2.default)(this._unthrottledSlideToIndex, this.props.slideDuration, { trailing: false });
       }
@@ -98,9 +97,5 @@ }
       // Used to update the throttle if slideDuration changes
-      this._unthrottledSlideLeft = this._slideLeft.bind(this);
-      this._unthrottledSlideRight = this._slideRight.bind(this);
+      this._unthrottledSlideToIndex = this.slideToIndex.bind(this);
+      this.slideToIndex = (0, _lodash2.default)(this._unthrottledSlideToIndex, this.props.slideDuration, { trailing: false });
 
-      this._slideLeft = (0, _lodash2.default)(this._unthrottledSlideLeft, this.props.slideDuration, { trailing: false });
-
-      this._slideRight = (0, _lodash2.default)(this._unthrottledSlideRight, this.props.slideDuration, { trailing: false });
-
       this._handleResize = this._handleResize.bind(this);
@@ -233,2 +228,5 @@ this._handleScreenChange = this._handleScreenChange.bind(this);
     value: function slideToIndex(index, event) {
+      var currentIndex = this.state.currentIndex;
+
+
       if (event) {
@@ -243,13 +241,13 @@ if (this._intervalId) {
       var slideCount = this.props.items.length - 1;
-      var currentIndex = index;
+      var nextIndex = index;
 
       if (index < 0) {
-        currentIndex = slideCount;
+        nextIndex = slideCount;
       } else if (index > slideCount) {
-        currentIndex = 0;
+        nextIndex = 0;
       }
 
       this.setState({
-        previousIndex: this.state.currentIndex,
-        currentIndex: currentIndex,
+        previousIndex: currentIndex,
+        currentIndex: nextIndex,
         offsetPercentage: 0,
@@ -444,3 +442,3 @@ style: {
 
-      this.slideToIndex(slideTo);
+      this._unthrottledSlideToIndex(slideTo);
     }
@@ -454,3 +452,6 @@ }, {
       }
-      this.setState({ offsetPercentage: offsetPercentage, style: {} });
+      this.setState({
+        offsetPercentage: offsetPercentage,
+        style: {}
+      });
     }
@@ -642,2 +643,4 @@ }, {
         zIndex = 2;
+      } else if (index === 0 || index === totalSlides) {
+        zIndex = 0;
       }
@@ -751,2 +754,7 @@
 
+        var showItem = !_this7.props.lazyLoad || alignment || _this7._lazyLoaded[index];
+        if (showItem && _this7.props.lazyLoad) {
+          _this7._lazyLoaded[index] = true;
+        }
+
         var slide = _react2.default.createElement(
@@ -760,13 +768,6 @@ 'div',
           },
-          renderItem(item)
+          showItem && renderItem(item)
         );
 
-        if (_this7.props.lazyLoad) {
-          if (alignment || _this7._lazyLoaded[index]) {
-            slides.push(slide);
-            _this7._lazyLoaded[index] = true;
-          }
-        } else {
-          slides.push(slide);
-        }
+        slides.push(slide);
 
@@ -773,0 +774,0 @@ var onThumbnailError = _this7._handleImageError;

package.json

 {
   "name": "react-image-gallery",
-  "version": "0.7.10",
+  "version": "0.7.11",
   "description": "Responsive and flexible carousel component with thumbnail support",
@@ -5,0 +5,0 @@ "main": "./build/image-gallery",

README.md

@@ -7,2 +7,5 @@ React Image Gallery
 
+## Live Demo (try it on mobile for swipe support)
+Live demo: [`linxtion.com/demo/react-image-gallery`](http://linxtion.com/demo/react-image-gallery)
+
 ![demo gif](https://github.com/xiaolin/react-image-gallery/raw/master/static/image_gallery.gif)
@@ -19,5 +22,2 @@
 
-## Live Demo (try it on mobile)
-Live demo: [`linxtion.com/demo/react-image-gallery`](http://linxtion.com/demo/react-image-gallery)
-
 ## Getting started
@@ -24,0 +24,0 @@

src/ImageGallery.jsx

@@ -163,8 +163,5 @@ import React from 'react';
     if (prevProps.slideDuration !== this.props.slideDuration) {
-      this._slideLeft = throttle(this._unthrottledSlideLeft,
-                                 this.props.slideDuration,
-                                 {trailing: false});
-      this._slideRight = throttle(this._unthrottledSlideRight,
-                                  this.props.slideDuration,
-                                  {trailing: false});
+      this.slideToIndex = throttle(this._unthrottledSlideToIndex,
+                                   this.props.slideDuration,
+                                   {trailing: false});
     }
@@ -175,11 +172,5 @@ }
     // Used to update the throttle if slideDuration changes
-    this._unthrottledSlideLeft = this._slideLeft.bind(this);
-    this._unthrottledSlideRight = this._slideRight.bind(this);
-
-    this._slideLeft = throttle(this._unthrottledSlideLeft,
-                               this.props.slideDuration,
-                               {trailing: false});
-
-    this._slideRight = throttle(this._unthrottledSlideRight,
-                                this.props.slideDuration,
+    this._unthrottledSlideToIndex = this.slideToIndex.bind(this);
+    this.slideToIndex = throttle(this._unthrottledSlideToIndex,
+                                 this.props.slideDuration,
                                 {trailing: false});
@@ -301,2 +292,4 @@
   slideToIndex(index, event) {
+    const {currentIndex} = this.state;
+
     if (event) {
@@ -311,13 +304,13 @@ if (this._intervalId) {
     let slideCount = this.props.items.length - 1;
-    let currentIndex = index;
+    let nextIndex = index;
 
     if (index < 0) {
-      currentIndex = slideCount;
+      nextIndex = slideCount;
     } else if (index > slideCount) {
-      currentIndex = 0;
+      nextIndex = 0;
     }
 
     this.setState({
-      previousIndex: this.state.currentIndex,
-      currentIndex: currentIndex,
+      previousIndex: currentIndex,
+      currentIndex: nextIndex,
       offsetPercentage: 0,
@@ -328,2 +321,3 @@ style: {
     });
+
   }
@@ -496,3 +490,3 @@
 
-    this.slideToIndex(slideTo);
+    this._unthrottledSlideToIndex(slideTo);
   }
@@ -505,3 +499,6 @@
     }
-    this.setState({offsetPercentage: offsetPercentage, style: {}});
+    this.setState({
+      offsetPercentage: offsetPercentage,
+      style: {}
+    });
   }
@@ -679,2 +676,4 @@
       zIndex = 2;
+    } else if (index === 0 || index === totalSlides) {
+      zIndex = 0;
     }
@@ -785,2 +784,7 @@
 
+      const showItem = !this.props.lazyLoad || alignment || this._lazyLoaded[index];
+      if (showItem && this.props.lazyLoad) {
+          this._lazyLoaded[index] = true;
+      }
+
       const slide = (
@@ -793,14 +797,7 @@ <div
         >
-          {renderItem(item)}
+          {showItem && renderItem(item)}
         </div>
       );
 
-      if (this.props.lazyLoad) {
-        if (alignment || this._lazyLoaded[index]) {
-          slides.push(slide);
-          this._lazyLoaded[index] = true;
-        }
-      } else {
-        slides.push(slide);
-      }
+      slides.push(slide);
 
@@ -807,0 +804,0 @@ let onThumbnailError = this._handleImageError;

No alert changes

Worsened metrics

Total package byte prevSize

110262

decreased by-0.38%

Lines of code

2483

decreased by-0.16%

No dependency changes