react-use-gesture - npm Package Compare versions

Comparing version 1.0.0 to 5.0.0-beta.0

index.js

 import React from 'react'
 import PropTypes from 'prop-types'
 
-const defaultProps = { touch: true, mouse: true, passive: { passive: true } }
+const touchMove = 'touchmove'
+const touchEnd = 'touchend'
+const mouseMove = 'mousemove'
+const mouseUp = 'mouseup'
+const defaultProps = {
+  touch: true,
+  mouse: true,
+  passive: { passive: true },
+  onAction: undefined,
+  onDown: undefined,
+  onUp: undefined,
+  onMove: undefined
+}
 const initialState = {
   event: undefined,
   args: undefined,
+  temp: undefined,
   target: undefined,
   time: undefined,
-  x: 0,
-  y: 0,
-  xDelta: 0,
-  yDelta: 0,
-  xInitial: 0,
-  yInitial: 0,
-  xPrev: 0,
-  yPrev: 0,
+  xy: [0, 0],
+  delta: [0, 0],
+  initial: [0, 0],
+  previous: [0, 0],
+  direction: [0, 0],
+  local: [0, 0],
+  lastLocal: [0, 0],
   velocity: 0,
+  distance: 0,
   down: false,
+  first: true,
+  shiftKey: false
 }
@@ -24,94 +39,141 @@
   // Common handlers
