Fix code review issues and code cleanup

Author: Marek Rozmus

README.md

@@ -67,33 +67,33 @@ NOTE: `SwipeableListItem` can be used without `SwipeableList` but swipe blocking
 
 Type: `number` (default: `10`)
 
-How far (in pixels) scroll needs to be done to enable block list item swiping. When scrolling is started swiping cannot be done.
+How far in pixels scroll needs to be done to block swiping. After scrolling is started and goes beyond the threshold, swiping is blocked.
 
-Can be set for whole list or for every item. See `scrollStartThreshold` for `SwipeableListItem`.
+It can be set for the whole list or for every item. See `scrollStartThreshold` for `SwipeableListItem`. Value from the `SwipeableListItem` takes precedence.
 
 ### swipeStartThreshold
 
 Type: `number` (default: `10`)
 
-How far (in pixels) swipe needs to be done to enable start swiping on list item. When swiping is started scrolling cannot be done.
+How far in pixels swipe needs to be done to start swiping on list item. After a swipe is started and goes beyond the threshold, scrolling is blocked.
 
-Can be set for whole list or for every item. See `swipeStartThreshold` for `SwipeableListItem`.
+It can be set for the whole list or for every item. See `swipeStartThreshold` for `SwipeableListItem`. Value from the `SwipeableListItem` takes precedence.
 
 ### threshold
 
 Type: `number` (default: `0.5`)
 
 How far swipe needs to be done to trigger attached action. `0.5` means that item needs to be swiped to half of its width, `0.25` - one-quarter of width.
 
-Can be set for whole list or for every item. See `threshold` for `SwipeableListItem`.
+It can be set for the whole list or for every item. See `threshold` for `SwipeableListItem`. Value from the `SwipeableListItem` takes precedence.
 
 ## SwipeableListItem Props
 
 ### blockSwipe
 
 Type: `boolean` (default: `false`)
 
-If set to `true` all defined swipe actions are blocked. This is done by `SwipeableList` during scroll to prevent mouse move events to cause accidental swiping acitions.
+If set to `true` all defined swipe actions are blocked.
 
 ### swipeLeft
 
@@ -118,21 +118,21 @@ Same as `swipeLeft` but to right. :wink:
 
 Type: `number` (default: `10`)
 
-Can be set for whole list or for every item. See `scrollStartThreshold` for `SwipeableList`.
+It can be set for the whole list or for every item. See `scrollStartThreshold` for `SwipeableList`. Value from the `SwipeableListItem` takes precedence.
 
 ### swipeStartThreshold
 
 Type: `number` (default: `10`)
 
-How far swipe needs to be done to enable start swiping on list item. When swiping is started scrolling cannot be done.
+How far in pixels swipe needs to be done to start swiping on list item. After a swipe is started and goes beyond the threshold, scrolling is blocked.
 
-Can be set for whole list or for every item. See `swipeStartThreshold` for `SwipeableList`.
+It can be set for the whole list or for every item. See `swipeStartThreshold` for `SwipeableList`. Value from the `SwipeableListItem` takes precedence.
 
 ### threshold
 
 Type: `number` (default: `0.5`)
 
-Can be set for whole list or for every item. See `threshold` for `SwipeableList`.
+It can be set for the whole list or for every item. See `threshold` for `SwipeableList`. Value from the `SwipeableListItem` takes precedence.
 
 ## Contributors ✨
 

examples/src/app.module.css

@@ -24,7 +24,7 @@ h5 {
   align-items: center;
   height: 100%;
   min-height: 100%;
-  overflow-y: scroll;
+  overflow-y: auto;
 }
 
 .listContainer {

src/SwipeableListItem.js

@@ -22,9 +22,6 @@ class SwipeableListItem extends PureComponent {
   constructor(props) {
     super(props);
 
-    this.dragHorizontalDirectionThreshold = props.swipeStartThreshold || 10;
-    this.dragVerticalDirectionThreshold = props.scrollStartThreshold || 10;
-
     this.contentLeft = null;
     this.contentRight = null;
     this.listElement = null;
@@ -41,6 +38,14 @@ class SwipeableListItem extends PureComponent {
     this.left = 0;
   };
 
+  get dragHorizontalDirectionThreshold() {
+    return this.props.swipeStartThreshold || 10;
+  }
+
+  get dragVerticalDirectionThreshold() {
+    return this.props.scrollStartThreshold || 10;
+  }
+
   componentDidMount() {
     this.wrapper.addEventListener('mousedown', this.handleDragStartMouse);
 
@@ -220,13 +225,12 @@ class SwipeableListItem extends PureComponent {
           break;
       }
     }
-
-    return this.dragDirection;
   };
 
   isSwiping = () =>
-    this.dragDirection === DragDirection.LEFT ||
-    this.dragDirection === DragDirection.RIGHT;
+    this.dragStartedWithinItem() &&
+    (this.dragDirection === DragDirection.LEFT ||
+      this.dragDirection === DragDirection.RIGHT);
 
   updatePosition = () => {
     const { blockSwipe } = this.props;
@@ -238,30 +242,30 @@ class SwipeableListItem extends PureComponent {
     const now = Date.now();
     const elapsed = now - this.startTime;
 
-    if (this.dragStartedWithinItem() && elapsed > FPS_INTERVAL) {
+    if (elapsed > FPS_INTERVAL && this.isSwiping()) {
       let contentToShow = this.left < 0 ? this.contentLeft : this.contentRight;
-      let contentToHide = this.left < 0 ? this.contentRight : this.contentLeft;
 
       if (!contentToShow) {
         return;
       }
 
+      this.listElement.style.transform = `translateX(${this.left}px)`;
+
       const opacity = (Math.abs(this.left) / 100).toFixed(2);
 
-      if (this.isSwiping()) {
-        this.listElement.style.transform = `translateX(${this.left}px)`;
+      if (opacity < 1 && opacity.toString() !== contentToShow.style.opacity) {
+        contentToShow.style.opacity = opacity.toString();
 
-        if (opacity < 1 && opacity.toString() !== contentToShow.style.opacity) {
-          contentToShow.style.opacity = opacity.toString();
+        let contentToHide =
+          this.left < 0 ? this.contentRight : this.contentLeft;
 
-          if (contentToHide) {
-            contentToHide.style.opacity = '0';
-          }
+        if (contentToHide) {
+          contentToHide.style.opacity = '0';
         }
+      }
 
-        if (opacity >= 1) {
-          contentToShow.style.opacity = '1';
-        }
+      if (opacity >= 1) {
+        contentToShow.style.opacity = '1';
       }
 
       this.startTime = Date.now();