Merge pull request #131 from dogfessional/preventdefault-touch-ios-fix2

hartzis · web-flow · commit 39328689bcd5 · 2019-03-20T17:47:59.000-06:00
Preventdefault touch ios fix
diff --git a/.eslintrc b/.eslintrc
@@ -20,6 +20,14 @@
     "node": true
   },
   "rules": {
+    "prettier/prettier": [
+      "error",
+      {
+        "singleQuote": true,
+        "semi": false,
+        "printWidth": 100
+      }
+    ],
     "valid-jsdoc": 2,
     "react/jsx-uses-react": 1,
     "react/jsx-no-undef": 2,
diff --git a/.prettierrc b/.prettierrc
@@ -1,4 +1,5 @@
 {
+  "printWidth": 100,
   "semi": false,
   "singleQuote": true,
   "tabWidth": 2
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,14 @@
+# 5.1.0
+* Fix for `preventDefaultTouchmoveEvent` in safari [issue #127](https://github.com/dogfessional/react-swipeable/issues/127) and [PR #131](https://github.com/dogfessional/react-swipeable/pull/131)
+  * Thank you [@JiiB](https://github.com/JiiB) and [@bhj](https://github.com/bhj)!
+  * use `ref` callback for both `<Swipeable>` and `useSwipeable` to attach all touch event handlers
+    * `useSwipeable`'s returned `handlers` now contains a ref callback
+    * Please see disscusion and comments in both [#127](https://github.com/dogfessional/react-swipeable/issues/127) and [#131](https://github.com/dogfessional/react-swipeable/issues/127) for more details and info.
+      * fix avoids the `passive: true` issue from chrome document event listeners
+      * fix avoids bug on safari where the `touchmove` event listener needs to be attached before a `touchstart` in order to be able to call `e.preventDefault`
+* removed `touchHandlerOption` prop
+  * fix above deprecates this prop
+
 # 5.0.0
 * Introduce react hook, `useSwipeable`
 * Core rewrite to simplify api and trim down bundled size
diff --git a/README.md b/README.md
@@ -32,7 +32,7 @@ import { useSwipeable, Swipeable } from 'react-swipeable'
 const handlers = useSwipeable({ onSwiped: (eventData) => eventHandler, ...config })
 return (<div {...handlers}> You can swipe here </div>)
 ```
-Hook use requires **react >= 16.8.0**.
+Spread `handlers` onto the element you wish to track swipes inside of. [Details below](#hook-details).
 
 #### Component
 ```jsx
@@ -81,42 +81,39 @@ All Event Handlers are called with the below event data.
   trackTouch: true,                      // track touch input
   trackMouse: false,                     // track mouse input
   rotationAngle: 0,                      // set a rotation angle
-
-  touchHandlerOption: {         // overwrite touch handler 3rd argument
-    passive: true|false         // defaults opposite of preventDefaultTouchmoveEvent *See Details*
-  },
 }
 ```
 
 ### Component Specific Props
 
 ```
 {
-  nodeName: 'div',      // internal component dom node
-  innerRef              // access internal component dom node
+  nodeName: 'div',    // internally rendered component dom node
+  innerRef            // callback ref for internal component dom node
 }
 ```
 
 **None of the props/config options are required.**
 
+### Hook details
+- Hook use requires **react >= 16.8.0**
+- The props contained in `handlers` are currently `ref` and `onMouseDown`
+  - Please spread `handlers` as the props contained in it could change as react improves event listening capabilities
+    - See [#127](https://github.com/dogfessional/react-swipeable/issues/127) for some more context
+
 ### preventDefaultTouchmoveEvent Details
 
 **`preventDefaultTouchmoveEvent`** prevents the browser's [touchmove](https://developer.mozilla.org/en-US/docs/Web/Events/touchmove) event. Use this to stop the browser from scrolling while a user swipes.
 * `e.preventDefault()` is only called when:
   * `preventDefaultTouchmoveEvent: true`
   * `trackTouch: true`
   * the users current swipe has an associated `onSwiping` or `onSwiped` handler/prop
-* if `preventDefaultTouchmoveEvent: true` then `touchHandlerOption` defaults to `{ passive: false }`
-* if `preventDefaultTouchmoveEvent: false` then `touchHandlerOption` defaults to `{ passive: true }`
 
 Example:
    * If a user is swiping right with `<Swipable onSwipedRight={this.userSwipedRight} preventDefaultTouchmoveEvent={true} >` then `e.preventDefault()` will be called, but if the user was swiping left then `e.preventDefault()` would **not** be called.
 
 Please experiment with the [example](http://dogfessional.github.io/react-swipeable/) to test `preventDefaultTouchmoveEvent`.
 
-#### Older browser support
-If you need to support older browsers that do not have support for `{passive: false}` `addEventListener` 3rd argument, we recommend using [detect-passive-events](https://www.npmjs.com/package/detect-passive-events) package to determine the `touchHandlerOption` prop value.
-
 
 ## Development
 
diff --git a/examples/app/FeatureTestConsole.js b/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,38 +135,38 @@ 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}
             preventDefaultTouchmoveEvent={preventDefaultTouchmoveEvent}
             trackTouch={trackTouch}
             trackMouse={trackMouse}
             rotationAngle={rotationAngleNum}
-            className="callout"
+            className="callout classComponent"
             style={swipeableStyle}>
               <div onTouchStart={()=>this.resetState()}>
                 <h5>Component - Swipe inside here to test</h5>
                 <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}
             preventDefaultTouchmoveEvent={preventDefaultTouchmoveEvent}
             trackTouch={trackTouch}
             trackMouse={trackMouse}
             rotationAngle={rotationAngleNum}
-            className="callout"
+            className="callout hookComponent"
             style={swipeableStyle}>
               <div onTouchStart={()=>this.resetState()}>
                 <h5>Hook - Swipe inside here to test</h5>
                 <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%"}}>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-swipeable",
-  "version": "5.0.1",
+  "version": "5.1.0-alpha.1",
   "description": "Swipe and touch handlers for react",
   "main": "./lib/index.js",
   "module": "es/index.js",
diff --git a/rollup.config.js b/rollup.config.js
@@ -3,13 +3,7 @@ import pkg from './package.json'
 
 export default {
   input: './src/index.js',
-  output: [
-    { file: `${pkg.main}`, format: 'cjs' },
-    { file: `${pkg.module}`, format: 'es' }
-  ],
-  external: [
-    ...Object.keys(pkg.dependencies || {}),
-    ...Object.keys(pkg.peerDependencies || {})
-  ],
+  output: [{ file: `${pkg.main}`, format: 'cjs' }, { file: `${pkg.module}`, format: 'es' }],
+  external: [...Object.keys(pkg.dependencies || {}), ...Object.keys(pkg.peerDependencies || {})],
   plugins: [babel()]
 }
diff --git a/src/__tests__/__snapshots__/index.spec.js.snap b/src/__tests__/__snapshots__/index.spec.js.snap
@@ -1,62 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Swipeable allows touchHandlerOption overwrite: verify touchHandlerOption overwrite 1`] = `
-Array [
-  Array [
-    "touchmove",
-    [Function],
-    Object {
-      "capture": true,
-    },
-  ],
-  Array [
-    "touchend",
-    [Function],
-    Object {
-      "capture": true,
-    },
-  ],
-]
-`;
-
-exports[`Swipeable calls preventDefault when swiping in direction that has a callback: verify touchHandlerOption passive is false 1`] = `
-Array [
-  Array [
-    "touchmove",
-    [Function],
-    Object {
-      "passive": false,
-    },
-  ],
-  Array [
-    "touchend",
-    [Function],
-    Object {
-      "passive": false,
-    },
-  ],
-]
-`;
-
-exports[`Swipeable does not call preventDefault when false: verify touchHandlerOption passive is true 1`] = `
-Array [
-  Array [
-    "touchmove",
-    [Function],
-    Object {
-      "passive": true,
-    },
-  ],
-  Array [
-    "touchend",
-    [Function],
-    Object {
-      "passive": true,
-    },
-  ],
-]
-`;
-
 exports[`Swipeable handles mouse events with trackMouse prop and fires correct props: Swipeable onSwiped trackMouse 1`] = `
 Array [
   Array [
@@ -251,63 +194,6 @@ Array [
 ]
 `;
 
-exports[`useSwipeable allows touchHandlerOption overwrite: verify touchHandlerOption overwrite 1`] = `
-Array [
-  Array [
-    "touchmove",
-    [Function],
-    Object {
-      "capture": true,
-    },
-  ],
-  Array [
-    "touchend",
-    [Function],
-    Object {
-      "capture": true,
-    },
-  ],
-]
-`;
-
-exports[`useSwipeable calls preventDefault when swiping in direction that has a callback: verify touchHandlerOption passive is false 1`] = `
-Array [
-  Array [
-    "touchmove",
-    [Function],
-    Object {
-      "passive": false,
-    },
-  ],
-  Array [
-    "touchend",
-    [Function],
-    Object {
-      "passive": false,
-    },
-  ],
-]
-`;
-
-exports[`useSwipeable does not call preventDefault when false: verify touchHandlerOption passive is true 1`] = `
-Array [
-  Array [
-    "touchmove",
-    [Function],
-    Object {
-      "passive": true,
-    },
-  ],
-  Array [
-    "touchend",
-    [Function],
-    Object {
-      "passive": true,
-    },
-  ],
-]
-`;
-
 exports[`useSwipeable handles mouse events with trackMouse prop and fires correct props: useSwipeable onSwiped trackMouse 1`] = `
 Array [
   Array [
diff --git a/src/__tests__/index.spec.js b/src/__tests__/index.spec.js
diff --git a/src/index.js b/src/index.js

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`{`
	`2`	`+ "printWidth": 100,`
`2`	`3`	`"semi": false,`
`3`	`4`	`"singleQuote": true,`
`4`	`5`	`"tabWidth": 2`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "react-swipeable",`
`3`		`- "version": "5.0.1",`
	`3`	`+ "version": "5.1.0-alpha.1",`
`4`	`4`	`"description": "Swipe and touch handlers for react",`
`5`	`5`	`"main": "./lib/index.js",`
`6`	`6`	`"module": "es/index.js",`