-  const handleUp = () =>
+  const handleUp = (event, shiftKey) => {
     set(state => {
-      const newProps = { ...state, down: false }
-      props.onAction && props.onAction(newProps)
-      return newProps
+      let newProps = { ...state, down: false, first: false }
+      const temp = props.onAction && props.onAction(newProps)
+      if (props.onUp) props.onUp(newProps)
+      return {
+        ...newProps,
+        event,
+        shiftKey,
+        lastLocal: state.local,
+        temp: temp || newProps.temp
+      }
     })
+  }
   const handleDown = event => {
-    const { target, pageX, pageY } = event
-    set(() => {
-      const newProps = {
+    const { target, pageX, pageY, shiftKey } = event.touches
+      ? event.touches[0]
+      : event
+    set(state => {
+      const lastLocal = state.lastLocal || initialState.lastLocal
+      let newProps = {
         ...initialState,
+        transform: event.transform,
         event,
         target,
         args,
-        x: pageX,
-        y: pageY,
-        xInitial: pageX,
-        yInitial: pageY,
-        xPrev: pageX,
-        yPrev: pageY,
+        lastLocal,
+        shiftKey,
+        local: lastLocal,
+        xy: [pageX, pageY],
+        initial: [pageX, pageY],
+        previous: [pageX, pageY],
         down: true,
         time: Date.now(),
+        cancel: () => {
+          stop()
+          requestAnimationFrame(() => handleUp(event))
+        }
       }
-      props.onAction && props.onAction(newProps)
-      return newProps
+      const temp = props.onAction && props.onAction(newProps)
+      if (props.onDown) props.onDown(newProps)
+      return { ...newProps, temp }
     })
   }
+
   const handleMove = event => {
-    const { pageX, pageY } = event
+    const { pageX, pageY, shiftKey } = event.touches ? event.touches[0] : event
     set(state => {
       const time = Date.now()
-      const x_dist = pageX - state.x
-      const y_dist = pageY - state.y
-      const interval = time - state.time
-      const velocity = Math.sqrt(x_dist * x_dist + y_dist * y_dist) / interval
-      const newProps = {
+      const x_dist = pageX - state.xy[0]
+      const y_dist = pageY - state.xy[1]
+      const delta_x = pageX - state.initial[0]
+      const delta_y = pageY - state.initial[1]
+      const distance = Math.sqrt(delta_x * delta_x + delta_y * delta_y)
+      const len = Math.sqrt(x_dist * x_dist + y_dist * y_dist)
+      const scalar = 1 / (len || 1)
+      let newProps = {
         ...state,
         event,
         time,
-        velocity,
-        x: pageX,
-        y: pageY,
-        xDelta: pageX - state.xInitial,
-        yDelta: pageY - state.yInitial,
-        xPrev: state.x,
-        yPrev: state.y,
+        shiftKey,
+        xy: [pageX, pageY],
+        delta: [delta_x, delta_y],
+        local: [
+          state.lastLocal[0] + pageX - state.initial[0],
+          state.lastLocal[1] + pageY - state.initial[1]
+        ],
+        velocity: len / (time - state.time),
+        distance: distance,
+        direction: [x_dist * scalar, y_dist * scalar],
+        previous: state.xy,
+        first: false
       }
-      props.onAction && props.onAction(newProps)
-      return newProps
+      if (state.transform) newProps = state.transform(newProps)
+      const temp = props.onAction && props.onAction(newProps)
+      if (props.onMove) props.onMove(newProps)
+      return { ...newProps, temp: temp || newProps.temp }
     })
   }
 
-  // Touch handlers
-  const handleTouchStart = e => {
-    window.addEventListener('touchmove', handleTouchMove, props.passive)
-    window.addEventListener('touchend', handleTouchEnd, props.passive)
-    handleDown(e.touches[0])
+  const onDown = e => {
+    if (props.mouse) {
+      window.addEventListener(mouseMove, handleMove, props.passive)
+      window.addEventListener(mouseUp, onUp, props.passive)
+    }
+    if (props.touch) {
+      window.addEventListener(touchMove, handleMove, props.passive)
+      window.addEventListener(touchEnd, onUp, props.passive)
+    }
+
+    handleDown(e)
   }
-  const handleTouchMove = e => handleMove(e.touches[0])
-  const handleTouchEnd = () => {
-    window.removeEventListener('touchmove', handleTouchMove)
-    window.removeEventListener('touchend', handleTouchEnd)
-    handleUp()
+
+  const stop = () => {
+    if (props.mouse) {
+      window.removeEventListener(mouseMove, handleMove, props.passive)
+      window.removeEventListener(mouseUp, onUp, props.passive)
+    }
+    if (props.touch) {
+      window.removeEventListener(touchMove, handleMove, props.passive)
+      window.removeEventListener(touchEnd, onUp, props.passive)
+    }
   }
 
-  // Mouse handlers
-  const handleMouseDown = e => {
-    window.addEventListener('mousemove', handleMove, props.passive)
-    window.addEventListener('mouseup', handleMouseUp, props.passive)
-    handleDown(e)
+  const onUp = e => {
+    const { shiftKey } = e
+    stop()
+    handleUp(e, shiftKey)
   }
-  const handleMouseUp = () => {
-    window.removeEventListener('mousemove', handleMove)
-    window.removeEventListener('mouseup', handleMouseUp)
-    handleUp()
+
+  const output = {}
+  const capture = props.passive.capture ? 'Capture' : ''
+
+  if (props.mouse) {
+    output[`onMouseDown${capture}`] = onDown
   }
-  return {
-    onMouseDown: props.mouse ? handleMouseDown : undefined,
-    onTouchStart: props.touch ? handleTouchStart : undefined,
+
+  if (props.touch) {
+    output[`onTouchStart${capture}`] = onDown
   }
+
+  return output
 }
 
-function useGesture(props = defaultProps) {
+export default function useGesture(props) {
   const [state, set] = React.useState(initialState)
   const transientState = React.useRef(initialState)
-  if (typeof props === 'function') props = { onAction: props, ...defaultProps }
+  if (typeof props === 'function') props = { onAction: props }
+  props = { ...defaultProps, ...props }
   const [spread] = React.useState(() => (...args) =>
-    handlers(props.onAction ? cb => (transientState.current = cb(transientState.current)) : set, props, args),
+    handlers(
+      props.onAction
+        ? cb => (transientState.current = cb(transientState.current))
+        : set,
+      props,
+      args
+    )
   )
   return props.onAction ? spread : [spread, state]
 }
-
-export { useGesture }

package.json

 {
   "name": "react-use-gesture",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
+  "version": "5.0.0-beta.0",
+  "description": "hoc for receiving gestures",
+  "main": "dist/react-use-gesture",
+  "module": "dist/react-use-gesture.es",
+  "typings": "./index.d.ts",
+  "sideEffects": false,
+  "lint-staged": {
+    "*.{js,ts,json}": [
+      "prettier --write",
+      "git add"
+    ]
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "prebuild": "rimraf dist",
+    "build": "rollup -c",
+    "prepare": "npm run build",
+    "test:typings": "typings-tester --dir test/typescript"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/react-spring/react-use-gesture.git"
+  },
+  "keywords": [
+    "react",
+    "hoc",
+    "gesture",
+    "mouse",
+    "touch"
+  ],
   "author": "Paul Henschel",
-  "license": "ISC"
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/react-spring/react-use-gesture/issues"
+  },
+  "homepage": "https://github.com/react-spring/react-use-gesture#readme",
+  "devDependencies": {
+    "@babel/core": "7.1.2",
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@babel/plugin-transform-runtime": "7.1.0",
+    "@babel/preset-env": "7.1.0",
+    "@babel/preset-react": "7.0.0",
+    "@babel/preset-stage-2": "7.0.0",
+    "@babel/runtime": "7.1.2",
+    "@types/react": "^16.4.18",
+    "babel-core": "7.0.0-bridge.0",
+    "babel-jest": "23.6.0",
+    "babel-plugin-annotate-pure-calls": "0.4.0",
+    "babel-plugin-transform-react-remove-prop-types": "0.4.19",
+    "husky": "^1.3.1",
+    "lint-staged": "^8.1.5",
+    "prettier": "^1.16.4",
+    "react": "16.6.0",
+    "react-dom": "16.6.0",
+    "rimraf": "2.6.2",
+    "rollup": "0.67.0",
+    "rollup-plugin-babel": "4.0.3",
+    "typescript": "^3.1.6",
+    "typings-tester": "^0.3.2"
+  },
+  "peerDependencies": {
+    "prop-types": "15.x.x",
+    "react": ">= 16.0.0",
+    "react-dom": ">= 16.0.0"
+  }
 }

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

150688

increased by4350.32%

Number of package files

15

increased by650%

Lines of code

678

increased by522.02%

Number of low maintenance alerts

0

decreased by-100%

Number of low quality alerts

1

decreased by-50%

Number of medium quality alerts

0

decreased by-100%

Number of lines in readme file

146

increased byInfinity%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

3

increased byInfinity%

Dev dependency count

22

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes