react-image-gallery - npm Package Compare versions

Comparing version 0.6.1 to 0.6.2

build/image-gallery.js

@@ -80,2 +80,16 @@ 'use strict';
 
+// This is to handle accessing event properties in an asynchronous way
+// https://facebook.github.io/react/docs/events.html#syntheticevent
+function debounceEventHandler() {
+  var throttled = throttle.apply(undefined, arguments);
+  return function (event) {
+    if (event) {
+      event.persist();
+      return throttled(event);
+    }
+
+    return throttled();
+  };
+}
+
 var ImageGallery = function (_React$Component) {
@@ -96,4 +110,4 @@ (0, _inherits3.default)(ImageGallery, _React$Component);
 
-    _this._slideLeft = throttle(_this._slideLeft, MIN_INTERVAL, true);
-    _this._slideRight = throttle(_this._slideRight, MIN_INTERVAL, true);
+    _this._slideLeft = debounceEventHandler(_this._slideLeft.bind(_this), MIN_INTERVAL, true);
+    _this._slideRight = debounceEventHandler(_this._slideRight.bind(_this), MIN_INTERVAL, true);
     _this._handleResize = _this._handleResize.bind(_this);
@@ -139,3 +153,5 @@ _this._handleKeyDown = _this._handleKeyDown.bind(_this);
       }
-      window.addEventListener('keydown', this._handleKeyDown);
+      if (!this.props.disableArrowKeys) {
+        window.addEventListener('keydown', this._handleKeyDown);
+      }
       window.addEventListener('resize', this._handleResize);
