react-image-gallery - npm Package Compare versions

Comparing version 1.0.10 to 1.1.0

build/image-gallery.js

@@ -43,2 +43,6 @@ 'use strict';
 
+var _SwipeWrapper = require('./SwipeWrapper');
+
+var _SwipeWrapper2 = _interopRequireDefault(_SwipeWrapper);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -794,3 +798,2 @@
       var _props11 = this.props,
-          preventDefaultTouchmoveEvent = _props11.preventDefaultTouchmoveEvent,
           disableSwipe = _props11.disableSwipe,
@@ -800,16 +803,14 @@ stopPropagation = _props11.stopPropagation;
           galleryWidth = _state9.galleryWidth,
-          isTransitioning = _state9.isTransitioning,
-          scrollingUpDown = _state9.scrollingUpDown,
-          scrollingLeftRight = _state9.scrollingLeftRight;
+          isTransitioning = _state9.isTransitioning;
 
 
       if (disableSwipe) return;
+
       var swipingTransitionDuration = this.props.swipingTransitionDuration;
 
+
       this.setScrollDirection(dir);
       if (stopPropagation) event.stopPropagation();
-      if ((preventDefaultTouchmoveEvent || scrollingLeftRight) && event.cancelable) {
-        event.preventDefault();
-      }
-      if (!isTransitioning && !scrollingUpDown) {
+
+      if (!isTransitioning) {
         var side = dir === _reactSwipeable.RIGHT ? 1 : -1;
@@ -873,13 +874,11 @@
 
-      if (!scrollingUpDown) {
-        // don't swipe if user is scrolling
-        // if it is RTL the direction is reversed
-        var swipeDirection = (dir === _reactSwipeable.LEFT ? 1 : -1) * (isRTL ? -1 : 1);
-        var isFlick = velocity > flickThreshold;
-        this.handleOnSwipedTo(swipeDirection, isFlick);
-      }
+      // if it is RTL the direction is reversed
+      var swipeDirection = (dir === _reactSwipeable.LEFT ? 1 : -1) * (isRTL ? -1 : 1);
+      var isSwipeUpOrDown = dir === _reactSwipeable.UP || dir === _reactSwipeable.DOWN;
+      var isLeftRightFlick = velocity > flickThreshold && !isSwipeUpOrDown;
+      this.handleOnSwipedTo(swipeDirection, isLeftRightFlick);
     }
   }, {
     key: 'handleOnSwipedTo',
-    value: function handleOnSwipedTo(swipeDirection, isFlick) {
+    value: function handleOnSwipedTo(swipeDirection, isLeftRightFlick) {
       var _state11 = this.state,
@@ -891,3 +890,3 @@ currentIndex = _state11.currentIndex,
 
-      if ((this.sufficientSwipe() || isFlick) && !isTransitioning) {
+      if ((this.sufficientSwipe() || isLeftRightFlick) && !isTransitioning) {
         // slideto the next/prev slide
@@ -1379,4 +1378,4 @@ slideTo += swipeDirection;
             src: itemSrc,
-            height: item.height,
-            width: item.width
+            height: item.originalHeight,
+            width: item.originalWidth
           })
@@ -1388,4 +1387,4 @@ ) : _react2.default.createElement('img', {
           srcSet: item.srcSet,
-          height: item.height,
-          width: item.width,
+          height: item.originalHeight,
+          width: item.originalWidth,
           sizes: item.sizes,
@@ -1418,2 +1417,4 @@ title: item.originalTitle,
           src: item.thumbnail,
+          height: item.thumbnailHeight,
+          width: item.thumbnailWidth,
           alt: item.thumbnailAlt,
@@ -1480,3 +1481,3 @@ title: item.thumbnailTitle,
           _react2.default.createElement(
-            _reactSwipeable.Swipeable,
+            _SwipeWrapper2.default,
             {
@@ -1551,12 +1552,6 @@ className: 'image-gallery-swipe',
             'div',
-            {
-              className: thumbnailWrapperClass,
-              style: this.getThumbnailBarHeight()
-            },
+            { className: thumbnailWrapperClass, style: this.getThumbnailBarHeight() },
             _react2.default.createElement(
               'div',
-              {
-                className: 'image-gallery-thumbnails',
-                ref: this.thumbnailsWrapper
-              },
+              { className: 'image-gallery-thumbnails', ref: this.thumbnailsWrapper },
               _react2.default.createElement(
@@ -1590,4 +1585,6 @@ 'div',
     original: _propTypes.string,
-    height: _propTypes.number,
-    width: _propTypes.number,
+    originalHeight: _propTypes.number,
+    originalWidth: _propTypes.number,
+    thumbnailHeight: _propTypes.number,
+    thumbnailWidth: _propTypes.number,
     fullscreen: _propTypes.string,
@@ -1621,3 +1618,2 @@ originalAlt: _propTypes.string,
   useBrowserFullscreen: _propTypes.bool,
-  preventDefaultTouchmoveEvent: _propTypes.bool,
   onErrorImageURL: _propTypes.string,
@@ -1678,3 +1674,2 @@ indexSeparator: _propTypes.string,
   useBrowserFullscreen: true,
-  preventDefaultTouchmoveEvent: false,
   flickThreshold: 0.4,
@@ -1681,0 +1676,0 @@ stopPropagation: false,

gulpfile.js

@@ -84,2 +84,9 @@ const babel = require('gulp-babel');
 
+gulp.task('swipe-wrapper-js', () => (
+  gulp.src('./src/SwipeWrapper.js')
+    .pipe(concat('SwipeWrapper.js'))
+    .pipe(babel(babelOptions))
+    .pipe(gulp.dest('./build'))
+));
+
 gulp.task('watch', () => {
@@ -92,3 +99,3 @@ livereload.listen();
 gulp.task('dev', ['watch', 'scripts', 'sass', 'server']);
-gulp.task('build', ['source-js', 'svg-js', 'sass']);
+gulp.task('build', ['source-js', 'svg-js', 'swipe-wrapper-js', 'sass']);
 gulp.task('demo', ['demo-src']);

package.json

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

README.md

@@ -76,4 +76,6 @@ React Image Gallery
     * `fullscreen` - image for fullscreen (defaults to original)
-    * `height` - image height (html5 attribute)
-    * `width` - image width (html5 attribute)
+    * `originalHeight` - image height (html5 attribute)
+    * `originalWidth` - image width (html5 attribute)
+    * `thumbnailHeight` - image height (html5 attribute)
+    * `thumbnailWidth` - image width (html5 attribute)
     * `originalClass` - custom image class
@@ -135,4 +137,2 @@ * `thumbnailClass` - custom thumbnail class
     * Automatically calls stopPropagation on all 'swipe' events.
-* `preventDefaultTouchmoveEvent`: Boolean, default `false`
-    * An option to prevent the browser's touchmove event (stops the gallery from scrolling up or down when swiping)
 * `startIndex`: Number, default `0`
@@ -139,0 +139,0 @@ * `onImageError`: Function, `callback(event)`

src/ImageGallery.js

 import clsx from 'clsx';
 import React from 'react';
-import { Swipeable, LEFT, RIGHT } from 'react-swipeable';
+import { LEFT, RIGHT, UP, DOWN } from 'react-swipeable';
 import throttle from 'lodash.throttle';
@@ -18,2 +18,3 @@ import debounce from 'lodash.debounce';
 import SVG from './SVG';
+import SwipeWrapper from './SwipeWrapper';
 
@@ -47,4 +48,6 @@ const screenChangeEvents = [
       original: string,
-      height: number,
-      width: number,
+      originalHeight: number,
+      originalWidth: number,
+      thumbnailHeight: number,
+      thumbnailWidth: number,
       fullscreen: string,
@@ -78,3 +81,2 @@ originalAlt: string,
     useBrowserFullscreen: bool,
-    preventDefaultTouchmoveEvent: bool,
     onErrorImageURL: string,
@@ -136,3 +138,2 @@ indexSeparator: string,
     useBrowserFullscreen: true,
-    preventDefaultTouchmoveEvent: false,
     flickThreshold: 0.4,
@@ -848,18 +849,16 @@ stopPropagation: false,
   handleSwiping({ event, absX, dir }) {
-    const { preventDefaultTouchmoveEvent, disableSwipe, stopPropagation } = this.props;
+    const { disableSwipe, stopPropagation } = this.props;
     const {
       galleryWidth,
       isTransitioning,
-      scrollingUpDown,
-      scrollingLeftRight,
     } = this.state;
 
     if (disableSwipe) return;
+
     const { swipingTransitionDuration } = this.props;
+
     this.setScrollDirection(dir);
     if (stopPropagation) event.stopPropagation();
-    if ((preventDefaultTouchmoveEvent || scrollingLeftRight) && event.cancelable) {
-      event.preventDefault();
-    }
-    if (!isTransitioning && !scrollingUpDown) {
+
+    if (!isTransitioning) {
       const side = dir === RIGHT ? 1 : -1;
@@ -910,15 +909,14 @@
 
-    if (!scrollingUpDown) { // don't swipe if user is scrolling
-      // if it is RTL the direction is reversed
-      const swipeDirection = (dir === LEFT ? 1 : -1) * (isRTL ? -1 : 1);
-      const isFlick = velocity > flickThreshold;
-      this.handleOnSwipedTo(swipeDirection, isFlick);
-    }
+    // if it is RTL the direction is reversed
+    const swipeDirection = (dir === LEFT ? 1 : -1) * (isRTL ? -1 : 1);
+    const isSwipeUpOrDown = dir === UP || dir === DOWN;
+    const isLeftRightFlick = (velocity > flickThreshold) && !isSwipeUpOrDown;
+    this.handleOnSwipedTo(swipeDirection, isLeftRightFlick);
   }
 
-  handleOnSwipedTo(swipeDirection, isFlick) {
+  handleOnSwipedTo(swipeDirection, isLeftRightFlick) {
     const { currentIndex, isTransitioning } = this.state;
     let slideTo = currentIndex;
 
-    if ((this.sufficientSwipe() || isFlick) && !isTransitioning) {
+    if ((this.sufficientSwipe() || isLeftRightFlick) && !isTransitioning) {
       // slideto the next/prev slide
@@ -1338,4 +1336,4 @@ slideTo += swipeDirection;
                 src={itemSrc}
-                height={item.height}
-                width={item.width}
+                height={item.originalHeight}
+                width={item.originalWidth}
               />
@@ -1349,4 +1347,4 @@ </picture>
               srcSet={item.srcSet}
-              height={item.height}
-              width={item.width}
+              height={item.originalHeight}
+              width={item.originalWidth}
               sizes={item.sizes}
@@ -1380,2 +1378,4 @@ title={item.originalTitle}
           src={item.thumbnail}
+          height={item.thumbnailHeight}
+          width={item.thumbnailWidth}
           alt={item.thumbnailAlt}
@@ -1445,3 +1445,3 @@ title={item.thumbnailTitle}
               }
-              <Swipeable
+              <SwipeWrapper
                 className="image-gallery-swipe"
@@ -1455,3 +1455,3 @@ delta={0}
                 </div>
-              </Swipeable>
+              </SwipeWrapper>
             </React.Fragment>
@@ -1514,10 +1514,4 @@ ) : (
             showThumbnails && (
-              <div
-                className={thumbnailWrapperClass}
-                style={this.getThumbnailBarHeight()}
-              >
-                <div
-                  className="image-gallery-thumbnails"
-                  ref={this.thumbnailsWrapper}
-                >
+              <div className={thumbnailWrapperClass} style={this.getThumbnailBarHeight()}>
+                <div className="image-gallery-thumbnails" ref={this.thumbnailsWrapper}>
                   <div
@@ -1524,0 +1518,0 @@ ref={this.thumbnails}

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

147103

increased by1.53%

Number of package files

17

increased by13.33%

Lines of code

3575

increased by2.08%

Dependency changes

• + Addedreact-swipeable@6.0.1(transitive)

• - Removedreact@16.14.0(transitive)

• - Removedreact-swipeable@5.5.1(transitive)

• Updatedreact-swipeable@6.0.1