Rebuild the main file (#15)

SectorLabs · Nov 13, 2023 · f39c1d2 · f39c1d2
1 parent 67b9c4f
commit f39c1d2
Showing 1 changed file with 38 additions and 18 deletions.
diff --git a/build/image-gallery.js b/build/image-gallery.js
@@ -80,6 +80,10 @@ var ImageGallery = function (_React$Component) {
           nextIndex = 0;
         }
 
+        // We cancel the requested drag animation in order to
+        // allow the gallery to slide to the next element
+        _this._cancelRequestedAnimationFrame();
+
         _this.setState({
           previousIndex: currentIndex,
           currentIndex: nextIndex,
@@ -92,6 +96,18 @@ var ImageGallery = function (_React$Component) {
       }
     };
 
+    _this._cancelRequestedAnimationFrame = function () {
+      if (_this._requestedAnimationFrame) {
+        cancelAnimationFrame(_this._requestedAnimationFrame);
+      }
+    };
+
+    _this._withAnimationFrame = function (callback) {
+      _this._cancelRequestedAnimationFrame();
+
+      _this._requestedAnimationFrame = requestAnimationFrame(callback);
+    };
+
     _this._onSliding = function () {
       var isTransitioning = _this.state.isTransitioning;
 
@@ -242,27 +258,30 @@ var ImageGallery = function (_React$Component) {
           scrollingUpDown = _this$state3.scrollingUpDown;
       var swipingTransitionDuration = _this.props.swipingTransitionDuration;
 
-      _this._setScrollDirection(deltaX, deltaY);
-      if (!isTransitioning && !scrollingUpDown) {
-        var side = deltaX < 0 ? 1 : -1;
 
-        var offsetPercentage = delta / galleryWidth * 100;
-        if (Math.abs(offsetPercentage) >= 100) {
-          offsetPercentage = 100;
-        }
+      _this._withAnimationFrame(function () {
+        _this._setScrollDirection(deltaX, deltaY);
+        if (!isTransitioning && !scrollingUpDown) {
+          var side = deltaX < 0 ? 1 : -1;
 
-        var swipingTransition = {
-          transition: 'all ' + swipingTransitionDuration + 'ms ease'
-        };
+          var offsetPercentage = delta / galleryWidth * 100;
+          if (Math.abs(offsetPercentage) >= 100) {
+            offsetPercentage = 100;
+          }
 
-        _this.setState({
-          offsetPercentage: side * offsetPercentage,
-          style: swipingTransition
-        });
-      } else {
-        // don't move the slide
-        _this.setState({ offsetPercentage: 0 });
-      }
+          var swipingTransition = {
+            transition: 'all ' + swipingTransitionDuration + 'ms ease'
+          };
+
+          _this.setState({
+            offsetPercentage: side * offsetPercentage,
+            style: swipingTransition
+          });
+        } else {
+          // don't move the slide
+          _this.setState({ offsetPercentage: 0 });
+        }
+      });
     };
 
     _this._slideLeft = function (event) {
@@ -371,6 +390,7 @@ var ImageGallery = function (_React$Component) {
 
     // Used to update the throttle if slideDuration changes
     _this._unthrottledSlideToIndex = _this.slideToIndex;
+    _this._requestedAnimationFrame = null;
     _this.slideToIndex = (0, _lodash2.default)(_this._unthrottledSlideToIndex, props.slideDuration, { trailing: false });
 
     if (props.lazyLoad) {