Merge branch 'fix_for_issues_36'

Author: Marek Rozmus

README.md

@@ -63,6 +63,12 @@ NOTE: `SwipeableListItem` can be used without `SwipeableList` but swipe blocking
 
 ## SwipeableList Props
 
+### scrollElement
+
+Type: `EventTarget`
+
+Required to block swipe during scroll outside of the `SwipeableList` e.g. set to `window.document` to block swipes during body scroll.
+
 ### threshold
 
 Type: `number`

src/SwipeableList.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import styles from './SwipeableList.css';
 
-const SwipeableList = ({ children, threshold }) => {
+const SwipeableList = ({ children, scrollElement, threshold }) => {
   const [blockSwipe, setBlockSwipe] = useState(false);
 
   useEffect(() => {
@@ -16,6 +16,18 @@ const SwipeableList = ({ children, threshold }) => {
     };
   }, []);
 
+  useEffect(() => {
+    if (scrollElement) {
+      scrollElement.addEventListener('scroll', handleScroll);
+    }
+
+    return () => {
+      if (scrollElement) {
+        scrollElement.removeEventListener('scroll', handleScroll);
+      }
+    };
+  }, [scrollElement]);
+
   const handleDragStart = () => setBlockSwipe(false);
 
   const handleDragEnd = () => setBlockSwipe(false);
@@ -39,6 +51,10 @@ const SwipeableList = ({ children, threshold }) => {
 
 SwipeableList.propTypes = {
   children: PropTypes.node,
+  scrollElement:
+    typeof EventTarget !== 'undefined'
+      ? PropTypes.instanceOf(EventTarget)
+      : PropTypes.any,
   threshold: PropTypes.number
 };
 

src/__tests__/SwipeableList.test.js

@@ -66,3 +66,38 @@ test('blocking swipe on scroll', () => {
   swipeLeftMouse(listItem);
   expect(callbackLeft).toHaveBeenCalledTimes(2);
 });
+
+test('blocking swipe on scrollElement scroll', () => {
+  const callbackLeft = jest.fn();
+
+  const { queryAllByTestId } = render(
+    <SwipeableList scrollElement={window.document}>
+      <SwipeableListItem
+        swipeLeft={{
+          content: <span>Left swipe content</span>,
+          action: callbackLeft
+        }}
+      >
+        <span>Item content 1</span>
+      </SwipeableListItem>
+    </SwipeableList>
+  );
+
+  const listItem = queryAllByTestId('content')[0];
+
+  // try to swipe - should work
+  swipeLeftMouse(listItem);
+  expect(callbackLeft).toHaveBeenCalledTimes(1);
+
+  fireEvent.scroll(window.document, { target: { scrollY: 100 } });
+
+  // block swipe should be on
+  swipeLeftMouse(listItem);
+  expect(callbackLeft).toHaveBeenCalledTimes(1);
+
+  fireEvent.mouseUp(window.document);
+
+  // swiping should be possible again
+  swipeLeftMouse(listItem);
+  expect(callbackLeft).toHaveBeenCalledTimes(2);
+});