react-with-gesture - npm Package Compare versions

Comparing version 3.0.2 to 3.0.3

dist/react-with-gesture.es.js

@@ -50,5 +50,13 @@ import React from 'react';
 
+var defaultProps = {
+  touch: true,
+  mouse: true,
+  passive: {
+    passive: true
+  }
+};
 var initialState = {
+  event: undefined,
+  args: undefined,
   target: undefined,
-  args: undefined,
   x: 0,
@@ -85,8 +93,9 @@ y: 0,
 
-  var handleDown = function handleDown(_ref) {
-    var target = _ref.target,
-        pageX = _ref.pageX,
-        pageY = _ref.pageY;
-    return set(function (state) {
+  var handleDown = function handleDown(event) {
+    var target = event.target,
+        pageX = event.pageX,
+        pageY = event.pageY;
+    set(function (state) {
       var newProps = _extends({}, state, {
+        event: event,
         target: target,
@@ -112,9 +121,10 @@ args: args,
 
-  var handleMove = function handleMove(_ref2) {
-    var pageX = _ref2.pageX,
-        pageY = _ref2.pageY,
-        movementX = _ref2.movementX,
-        movementY = _ref2.movementY;
-    return set(function (state) {
+  var handleMove = function handleMove(event) {
+    var pageX = event.pageX,
+        pageY = event.pageY,
+        movementX = event.movementX,
+        movementY = event.movementY;
+    set(function (state) {
       var newProps = _extends({}, state, {
+        event: event,
         x: pageX,
@@ -137,4 +147,4 @@ y: pageY,
   var handleTouchStart = function handleTouchStart(e) {
-    window.addEventListener('touchmove', handleTouchMove);
-    window.addEventListener('touchend', handleTouchEnd);
+    window.addEventListener('touchmove', handleTouchMove, props.passive);
+    window.addEventListener('touchend', handleTouchEnd, props.passive);
     handleDown(e.touches[0]);
@@ -155,4 +165,4 @@ };
   var handleMouseDown = function handleMouseDown(e) {
-    window.addEventListener('mousemove', handleMove);
-    window.addEventListener('mouseup', handleMouseUp);
+    window.addEventListener('mousemove', handleMove, props.passive);
+    window.addEventListener('mouseup', handleMouseUp, props.passive);
     handleDown(e);
@@ -218,6 +228,3 @@ };
     return _class;
-  }(React.Component), _class.defaultProps = {
-    touch: true,
-    mouse: true
-  }, _temp;
+  }(React.Component), _class.defaultProps = defaultProps, _temp;
 };
@@ -245,6 +252,3 @@
   if (props === void 0) {
-    props = {
-      mouse: true,
-      touch: true
-    };
+    props = defaultProps;
   }
@@ -257,8 +261,6 @@
   var transientState = React.useRef(initialState);
-  if (typeof props === 'function') props = {
+  if (typeof props === 'function') props = _extends({
     transient: true,
-    onAction: props,
-    mouse: true,
-    touch: true
-  };
+    onAction: props
+  }, defaultProps);
 
@@ -265,0 +267,0 @@ var _React$useState2 = React.useState(function () {

dist/react-with-gesture.js

@@ -56,5 +56,13 @@ 'use strict';
 
+var defaultProps = {
+  touch: true,
+  mouse: true,
+  passive: {
+    passive: true
+  }
+};
 var initialState = {
+  event: undefined,
+  args: undefined,
   target: undefined,
-  args: undefined,
   x: 0,
@@ -91,8 +99,9 @@ y: 0,
 
-  var handleDown = function handleDown(_ref) {
-    var target = _ref.target,
-        pageX = _ref.pageX,
-        pageY = _ref.pageY;
-    return set(function (state) {
+  var handleDown = function handleDown(event) {
+    var target = event.target,
+        pageX = event.pageX,
+        pageY = event.pageY;
+    set(function (state) {
       var newProps = _extends({}, state, {
+        event: event,
         target: target,
@@ -118,9 +127,10 @@ args: args,
 
-  var handleMove = function handleMove(_ref2) {
-    var pageX = _ref2.pageX,
-        pageY = _ref2.pageY,
-        movementX = _ref2.movementX,
-        movementY = _ref2.movementY;
-    return set(function (state) {
+  var handleMove = function handleMove(event) {
+    var pageX = event.pageX,
+        pageY = event.pageY,
+        movementX = event.movementX,
+        movementY = event.movementY;
+    set(function (state) {
       var newProps = _extends({}, state, {
+        event: event,
         x: pageX,
@@ -143,4 +153,4 @@ y: pageY,
   var handleTouchStart = function handleTouchStart(e) {
-    window.addEventListener('touchmove', handleTouchMove);
-    window.addEventListener('touchend', handleTouchEnd);
+    window.addEventListener('touchmove', handleTouchMove, props.passive);
+    window.addEventListener('touchend', handleTouchEnd, props.passive);
     handleDown(e.touches[0]);
@@ -161,4 +171,4 @@ };
   var handleMouseDown = function handleMouseDown(e) {
-    window.addEventListener('mousemove', handleMove);
-    window.addEventListener('mouseup', handleMouseUp);
+    window.addEventListener('mousemove', handleMove, props.passive);
+    window.addEventListener('mouseup', handleMouseUp, props.passive);
     handleDown(e);
@@ -224,6 +234,3 @@ };
     return _class;
-  }(React.Component), _class.defaultProps = {
-    touch: true,
-    mouse: true
-  }, _temp;
+  }(React.Component), _class.defaultProps = defaultProps, _temp;
 };
@@ -251,6 +258,3 @@
   if (props === void 0) {
-    props = {
-      mouse: true,
-      touch: true
-    };
+    props = defaultProps;
   }
@@ -263,8 +267,6 @@
   var transientState = React.useRef(initialState);
-  if (typeof props === 'function') props = {
+  if (typeof props === 'function') props = _extends({
     transient: true,
-    onAction: props,
-    mouse: true,
-    touch: true
-  };
+    onAction: props
+  }, defaultProps);
 
@@ -271,0 +273,0 @@ var _React$useState2 = React.useState(function () {

package.json

 {
     "name": "react-with-gesture",
-    "version": "3.0.2",
+    "version": "3.0.3",
     "description": "hoc for receiving gestures",
@@ -5,0 +5,0 @@ "main": "dist/react-with-gesture",

README.md

@@ -18,2 +18,3 @@ npm install react-with-gesture
 - `target`, the dom element
+- `event`, the event itself, in case you need to prevent defaults, etc.
 
@@ -20,0 +21,0 @@ ### Decorated higher order component

src/index.js

 import React from 'react'
 import PropTypes from 'prop-types'
 
+const defaultProps = { touch: true, mouse: true, passive: { passive: true } }
+
 const initialState = {
+  event: undefined,
+  args: undefined,
   target: undefined,
-  args: undefined,
   x: 0,
@@ -28,6 +31,8 @@ y: 0,
     })
-  const handleDown = ({ target, pageX, pageY }) =>
+  const handleDown = event => {
+    const { target, pageX, pageY } = event
     set(state => {
       const newProps = {
         ...state,
+        event,
         target,
@@ -50,6 +55,9 @@ args,
     })
-  const handleMove = ({ pageX, pageY, movementX, movementY }) =>
+  }
+  const handleMove = event => {
+    const { pageX, pageY, movementX, movementY } = event
     set(state => {
       const newProps = {
         ...state,
+        event,
         x: pageX,
@@ -67,7 +75,8 @@ y: pageY,
     })
+  }
 
   // Touch handlers
   const handleTouchStart = e => {
-    window.addEventListener('touchmove', handleTouchMove)
-    window.addEventListener('touchend', handleTouchEnd)
+    window.addEventListener('touchmove', handleTouchMove, props.passive)
+    window.addEventListener('touchend', handleTouchEnd, props.passive)
     handleDown(e.touches[0])
@@ -84,4 +93,4 @@ }
   const handleMouseDown = e => {
-    window.addEventListener('mousemove', handleMove)
-    window.addEventListener('mouseup', handleMouseUp)
+    window.addEventListener('mousemove', handleMove, props.passive)
+    window.addEventListener('mouseup', handleMouseUp, props.passive)
     handleDown(e)
@@ -108,4 +117,6 @@ }
       onAction: PropTypes.func,
+      /** Optional. Event config */
+      passive: PropTypes.any,
     }
-    static defaultProps = { touch: true, mouse: true }
+    static defaultProps = defaultProps
 
@@ -126,6 +137,3 @@ constructor(props) {
       return (
-        <div
-          {...this.handlers}
-          style={{ display: 'contents', ...style }}
-          className={className}>
+        <div {...this.handlers} style={{ display: 'contents', ...style }} className={className}>
           <Wrapped {...props} {...this.state} />
@@ -142,18 +150,11 @@ </div>
     }
-  }
+  },
 )
 
-function useGesture(props = { mouse: true, touch: true }) {
+function useGesture(props = defaultProps) {
   const [state, set] = React.useState(initialState)
   const transientState = React.useRef(initialState)
-  if (typeof props === 'function')
-    props = { transient: true, onAction: props, mouse: true, touch: true }
+  if (typeof props === 'function') props = { transient: true, onAction: props, ...defaultProps }
   const [spread] = React.useState(() => (...args) =>
-    handlers(
-      props && props.transient
-        ? cb => (transientState.current = cb(transientState.current))
-        : set,
-      props,
-      args
-    )
+    handlers(props && props.transient ? cb => (transientState.current = cb(transientState.current)) : set, props, args),
   )
@@ -160,0 +161,0 @@ return props && props.transient ? spread : [spread, state]

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

92071

increased by0.59%

Lines of code

721

increased by0.56%

Number of lines in readme file

97

increased by1.04%

No dependency changes