@sandstreamdev/react-swipeable-list - npm Package Compare versions

Comparing version 0.3.2 to 0.4.0

dist/module.d.ts

@@ -23,2 +23,5 @@ import * as React from 'react';
   threshold?: number;
+  onSwipeStart?: () => void;
+  onSwipeEnd?: () => void;
+  onSwipeProgress?: (progress: number) => void;
 }
@@ -25,0 +28,0 @@

dist/react-swipeable-list.cjs.js

@@ -11,3 +11,3 @@ 'use strict';
 
-var styles = {"swipeableList":"SwipeableList_swipeableList__3dl6y"};
+var styles = {"swipeableList":"SwipeableList_swipeableList__1FACG"};
 
@@ -122,3 +122,3 @@ var SwipeableList = function SwipeableList(_ref) {
 
-var styles$1 = {"swipeableListItem":"SwipeableListItem_swipeableListItem__3xnuO","contentRight":"SwipeableListItem_contentRight__Kox6B","contentLeft":"SwipeableListItem_contentLeft__3YoUt SwipeableListItem_contentRight__Kox6B","return":"SwipeableListItem_return__sR94A","contentLeftReturn":"SwipeableListItem_contentLeftReturn__1Ds5a SwipeableListItem_contentLeft__3YoUt SwipeableListItem_contentRight__Kox6B SwipeableListItem_return__sR94A","contentRightReturn":"SwipeableListItem_contentRightReturn__1YVPF SwipeableListItem_contentRight__Kox6B SwipeableListItem_return__sR94A","content":"SwipeableListItem_content__1k1mn","contentReturn":"SwipeableListItem_contentReturn__2_W7p SwipeableListItem_content__1k1mn"};
+var styles$1 = {"swipeableListItem":"SwipeableListItem_swipeableListItem__3Tgya","contentRight":"SwipeableListItem_contentRight__doq05","contentLeft":"SwipeableListItem_contentLeft__2yNci SwipeableListItem_contentRight__doq05","return":"SwipeableListItem_return__25gWI","contentLeftReturn":"SwipeableListItem_contentLeftReturn___PqJ1 SwipeableListItem_contentLeft__2yNci SwipeableListItem_contentRight__doq05 SwipeableListItem_return__25gWI","contentRightReturn":"SwipeableListItem_contentRightReturn__3jXBY SwipeableListItem_contentRight__doq05 SwipeableListItem_return__25gWI","content":"SwipeableListItem_content__3wbMa","contentReturn":"SwipeableListItem_contentReturn__Kx-Al SwipeableListItem_content__3wbMa"};
 
@@ -157,2 +157,3 @@ var SwipeActionPropType = PropTypes.shape({
       _this.left = 0;
+      _this.previousSwipeDistancePercent = 0;
     });
@@ -190,7 +191,7 @@
 
-      if (_this.contentLeft) {
+      if (_this.contentLeft !== null) {
         _this.contentLeft.className = styles$1.contentLeft;
       }
 
-      if (_this.contentRight) {
+      if (_this.contentRight !== null) {
         _this.contentRight.className = styles$1.contentRight;
@@ -200,3 +201,4 @@ }
       _this.startTime = Date.now();
-      requestAnimationFrame(_this.updatePosition);
+
+      _this.scheduleUpdatePosition();
     });
@@ -214,7 +216,5 @@
           event.preventDefault();
-          var delta = clientX - _this.dragStartPoint.x;
+          _this.left = clientX - _this.dragStartPoint.x;
 
-          if (_this.shouldMoveItem(delta)) {
-            _this.left = delta;
-          }
+          _this.scheduleUpdatePosition();
         }
@@ -239,7 +239,5 @@ }
           event.preventDefault();
-          var delta = clientX - _this.dragStartPoint.x;
+          _this.left = clientX - _this.dragStartPoint.x;
 
-          if (_this.shouldMoveItem(delta)) {
-            _this.left = delta;
-          }
+          _this.scheduleUpdatePosition();
         }
@@ -253,5 +251,7 @@ }
 
-      _this.wrapper.removeEventListener('mouseup', _this.handleDragEndMouse);
+      if (_this.wrapper) {
+        _this.wrapper.removeEventListener('mouseup', _this.handleDragEndMouse);
 
-      _this.wrapper.removeEventListener('mousemove', _this.handleMouseMove);
+        _this.wrapper.removeEventListener('mousemove', _this.handleMouseMove);
+      }
 
@@ -276,2 +276,6 @@ _this.handleDragEnd();
         }
+
+        if (_this.props.onSwipeEnd) {
+          _this.props.onSwipeEnd();
+        }
       }
@@ -281,6 +285,9 @@
 
-      _this.listElement.className = styles$1.contentReturn;
-      _this.listElement.style.transform = "translateX(".concat(_this.left, "px)"); // hide backgrounds
+      if (_this.listElement) {
+        _this.listElement.className = styles$1.contentReturn;
+        _this.listElement.style.transform = "translateX(".concat(_this.left, "px)");
+      } // hide backgrounds
 
