Merge pull request #45 from marekrozmus/fix_for_issue_43

feat(43): Add max swipe prop
marekrozmus · Aug 13, 2023 · 0b5e3f6 · 0b5e3f6
2 parents 16e680f + bbb26be
commit 0b5e3f6
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -204,6 +204,12 @@ Type: `LeadingActions component`
 
 Container component that sets up correct props in `SwipeAction`. See examples for usage.
 
+### 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
 
 Type: `function` (optional)

diff --git a/examples/src/android/WithOneAction.js b/examples/src/android/WithOneAction.js
@@ -106,6 +106,7 @@ const WithOneAction = ({
               onSwipeProgress={setSwipeProgress}
               onSwipeStart={handleSwipeStart}
               onClick={handleOnClick(id)}
+              maxSwipe={0.5}
             >
               <ItemContent>
                 <ItemRow>

diff --git a/src/SwipeableListItem.js b/src/SwipeableListItem.js
@@ -139,6 +139,13 @@ class SwipeableListItem extends PureComponent {
     if (this.props.resetState) {
       this.props.resetState(this.playReturnAnimation);
     }
+
+    if (this.props.maxSwipe) {
+      this.maxSwipeThreshold =
+        this.props.maxSwipe * this.listElement.offsetWidth;
+    } else {
+      this.maxSwipeThreshold = this.listElement.offsetWidth;
+    }
   }
 
   componentWillUnmount() {
@@ -229,7 +236,13 @@ class SwipeableListItem extends PureComponent {
         event.stopPropagation();
         event.preventDefault();
 
-        this.left = clientX - this.dragStartPoint.x;
+        const 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();
       }
     }
@@ -249,7 +262,14 @@ class SwipeableListItem extends PureComponent {
         event.stopPropagation();
         event.preventDefault();
 
-        this.left = clientX - this.dragStartPoint.x;
+        const 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();
       }
     }
@@ -828,6 +848,7 @@ SwipeableListItem.propTypes = {
   fullSwipe: PropTypes.bool,
   leadingActions: PropTypes.node,
   listType: PropTypes.oneOf(Object.values(ListType)),
+  maxSwipe: PropTypes.number,
   onClick: PropTypes.func,
   onSwipeEnd: PropTypes.func,
   onSwipeProgress: PropTypes.func,

diff --git a/src/module.d.ts b/src/module.d.ts
@@ -172,6 +172,12 @@ interface SwipeableListItemProps {
    * It can be set for the whole list or for single item. See `type` for `SwipeableList`. Value from the `SwipeableListItem` takes precedence.
    */
   listType?: Type;
+  /**
+   * 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.
    */