react-img-carousel - npm Package Compare versions

Comparing version 1.2.7 to 1.2.8

lib/index.js

@@ -641,7 +641,7 @@ 'use strict';
 
-        var loadingSlideStyle = {
+        var loadingSlideStyle = (0, _lodash4.default)({}, slideStyle || {}, {
           marginLeft: slideStyle.marginLeft,
           width: slideWidth || slideDimensions.width,
           height: slideHeight || slideDimensions.height
-        };
+        });
 
@@ -887,3 +887,7 @@ if (_this7.shouldRenderSlide(child, index)) {
         }
-        this._startPos = { x: e.clientX, y: e.clientY };
+        this._startPos = {
+          x: e.clientX,
+          y: e.clientY,
+          startTime: Date.now()
+        };
         this.setState({ transitionDuration: 0 });
@@ -980,3 +984,3 @@ document.addEventListener('mousemove', this.onMouseMove, { passive: false });
       this.setHoverState(false);
-      !this._animating && this.stopDragging();
+      !this._animating && this._startPos && this.stopDragging();
     }
@@ -1005,3 +1009,4 @@
             x: e.touches[0].screenX,
-            y: e.touches[0].screenY
+            y: e.touches[0].screenY,
+            startTime: Date.now()
           };
@@ -1059,4 +1064,15 @@ document.addEventListener('touchmove', this.onTouchMove, { passive: false });
       var percentDragged = Math.abs(dragOffset / viewportWidth);
-      var duration = (0, _ms2.default)('' + transitionDuration) * (percentDragged > dragThreshold ? 1 - percentDragged : percentDragged);
+      var swipeDuration = Date.now() - this._startPos.startTime || 1;
+      var swipeSpeed = swipeDuration / (percentDragged * viewportWidth);
+      var isQuickSwipe = percentDragged > 0.05 && swipeDuration < 250;
+      var duration = void 0;
 
+      if (isQuickSwipe || percentDragged > dragThreshold) {
+        // Calculate the duration based on the speed of the swipe
+        duration = Math.min(swipeSpeed * (1 - percentDragged) * viewportWidth, (0, _ms2.default)('' + transitionDuration) * (1 - percentDragged));
+      } else {
+        // Just transition back to the center point
+        duration = (0, _ms2.default)('' + transitionDuration) * percentDragged;
+      }
+
       document.removeEventListener('mousemove', this.onMouseMove, { passive: false });
@@ -1079,3 +1095,3 @@ document.removeEventListener('mouseup', this.stopDragging, false);
 
-        if (percentDragged > dragThreshold) {
+        if (percentDragged > dragThreshold || isQuickSwipe) {
           if (dragOffset > 0) {
@@ -1082,0 +1098,0 @@ newSlideIndex--;

package.json

 {
   "name": "react-img-carousel",
-  "version": "1.2.7",
+  "version": "1.2.8",
   "description": "Provides an image carousel React component.",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

src/index.js

@@ -485,7 +485,7 @@ import React, { Component, Children, cloneElement } from 'react';
 
-      const loadingSlideStyle = {
+      const loadingSlideStyle = merge({}, slideStyle || {}, {
         marginLeft: slideStyle.marginLeft,
         width: slideWidth || slideDimensions.width,
         height: slideHeight || slideDimensions.height
-      };
+      });
 
@@ -717,3 +717,7 @@ if (this.shouldRenderSlide(child, index)) {
       }
-      this._startPos = { x: e.clientX, y: e.clientY };
+      this._startPos = {
+        x: e.clientX,
+        y: e.clientY,
+        startTime: Date.now()
+      };
       this.setState({ transitionDuration: 0 });
@@ -787,3 +791,3 @@ document.addEventListener('mousemove', this.onMouseMove, { passive: false });
     this.setHoverState(false);
-    !this._animating && this.stopDragging();
+    !this._animating && this._startPos && this.stopDragging();
   }
@@ -806,3 +810,4 @@
           x: e.touches[0].screenX,
-          y: e.touches[0].screenY
+          y: e.touches[0].screenY,
+          startTime: Date.now()
         };
@@ -843,5 +848,15 @@ document.addEventListener('touchmove', this.onTouchMove, { passive: false });
     const percentDragged = Math.abs(dragOffset / viewportWidth);
-    const duration = ms('' + transitionDuration) * (percentDragged > dragThreshold ? (1 - percentDragged) :
-      percentDragged);
+    const swipeDuration = (Date.now() - this._startPos.startTime) || 1;
+    const swipeSpeed = swipeDuration / (percentDragged * viewportWidth);
+    const isQuickSwipe = percentDragged > 0.05 && swipeDuration < 250;
+    let duration;
 
+    if (isQuickSwipe || percentDragged > dragThreshold) {
+      // Calculate the duration based on the speed of the swipe
+      duration = Math.min(swipeSpeed * (1 - percentDragged) * viewportWidth, ms('' + transitionDuration) * (1 - percentDragged));
+    } else {
+      // Just transition back to the center point
+      duration = ms('' + transitionDuration) * percentDragged;
+    }
+
     document.removeEventListener('mousemove', this.onMouseMove, { passive: false });
@@ -861,3 +876,3 @@ document.removeEventListener('mouseup', this.stopDragging, false);
 
-      if (percentDragged > dragThreshold) {
+      if (percentDragged > dragThreshold || isQuickSwipe) {
         if (dragOffset > 0) {
@@ -864,0 +879,0 @@ newSlideIndex--;

No alert changes

Improved metrics

Total package byte prevSize

108844

increased by1.25%

Lines of code

2618

increased by1.12%

No dependency changes