react-swipeable-list - npm Package Compare versions

Comparing version 1.8.1 to 1.9.0

dist/module.d.ts

@@ -176,2 +176,8 @@ import {
   /**
+   * default: 1.0
+   * 
+   * Limit the swipe to percent of width, e.g.: 0.5 will make swipe possible only for 50% of elements's width
+   */
+  maxSwipe: number;
+  /**
    * Fired when item is clicked.
@@ -178,0 +184,0 @@ */

dist/react-swipeable-list.cjs.js

@@ -437,4 +437,10 @@ 'use strict';
           event.preventDefault();
-          _this.left = clientX - _this.dragStartPoint.x;
+          var newLeft = clientX - _this.dragStartPoint.x;
 
+          if (newLeft > 0) {
+            _this.left = Math.min(newLeft, _this.maxSwipeThreshold);
+          } else {
+            _this.left = Math.max(newLeft, -_this.maxSwipeThreshold);
+          }
+
           _this.scheduleUpdatePosition();
@@ -460,4 +466,10 @@ }
           event.preventDefault();
-          _this.left = clientX - _this.dragStartPoint.x;
+          var newLeft = clientX - _this.dragStartPoint.x;
 
+          if (newLeft > 0) {
+            _this.left = Math.min(newLeft, _this.maxSwipeThreshold);
+          } else {
+            _this.left = Math.max(newLeft, -_this.maxSwipeThreshold);
+          }
+
           _this.scheduleUpdatePosition();
@@ -1014,2 +1026,8 @@ }
       }
+
+      if (this.props.maxSwipe) {
+        this.maxSwipeThreshold = this.props.maxSwipe * this.listElement.offsetWidth;
+      } else {
+        this.maxSwipeThreshold = this.listElement.offsetWidth;
+      }
     }
@@ -1075,2 +1093,3 @@ }, {
   listType: PropTypes__default["default"].oneOf(Object.values(Type)),
+  maxSwipe: PropTypes__default["default"].number,
   onClick: PropTypes__default["default"].func,
@@ -1077,0 +1096,0 @@ onSwipeEnd: PropTypes__default["default"].func,

dist/react-swipeable-list.esm.js

@@ -428,4 +428,10 @@ import React, { PureComponent } from 'react';
           event.preventDefault();
-          _this.left = clientX - _this.dragStartPoint.x;
+          var newLeft = clientX - _this.dragStartPoint.x;
 
+          if (newLeft > 0) {
+            _this.left = Math.min(newLeft, _this.maxSwipeThreshold);
+          } else {
+            _this.left = Math.max(newLeft, -_this.maxSwipeThreshold);
+          }
+
           _this.scheduleUpdatePosition();
@@ -451,4 +457,10 @@ }
           event.preventDefault();
-          _this.left = clientX - _this.dragStartPoint.x;
+          var newLeft = clientX - _this.dragStartPoint.x;
 
+          if (newLeft > 0) {
+            _this.left = Math.min(newLeft, _this.maxSwipeThreshold);
+          } else {
+            _this.left = Math.max(newLeft, -_this.maxSwipeThreshold);
+          }
+
           _this.scheduleUpdatePosition();
@@ -1005,2 +1017,8 @@ }
       }
+
+      if (this.props.maxSwipe) {
+        this.maxSwipeThreshold = this.props.maxSwipe * this.listElement.offsetWidth;
+      } else {
+        this.maxSwipeThreshold = this.listElement.offsetWidth;
+      }
     }
@@ -1066,2 +1084,3 @@ }, {
   listType: PropTypes.oneOf(Object.values(Type)),
+  maxSwipe: PropTypes.number,
   onClick: PropTypes.func,
@@ -1068,0 +1087,0 @@ onSwipeEnd: PropTypes.func,

dist/react-swipeable-list.umd.js

@@ -436,4 +436,10 @@ (function (global, factory) {
             event.preventDefault();
-            _this.left = clientX - _this.dragStartPoint.x;
+            var newLeft = clientX - _this.dragStartPoint.x;
 
+            if (newLeft > 0) {
+              _this.left = Math.min(newLeft, _this.maxSwipeThreshold);
+            } else {
+              _this.left = Math.max(newLeft, -_this.maxSwipeThreshold);
+            }
+
             _this.scheduleUpdatePosition();
@@ -459,4 +465,10 @@ }
             event.preventDefault();
-            _this.left = clientX - _this.dragStartPoint.x;
+            var newLeft = clientX - _this.dragStartPoint.x;
 
+            if (newLeft > 0) {
+              _this.left = Math.min(newLeft, _this.maxSwipeThreshold);
+            } else {
+              _this.left = Math.max(newLeft, -_this.maxSwipeThreshold);
+            }
+
             _this.scheduleUpdatePosition();
@@ -1013,2 +1025,8 @@ }
         }
+
+        if (this.props.maxSwipe) {
+          this.maxSwipeThreshold = this.props.maxSwipe * this.listElement.offsetWidth;
+        } else {
+          this.maxSwipeThreshold = this.listElement.offsetWidth;
+        }
       }
@@ -1074,2 +1092,3 @@ }, {
     listType: PropTypes__default["default"].oneOf(Object.values(Type)),
+    maxSwipe: PropTypes__default["default"].number,
     onClick: PropTypes__default["default"].func,
@@ -1076,0 +1095,0 @@ onSwipeEnd: PropTypes__default["default"].func,

package.json

 {
   "name": "react-swipeable-list",
   "description": "Swipeable list component for React",
-  "version": "1.8.1",
+  "version": "1.9.0",
   "author": {
@@ -6,0 +6,0 @@ "name": "Marek Rozmus",

README.md

@@ -27,3 +27,3 @@ <h1 align="center">react-swipeable-list</h1>
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-8-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-9-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
@@ -208,2 +208,8 @@ <!-- prettier-ignore-end -->
 
+### maxSwipe
+
+Type: 'number' (optional, default: `1.0`)
+
+Limit the swipe to percent of width, e.g.: `0.5` will make swipe possible only for 50% of elements's width
+
 ### onClick
@@ -303,2 +309,3 @@
       <td align="center" valign="top" width="14.28%"><a href="https://aron.codes"><img src="https://avatars.githubusercontent.com/u/7697?v=4?s=100" width="100px;" alt="Aron Rotteveel"/><br /><sub><b>Aron Rotteveel</b></sub></a><br /><a href="https://github.com/marekrozmus/react-swipeable-list/commits?author=ArondeParon" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://www.linkedin.com/in/lucas-furini-42b144158/"><img src="https://avatars.githubusercontent.com/u/30937569?v=4?s=100" width="100px;" alt="Lucas Furini"/><br /><sub><b>Lucas Furini</b></sub></a><br /><a href="#ideas-lucaskab" title="Ideas, Planning, & Feedback">🤔</a></td>
     </tr>
@@ -305,0 +312,0 @@ </tbody>

No alert changes

Improved metrics

Total package byte prevSize

150792

increased by1.79%

Lines of code

3390

increased by1.62%

Number of lines in readme file

318

increased by2.25%

No dependency changes