react-image-gallery - npm Package Compare versions

Comparing version 0.8.5 to 0.8.6

build/image-gallery.js

@@ -194,17 +194,33 @@ 'use strict';
     _this._handleOnSwiped = function (e, deltaX, deltaY, isFlick) {
-      // swiped left vs right
-      var side = deltaX > 0 ? 1 : -1;
-      // this.setState({isFlick: isFlick});
-      _this._handleOnSwipedTo(side, isFlick);
+      var _this$state2 = _this.state;
+      var scrollingUpDown = _this$state2.scrollingUpDown;
+      var scrollingLeftRight = _this$state2.scrollingLeftRight;
+
+      if (scrollingUpDown) {
+        // user stopped scrollingUpDown
+        _this.setState({ scrollingUpDown: false });
+      }
+
+      if (scrollingLeftRight) {
+        // user stopped scrollingLeftRight
+        _this.setState({ scrollingLeftRight: false });
+      }
+
+      if (!scrollingUpDown) {
+        // don't swipe if user is scrolling
+        var side = deltaX > 0 ? 1 : -1;
+        _this._handleOnSwipedTo(side, isFlick);
+      }
     };
 
     _this._handleSwiping = function (e, deltaX, deltaY, delta) {
-      var _this$state2 = _this.state;
-      var galleryWidth = _this$state2.galleryWidth;
-      var isTransitioning = _this$state2.isTransitioning;
+      var _this$state3 = _this.state;
+      var galleryWidth = _this$state3.galleryWidth;
+      var isTransitioning = _this$state3.isTransitioning;
+      var scrollingUpDown = _this$state3.scrollingUpDown;
       var swipingTransitionDuration = _this.props.swipingTransitionDuration;
 
-      if (!isTransitioning) {
-        // swiping left vs right
-        var side = deltaX > 0 ? -1 : 1;
+      _this._setScrollDirection(deltaX, deltaY);
+      if (!isTransitioning && !scrollingUpDown) {
+        var side = deltaX < 0 ? 1 : -1;
 
@@ -224,2 +240,5 @@ var offsetPercentage = delta / galleryWidth * 100;
         });
+      } else {
+        // don't move the slide
+        _this.setState({ offsetPercentage: 0 });
       }
