setup single touchmove event listener

examples/app/FeatureTestConsole.js

@@ -27,6 +27,9 @@ const initialStateSwipeable = {
   rotationAngle: 0,
 };
 const initialStateApplied = {
+  showHook: true,
+  showComponent: true,
+  showOnSwipeds: false,
   onSwipingApplied: true,
   onSwipedApplied: true,
   onSwipedLeftApplied: true,
@@ -100,6 +103,9 @@ export default class Main extends Component {
       swipingDirection,
       swipedDirection,
       delta,
+      showHook,
+      showComponent,
+      showOnSwipeds,
       onSwipingApplied,
       onSwipedApplied,
       persistEvent,
@@ -129,7 +135,7 @@ export default class Main extends Component {
       <div className="row" id="FeatureTestConsole">
         <div className="small-12 column">
           <h5><strong>Test react-swipeable features.</strong></h5>
-          <Swipeable
+          {showComponent && <Swipeable
             {...boundSwipes}
             {...swipeableDirProps}
             delta={deltaNum}
@@ -144,8 +150,8 @@ export default class Main extends Component {
                 <p>See output below and check the console for 'onSwiping' and 'onSwiped' callback output(open dev tools)</p>
                 <span>You can also 'toggle' the swip(ed/ing) props being applied to this container below.</span>
               </div>
-          </Swipeable>
-          <SwipeableHook
+          </Swipeable>}
+          {showHook && <SwipeableHook
             {...boundSwipes}
             {...swipeableDirProps}
             delta={deltaNum}
@@ -160,7 +166,7 @@ export default class Main extends Component {
                 <p>See output below and check the console for 'onSwiping' and 'onSwiped' callback output(open dev tools)</p>
                 <span>You can also 'toggle' the swip(ed/ing) props being applied to this container below.</span>
               </div>
-          </SwipeableHook>
+          </SwipeableHook>}
           <table>
             <thead>
               <tr><th>Applied?</th><th>Action</th><th>Output</th></tr>
@@ -185,9 +191,26 @@ export default class Main extends Component {
                 <td>onSwiping Direction</td><td>{swipingDirection}</td>
               </tr>
               <tr>
-                <td className="text-center"><a href="#appliedDirs">↓&nbsp;Below&nbsp;↓</a></td>
+                <td className="text-center">
+                  <a href="#" onClick={(e)=>(e.preventDefault(),this.updateValue('showOnSwipeds', !showOnSwipeds))}>
+                    {showOnSwipeds ? '↑ Hide ↑' : '↓ Show ↓'}
+                  </a>
+                </td>
                 <td>onSwiped Direction</td><td>{swipedDirection}</td>
               </tr>
+              {showOnSwipeds && <tr>
+                <td className="text-center" colSpan="3">
+                  <table id="appliedDirs">
+                    <thead>
+                      <tr><th colSpan="2" className="text-center">onSwiped</th></tr>
+                      <tr><th>Applied?</th><th>Direction</th></tr>
+                    </thead>
+                    <tbody>
+                      {DIRECTIONS.map(this._renderAppliedDirRow.bind(this))}
+                    </tbody>
+                  </table>
+                </td>
+              </tr>}
               <tr>
                 <td colSpan="2" className="text-center">delta:</td>
                 <td>
@@ -228,15 +251,24 @@ export default class Main extends Component {
                     onChange={(e)=>this.updateValue('persistEvent', e.target.checked)}/>
                 </td>
               </tr>
-            </tbody>
-          </table>
-          <table id="appliedDirs">
-            <thead>
-              <tr><th colSpan="2" className="text-center">onSwiped</th></tr>
-              <tr><th>Applied?</th><th>Direction</th></tr>
-            </thead>
-            <tbody>
-              {DIRECTIONS.map(this._renderAppliedDirRow.bind(this))}
+              <tr>
+                <td colSpan="2" className="text-center">Show Hook Example:</td>
+                <td style={{textAlign: "center"}}>
+                  <input style={{margin: "0px"}}
+                    type="checkbox"
+                    checked={showHook}
+                    onChange={(e)=>this.updateValue('showHook', e.target.checked)}/>
+                </td>
+              </tr>
+              <tr>
+                <td colSpan="2" className="text-center">Show Component Example:</td>
+                <td style={{textAlign: "center"}}>
+                  <input style={{margin: "0px"}}
+                    type="checkbox"
+                    checked={showComponent}
+                    onChange={(e)=>this.updateValue('showComponent', e.target.checked)}/>
+                </td>
+              </tr>
             </tbody>
           </table>
           <table style={{width: "100%"}}>

src/index.js

@@ -47,12 +47,51 @@ function rotateXYByAngle(pos, angle) {
 }
 
 const getTouchHandlerOption = props => {
-  if (props.touchHandlerOption) return props.touchHandlerOption
+  if (typeof props.touchHandlerOption !== 'undefined')
+    return props.touchHandlerOption
   return props.preventDefaultTouchmoveEvent
     ? { passive: false }
     : { passive: true }
 }
 
+const noop = () => {}
+let touchMoveListenerSetup = false
+let handlerToCall = noop
+let touchMoveHandlerOption = {}
+const setTouchMoveHandler = newH => (handlerToCall = newH)
+const touchMoveHandler = e => {
+  handlerToCall(e)
+}
+const setupTouchMoveListener = touchHandlerOption => {
+  // cleanup and reset if preventDefaultTouchMoveEvent changed
+  if (typeof touchHandlerOption === 'object' && touchMoveListenerSetup) {
+    if (touchHandlerOption.passive !== touchMoveHandlerOption.passive) {
+      cleanUp()
+    }
+  }
+  // setup a single eventListener for 'touchmove'
+  if (!touchMoveListenerSetup) {
+    touchMoveHandlerOption = touchHandlerOption
+    document.addEventListener(
+      touchMove,
+      touchMoveHandler,
+      touchMoveHandlerOption
+    )
+    touchMoveListenerSetup = true
+  }
+}
+
+// clean up the single 'touchmove' eventListener
+const cleanUp = () => {
+  document.removeEventListener(
+    touchMove,
+    touchMoveHandler,
+    touchMoveHandlerOption
+  )
+  touchMoveListenerSetup = false
+  handlerToCall = noop
+}
+
 function getHandlers(set, props) {
   const onStart = event => {
     // if more than a single touch don't track, for now...
@@ -131,8 +170,8 @@ function getHandlers(set, props) {
     }
     if (props.trackTouch) {
       const touchHandlerOption = getTouchHandlerOption(props)
-      document.addEventListener(touchMove, onMove, touchHandlerOption)
       document.addEventListener(touchEnd, onUp, touchHandlerOption)
+      setTouchMoveHandler(onMove)
     }
     onStart(e)
   }
@@ -144,7 +183,6 @@ function getHandlers(set, props) {
     }
     if (props.trackTouch) {
       const touchHandlerOption = getTouchHandlerOption(props)
-      document.removeEventListener(touchMove, onMove, touchHandlerOption)
       document.removeEventListener(touchEnd, onUp, touchHandlerOption)
     }
   }
@@ -154,6 +192,11 @@ function getHandlers(set, props) {
     onEnd(e)
   }
 
+  if (props.trackTouch) {
+    const touchHandlerOption = getTouchHandlerOption(props)
+    setupTouchMoveListener(touchHandlerOption)
+  }
+
   const output = {}
   if (props.trackMouse) {
     output.onMouseDown = onDown
@@ -173,6 +216,9 @@ export function useSwipeable(props) {
       ...currentProps
     })
   )
+  React.useEffect(() => {
+    return () => cleanUp()
+  }, [])
   return spread(props)
 }
 
@@ -204,6 +250,10 @@ export class Swipeable extends React.PureComponent {
     this._set = cb => (this._state = cb(this._state))
   }
 
+  componentWillUnmount() {
+    cleanUp()
+  }
+
   render() {
     const {
       className,