Merge branch 'fix_for_issue_40'

Author: Marek Rozmus

.all-contributorsrc

@@ -18,7 +18,7 @@
     },
     {
       "login": "marekrozmus",
-      "name": "marekrozmus",
+      "name": "Marek Rozmus",
       "avatar_url": "https://avatars3.githubusercontent.com/u/26272040?v=4",
       "profile": "https://github.com/marekrozmus",
       "contributions": [

README.md

@@ -63,25 +63,37 @@ NOTE: `SwipeableListItem` can be used without `SwipeableList` but swipe blocking
 
 ## SwipeableList Props
 
-### scrollElement
+### scrollStartThreshold
 
-Type: `EventTarget`
+Type: `number` (default: `10`)
 
-Required to block swipe during scroll outside of the `SwipeableList` e.g. set to `window.document` to block swipes during body scroll.
+How far in pixels scroll needs to be done to block swiping. After scrolling is started and goes beyond the threshold, swiping is blocked.
+
+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 start swiping on list item. After a swipe is started and goes beyond the threshold, scrolling is blocked.
+
+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`
+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.
 
+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
 
@@ -102,11 +114,25 @@ Type: `Object`
 
 Same as `swipeLeft` but to right. :wink:
 
+### scrollStartThreshold
+
+Type: `number` (default: `10`)
+
+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 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.
+
+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 ✨
 
@@ -117,7 +143,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 <table>
   <tr>
     <td align="center"><a href="https://github.com/sandstreamdevelopment"><img src="https://avatars2.githubusercontent.com/u/44231396?v=4" width="100px;" alt="sandstreamdevelopment"/><br /><sub><b>sandstreamdevelopment</b></sub></a><br /><a href="#business-sandstreamdevelopment" title="Business development">💼</a> <a href="#financial-sandstreamdevelopment" title="Financial">💵</a> <a href="#ideas-sandstreamdevelopment" title="Ideas, Planning, & Feedback">🤔</a></td>
-    <td align="center"><a href="https://github.com/marekrozmus"><img src="https://avatars3.githubusercontent.com/u/26272040?v=4" width="100px;" alt="marekrozmus"/><br /><sub><b>marekrozmus</b></sub></a><br /><a href="https://github.com/sandstreamdev/react-swipeable-list/commits?author=marekrozmus" title="Code">💻</a> <a href="https://github.com/sandstreamdev/react-swipeable-list/commits?author=marekrozmus" title="Documentation">📖</a> <a href="https://github.com/sandstreamdev/react-swipeable-list/commits?author=marekrozmus" title="Tests">⚠️</a> <a href="#example-marekrozmus" title="Examples">💡</a> <a href="#ideas-marekrozmus" title="Ideas, Planning, & Feedback">🤔</a></td>
+    <td align="center"><a href="https://github.com/marekrozmus"><img src="https://avatars3.githubusercontent.com/u/26272040?v=4" width="100px;" alt="Marek Rozmus"/><br /><sub><b>Marek Rozmus</b></sub></a><br /><a href="https://github.com/sandstreamdev/react-swipeable-list/commits?author=marekrozmus" title="Code">💻</a> <a href="https://github.com/sandstreamdev/react-swipeable-list/commits?author=marekrozmus" title="Documentation">📖</a> <a href="https://github.com/sandstreamdev/react-swipeable-list/commits?author=marekrozmus" title="Tests">⚠️</a> <a href="#example-marekrozmus" title="Examples">💡</a> <a href="#ideas-marekrozmus" title="Ideas, Planning, & Feedback">🤔</a></td>
     <td align="center"><a href="https://github.com/jakubbogacz"><img src="https://avatars3.githubusercontent.com/u/26272028?v=4" width="100px;" alt="jakubbogacz"/><br /><sub><b>jakubbogacz</b></sub></a><br /><a href="#review-jakubbogacz" title="Reviewed Pull Requests">👀</a> <a href="#ideas-jakubbogacz" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/sandstreamdev/react-swipeable-list/commits?author=jakubbogacz" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/LukasMarx"><img src="https://avatars0.githubusercontent.com/u/8080408?v=4" width="100px;" alt="Lukas Marx"/><br /><sub><b>Lukas Marx</b></sub></a><br /><a href="#ideas-LukasMarx" title="Ideas, Planning, & Feedback">🤔</a></td>
     <td align="center"><a href="https://www.linkedin.com/in/luis-filipe42/"><img src="https://avatars1.githubusercontent.com/u/29440533?v=4" width="100px;" alt="Luis Filipe Pedroso"/><br /><sub><b>Luis Filipe Pedroso</b></sub></a><br /><a href="https://github.com/sandstreamdev/react-swipeable-list/issues?q=author%3ALuisFilipePedroso" title="Bug reports">🐛</a></td>

babel.config.js

@@ -21,7 +21,6 @@ const presets = [
 const plugins = ['@babel/plugin-proposal-class-properties'];
 
 module.exports = function(api) {
-  api.cache.invalidate(() => process.env.NODE_ENV);
   const isTest = api.env('test');
 
   if (isTest) {

examples/.prettierrc

@@ -1,4 +1,3 @@
 {
-  "tabWidth": 2,
   "singleQuote": true
 }

examples/src/App.js

@@ -96,6 +96,7 @@ function App() {
       <h3>
         More complex items and scroll (with 0.25 action trigger threshold)
       </h3>
+      <h3>List in smaller container</h3>
       <span className={styles.actionInfo}>{triggeredComplexItemAction}</span>
       <div className={styles.complexListContainer}>
         <SwipeableList threshold={0.25}>
@@ -141,6 +142,53 @@ function App() {
           </SwipeableListItem>
         </SwipeableList>
       </div>
+      <h3>List in size to content container</h3>
+      <span className={styles.actionInfo}>{triggeredComplexItemAction}</span>
+      <div className={styles.listContainer}>
+        <SwipeableList threshold={0.25}>
+          <SwipeableListItem
+            swipeLeft={swipeLeftDataComplex('First')}
+            swipeRight={swipeRightDataComplex('First')}
+          >
+            <ListItem
+              icon={<MailIcon />}
+              name="first"
+              description="first description"
+            />
+          </SwipeableListItem>
+          <SwipeableListItem
+            swipeLeft={swipeLeftDataComplex('Second')}
+            swipeRight={swipeRightDataComplex('Second')}
+          >
+            <ListItem
+              icon={<MailIcon />}
+              name="second"
+              description="second description"
+            />
+          </SwipeableListItem>
+          <SwipeableListItem
+            swipeLeft={swipeLeftDataComplex('Second')}
+            swipeRight={swipeRightDataComplex('Second')}
+          >
+            <ListItem
+              icon={<MailIcon />}
+              name="third"
+              description="third description"
+            />
+          </SwipeableListItem>
+          <SwipeableListItem
+            swipeLeft={swipeLeftDataComplex('Second')}
+            swipeRight={swipeRightDataComplex('Second')}
+          >
+            <ListItem
+              icon={<MailIcon />}
+              name="fourth"
+              description="fourth description"
+            />
+          </SwipeableListItem>
+        </SwipeableList>
+      </div>
+      <div>THE END</div>
     </div>
   );
 }

examples/src/app.module.css

@@ -23,6 +23,8 @@ h5 {
   flex-direction: column;
   align-items: center;
   height: 100%;
+  min-height: 100%;
+  overflow-y: auto;
 }
 
 .listContainer {
@@ -65,6 +67,7 @@ h5 {
 .complexListContainer {
   width: 100%;
   height: 180px;
+  min-height: 180px;
   border-top: 1px solid gray;
   border-bottom: 1px solid gray;
 }

src/SwipeableList.js

@@ -1,60 +1,29 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
 import styles from './SwipeableList.css';
 
-const SwipeableList = ({ children, scrollElement, threshold }) => {
-  const [blockSwipe, setBlockSwipe] = useState(false);
-
-  useEffect(() => {
-    window.addEventListener('mouseup', handleDragEnd);
-    window.addEventListener('touchend', handleDragEnd);
-
-    return () => {
-      window.removeEventListener('mouseup', handleDragEnd);
-      window.removeEventListener('touchend', handleDragEnd);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (scrollElement) {
-      scrollElement.addEventListener('scroll', handleScroll);
-    }
-
-    return () => {
-      if (scrollElement) {
-        scrollElement.removeEventListener('scroll', handleScroll);
-      }
-    };
-  }, [scrollElement]);
-
-  const handleDragStart = () => setBlockSwipe(false);
-
-  const handleDragEnd = () => setBlockSwipe(false);
-
-  const handleScroll = () => setBlockSwipe(true);
-
-  return (
-    <div
-      className={styles.swipeableList}
-      onMouseDown={handleDragStart}
-      onTouchStart={handleDragStart}
-      onScroll={handleScroll}
-      data-testid="list-wrapper"
-    >
-      {React.Children.map(children, child =>
-        React.cloneElement(child, { blockSwipe, threshold })
-      )}
-    </div>
-  );
-};
+const SwipeableList = ({
+  children,
+  scrollStartThreshold,
+  swipeStartThreshold,
+  threshold
+}) => (
+  <div className={styles.swipeableList} data-testid="list-wrapper">
+    {React.Children.map(children, child =>
+      React.cloneElement(child, {
+        scrollStartThreshold,
+        swipeStartThreshold,
+        threshold
+      })
+    )}
+  </div>
+);
 
 SwipeableList.propTypes = {
   children: PropTypes.node,
-  scrollElement:
-    typeof EventTarget !== 'undefined'
-      ? PropTypes.instanceOf(EventTarget)
-      : PropTypes.any,
+  scrollStartThreshold: PropTypes.number,
+  swipeStartThreshold: PropTypes.number,
   threshold: PropTypes.number
 };