@@ -530,7 +549,24 @@ };
   }, {
+    key: '_setScrollDirection',
+    value: function _setScrollDirection(deltaX, deltaY) {
+      var _state = this.state;
+      var scrollingUpDown = _state.scrollingUpDown;
+      var scrollingLeftRight = _state.scrollingLeftRight;
+
+      var x = Math.abs(deltaX);
+      var y = Math.abs(deltaY);
+
+      // If y > x the user is scrolling up and down
+      if (y > x && !scrollingUpDown && !scrollingLeftRight) {
+        this.setState({ scrollingUpDown: true });
+      } else if (!scrollingLeftRight && !scrollingUpDown) {
+        this.setState({ scrollingLeftRight: true });
+      }
+    }
+  }, {
     key: '_handleOnSwipedTo',
     value: function _handleOnSwipedTo(side, isFlick) {
-      var _state = this.state;
-      var currentIndex = _state.currentIndex;
-      var isTransitioning = _state.isTransitioning;
+      var _state2 = this.state;
+      var currentIndex = _state2.currentIndex;
+      var isTransitioning = _state2.isTransitioning;
 
@@ -611,5 +647,5 @@ var slideTo = currentIndex;
 
-      var _state2 = this.state;
-      var thumbnailsWrapperWidth = _state2.thumbnailsWrapperWidth;
-      var thumbnailsWrapperHeight = _state2.thumbnailsWrapperHeight;
+      var _state3 = this.state;
+      var thumbnailsWrapperWidth = _state3.thumbnailsWrapperWidth;
+      var thumbnailsWrapperHeight = _state3.thumbnailsWrapperHeight;
 
@@ -678,5 +714,5 @@ var totalScroll = void 0;
     value: function _isGoingFromFirstToLast() {
-      var _state3 = this.state;
-      var currentIndex = _state3.currentIndex;
-      var previousIndex = _state3.previousIndex;
+      var _state4 = this.state;
+      var currentIndex = _state4.currentIndex;
+      var previousIndex = _state4.previousIndex;
 
@@ -689,5 +725,5 @@ var totalSlides = this.props.items.length - 1;
     value: function _isGoingFromLastToFirst() {
-      var _state4 = this.state;
-      var currentIndex = _state4.currentIndex;
-      var previousIndex = _state4.previousIndex;
+      var _state5 = this.state;
+      var currentIndex = _state5.currentIndex;
+      var previousIndex = _state5.previousIndex;
 
@@ -701,6 +737,6 @@ var totalSlides = this.props.items.length - 1;
       // For taking care of infinite swipe when there are only two slides
-      var _state5 = this.state;
-      var currentIndex = _state5.currentIndex;
-      var offsetPercentage = _state5.offsetPercentage;
-      var previousIndex = _state5.previousIndex;
+      var _state6 = this.state;
+      var currentIndex = _state6.currentIndex;
+      var offsetPercentage = _state6.offsetPercentage;
+      var previousIndex = _state6.previousIndex;
 
@@ -774,6 +810,6 @@ var baseTranslateX = -100 * currentIndex;
       */
-      var _state6 = this.state;
-      var isTransitioning = _state6.isTransitioning;
-      var previousIndex = _state6.previousIndex;
-      var currentIndex = _state6.currentIndex;
+      var _state7 = this.state;
+      var isTransitioning = _state7.isTransitioning;
+      var previousIndex = _state7.previousIndex;
+      var currentIndex = _state7.currentIndex;
 
@@ -798,5 +834,5 @@ var indexIsNotPreviousOrNextSlide = !(index === previousIndex || index === currentIndex);
       */
-      var _state7 = this.state;
-      var previousIndex = _state7.previousIndex;
-      var currentIndex = _state7.currentIndex;
+      var _state8 = this.state;
+      var previousIndex = _state8.previousIndex;
+      var currentIndex = _state8.currentIndex;
 
@@ -814,5 +850,5 @@ var totalSlides = this.props.items.length - 1;
     value: function _getSlideStyle(index) {
-      var _state8 = this.state;
-      var currentIndex = _state8.currentIndex;
-      var offsetPercentage = _state8.offsetPercentage;
+      var _state9 = this.state;
+      var currentIndex = _state9.currentIndex;
+      var offsetPercentage = _state9.offsetPercentage;
       var _props2 = this.props;
@@ -876,8 +912,11 @@ var infinite = _props2.infinite;
 
-      var _state9 = this.state;
-      var currentIndex = _state9.currentIndex;
-      var isFullscreen = _state9.isFullscreen;
-      var modalFullscreen = _state9.modalFullscreen;
-      var isPlaying = _state9.isPlaying;
-      var infinite = this.props.infinite;
+      var _state10 = this.state;
+      var currentIndex = _state10.currentIndex;
+      var isFullscreen = _state10.isFullscreen;
+      var modalFullscreen = _state10.modalFullscreen;
+      var isPlaying = _state10.isPlaying;
+      var scrollingLeftRight = _state10.scrollingLeftRight;
+      var _props3 = this.props;
+      var infinite = _props3.infinite;
+      var preventDefaultTouchmoveEvent = _props3.preventDefaultTouchmoveEvent;
 
@@ -920,3 +959,5 @@
             onTouchEnd: _this6.props.onTouchEnd,
-            onTouchStart: _this6.props.onTouchStart
+            onTouchStart: _this6.props.onTouchStart,
+            onMouseOver: _this6.props.onMouseOver,
+            onMouseLeave: _this6.props.onMouseLeave
           },
@@ -1006,3 +1047,3 @@ showItem ? renderItem(item) : _react2.default.createElement('div', { style: { height: '100%' } })
             stopPropagation: this.props.stopPropagation,
-            preventDefaultTouchmoveEvent: this.props.preventDefaultTouchmoveEvent
+            preventDefaultTouchmoveEvent: preventDefaultTouchmoveEvent || scrollingLeftRight
           },
@@ -1141,2 +1182,4 @@ _react2.default.createElement(
   onTouchStart: _propTypes2.default.func,
+  onMouseOver: _propTypes2.default.func,
+  onMouseLeave: _propTypes2.default.func,
   onThumbnailError: _propTypes2.default.func,
@@ -1143,0 +1186,0 @@ onThumbnailClick: _propTypes2.default.func,

package.json

 {
   "name": "react-image-gallery",
-  "version": "0.8.5",
-  "description": "Responsive and flexible carousel component with thumbnail support",
+  "version": "0.8.6",
+  "description": "React carousel image gallery component with thumbnail and mobile support",
   "main": "./build/image-gallery",
@@ -6,0 +6,0 @@ "scripts": {

README.md

@@ -52,6 +52,2 @@ React Carousel Image Gallery
 
-  handleImageLoad(event) {
-    console.log('Image loaded ', event.target)
-  }
-
   render() {
@@ -75,6 +71,3 @@
     return (
-      <ImageGallery
-        items={images}
-        slideInterval={2000}
-        onImageLoad={this.handleImageLoad}/>
+      <ImageGallery items={images} />
     );
@@ -154,5 +147,7 @@ }
 * `onClick`: Function, `callback(event)`
-* `onTouchMove`: Function, `callback(event)`
-* `onTouchEnd`: Function, `callback(event)`
-* `onTouchStart`: Function, `callback(event)`
+* `onTouchMove`: Function, `callback(event) on gallery slide`
+* `onTouchEnd`: Function, `callback(event) on gallery slide`
+* `onTouchStart`: Function, `callback(event) on gallery slide`
+* `onMouseOver`: Function, `callback(event) on gallery slide`
+* `onMouseLeave`: Function, `callback(event) on gallery slide`
 * `renderCustomControls`: Function, custom controls rendering
@@ -159,0 +154,0 @@ * Use this to render custom controls or other elements on the currently displayed image (like the fullscreen button)

src/ImageGallery.jsx

@@ -70,2 +70,4 @@ import React from 'react';
     onTouchStart: PropTypes.func,
+    onMouseOver: PropTypes.func,
+    onMouseLeave: PropTypes.func,
     onThumbnailError: PropTypes.func,
@@ -513,7 +515,31 @@ onThumbnailClick: PropTypes.func,
 
+  _setScrollDirection(deltaX, deltaY) {
+    const { scrollingUpDown, scrollingLeftRight } = this.state;
+    const x = Math.abs(deltaX);
+    const y = Math.abs(deltaY);
+
+    // If y > x the user is scrolling up and down
+    if (y > x && !scrollingUpDown && !scrollingLeftRight) {
+      this.setState({ scrollingUpDown: true });
+    } else if (!scrollingLeftRight && !scrollingUpDown) {
+      this.setState({ scrollingLeftRight: true });
+    }
+  };
+
   _handleOnSwiped = (e, deltaX, deltaY, isFlick) => {
-    // swiped left vs right
-    const side = deltaX > 0 ? 1 : -1;
-    // this.setState({isFlick: isFlick});
-    this._handleOnSwipedTo(side, isFlick);
+    const { scrollingUpDown, scrollingLeftRight } = this.state;
+    if (scrollingUpDown) {
+      // user stopped scrollingUpDown
+      this.setState({ scrollingUpDown: false });
+    }
+
+    if (scrollingLeftRight) {
+      // user stopped scrollingLeftRight
+      this.setState({ scrollingLeftRight: false });
+    }
+
+    if (!scrollingUpDown) { // don't swipe if user is scrolling
+      const side = deltaX > 0 ? 1 : -1;
+      this._handleOnSwipedTo(side, isFlick);
+    }
   };
@@ -553,7 +579,7 @@
   _handleSwiping = (e, deltaX, deltaY, delta) => {
-    const { galleryWidth, isTransitioning } = this.state;
+    const { galleryWidth, isTransitioning, scrollingUpDown } = this.state;
     const { swipingTransitionDuration } = this.props;
-    if (!isTransitioning) {
-      // swiping left vs right
-      const side = deltaX > 0 ? -1 : 1;
+    this._setScrollDirection(deltaX, deltaY);
+    if (!isTransitioning && !scrollingUpDown) {
+      const side = deltaX < 0 ? 1 : -1;
 
@@ -573,2 +599,5 @@ let offsetPercentage = (delta / galleryWidth * 100);
       });
+    } else {
+      // don't move the slide
+      this.setState({ offsetPercentage: 0 });
     }
@@ -900,5 +929,9 @@ };
       isPlaying,
+      scrollingLeftRight,
     } = this.state;
 
-    const { infinite } = this.props;
+    const {
+      infinite,
+      preventDefaultTouchmoveEvent,
+    } = this.props;
 
@@ -944,2 +977,4 @@ const thumbnailStyle = this._getThumbnailStyle();
           onTouchStart={this.props.onTouchStart}
+          onMouseOver={this.props.onMouseOver}
+          onMouseLeave={this.props.onMouseLeave}
         >
@@ -1047,3 +1082,3 @@ {showItem ? renderItem(item) : <div style={{ height: '100%' }}></div>}
                     stopPropagation={this.props.stopPropagation}
-                    preventDefaultTouchmoveEvent={this.props.preventDefaultTouchmoveEvent}
+                    preventDefaultTouchmoveEvent={preventDefaultTouchmoveEvent || scrollingLeftRight}
                   >
@@ -1050,0 +1085,0 @@ <div className='image-gallery-slides'>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

127747

increased by2.23%

Lines of code

2867

increased by2.47%

Worsened metrics

Number of lines in readme file

255

decreased by-1.92%

No dependency changes