-      if (_this.contentLeft) {
+
+      if (_this.contentLeft !== null) {
         _this.contentLeft.style.opacity = 0;
@@ -290,3 +297,3 @@ _this.contentLeft.className = styles$1.contentLeftReturn;
 
-      if (_this.contentRight) {
+      if (_this.contentRight !== null) {
         _this.contentRight.style.opacity = 0;
@@ -297,16 +304,2 @@ _this.contentRight.className = styles$1.contentRightReturn;
 
-    _defineProperty(_assertThisInitialized(_this), "shouldMoveItem", function (delta) {
-      var _this$props = _this.props,
-          _this$props$swipeLeft = _this$props.swipeLeft;
-      _this$props$swipeLeft = _this$props$swipeLeft === void 0 ? {} : _this$props$swipeLeft;
-      var contentLeft = _this$props$swipeLeft.content,
-          _this$props$swipeRigh = _this$props.swipeRight;
-      _this$props$swipeRigh = _this$props$swipeRigh === void 0 ? {} : _this$props$swipeRigh;
-      var contentRight = _this$props$swipeRigh.content,
-          blockSwipe = _this$props.blockSwipe;
-      var swipingLeft = delta < 0;
-      var swipingRight = delta > 0;
-      return !blockSwipe && (swipingLeft && contentLeft || swipingRight && contentRight);
-    });
-
     _defineProperty(_assertThisInitialized(_this), "dragStartedWithinItem", function () {
@@ -336,3 +329,3 @@ var _this$dragStartPoint = _this.dragStartPoint,
           case 0:
-            if (horizontalDistance > _this.dragHorizontalDirectionThreshold) {
+            if (_this.contentRight !== null && horizontalDistance > _this.dragHorizontalDirectionThreshold) {
               _this.dragDirection = DragDirection.RIGHT;
@@ -353,3 +346,3 @@ }
           case 4:
-            if (horizontalDistance > _this.dragHorizontalDirectionThreshold) {
+            if (_this.contentLeft !== null && horizontalDistance > _this.dragHorizontalDirectionThreshold) {
               _this.dragDirection = DragDirection.LEFT;
@@ -369,2 +362,6 @@ }
         }
+
+        if (_this.props.onSwipeStart && _this.isSwiping()) {
+          _this.props.onSwipeStart();
+        }
       }
@@ -374,12 +371,20 @@ });
     _defineProperty(_assertThisInitialized(_this), "isSwiping", function () {
-      return _this.dragStartedWithinItem() && (_this.dragDirection === DragDirection.LEFT || _this.dragDirection === DragDirection.RIGHT);
+      var blockSwipe = _this.props.blockSwipe;
+      var horizontalDrag = _this.dragDirection === DragDirection.LEFT || _this.dragDirection === DragDirection.RIGHT;
+      return !blockSwipe && _this.dragStartedWithinItem() && horizontalDrag;
     });
 
-    _defineProperty(_assertThisInitialized(_this), "updatePosition", function () {
-      var blockSwipe = _this.props.blockSwipe;
-
-      if (_this.dragStartedWithinItem() && !blockSwipe) {
-        requestAnimationFrame(_this.updatePosition);
+    _defineProperty(_assertThisInitialized(_this), "scheduleUpdatePosition", function () {
+      if (_this.requestedAnimationFrame) {
+        return;
       }
 
+      _this.requestedAnimationFrame = requestAnimationFrame(function () {
+        _this.requestedAnimationFrame = null;
+
+        _this.updatePosition();
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "updatePosition", function () {
       var now = Date.now();
@@ -391,2 +396,12 @@ var elapsed = now - _this.startTime;
 
+        if (_this.onlyLeftContent && _this.left > 0) {
+          _this.left = 0;
+          contentToShow = _this.contentLeft;
+        }
+
+        if (_this.onlyRightContent && _this.left < 0) {
+          _this.left = 0;
+          contentToShow = _this.contentRight;
+        }
+
         if (!contentToShow) {
@@ -399,2 +414,18 @@ return;
 
+        if (_this.props.onSwipeProgress && _this.listElement !== null) {
+          var listElementWidth = _this.listElement.offsetWidth;
+          var swipeDistancePercent = _this.previousSwipeDistancePercent;
+
+          if (listElementWidth !== 0) {
+            var swipeDistance = Math.max(0, listElementWidth - Math.abs(_this.left));
+            swipeDistancePercent = 100 - Math.round(100 * swipeDistance / listElementWidth);
+          }
+
+          if (_this.previousSwipeDistancePercent !== swipeDistancePercent) {
+            _this.props.onSwipeProgress(swipeDistancePercent);
+
+            _this.previousSwipeDistancePercent = swipeDistancePercent;
+          }
+        }
+
         if (opacity < 1 && opacity.toString() !== contentToShow.style.opacity) {
@@ -418,5 +449,5 @@ contentToShow.style.opacity = opacity.toString();
     _defineProperty(_assertThisInitialized(_this), "handleSwipedLeft", function () {
-      var _this$props$swipeLeft2 = _this.props.swipeLeft;
-      _this$props$swipeLeft2 = _this$props$swipeLeft2 === void 0 ? {} : _this$props$swipeLeft2;
-      var action = _this$props$swipeLeft2.action;
+      var _this$props$swipeLeft = _this.props.swipeLeft;
+      _this$props$swipeLeft = _this$props$swipeLeft === void 0 ? {} : _this$props$swipeLeft;
+      var action = _this$props$swipeLeft.action;
 
@@ -429,5 +460,5 @@ if (action) {
     _defineProperty(_assertThisInitialized(_this), "handleSwipedRight", function () {
-      var _this$props$swipeRigh2 = _this.props.swipeRight;
-      _this$props$swipeRigh2 = _this$props$swipeRigh2 === void 0 ? {} : _this$props$swipeRigh2;
-      var action = _this$props$swipeRigh2.action;
+      var _this$props$swipeRigh = _this.props.swipeRight;
+      _this$props$swipeRigh = _this$props$swipeRigh === void 0 ? {} : _this$props$swipeRigh;
+      var action = _this$props$swipeRigh.action;
 
@@ -458,4 +489,6 @@ if (action) {
     _this.listElement = null;
+    _this.requestedAnimationFrame = null;
     _this.wrapper = null;
     _this.startTime = null;
+    _this.previousSwipeDistancePercent = 0;
 
@@ -481,2 +514,7 @@ _this.resetState();
     value: function componentWillUnmount() {
+      if (this.requestedAnimationFrame) {
+        cancelAnimationFrame(this.requestedAnimationFrame);
+        this.requestedAnimationFrame = null;
+      }
+
       this.wrapper.removeEventListener('mousedown', this.handleDragStartMouse);
@@ -493,6 +531,6 @@ this.wrapper.removeEventListener('touchstart', this.handleDragStartTouch);
     value: function render() {
-      var _this$props2 = this.props,
-          children = _this$props2.children,
-          swipeLeft = _this$props2.swipeLeft,
-          swipeRight = _this$props2.swipeRight;
+      var _this$props = this.props,
+          children = _this$props.children,
+          swipeLeft = _this$props.swipeLeft,
+          swipeRight = _this$props.swipeRight;
       return React__default.createElement("div", {
@@ -525,2 +563,12 @@ className: styles$1.swipeableListItem,
     }
+  }, {
+    key: "onlyLeftContent",
+    get: function get() {
+      return this.contentLeft !== null && this.contentRight === null;
+    }
+  }, {
+    key: "onlyRightContent",
+    get: function get() {
+      return this.contentLeft === null && this.contentRight !== null;
+    }
   }]);
@@ -538,3 +586,6 @@
   swipeStartThreshold: PropTypes.number,
-  threshold: PropTypes.number
+  threshold: PropTypes.number,
+  onSwipeEnd: PropTypes.func,
+  onSwipeProgress: PropTypes.func,
+  onSwipeStart: PropTypes.func
 };
@@ -541,0 +592,0 @@

dist/react-swipeable-list.esm.js

 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 
-var styles = {"swipeableList":"SwipeableList_swipeableList__3dl6y"};
+var styles = {"swipeableList":"SwipeableList_swipeableList__1FACG"};
 
@@ -114,3 +114,3 @@ var SwipeableList = function SwipeableList(_ref) {
 
-var styles$1 = {"swipeableListItem":"SwipeableListItem_swipeableListItem__3xnuO","contentRight":"SwipeableListItem_contentRight__Kox6B","contentLeft":"SwipeableListItem_contentLeft__3YoUt SwipeableListItem_contentRight__Kox6B","return":"SwipeableListItem_return__sR94A","contentLeftReturn":"SwipeableListItem_contentLeftReturn__1Ds5a SwipeableListItem_contentLeft__3YoUt SwipeableListItem_contentRight__Kox6B SwipeableListItem_return__sR94A","contentRightReturn":"SwipeableListItem_contentRightReturn__1YVPF SwipeableListItem_contentRight__Kox6B SwipeableListItem_return__sR94A","content":"SwipeableListItem_content__1k1mn","contentReturn":"SwipeableListItem_contentReturn__2_W7p SwipeableListItem_content__1k1mn"};
+var styles$1 = {"swipeableListItem":"SwipeableListItem_swipeableListItem__3Tgya","contentRight":"SwipeableListItem_contentRight__doq05","contentLeft":"SwipeableListItem_contentLeft__2yNci SwipeableListItem_contentRight__doq05","return":"SwipeableListItem_return__25gWI","contentLeftReturn":"SwipeableListItem_contentLeftReturn___PqJ1 SwipeableListItem_contentLeft__2yNci SwipeableListItem_contentRight__doq05 SwipeableListItem_return__25gWI","contentRightReturn":"SwipeableListItem_contentRightReturn__3jXBY SwipeableListItem_contentRight__doq05 SwipeableListItem_return__25gWI","content":"SwipeableListItem_content__3wbMa","contentReturn":"SwipeableListItem_contentReturn__Kx-Al SwipeableListItem_content__3wbMa"};
 
@@ -149,2 +149,3 @@ var SwipeActionPropType = PropTypes.shape({
       _this.left = 0;
+      _this.previousSwipeDistancePercent = 0;
     });
@@ -182,7 +183,7 @@
 
-      if (_this.contentLeft) {
+      if (_this.contentLeft !== null) {
         _this.contentLeft.className = styles$1.contentLeft;
       }
 
-      if (_this.contentRight) {
+      if (_this.contentRight !== null) {
         _this.contentRight.className = styles$1.contentRight;
@@ -192,3 +193,4 @@ }
       _this.startTime = Date.now();
-      requestAnimationFrame(_this.updatePosition);
+
+      _this.scheduleUpdatePosition();
     });
@@ -206,7 +208,5 @@
           event.preventDefault();
-          var delta = clientX - _this.dragStartPoint.x;
+          _this.left = clientX - _this.dragStartPoint.x;
 
-          if (_this.shouldMoveItem(delta)) {
-            _this.left = delta;
-          }
+          _this.scheduleUpdatePosition();
         }
@@ -231,7 +231,5 @@ }
           event.preventDefault();
-          var delta = clientX - _this.dragStartPoint.x;
+          _this.left = clientX - _this.dragStartPoint.x;
 
-          if (_this.shouldMoveItem(delta)) {
-            _this.left = delta;
-          }
+          _this.scheduleUpdatePosition();
         }
@@ -245,5 +243,7 @@ }
 
-      _this.wrapper.removeEventListener('mouseup', _this.handleDragEndMouse);
+      if (_this.wrapper) {
+        _this.wrapper.removeEventListener('mouseup', _this.handleDragEndMouse);
 
-      _this.wrapper.removeEventListener('mousemove', _this.handleMouseMove);
+        _this.wrapper.removeEventListener('mousemove', _this.handleMouseMove);
+      }
 
@@ -268,2 +268,6 @@ _this.handleDragEnd();
         }
+
+        if (_this.props.onSwipeEnd) {
+          _this.props.onSwipeEnd();
+        }
       }
@@ -273,6 +277,9 @@
 
-      _this.listElement.className = styles$1.contentReturn;
-      _this.listElement.style.transform = "translateX(".concat(_this.left, "px)"); // hide backgrounds
+      if (_this.listElement) {
+        _this.listElement.className = styles$1.contentReturn;
+        _this.listElement.style.transform = "translateX(".concat(_this.left, "px)");
+      } // hide backgrounds
 
-      if (_this.contentLeft) {
+
+      if (_this.contentLeft !== null) {
         _this.contentLeft.style.opacity = 0;
@@ -282,3 +289,3 @@ _this.contentLeft.className = styles$1.contentLeftReturn;
 
-      if (_this.contentRight) {
+      if (_this.contentRight !== null) {
         _this.contentRight.style.opacity = 0;
@@ -289,16 +296,2 @@ _this.contentRight.className = styles$1.contentRightReturn;
 
-    _defineProperty(_assertThisInitialized(_this), "shouldMoveItem", function (delta) {
-      var _this$props = _this.props,
-          _this$props$swipeLeft = _this$props.swipeLeft;
-      _this$props$swipeLeft = _this$props$swipeLeft === void 0 ? {} : _this$props$swipeLeft;
-      var contentLeft = _this$props$swipeLeft.content,
-          _this$props$swipeRigh = _this$props.swipeRight;
-      _this$props$swipeRigh = _this$props$swipeRigh === void 0 ? {} : _this$props$swipeRigh;
-      var contentRight = _this$props$swipeRigh.content,
-          blockSwipe = _this$props.blockSwipe;
-      var swipingLeft = delta < 0;
-      var swipingRight = delta > 0;
-      return !blockSwipe && (swipingLeft && contentLeft || swipingRight && contentRight);
-    });
-
     _defineProperty(_assertThisInitialized(_this), "dragStartedWithinItem", function () {
@@ -328,3 +321,3 @@ var _this$dragStartPoint = _this.dragStartPoint,
           case 0:
-            if (horizontalDistance > _this.dragHorizontalDirectionThreshold) {
+            if (_this.contentRight !== null && horizontalDistance > _this.dragHorizontalDirectionThreshold) {
               _this.dragDirection = DragDirection.RIGHT;
@@ -345,3 +338,3 @@ }
           case 4:
-            if (horizontalDistance > _this.dragHorizontalDirectionThreshold) {
+            if (_this.contentLeft !== null && horizontalDistance > _this.dragHorizontalDirectionThreshold) {
               _this.dragDirection = DragDirection.LEFT;
@@ -361,2 +354,6 @@ }
         }
+
+        if (_this.props.onSwipeStart && _this.isSwiping()) {
+          _this.props.onSwipeStart();
+        }
       }
@@ -366,12 +363,20 @@ });
     _defineProperty(_assertThisInitialized(_this), "isSwiping", function () {
-      return _this.dragStartedWithinItem() && (_this.dragDirection === DragDirection.LEFT || _this.dragDirection === DragDirection.RIGHT);
+      var blockSwipe = _this.props.blockSwipe;
+      var horizontalDrag = _this.dragDirection === DragDirection.LEFT || _this.dragDirection === DragDirection.RIGHT;
+      return !blockSwipe && _this.dragStartedWithinItem() && horizontalDrag;
     });
 
-    _defineProperty(_assertThisInitialized(_this), "updatePosition", function () {
-      var blockSwipe = _this.props.blockSwipe;
-
-      if (_this.dragStartedWithinItem() && !blockSwipe) {
-        requestAnimationFrame(_this.updatePosition);
+    _defineProperty(_assertThisInitialized(_this), "scheduleUpdatePosition", function () {
+      if (_this.requestedAnimationFrame) {
+        return;
       }
 
+      _this.requestedAnimationFrame = requestAnimationFrame(function () {
+        _this.requestedAnimationFrame = null;
+
+        _this.updatePosition();
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "updatePosition", function () {
       var now = Date.now();
@@ -383,2 +388,12 @@ var elapsed = now - _this.startTime;
 
+        if (_this.onlyLeftContent && _this.left > 0) {
+          _this.left = 0;
+          contentToShow = _this.contentLeft;
+        }
+
+        if (_this.onlyRightContent && _this.left < 0) {
+          _this.left = 0;
+          contentToShow = _this.contentRight;
+        }
+
         if (!contentToShow) {
@@ -391,2 +406,18 @@ return;
 
+        if (_this.props.onSwipeProgress && _this.listElement !== null) {
+          var listElementWidth = _this.listElement.offsetWidth;
+          var swipeDistancePercent = _this.previousSwipeDistancePercent;
+
+          if (listElementWidth !== 0) {
+            var swipeDistance = Math.max(0, listElementWidth - Math.abs(_this.left));
+            swipeDistancePercent = 100 - Math.round(100 * swipeDistance / listElementWidth);
+          }
+
+          if (_this.previousSwipeDistancePercent !== swipeDistancePercent) {
+            _this.props.onSwipeProgress(swipeDistancePercent);
+
+            _this.previousSwipeDistancePercent = swipeDistancePercent;
+          }
+        }
+
         if (opacity < 1 && opacity.toString() !== contentToShow.style.opacity) {
@@ -410,5 +441,5 @@ contentToShow.style.opacity = opacity.toString();
     _defineProperty(_assertThisInitialized(_this), "handleSwipedLeft", function () {
-      var _this$props$swipeLeft2 = _this.props.swipeLeft;
-      _this$props$swipeLeft2 = _this$props$swipeLeft2 === void 0 ? {} : _this$props$swipeLeft2;
-      var action = _this$props$swipeLeft2.action;
+      var _this$props$swipeLeft = _this.props.swipeLeft;
+      _this$props$swipeLeft = _this$props$swipeLeft === void 0 ? {} : _this$props$swipeLeft;
+      var action = _this$props$swipeLeft.action;
 
@@ -421,5 +452,5 @@ if (action) {
     _defineProperty(_assertThisInitialized(_this), "handleSwipedRight", function () {
-      var _this$props$swipeRigh2 = _this.props.swipeRight;
-      _this$props$swipeRigh2 = _this$props$swipeRigh2 === void 0 ? {} : _this$props$swipeRigh2;
-      var action = _this$props$swipeRigh2.action;
+      var _this$props$swipeRigh = _this.props.swipeRight;
+      _this$props$swipeRigh = _this$props$swipeRigh === void 0 ? {} : _this$props$swipeRigh;
+      var action = _this$props$swipeRigh.action;
 
@@ -450,4 +481,6 @@ if (action) {
     _this.listElement = null;
+    _this.requestedAnimationFrame = null;
     _this.wrapper = null;
     _this.startTime = null;
+    _this.previousSwipeDistancePercent = 0;
 
@@ -473,2 +506,7 @@ _this.resetState();
     value: function componentWillUnmount() {
+      if (this.requestedAnimationFrame) {
+        cancelAnimationFrame(this.requestedAnimationFrame);
+        this.requestedAnimationFrame = null;
+      }
+
       this.wrapper.removeEventListener('mousedown', this.handleDragStartMouse);
@@ -485,6 +523,6 @@ this.wrapper.removeEventListener('touchstart', this.handleDragStartTouch);
     value: function render() {
-      var _this$props2 = this.props,
-          children = _this$props2.children,
-          swipeLeft = _this$props2.swipeLeft,
-          swipeRight = _this$props2.swipeRight;
+      var _this$props = this.props,
+          children = _this$props.children,
+          swipeLeft = _this$props.swipeLeft,
+          swipeRight = _this$props.swipeRight;
       return React.createElement("div", {
@@ -517,2 +555,12 @@ className: styles$1.swipeableListItem,
     }
+  }, {
+    key: "onlyLeftContent",
+    get: function get() {
+      return this.contentLeft !== null && this.contentRight === null;
+    }
+  }, {
+    key: "onlyRightContent",
+    get: function get() {
+      return this.contentLeft === null && this.contentRight !== null;
+    }
   }]);
@@ -530,5 +578,8 @@
   swipeStartThreshold: PropTypes.number,
-  threshold: PropTypes.number
+  threshold: PropTypes.number,
+  onSwipeEnd: PropTypes.func,
+  onSwipeProgress: PropTypes.func,
+  onSwipeStart: PropTypes.func
 };
 
 export { SwipeableList, SwipeableListItem };

dist/react-swipeable-list.umd.js

@@ -10,3 +10,3 @@ (function (global, factory) {
 
-  var styles = {"swipeableList":"SwipeableList_swipeableList__3dl6y"};
+  var styles = {"swipeableList":"SwipeableList_swipeableList__1FACG"};
 
@@ -121,3 +121,3 @@ var SwipeableList = function SwipeableList(_ref) {
 
-  var styles$1 = {"swipeableListItem":"SwipeableListItem_swipeableListItem__3xnuO","contentRight":"SwipeableListItem_contentRight__Kox6B","contentLeft":"SwipeableListItem_contentLeft__3YoUt SwipeableListItem_contentRight__Kox6B","return":"SwipeableListItem_return__sR94A","contentLeftReturn":"SwipeableListItem_contentLeftReturn__1Ds5a SwipeableListItem_contentLeft__3YoUt SwipeableListItem_contentRight__Kox6B SwipeableListItem_return__sR94A","contentRightReturn":"SwipeableListItem_contentRightReturn__1YVPF SwipeableListItem_contentRight__Kox6B SwipeableListItem_return__sR94A","content":"SwipeableListItem_content__1k1mn","contentReturn":"SwipeableListItem_contentReturn__2_W7p SwipeableListItem_content__1k1mn"};
+  var styles$1 = {"swipeableListItem":"SwipeableListItem_swipeableListItem__3Tgya","contentRight":"SwipeableListItem_contentRight__doq05","contentLeft":"SwipeableListItem_contentLeft__2yNci SwipeableListItem_contentRight__doq05","return":"SwipeableListItem_return__25gWI","contentLeftReturn":"SwipeableListItem_contentLeftReturn___PqJ1 SwipeableListItem_contentLeft__2yNci SwipeableListItem_contentRight__doq05 SwipeableListItem_return__25gWI","contentRightReturn":"SwipeableListItem_contentRightReturn__3jXBY SwipeableListItem_contentRight__doq05 SwipeableListItem_return__25gWI","content":"SwipeableListItem_content__3wbMa","contentReturn":"SwipeableListItem_contentReturn__Kx-Al SwipeableListItem_content__3wbMa"};
 
@@ -156,2 +156,3 @@ var SwipeActionPropType = PropTypes.shape({
         _this.left = 0;
+        _this.previousSwipeDistancePercent = 0;
       });
@@ -189,7 +190,7 @@
 
-        if (_this.contentLeft) {
+        if (_this.contentLeft !== null) {
           _this.contentLeft.className = styles$1.contentLeft;
         }
 
-        if (_this.contentRight) {
+        if (_this.contentRight !== null) {
           _this.contentRight.className = styles$1.contentRight;
@@ -199,3 +200,4 @@ }
         _this.startTime = Date.now();
-        requestAnimationFrame(_this.updatePosition);
+
+        _this.scheduleUpdatePosition();
       });
@@ -213,7 +215,5 @@
             event.preventDefault();
-            var delta = clientX - _this.dragStartPoint.x;
+            _this.left = clientX - _this.dragStartPoint.x;
 
-            if (_this.shouldMoveItem(delta)) {
-              _this.left = delta;
-            }
+            _this.scheduleUpdatePosition();
           }
@@ -238,7 +238,5 @@ }
             event.preventDefault();
-            var delta = clientX - _this.dragStartPoint.x;
+            _this.left = clientX - _this.dragStartPoint.x;
 
-            if (_this.shouldMoveItem(delta)) {
-              _this.left = delta;
-            }
+            _this.scheduleUpdatePosition();
           }
@@ -252,5 +250,7 @@ }
 
-        _this.wrapper.removeEventListener('mouseup', _this.handleDragEndMouse);
+        if (_this.wrapper) {
+          _this.wrapper.removeEventListener('mouseup', _this.handleDragEndMouse);
 
-        _this.wrapper.removeEventListener('mousemove', _this.handleMouseMove);
+          _this.wrapper.removeEventListener('mousemove', _this.handleMouseMove);
+        }
 
@@ -275,2 +275,6 @@ _this.handleDragEnd();
           }
+
+          if (_this.props.onSwipeEnd) {
+            _this.props.onSwipeEnd();
+          }
         }
@@ -280,6 +284,9 @@
 
-        _this.listElement.className = styles$1.contentReturn;
-        _this.listElement.style.transform = "translateX(".concat(_this.left, "px)"); // hide backgrounds
+        if (_this.listElement) {
+          _this.listElement.className = styles$1.contentReturn;
+          _this.listElement.style.transform = "translateX(".concat(_this.left, "px)");
+        } // hide backgrounds
 
-        if (_this.contentLeft) {
+
+        if (_this.contentLeft !== null) {
           _this.contentLeft.style.opacity = 0;
@@ -289,3 +296,3 @@ _this.contentLeft.className = styles$1.contentLeftReturn;
 
-        if (_this.contentRight) {
+        if (_this.contentRight !== null) {
           _this.contentRight.style.opacity = 0;
@@ -296,16 +303,2 @@ _this.contentRight.className = styles$1.contentRightReturn;
 
-      _defineProperty(_assertThisInitialized(_this), "shouldMoveItem", function (delta) {
-        var _this$props = _this.props,
-            _this$props$swipeLeft = _this$props.swipeLeft;
-        _this$props$swipeLeft = _this$props$swipeLeft === void 0 ? {} : _this$props$swipeLeft;
-        var contentLeft = _this$props$swipeLeft.content,
-            _this$props$swipeRigh = _this$props.swipeRight;
-        _this$props$swipeRigh = _this$props$swipeRigh === void 0 ? {} : _this$props$swipeRigh;
-        var contentRight = _this$props$swipeRigh.content,
-            blockSwipe = _this$props.blockSwipe;
-        var swipingLeft = delta < 0;
-        var swipingRight = delta > 0;
-        return !blockSwipe && (swipingLeft && contentLeft || swipingRight && contentRight);
-      });
-
       _defineProperty(_assertThisInitialized(_this), "dragStartedWithinItem", function () {
@@ -335,3 +328,3 @@ var _this$dragStartPoint = _this.dragStartPoint,
             case 0:
-              if (horizontalDistance > _this.dragHorizontalDirectionThreshold) {
+              if (_this.contentRight !== null && horizontalDistance > _this.dragHorizontalDirectionThreshold) {
                 _this.dragDirection = DragDirection.RIGHT;
@@ -352,3 +345,3 @@ }
             case 4:
-              if (horizontalDistance > _this.dragHorizontalDirectionThreshold) {
+              if (_this.contentLeft !== null && horizontalDistance > _this.dragHorizontalDirectionThreshold) {
                 _this.dragDirection = DragDirection.LEFT;
@@ -368,2 +361,6 @@ }
           }
+
+          if (_this.props.onSwipeStart && _this.isSwiping()) {
+            _this.props.onSwipeStart();
+          }
         }
@@ -373,12 +370,20 @@ });
       _defineProperty(_assertThisInitialized(_this), "isSwiping", function () {
-        return _this.dragStartedWithinItem() && (_this.dragDirection === DragDirection.LEFT || _this.dragDirection === DragDirection.RIGHT);
+        var blockSwipe = _this.props.blockSwipe;
+        var horizontalDrag = _this.dragDirection === DragDirection.LEFT || _this.dragDirection === DragDirection.RIGHT;
+        return !blockSwipe && _this.dragStartedWithinItem() && horizontalDrag;
       });
 
-      _defineProperty(_assertThisInitialized(_this), "updatePosition", function () {
-        var blockSwipe = _this.props.blockSwipe;
-
-        if (_this.dragStartedWithinItem() && !blockSwipe) {
-          requestAnimationFrame(_this.updatePosition);
+      _defineProperty(_assertThisInitialized(_this), "scheduleUpdatePosition", function () {
+        if (_this.requestedAnimationFrame) {
+          return;
         }
 
+        _this.requestedAnimationFrame = requestAnimationFrame(function () {
+          _this.requestedAnimationFrame = null;
+
+          _this.updatePosition();
+        });
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "updatePosition", function () {
         var now = Date.now();
@@ -390,2 +395,12 @@ var elapsed = now - _this.startTime;
 
+          if (_this.onlyLeftContent && _this.left > 0) {
+            _this.left = 0;
+            contentToShow = _this.contentLeft;
+          }
+
+          if (_this.onlyRightContent && _this.left < 0) {
+            _this.left = 0;
+            contentToShow = _this.contentRight;
+          }
+
           if (!contentToShow) {
@@ -398,2 +413,18 @@ return;
 
+          if (_this.props.onSwipeProgress && _this.listElement !== null) {
+            var listElementWidth = _this.listElement.offsetWidth;
+            var swipeDistancePercent = _this.previousSwipeDistancePercent;
+
+            if (listElementWidth !== 0) {
+              var swipeDistance = Math.max(0, listElementWidth - Math.abs(_this.left));
+              swipeDistancePercent = 100 - Math.round(100 * swipeDistance / listElementWidth);
+            }
+
+            if (_this.previousSwipeDistancePercent !== swipeDistancePercent) {
+              _this.props.onSwipeProgress(swipeDistancePercent);
+
+              _this.previousSwipeDistancePercent = swipeDistancePercent;
+            }
+          }
+
           if (opacity < 1 && opacity.toString() !== contentToShow.style.opacity) {
@@ -417,5 +448,5 @@ contentToShow.style.opacity = opacity.toString();
       _defineProperty(_assertThisInitialized(_this), "handleSwipedLeft", function () {
-        var _this$props$swipeLeft2 = _this.props.swipeLeft;
-        _this$props$swipeLeft2 = _this$props$swipeLeft2 === void 0 ? {} : _this$props$swipeLeft2;
-        var action = _this$props$swipeLeft2.action;
+        var _this$props$swipeLeft = _this.props.swipeLeft;
+        _this$props$swipeLeft = _this$props$swipeLeft === void 0 ? {} : _this$props$swipeLeft;
+        var action = _this$props$swipeLeft.action;
 
@@ -428,5 +459,5 @@ if (action) {
       _defineProperty(_assertThisInitialized(_this), "handleSwipedRight", function () {
-        var _this$props$swipeRigh2 = _this.props.swipeRight;
-        _this$props$swipeRigh2 = _this$props$swipeRigh2 === void 0 ? {} : _this$props$swipeRigh2;
-        var action = _this$props$swipeRigh2.action;
+        var _this$props$swipeRigh = _this.props.swipeRight;
+        _this$props$swipeRigh = _this$props$swipeRigh === void 0 ? {} : _this$props$swipeRigh;
+        var action = _this$props$swipeRigh.action;
 
@@ -457,4 +488,6 @@ if (action) {
       _this.listElement = null;
+      _this.requestedAnimationFrame = null;
       _this.wrapper = null;
       _this.startTime = null;
+      _this.previousSwipeDistancePercent = 0;
 
@@ -480,2 +513,7 @@ _this.resetState();
       value: function componentWillUnmount() {
+        if (this.requestedAnimationFrame) {
+          cancelAnimationFrame(this.requestedAnimationFrame);
+          this.requestedAnimationFrame = null;
+        }
+
         this.wrapper.removeEventListener('mousedown', this.handleDragStartMouse);
@@ -492,6 +530,6 @@ this.wrapper.removeEventListener('touchstart', this.handleDragStartTouch);
       value: function render() {
-        var _this$props2 = this.props,
-            children = _this$props2.children,
-            swipeLeft = _this$props2.swipeLeft,
-            swipeRight = _this$props2.swipeRight;
+        var _this$props = this.props,
+            children = _this$props.children,
+            swipeLeft = _this$props.swipeLeft,
+            swipeRight = _this$props.swipeRight;
         return React__default.createElement("div", {
@@ -524,2 +562,12 @@ className: styles$1.swipeableListItem,
       }
+    }, {
+      key: "onlyLeftContent",
+      get: function get() {
+        return this.contentLeft !== null && this.contentRight === null;
+      }
+    }, {
+      key: "onlyRightContent",
+      get: function get() {
+        return this.contentLeft === null && this.contentRight !== null;
+      }
     }]);
@@ -537,3 +585,6 @@
     swipeStartThreshold: PropTypes.number,
-    threshold: PropTypes.number
+    threshold: PropTypes.number,
+    onSwipeEnd: PropTypes.func,
+    onSwipeProgress: PropTypes.func,
+    onSwipeStart: PropTypes.func
   };
@@ -540,0 +591,0 @@

package.json

 {
   "name": "@sandstreamdev/react-swipeable-list",
   "description": "Swipeable list component for React",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "author": {
@@ -26,38 +26,38 @@ "name": "Sandstream Development",
     "prop-types": "^15.7.2",
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0"
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0"
   },
   "devDependencies": {
-    "@babel/core": "7.7.5",
-    "@babel/plugin-proposal-class-properties": "7.7.4",
-    "@babel/plugin-transform-modules-commonjs": "7.7.5",
-    "@babel/preset-env": "7.7.6",
-    "@babel/preset-react": "7.7.4",
-    "@testing-library/jest-dom": "4.2.4",
-    "@testing-library/react": "9.3.2",
-    "autoprefixer": "9.7.3",
+    "@babel/core": "7.8.3",
+    "@babel/plugin-proposal-class-properties": "7.8.3",
+    "@babel/plugin-transform-modules-commonjs": "7.8.3",
+    "@babel/preset-env": "7.8.3",
+    "@babel/preset-react": "7.8.3",
+    "@testing-library/jest-dom": "5.0.2",
+    "@testing-library/react": "9.4.0",
+    "autoprefixer": "9.7.4",
     "babel-eslint": "10.0.3",
-    "eslint": "6.7.2",
-    "eslint-config-prettier": "6.7.0",
-    "eslint-plugin-prettier": "3.1.1",
-    "eslint-plugin-react": "7.17.0",
+    "eslint": "6.8.0",
+    "eslint-config-prettier": "6.9.0",
+    "eslint-plugin-prettier": "3.1.2",
+    "eslint-plugin-react": "7.18.0",
     "eslint-plugin-react-hooks": "2.3.0",
-    "husky": "3.1.0",
+    "husky": "4.2.0",
     "identity-obj-proxy": "3.0.0",
-    "jest": "24.9.0",
+    "jest": "25.1.0",
     "jest-transform-css": "2.0.0",
-    "lint-staged": "9.5.0",
+    "lint-staged": "10.0.2",
     "prettier": "1.19.1",
     "prop-types": "^15.7.2",
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0",
-    "rollup": "1.27.9",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "rollup": "1.29.1",
     "rollup-plugin-babel": "4.3.3",
     "rollup-plugin-commonjs": "10.1.0",
-    "rollup-plugin-copy": "3.1.0",
+    "rollup-plugin-copy": "3.3.0",
     "rollup-plugin-local-resolve": "1.0.7",
     "rollup-plugin-node-resolve": "5.2.0",
     "rollup-plugin-peer-deps-external": "2.2.0",
-    "rollup-plugin-postcss": "2.0.3",
-    "stylelint": "12.0.0",
+    "rollup-plugin-postcss": "2.0.4",
+    "stylelint": "13.0.0",
     "stylelint-config-standard": "19.0.0"
@@ -86,10 +86,8 @@ },
       "eslint --fix",
-      "git add",
       "jest --bail --findRelatedTests"
     ],
     "*.css": [
-      "stylelint --fix",
-      "git add"
+      "stylelint --fix"
     ]
   }
 }

README.md

@@ -56,2 +56,3 @@ <h1 align="center">react-swipeable-list</h1>
     }}
+    onSwipeProgress={progress => console.info(`Swipe progress: ${progress}%`)}
   >
@@ -136,2 +137,20 @@ <div>Item name</div>
 
+### onSwipeStart
+
+Type: `() => void`
+
+Fired after swipe has started (after drag gesture passes the `swipeStartThreshold` distance in pixels).
+
+### onSwipeEnd
+
+Type: `() => void`
+
+Fired after swipe has ended.
+
+### onSwipeProgress
+
+Type: `(progress: number) => void`
+
+Fired every time swipe progress changes. The reported `progress` value is always an integer in range 0 to 100 inclusive.
+
 ## Contributors ✨
@@ -151,3 +170,3 @@
     <td align="center"><a href="https://www.linkedin.com/in/luis-filipe42/"><img src="https://avatars1.githubusercontent.com/u/29440533?v=4" width="100px;" alt=""/><br /><sub><b>Luis Filipe Pedroso</b></sub></a><br /><a href="https://github.com/sandstreamdev/react-swipeable-list/issues?q=author%3ALuisFilipePedroso" title="Bug reports">🐛</a></td>
-    <td align="center"><a href="https://github.com/przemyslawzalewski"><img src="https://avatars0.githubusercontent.com/u/30114244?v=4" width="100px;" alt=""/><br /><sub><b>Przemysław Zalewski</b></sub></a><br /><a href="#maintenance-przemyslawzalewski" title="Maintenance">🚧</a> <a href="https://github.com/sandstreamdev/react-swipeable-list/pulls?q=is%3Apr+reviewed-by%3Aprzemyslawzalewski" title="Reviewed Pull Requests">👀</a></td>
+    <td align="center"><a href="https://github.com/przemyslawzalewski"><img src="https://avatars0.githubusercontent.com/u/30114244?v=4" width="100px;" alt=""/><br /><sub><b>Przemysław Zalewski</b></sub></a><br /><a href="#maintenance-przemyslawzalewski" title="Maintenance">🚧</a> <a href="https://github.com/sandstreamdev/react-swipeable-list/pulls?q=is%3Apr+reviewed-by%3Aprzemyslawzalewski" title="Reviewed Pull Requests">👀</a> <a href="https://github.com/sandstreamdev/react-swipeable-list/commits?author=przemyslawzalewski" title="Code">💻</a> <a href="#ideas-przemyslawzalewski" title="Ideas, Planning, & Feedback">🤔</a></td>
     <td align="center"><a href="https://marktension.github.io/tension_design/"><img src="https://avatars0.githubusercontent.com/u/16321685?v=4" width="100px;" alt=""/><br /><sub><b>MarkTension</b></sub></a><br /><a href="https://github.com/sandstreamdev/react-swipeable-list/issues?q=author%3AMarkTension" title="Bug reports">🐛</a></td>
@@ -157,3 +176,3 @@ </tr>
     <td align="center"><a href="https://github.com/wildeyes"><img src="https://avatars3.githubusercontent.com/u/1652108?v=4" width="100px;" alt=""/><br /><sub><b>wildeyes</b></sub></a><br /><a href="https://github.com/sandstreamdev/react-swipeable-list/issues?q=author%3Awildeyes" title="Bug reports">🐛</a></td>
-    <td align="center"><a href="http://www.deruli.de"><img src="https://avatars0.githubusercontent.com/u/1799239?v=4" width="100px;" alt=""/><br /><sub><b>Der Uli im Netz</b></sub></a><br /><a href="https://github.com/sandstreamdev/react-swipeable-list/issues?q=author%3AderUli" title="Bug reports">🐛</a></td>
+    <td align="center"><a href="http://www.deruli.de"><img src="https://avatars0.githubusercontent.com/u/1799239?v=4" width="100px;" alt=""/><br /><sub><b>Der Uli im Netz</b></sub></a><br /><a href="https://github.com/sandstreamdev/react-swipeable-list/issues?q=author%3AderUli" title="Bug reports">🐛</a> <a href="#ideas-derUli" title="Ideas, Planning, & Feedback">🤔</a></td>
   </tr>
@@ -160,0 +179,0 @@ </table>

No alert changes

Improved metrics

Total package byte prevSize

71278

increased by7.64%

Lines of code

1468

increased by9.14%

Number of lines in readme file

182

increased by11.66%

No dependency changes