Merge pull request #65 from marekrozmus/fix_for_issue_64

feat: add opt out mouse events prop
marekrozmus · Oct 11, 2024 · 7ae89e4 · 7ae89e4
2 parents 5c15898 + c25020b
commit 7ae89e4
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 5 deletions.
diff --git a/src/SwipeableList.js b/src/SwipeableList.js
@@ -33,6 +33,7 @@ class SwipeableList extends PureComponent {
       className = '',
       fullSwipe = false,
       destructiveCallbackDelay = 1000,
+      optOutMouseEvents = false,
       style,
       type = Type.ANDROID,
       Tag = 'div',
@@ -49,6 +50,7 @@ class SwipeableList extends PureComponent {
             destructiveCallbackDelay,
             fullSwipe,
             listType: type,
+            optOutMouseEvents,
             scrollStartThreshold,
             swipeStartThreshold,
             threshold,
@@ -70,6 +72,7 @@ SwipeableList.propTypes = {
   className: PropTypes.string,
   fullSwipe: PropTypes.bool,
   destructiveCallbackDelay: PropTypes.number,
+  optOutMouseEvents: PropTypes.bool,
   style: PropTypes.object,
   type: PropTypes.oneOf(Object.values(Type)),
   Tag: PropTypes.string,

diff --git a/src/SwipeableListItem.js b/src/SwipeableListItem.js
@@ -111,7 +111,9 @@ class SwipeableListItem extends PureComponent {
   }
 
   componentDidMount() {
-    this.listElement.addEventListener('mousedown', this.handleDragStartMouse);
+    if (!this.props.optOutMouseEvents) {
+      this.listElement.addEventListener('mousedown', this.handleDragStartMouse);
+    }
 
     this.listElement.addEventListener('touchstart', this.handleDragStartTouch, {
       passive: true,
@@ -155,10 +157,12 @@ class SwipeableListItem extends PureComponent {
       this.requestedAnimationFrame = null;
     }
 
-    this.listElement.removeEventListener(
-      'mousedown',
-      this.handleDragStartMouse
-    );
+    if (!this.props.optOutMouseEvents) {
+      this.listElement.removeEventListener(
+        'mousedown',
+        this.handleDragStartMouse
+      );
+    }
 
     this.listElement.removeEventListener(
       'touchstart',
@@ -872,6 +876,7 @@ SwipeableListItem.propTypes = {
   onSwipeEnd: PropTypes.func,
   onSwipeProgress: PropTypes.func,
   onSwipeStart: PropTypes.func,
+  optOutMouseEvents: PropTypes.bool,
   scrollStartThreshold: PropTypes.number,
   swipeStartThreshold: PropTypes.number,
   threshold: PropTypes.number,

diff --git a/src/module.d.ts b/src/module.d.ts
@@ -122,6 +122,12 @@ interface SwipeableListProps {
    * It can be set for the whole list or for every item. See `threshold` for `SwipeableListItem`. Value from the `SwipeableListItem` takes precedence.
    */
   threshold?: number;
+  /**
+   * default: `false`
+   * 
+   * Disables mouse events for swiping.
+   */
+  optOutMouseEvents?: boolean;
 }
 
 export const SwipeableList: FunctionComponent<SwipeableListProps>;
@@ -225,6 +231,12 @@ interface SwipeableListItemProps {
    */
   trailingActions?: ReactNode;
   className?: string;
+    /**
+   * default: `false`
+   * 
+   * Disables mouse events for swiping.
+   */
+    optOutMouseEvents?: boolean;
 }
 
 export class SwipeableListItem extends PureComponent<SwipeableListItemProps> {}