From 65d3f0bcd6087bccdfcb06831cd9fa3230b260c4 Mon Sep 17 00:00:00 2001 From: Brian Emil Hartz Date: Mon, 1 Apr 2019 21:31:28 -0600 Subject: [PATCH 1/4] update react-swipeable to v5, match functionality --- package.json | 2 +- src/ImageGallery.jsx | 16 ++++++++++------ 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 7efc2743..8c20d38f 100644 --- a/package.json +++ b/package.json @@ -65,7 +65,7 @@ "lodash.debounce": "^4.0.8", "lodash.throttle": "^4.1.1", "prop-types": "^15.5.8", - "react-swipeable": "^4.3.2", + "react-swipeable": "^5.1.0", "resize-observer-polyfill": "^1.5.0" } } diff --git a/src/ImageGallery.jsx b/src/ImageGallery.jsx index 12a7df2d..e23bb4f5 100644 --- a/src/ImageGallery.jsx +++ b/src/ImageGallery.jsx @@ -495,9 +495,11 @@ export default class ImageGallery extends React.Component { } }; - _handleOnSwiped = (e, deltaX, deltaY, isFlick) => { + _handleOnSwiped = ({ event, deltaX, velocity }) => { + if (this.props.disableSwipe) return; const { scrollingUpDown, scrollingLeftRight } = this.state; const { isRTL } = this.props; + if (this.props.stopPropagation) event.stopPropagation(); if (scrollingUpDown) { // user stopped scrollingUpDown this.setState({ scrollingUpDown: false }); @@ -510,6 +512,7 @@ export default class ImageGallery extends React.Component { 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 isFlick = velocity > this.props.flickThreshold; this._handleOnSwipedTo(side, isFlick); } }; @@ -539,14 +542,16 @@ export default class ImageGallery extends React.Component { return Math.abs(this.state.offsetPercentage) > this.props.swipeThreshold; } - _handleSwiping = (e, deltaX, deltaY, delta) => { + _handleSwiping = ({ event, deltaX, deltaY, absX }) => { + if (this.props.disableSwipe) return; const { galleryWidth, isTransitioning, scrollingUpDown } = this.state; const { swipingTransitionDuration } = this.props; this._setScrollDirection(deltaX, deltaY); + if (this.props.stopPropagation) event.stopPropagation(); if (!isTransitioning && !scrollingUpDown) { const side = deltaX < 0 ? 1 : -1; - let offsetPercentage = (delta / galleryWidth * 100); + let offsetPercentage = (absX / galleryWidth * 100); if (Math.abs(offsetPercentage) >= 100) { offsetPercentage = 100; } @@ -1085,6 +1090,8 @@ export default class ImageGallery extends React.Component { } }); + + const slideWrapper = (
From 8328ec1d477765d53767e0e08365c66106809247 Mon Sep 17 00:00:00 2001 From: Brian Emil Hartz Date: Thu, 9 May 2019 10:29:35 -0600 Subject: [PATCH 2/4] Bump react-swipeable --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 8c20d38f..903a4dd6 100644 --- a/package.json +++ b/package.json @@ -65,7 +65,7 @@ "lodash.debounce": "^4.0.8", "lodash.throttle": "^4.1.1", "prop-types": "^15.5.8", - "react-swipeable": "^5.1.0", + "react-swipeable": "^5.2.0", "resize-observer-polyfill": "^1.5.0" } } From aa7c540684e99d0f75912864b20f7b0b4a5e559e Mon Sep 17 00:00:00 2001 From: Brian Emil Hartz Date: Tue, 14 May 2019 07:51:20 -0600 Subject: [PATCH 3/4] use dir from swipeable --- src/ImageGallery.jsx | 38 +++++++++++++++++++------------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/src/ImageGallery.jsx b/src/ImageGallery.jsx index e23bb4f5..43aab64f 100644 --- a/src/ImageGallery.jsx +++ b/src/ImageGallery.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import Swipeable from 'react-swipeable'; +import { Swipeable, LEFT, RIGHT } from 'react-swipeable'; import throttle from 'lodash.throttle'; import debounce from 'lodash.debounce'; import ResizeObserver from 'resize-observer-polyfill'; @@ -482,20 +482,19 @@ export default class ImageGallery extends React.Component { } }; - _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 = ({ event, deltaX, velocity }) => { + _handleOnSwiped = ({ event, dir, velocity }) => { if (this.props.disableSwipe) return; const { scrollingUpDown, scrollingLeftRight } = this.state; const { isRTL } = this.props; @@ -511,7 +510,7 @@ export default class ImageGallery extends React.Component { } 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); } @@ -542,14 +541,18 @@ export default class ImageGallery extends React.Component { return Math.abs(this.state.offsetPercentage) > this.props.swipeThreshold; } - _handleSwiping = ({ event, deltaX, deltaY, absX }) => { + _handleSwiping = ({ event, absX, dir }) => { if (this.props.disableSwipe) return; - const { galleryWidth, isTransitioning, scrollingUpDown } = this.state; + 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 = (absX / galleryWidth * 100); if (Math.abs(offsetPercentage) >= 100) { @@ -977,12 +980,10 @@ export default class ImageGallery extends React.Component { isFullscreen, modalFullscreen, isPlaying, - scrollingLeftRight, } = this.state; const { infinite, - preventDefaultTouchmoveEvent, slideOnThumbnailOver, isRTL, showThumbnails, @@ -1125,7 +1126,6 @@ export default class ImageGallery extends React.Component { delta={0} onSwiping={this._handleSwiping} onSwiped={this._handleOnSwiped} - preventDefaultTouchmoveEvent={preventDefaultTouchmoveEvent || scrollingLeftRight} >
{slides} From 52a4922ddecc06f6f13d8545326de6854ef8db91 Mon Sep 17 00:00:00 2001 From: Brian Emil Hartz Date: Wed, 15 May 2019 20:52:55 -0600 Subject: [PATCH 4/4] clean up spaces --- src/ImageGallery.jsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/ImageGallery.jsx b/src/ImageGallery.jsx index 43aab64f..fb60e838 100644 --- a/src/ImageGallery.jsx +++ b/src/ImageGallery.jsx @@ -1091,8 +1091,6 @@ export default class ImageGallery extends React.Component { } }); - - const slideWrapper = (