react-image-gallery - npm Package Compare versions

Comparing version 0.8.16 to 0.8.17

build/image-gallery.js

@@ -17,4 +17,2 @@ 'use strict';
 
-var _reactSwipeable2 = _interopRequireDefault(_reactSwipeable);
-
 var _lodash = require('lodash.throttle');
@@ -212,3 +210,8 @@
 
-    _this._handleOnSwiped = function (e, deltaX, deltaY, isFlick) {
+    _this._handleOnSwiped = function (_ref) {
+      var event = _ref.event,
+          dir = _ref.dir,
+          velocity = _ref.velocity;
+
+      if (_this.props.disableSwipe) return;
       var _this$state2 = _this.state,
@@ -219,2 +222,3 @@ scrollingUpDown = _this$state2.scrollingUpDown,
 
+      if (_this.props.stopPropagation) event.stopPropagation();
       if (scrollingUpDown) {
@@ -232,3 +236,4 @@ // user stopped scrollingUpDown
         // don't swipe if user is scrolling
-        var side = (deltaX > 0 ? 1 : -1) * (isRTL ? -1 : 1); //if it is RTL the direction is reversed
+        var side = (dir === _reactSwipeable.LEFT ? 1 : -1) * (isRTL ? -1 : 1); // if it is RTL the direction is reversed
+        var isFlick = velocity > _this.props.flickThreshold;
         _this._handleOnSwipedTo(side, isFlick);
@@ -238,14 +243,22 @@ }
 
-    _this._handleSwiping = function (e, deltaX, deltaY, delta) {
+    _this._handleSwiping = function (_ref2) {
+      var event = _ref2.event,
+          absX = _ref2.absX,
+          dir = _ref2.dir;
+
+      if (_this.props.disableSwipe) return;
       var _this$state3 = _this.state,
           galleryWidth = _this$state3.galleryWidth,
           isTransitioning = _this$state3.isTransitioning,
-          scrollingUpDown = _this$state3.scrollingUpDown;
+          scrollingUpDown = _this$state3.scrollingUpDown,
+          scrollingLeftRight = _this$state3.scrollingLeftRight;
       var swipingTransitionDuration = _this.props.swipingTransitionDuration;
 
-      _this._setScrollDirection(deltaX, deltaY);
+      _this._setScrollDirection(dir);
+      if (_this.props.stopPropagation) event.stopPropagation();
+      if ((_this.props.preventDefaultTouchmoveEvent || scrollingLeftRight) && event.cancelable) event.preventDefault();
       if (!isTransitioning && !scrollingUpDown) {
-        var side = deltaX < 0 ? 1 : -1;
+        var side = dir === _reactSwipeable.RIGHT ? 1 : -1;
 
-        var offsetPercentage = delta / galleryWidth * 100;
+        var offsetPercentage = absX / galleryWidth * 100;
         if (Math.abs(offsetPercentage) >= 100) {
@@ -580,3 +593,3 @@ offsetPercentage = 100;
     key: '_setScrollDirection',
-    value: function _setScrollDirection(deltaX, deltaY) {
+    value: function _setScrollDirection(dir) {
       var _state = this.state,
@@ -586,10 +599,9 @@ scrollingUpDown = _state.scrollingUpDown,
 
-      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 });
+      if (!scrollingUpDown && !scrollingLeftRight) {
+        if (dir === _reactSwipeable.LEFT || dir === _reactSwipeable.RIGHT) {
+          this.setState({ scrollingLeftRight: true });
+        } else {
+          this.setState({ scrollingUpDown: true });
+        }
       }
@@ -715,19 +727,21 @@ }
     value: function _getAlignmentClassName(index) {
-      // LEFT, and RIGHT alignments are necessary for lazyLoad
+      /*
+        Necessary for lazing loading
+      */
       var currentIndex = this.state.currentIndex;
 
       var alignment = '';
-      var LEFT = 'left';
-      var CENTER = 'center';
-      var RIGHT = 'right';
+      var leftClassName = 'left';
+      var centerClassName = 'center';
+      var rightClassName = 'right';
 
       switch (index) {
         case currentIndex - 1:
-          alignment = ' ' + LEFT;
+          alignment = ' ' + leftClassName;
           break;
         case currentIndex:
-          alignment = ' ' + CENTER;
+          alignment = ' ' + centerClassName;
           break;
         case currentIndex + 1:
-          alignment = ' ' + RIGHT;
+          alignment = ' ' + rightClassName;
           break;
@@ -739,6 +753,6 @@ }
           // set first slide as right slide if were sliding right from last slide
-          alignment = ' ' + RIGHT;
+          alignment = ' ' + rightClassName;
         } else if (index === this.props.items.length - 1 && currentIndex === 0) {
           // set last slide as left slide if were sliding left from first slide
-          alignment = ' ' + LEFT;
+          alignment = ' ' + leftClassName;
         }
@@ -969,7 +983,5 @@ }
           modalFullscreen = _state11.modalFullscreen,
-          isPlaying = _state11.isPlaying,
-          scrollingLeftRight = _state11.scrollingLeftRight;
+          isPlaying = _state11.isPlaying;
       var _props4 = this.props,
           infinite = _props4.infinite,
-          preventDefaultTouchmoveEvent = _props4.preventDefaultTouchmoveEvent,
           slideOnThumbnailOver = _props4.slideOnThumbnailOver,
@@ -1085,13 +1097,9 @@ isRTL = _props4.isRTL;
         ), _react2.default.createElement(
-          _reactSwipeable2.default,
+          _reactSwipeable.Swipeable,
           {
             className: 'image-gallery-swipe',
-            disabled: this.props.disableSwipe,
             key: 'swipeable',
             delta: 0,
-            flickThreshold: this.props.flickThreshold,
             onSwiping: this._handleSwiping,
-            onSwiped: this._handleOnSwiped,
-            stopPropagation: this.props.stopPropagation,
-            preventDefaultTouchmoveEvent: preventDefaultTouchmoveEvent || scrollingLeftRight
+            onSwiped: this._handleOnSwiped
           },
@@ -1098,0 +1106,0 @@ _react2.default.createElement(

package.json

 {
   "name": "react-image-gallery",
-  "version": "0.8.16",
+  "version": "0.8.17",
   "description": "React carousel image gallery component with thumbnail and mobile support",
@@ -68,5 +68,5 @@ "main": "./build/image-gallery.js",
     "prop-types": "^15.5.8",
-    "react-swipeable": "^4.3.2",
+    "react-swipeable": "^5.2.0",
     "resize-observer-polyfill": "^1.5.0"
   }
 }

src/ImageGallery.jsx

 import React from 'react';
-import Swipeable from 'react-swipeable';
+import { Swipeable, LEFT, RIGHT } from 'react-swipeable';
 import throttle from 'lodash.throttle';
@@ -485,18 +485,19 @@ import debounce from 'lodash.debounce';
 
-  _setScrollDirection(deltaX, deltaY) {
+  _setScrollDirection(dir) {
     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 });
+    if (!scrollingUpDown && !scrollingLeftRight) {
+      if (dir === LEFT || dir === RIGHT) {
+        this.setState({ scrollingLeftRight: true });
+      } else {
+        this.setState({ scrollingUpDown: true });
+      }
     }
   };
 
-  _handleOnSwiped = (e, deltaX, deltaY, isFlick) => {
+  _handleOnSwiped = ({ event, dir, velocity }) => {
+    if (this.props.disableSwipe) return;
     const { scrollingUpDown, scrollingLeftRight } = this.state;
     const { isRTL } = this.props;
+    if (this.props.stopPropagation) event.stopPropagation();
     if (scrollingUpDown) {
@@ -513,3 +514,4 @@ // user stopped scrollingUpDown
     if (!scrollingUpDown) { // don't swipe if user is scrolling
-      const side = (deltaX > 0 ? 1 : -1) * (isRTL ? -1 : 1);//if it is RTL the direction is reversed
+      const side = (dir === LEFT ? 1 : -1) * (isRTL ? -1 : 1); // if it is RTL the direction is reversed
+      const isFlick = velocity > this.props.flickThreshold;
       this._handleOnSwipedTo(side, isFlick);
@@ -544,10 +546,16 @@ }
 
-  _handleSwiping = (e, deltaX, deltaY, delta) => {
-    const { galleryWidth, isTransitioning, scrollingUpDown } = this.state;
+  _handleSwiping = ({ event, absX, dir }) => {
+    if (this.props.disableSwipe) return;
+    const { galleryWidth, isTransitioning, scrollingUpDown, scrollingLeftRight } = this.state;
     const { swipingTransitionDuration } = this.props;
-    this._setScrollDirection(deltaX, deltaY);
+    this._setScrollDirection(dir);
+    if (this.props.stopPropagation) event.stopPropagation();
+    if (
+      (this.props.preventDefaultTouchmoveEvent || scrollingLeftRight)
+      && event.cancelable
+    ) event.preventDefault();
     if (!isTransitioning && !scrollingUpDown) {
-      const side = deltaX < 0 ? 1 : -1;
+      const side = dir === RIGHT ? 1 : -1;
 
-      let offsetPercentage = (delta / galleryWidth * 100);
+      let offsetPercentage = (absX / galleryWidth * 100);
       if (Math.abs(offsetPercentage) >= 100) {
@@ -646,18 +654,20 @@ offsetPercentage = 100;
   _getAlignmentClassName(index) {
-    // LEFT, and RIGHT alignments are necessary for lazyLoad
+    /*
+      Necessary for lazing loading
+    */
     let {currentIndex} = this.state;
     let alignment = '';
-    const LEFT = 'left';
-    const CENTER = 'center';
-    const RIGHT = 'right';
+    const leftClassName = 'left';
+    const centerClassName = 'center';
+    const rightClassName = 'right';
 
     switch (index) {
       case (currentIndex - 1):
-        alignment = ` ${LEFT}`;
+        alignment = ` ${leftClassName}`;
         break;
       case (currentIndex):
-        alignment = ` ${CENTER}`;
+        alignment = ` ${centerClassName}`;
         break;
       case (currentIndex + 1):
-        alignment = ` ${RIGHT}`;
+        alignment = ` ${rightClassName}`;
         break;
@@ -669,6 +679,6 @@ }
         // set first slide as right slide if were sliding right from last slide
-        alignment = ` ${RIGHT}`;
+        alignment = ` ${rightClassName}`;
       } else if (index === this.props.items.length - 1 && currentIndex === 0) {
         // set last slide as left slide if were sliding left from first slide
-        alignment = ` ${LEFT}`;
+        alignment = ` ${leftClassName}`;
       }
@@ -980,3 +990,2 @@ }
       isPlaying,
-      scrollingLeftRight,
     } = this.state;
@@ -986,3 +995,2 @@
       infinite,
-      preventDefaultTouchmoveEvent,
       slideOnThumbnailOver,
@@ -1123,10 +1131,6 @@ isRTL,
                   className='image-gallery-swipe'
-                  disabled={this.props.disableSwipe}
                   key='swipeable'
                   delta={0}
-                  flickThreshold={this.props.flickThreshold}
                   onSwiping={this._handleSwiping}
                   onSwiped={this._handleOnSwiped}
-                  stopPropagation={this.props.stopPropagation}
-                  preventDefaultTouchmoveEvent={preventDefaultTouchmoveEvent || scrollingLeftRight}
                 >
@@ -1133,0 +1137,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

130893

increased by0.13%

Lines of code

2887

increased by0.38%

Dependency changes

• + Addedreact-swipeable@5.5.1(transitive)

• - Removeddetect-passive-events@1.0.5(transitive)

• - Removedreact-swipeable@4.3.2(transitive)

• Updatedreact-swipeable@^5.2.0