Merge pull request #47 from marekrozmus/fix_for_issue_35

fix(35): fix onClick handler
marekrozmus · Aug 13, 2023 · e66212c · e66212c
2 parents ecfa8b0 + 4d1f8b1
commit e66212c
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 33 deletions.
diff --git a/src/SwipeableListItem.js b/src/SwipeableListItem.js
@@ -306,7 +306,7 @@ class SwipeableListItem extends PureComponent {
           : 'swipeable-list-item__leading-actions--return'
       );
 
-      if (this.leadingActionsOpened && isIosType) {
+      if (this.leadingActionsOpened && isIosType && to !== 0) {
         this.leadingActionsElement.className += ' test-actions-opened';
       }
 
@@ -348,7 +348,7 @@ class SwipeableListItem extends PureComponent {
           : 'swipeable-list-item__trailing-actions--return'
       );
 
-      if (this.trailingActionsOpened && isIosType) {
+      if (this.trailingActionsOpened && isIosType && to !== 0) {
         this.trailingActionsElement.className += ' test-actions-opened';
       }
 
@@ -801,19 +801,37 @@ class SwipeableListItem extends PureComponent {
     );
   };
 
+  handleClick = event => {
+    if (this.props.onClick) {
+      if (
+        this.leadingActionsOpened ||
+        this.trailingActionsOpened ||
+        this.isSwiping()
+      ) {
+        event.preventDefault();
+        return;
+      }
+
+      const delta = Math.abs(event.clientX - this.dragStartPoint.x);
+
+      if (delta > 10) {
+        // If mouse moved more than threshold, ignore the click event
+        event.preventDefault();
+        return;
+      }
+
+      this.props.onClick();
+    }
+  };
+
   render() {
-    const { children, className, leadingActions, trailingActions, onClick } =
-      this.props;
+    const { children, className, leadingActions, trailingActions } = this.props;
 
     return (
       <div
         className={clsx('swipeable-list-item', className)}
         ref={this.bindWrapperElement}
-        onClick={
-          this.leadingActionsOpened || this.trailingActionsOpened
-            ? undefined
-            : onClick
-        }
+        onClick={this.handleClick}
       >
         {leadingActions &&
           this.renderActions(

diff --git a/src/__tests__/SwipeableListItem.test.js b/src/__tests__/SwipeableListItem.test.js
@@ -429,18 +429,13 @@ describe('SwipeableListItem (type IOS) - behavior', () => {
     const leadingActions = screen.getByTestId('leading-actions');
     const trailingActions = screen.getByTestId('trailing-actions');
 
-    swipeRightMouse(listItem, toOpenActionsThreshold());
     swipeRightMouse(listItem, toOpenActionsThreshold());
     expect(leadingActions).not.toHaveClass('test-actions-opened');
     expect(trailingActions).not.toHaveClass('test-actions-opened');
 
     swipeRightMouse(listItem, beyondOpenActionsThreshold());
     expect(leadingActions).toHaveClass('test-actions-opened');
     expect(trailingActions).not.toHaveClass('test-actions-opened');
-
-    swipeRightMouse(listItem, beyondOpenActionsThreshold());
-    expect(leadingActions).toHaveClass('test-actions-opened');
-    expect(trailingActions).not.toHaveClass('test-actions-opened');
   });
 
   test('leading actions opening with touch', () => {
@@ -451,18 +446,12 @@ describe('SwipeableListItem (type IOS) - behavior', () => {
     const trailingActions = screen.getByTestId('trailing-actions');
 
     swipeRightTouch(listItem, toOpenActionsThreshold());
-    swipeRightTouch(listItem, toOpenActionsThreshold());
-
     expect(leadingActions).not.toHaveClass('test-actions-opened');
     expect(trailingActions).not.toHaveClass('test-actions-opened');
 
     swipeRightTouch(listItem, beyondOpenActionsThreshold());
     expect(leadingActions).toHaveClass('test-actions-opened');
     expect(trailingActions).not.toHaveClass('test-actions-opened');
-
-    swipeRightTouch(listItem, beyondOpenActionsThreshold());
-    expect(leadingActions).toHaveClass('test-actions-opened');
-    expect(trailingActions).not.toHaveClass('test-actions-opened');
   });
 
   test('trailing actions opening with mouse', () => {
@@ -472,18 +461,13 @@ describe('SwipeableListItem (type IOS) - behavior', () => {
     const leadingActions = screen.getByTestId('leading-actions');
     const trailingActions = screen.getByTestId('trailing-actions');
 
-    swipeLeftMouse(listItem, toOpenActionsThreshold());
     swipeLeftMouse(listItem, toOpenActionsThreshold());
     expect(leadingActions).not.toHaveClass('test-actions-opened');
     expect(trailingActions).not.toHaveClass('test-actions-opened');
 
     swipeLeftMouse(listItem, beyondOpenActionsThreshold());
     expect(leadingActions).not.toHaveClass('test-actions-opened');
     expect(trailingActions).toHaveClass('test-actions-opened');
-
-    swipeLeftMouse(listItem, beyondOpenActionsThreshold());
-    expect(leadingActions).not.toHaveClass('test-actions-opened');
-    expect(trailingActions).toHaveClass('test-actions-opened');
   });
 
   test('trailing actions opening with touch', () => {
@@ -494,18 +478,12 @@ describe('SwipeableListItem (type IOS) - behavior', () => {
     const trailingActions = screen.getByTestId('trailing-actions');
 
     swipeLeftTouch(listItem, toOpenActionsThreshold());
-    swipeLeftTouch(listItem, toOpenActionsThreshold());
-
     expect(leadingActions).not.toHaveClass('test-actions-opened');
     expect(trailingActions).not.toHaveClass('test-actions-opened');
 
     swipeLeftTouch(listItem, beyondOpenActionsThreshold());
     expect(leadingActions).not.toHaveClass('test-actions-opened');
     expect(trailingActions).toHaveClass('test-actions-opened');
-
-    swipeLeftTouch(listItem, beyondOpenActionsThreshold());
-    expect(leadingActions).not.toHaveClass('test-actions-opened');
-    expect(trailingActions).toHaveClass('test-actions-opened');
   });
 
   test('leading swipe action triggering with full swipe', () => {
@@ -714,7 +692,7 @@ describe('SwipeableListItem (type IOS) - behavior', () => {
     const leadingActions = screen.getByTestId('leading-actions');
     const trailingActions = screen.getByTestId('trailing-actions');
 
-    swipeLeftTouch(listItem, beyondThreshold());
+    swipeLeftTouch(listItem, beyondOpenActionsThreshold());
     await waitFor(() =>
       expect(trailingActions).toHaveClass('test-actions-opened')
     );
@@ -725,7 +703,7 @@ describe('SwipeableListItem (type IOS) - behavior', () => {
     fireEvent.click(listItem);
     expect(onClickCallback).toHaveBeenCalledTimes(1);
 
-    swipeRightMouse(listItem, beyondThreshold());
+    swipeRightMouse(listItem, beyondOpenActionsThreshold());
     await waitFor(() =>
       expect(leadingActions).toHaveClass('test-actions-opened')
     );