@@ -146,3 +162,5 @@ }
     value: function componentWillUnmount() {
-      window.removeEventListener('keydown', this._handleKeyDown);
+      if (!this.props.disableArrowKeys) {
+        window.removeEventListener('keydown', this._handleKeyDown);
+      }
       window.removeEventListener('resize', this._handleResize);
@@ -208,2 +226,11 @@ if (this._intervalId) {
     value: function slideToIndex(index, event) {
+      if (event) {
+        event.preventDefault();
+        if (this._intervalId) {
+          // user triggered event while ImageGallery is playing, reset interval
+          this.pause(false);
+          this.play(false);
+        }
+      }
+
       var slideCount = this.props.items.length - 1;
@@ -226,37 +253,9 @@ var currentIndex = index;
       });
-
-      if (event) {
-        if (this._intervalId) {
-          // user event, while playing, reset interval
-          this.pause(false);
-          this.play(false);
-        }
-      }
     }
   }, {
-    key: '_wrapClick',
-    value: function _wrapClick(func) {
-      var _this4 = this;
-
-      if (typeof func === 'function') {
-        return function (event) {
-          if (_this4._preventGhostClick === true) {
-            return;
-          }
-          func(event);
-        };
-      }
+    key: 'getCurrentIndex',
+    value: function getCurrentIndex() {
+      return this.state.currentIndex;
     }
   }, {
-    key: '_touchEnd',
-    value: function _touchEnd() {
-      var _this5 = this;
-
-      this._preventGhostClick = true;
-      this._preventGhostClickTimer = window.setTimeout(function () {
-        _this5._preventGhostClick = false;
-        _this5._preventGhostClickTimer = null;
-      }, this._ghotClickDelay);
-    }
-  }, {
     key: '_handleResize',
@@ -291,3 +290,3 @@ value: function _handleResize() {
     value: function _handleMouseOverThumbnails(index) {
-      var _this6 = this;
+      var _this4 = this;
 
@@ -301,3 +300,3 @@ if (this.props.slideOnThumbnailHover) {
         this._thumbnailTimer = window.setTimeout(function () {
-          _this6.slideToIndex(index);
+          _this4.slideToIndex(index);
         }, this._thumbnailDelay);
@@ -520,9 +519,9 @@ }
     key: '_slideLeft',
-    value: function _slideLeft() {
-      this.slideToIndex(this.state.currentIndex - 1);
+    value: function _slideLeft(event) {
+      this.slideToIndex(this.state.currentIndex - 1, event);
     }
   }, {
     key: '_slideRight',
-    value: function _slideRight() {
-      this.slideToIndex(this.state.currentIndex + 1);
+    value: function _slideRight(event) {
+      this.slideToIndex(this.state.currentIndex + 1, event);
     }
@@ -532,3 +531,3 @@ }, {
     value: function render() {
-      var _this7 = this;
+      var _this5 = this;
 
@@ -547,9 +546,9 @@ var currentIndex = this.state.currentIndex;
       this.props.items.map(function (item, index) {
-        var alignment = _this7._getAlignmentClassName(index);
+        var alignment = _this5._getAlignmentClassName(index);
         var originalClass = item.originalClass ? ' ' + item.originalClass : '';
         var thumbnailClass = item.thumbnailClass ? ' ' + item.thumbnailClass : '';
 
-        var onImageError = _this7._handleImageError;
-        if (_this7.props.onImageError) {
-          onImageError = _this7.props.onImageError;
+        var onImageError = _this5._handleImageError;
+        if (_this5.props.onImageError) {
+          onImageError = _this5.props.onImageError;
         }
@@ -561,6 +560,4 @@ var slide = _react2.default.createElement(
             className: 'image-gallery-slide' + alignment + originalClass,
-            style: (0, _assign2.default)(_this7._getSlideStyle(index), _this7.state.style),
-            onClick: _this7._wrapClick(_this7.props.onClick),
-            onTouchStart: _this7.props.onClick,
-            onTouchEnd: _this7._touchEnd.bind(_this7)
+            style: (0, _assign2.default)(_this5._getSlideStyle(index), _this5.state.style),
+            onClick: _this5.props.onClick
           },
@@ -573,4 +570,6 @@ _react2.default.createElement(
               alt: item.originalAlt,
-              onLoad: _this7.props.onImageLoad,
-              onError: onImageError.bind(_this7)
+              srcSet: item.srcSet,
+              sizes: item.sizes,
+              onLoad: _this5.props.onImageLoad,
+              onError: onImageError.bind(_this5)
             }),
@@ -585,3 +584,3 @@ item.description && _react2.default.createElement(
 
-        if (_this7.props.lazyLoad) {
+        if (_this5.props.lazyLoad) {
           if (alignment) {
@@ -594,27 +593,30 @@ slides.push(slide);
 
-        var onThumbnailError = _this7._handleImageError;
-        if (_this7.props.onThumbnailError) {
-          onThumbnailError = _this7.props.onThumbnailError;
+        var onThumbnailError = _this5._handleImageError;
+        if (_this5.props.onThumbnailError) {
+          onThumbnailError = _this5.props.onThumbnailError;
         }
 
-        if (_this7.props.showThumbnails) {
+        if (_this5.props.showThumbnails) {
           thumbnails.push(_react2.default.createElement(
             'a',
             {
-              onMouseOver: _this7._handleMouseOverThumbnails.bind(_this7, index),
-              onMouseLeave: _this7._handleMouseLeaveThumbnails.bind(_this7, index),
+              onMouseOver: _this5._handleMouseOverThumbnails.bind(_this5, index),
+              onMouseLeave: _this5._handleMouseLeaveThumbnails.bind(_this5, index),
               key: index,
               className: 'image-gallery-thumbnail' + (currentIndex === index ? ' active' : '') + thumbnailClass,
 
-              onTouchStart: _this7.slideToIndex.bind(_this7, index),
-              onTouchEnd: _this7._touchEnd.bind(_this7),
-              onClick: _this7._wrapClick(_this7.slideToIndex.bind(_this7, index)) },
+              onTouchStart: function onTouchStart(event) {
+                return _this5.slideToIndex.call(_this5, index, event);
+              },
+              onClick: function onClick(event) {
+                return _this5.slideToIndex.call(_this5, index, event);
+              } },
             _react2.default.createElement('img', {
               src: item.thumbnail,
               alt: item.thumbnailAlt,
-              onError: onThumbnailError.bind(_this7) })
+              onError: onThumbnailError.bind(_this5) })
           ));
         }
 
-        if (_this7.props.showBullets) {
+        if (_this5.props.showBullets) {
           bullets.push(_react2.default.createElement('li', {
@@ -624,5 +626,8 @@ key: index,
 
-            onTouchStart: _this7.slideToIndex.bind(_this7, index),
-            onTouchEnd: _this7._touchEnd.bind(_this7),
-            onClick: _this7._wrapClick(_this7.slideToIndex.bind(_this7, index)) }));
+            onTouchStart: function onTouchStart(event) {
+              return _this5.slideToIndex.call(_this5, index, event);
+            },
+            onClick: function onClick(event) {
+              return _this5.slideToIndex.call(_this5, index, event);
+            } }));
         }
@@ -634,3 +639,3 @@ });
         { ref: function ref(i) {
-            return _this7._imageGallery = i;
+            return _this5._imageGallery = i;
           }, className: 'image-gallery' },
@@ -649,9 +654,7 @@ _react2.default.createElement(
               onTouchStart: slideLeft,
-              onTouchEnd: this._touchEnd.bind(this),
-              onClick: this._wrapClick(slideLeft) }),
+              onClick: slideLeft }),
             this._canSlideRight() && _react2.default.createElement('a', {
               className: 'image-gallery-right-nav',
               onTouchStart: slideRight,
-              onTouchEnd: this._touchEnd.bind(this),
-              onClick: this._wrapClick(slideRight) })
+              onClick: slideRight })
           ), _react2.default.createElement(
@@ -715,3 +718,3 @@ _reactSwipeable2.default,
               ref: function ref(t) {
-                return _this7._thumbnails = t;
+                return _this5._thumbnails = t;
               },
@@ -743,2 +746,3 @@ className: 'image-gallery-thumbnails-container',
   disableThumbnailScroll: _react2.default.PropTypes.bool,
+  disableArrowKeys: _react2.default.PropTypes.bool,
   defaultImage: _react2.default.PropTypes.string,
@@ -768,2 +772,3 @@ indexSeparator: _react2.default.PropTypes.string,
   disableThumbnailScroll: false,
+  disableArrowKeys: false,
   indexSeparator: ' / ',
@@ -770,0 +775,0 @@ startIndex: 0,

gulpfile.js

@@ -48,2 +48,3 @@ var babel = require('gulp-babel')
 gulp.task('demo-js', function() {
+  process.env.NODE_ENV = 'production'
   browserify({
@@ -82,3 +83,2 @@ entries: './example/app.js',
 gulp.task('build', ['source-js', 'sass'])
-// NODE_ENV=production gulp demo
 gulp.task('demo', ['demo-js'])

package.json

 {
   "name": "react-image-gallery",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "React Image gallery, React Carousel, React Slide Show component",
@@ -37,2 +37,3 @@ "main": "./build/image-gallery",
   "devDependencies": {
+    "babel-eslint": "^6.0.4",
     "babel-plugin-transform-runtime": "^6.7.5",
@@ -44,2 +45,4 @@ "babel-preset-es2015": "^6.6.0",
     "browserify": "^13.0.0",
+    "eslint": "^2.10.2",
+    "eslint-plugin-react": "^5.1.1",
     "gulp": "^3.8.11",
@@ -46,0 +49,0 @@ "gulp-babel": "^6.1.2",

README.md

@@ -67,2 +67,4 @@ React Image Gallery
         description: 'Optional description...'
+        srcSet: 'Optional srcset (responsive images src)'
+        size: 'Optional size (image size relative to the breakpoint)'
       },
@@ -87,3 +89,3 @@ {
           slideInterval={2000}
-          handleImageLoad={this.handleImageLoad}/>
+          onImageLoad={this.handleImageLoad}/>
       </div>
@@ -111,2 +113,3 @@ );
   * slides to the currently hovered thumbnail
+* `disableArrowKeys`: Boolean, default `false`
 * `defaultImage`: String, default `undefined`
@@ -131,6 +134,7 @@ * an image src pointing to your default image if an image fails to load
 
-* `play()`: continuous plays if image is not hovered.
-* `pause()`: pauses the slides.
+* `play()`: continuous plays if image is not hovered
+* `pause()`: pauses the slides
 * `fullScreen()`: activates full screen
-* `slideToIndex(index)`: slide to a specific index.
+* `slideToIndex(index)`: slides to a specific index
+* `getCurrentIndex()`: returns the current index
 
@@ -137,0 +141,0 @@ # Notes

src/ImageGallery.jsx

@@ -38,3 +38,17 @@ import React from 'react'
 
+// This is to handle accessing event properties in an asynchronous way
+// https://facebook.github.io/react/docs/events.html#syntheticevent
+function debounceEventHandler(...args) {
+  const throttled = throttle(...args)
+  return function(event) {
+    if (event) {
+      event.persist()
+      return throttled(event)
+    }
 
+    return throttled()
+  }
+}
+
+
 export default class ImageGallery extends React.Component {
@@ -51,4 +65,4 @@
 
-    this._slideLeft = throttle(this._slideLeft, MIN_INTERVAL, true)
-    this._slideRight = throttle(this._slideRight, MIN_INTERVAL, true)
+    this._slideLeft = debounceEventHandler(this._slideLeft.bind(this), MIN_INTERVAL, true)
+    this._slideRight = debounceEventHandler(this._slideRight.bind(this), MIN_INTERVAL, true)
     this._handleResize = this._handleResize.bind(this)
@@ -89,3 +103,5 @@ this._handleKeyDown = this._handleKeyDown.bind(this)
     }
-    window.addEventListener('keydown', this._handleKeyDown)
+    if (!this.props.disableArrowKeys) {
+      window.addEventListener('keydown', this._handleKeyDown)
+    }
     window.addEventListener('resize', this._handleResize)
@@ -95,3 +111,5 @@ }
   componentWillUnmount() {
-    window.removeEventListener('keydown', this._handleKeyDown)
+    if (!this.props.disableArrowKeys) {
+      window.removeEventListener('keydown', this._handleKeyDown)
+    }
     window.removeEventListener('resize', this._handleResize)
@@ -139,5 +157,5 @@ if (this._intervalId) {
       if (!ScreenFull.isFullscreen) {
-          ScreenFull.request(this._imageGallery);
+          ScreenFull.request(this._imageGallery)
       } else {
-          ScreenFull.exit();
+          ScreenFull.exit()
       }
@@ -148,2 +166,11 @@ }
   slideToIndex(index, event) {
+    if (event) {
+      event.preventDefault()
+      if (this._intervalId) {
+        // user triggered event while ImageGallery is playing, reset interval
+        this.pause(false)
+        this.play(false)
+      }
+    }
+
     let slideCount = this.props.items.length - 1
@@ -166,31 +193,8 @@ let currentIndex = index
     })
-
-    if (event) {
-      if (this._intervalId) {
-        // user event, while playing, reset interval
-        this.pause(false)
-        this.play(false)
-      }
-    }
   }
 
-  _wrapClick(func) {
-    if (typeof func === 'function') {
-      return event => {
-        if (this._preventGhostClick === true) {
-          return
-        }
-        func(event)
-      }
-    }
+  getCurrentIndex() {
+    return this.state.currentIndex
   }
 
-  _touchEnd() {
-    this._preventGhostClick = true
-    this._preventGhostClickTimer = window.setTimeout(() => {
-      this._preventGhostClick = false
-      this._preventGhostClickTimer = null
-    }, this._ghotClickDelay)
-  }
-
   _handleResize() {
@@ -430,8 +434,8 @@ if (this._imageGallery) {
 
-  _slideLeft() {
-    this.slideToIndex(this.state.currentIndex - 1)
+  _slideLeft(event) {
+    this.slideToIndex(this.state.currentIndex - 1, event)
   }
 
-  _slideRight() {
-    this.slideToIndex(this.state.currentIndex + 1)
+  _slideRight(event) {
+    this.slideToIndex(this.state.currentIndex + 1, event)
   }
@@ -457,3 +461,3 @@
 
-      let onImageError = this._handleImageError;
+      let onImageError = this._handleImageError
       if (this.props.onImageError) {
@@ -467,5 +471,3 @@ onImageError = this.props.onImageError
           style={Object.assign(this._getSlideStyle(index), this.state.style)}
-          onClick={this._wrapClick(this.props.onClick)}
-          onTouchStart={this.props.onClick}
-          onTouchEnd={this._touchEnd.bind(this)}
+          onClick={this.props.onClick}
         >
@@ -476,2 +478,4 @@ <div className='image-gallery-image'>
               alt={item.originalAlt}
+              srcSet={item.srcSet}
+              sizes={item.sizes}
               onLoad={this.props.onImageLoad}
@@ -498,3 +502,3 @@ onError={onImageError.bind(this)}
 
-      let onThumbnailError = this._handleImageError;
+      let onThumbnailError = this._handleImageError
       if (this.props.onThumbnailError) {
@@ -516,5 +520,4 @@ onThumbnailError = this.props.onThumbnailError
 
-            onTouchStart={this.slideToIndex.bind(this, index)}
-            onTouchEnd={this._touchEnd.bind(this)}
-            onClick={this._wrapClick(this.slideToIndex.bind(this, index))}>
+            onTouchStart={event => this.slideToIndex.call(this, index, event)}
+            onClick={event => this.slideToIndex.call(this, index, event)}>
 
@@ -537,5 +540,4 @@ <img
 
-            onTouchStart={this.slideToIndex.bind(this, index)}
-            onTouchEnd={this._touchEnd.bind(this)}
-            onClick={this._wrapClick(this.slideToIndex.bind(this, index))}>
+            onTouchStart={event => this.slideToIndex.call(this, index, event)}
+            onClick={event => this.slideToIndex.call(this, index, event)}>
           </li>
@@ -562,4 +564,3 @@ )
                           onTouchStart={slideLeft}
-                          onTouchEnd={this._touchEnd.bind(this)}
-                          onClick={this._wrapClick(slideLeft)}/>
+                          onClick={slideLeft}/>
 
@@ -572,4 +573,3 @@ }
                           onTouchStart={slideRight}
-                          onTouchEnd={this._touchEnd.bind(this)}
-                          onClick={this._wrapClick(slideRight)}/>
+                          onClick={slideRight}/>
                     }
@@ -650,2 +650,3 @@ </span>,
   disableThumbnailScroll: React.PropTypes.bool,
+  disableArrowKeys: React.PropTypes.bool,
   defaultImage: React.PropTypes.string,
@@ -675,2 +676,3 @@ indexSeparator: React.PropTypes.string,
   disableThumbnailScroll: false,
+  disableArrowKeys: false,
   indexSeparator: ' / ',
@@ -677,0 +679,0 @@ startIndex: 0,

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

155

increased by2.65%

Worsened metrics

Total package byte prevSize

276644

decreased by-22.45%

Dev dependency count

22

increased by15.79%

Number of package files

10

decreased by-9.09%

Lines of code

2204

decreased by-9.49%

Number of low supply chain risk alerts

3

increased by50%

No dependency changes