feat(passive-events): introduces 'passive' events flag

antonioru · Aug 9, 2022 · 9d2ac1a · 9d2ac1a
1 parent a71cfba
commit 9d2ac1a
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 26 deletions.
diff --git a/package.json b/package.json
@@ -75,13 +75,13 @@
     "beautiful-react-ui": "0.57.1",
     "chai": "^4.3.6",
     "css-loader": "^6.7.1",
-    "eslint": "^8.17.0",
+    "eslint": "8.21.0",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-airbnb-typescript": "17.0.0",
     "eslint-plugin-chai-expect": "^3.0.0",
     "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-react": "^7.30.0",
+    "eslint-plugin-jsx-a11y": "6.6.1",
+    "eslint-plugin-react": "7.30.1",
     "eslint-plugin-react-hooks": "4.5.0",
     "glob": "^8.0.3",
     "husky": "^8.0.1",
@@ -104,7 +104,7 @@
     "ts-loader": "9.3.0",
     "typescript": "4.7.3",
     "url-loader": "^4.1.1",
-    "webpack": "^5.73.0"
+    "webpack": "5.74.0"
   },
   "exports": {
     ".": {
@@ -316,4 +316,4 @@
       "require": "./useWindowScroll.js"
     }
   }
-}
+}
diff --git a/src/useMouseEvents.ts b/src/useMouseEvents.ts
@@ -15,15 +15,15 @@ import useEvent from './useEvent'
  * lose the React SyntheticEvent performance boost.<br />
  * If you were doing something like the following:
  */
-const useMouseEvents = <TElement extends HTMLElement>(targetRef?: RefObject<TElement>, usePassiveEvents?: boolean) => {
+const useMouseEvents = <TElement extends HTMLElement>(targetRef?: RefObject<TElement>, passive?: boolean) => {
   const target = targetRef || { current: window.document } as unknown as RefObject<TElement>
-  const onMouseDown = useEvent<MouseEvent, TElement>(target, 'mousedown', { passive: usePassiveEvents })
-  const onMouseEnter = useEvent<MouseEvent, TElement>(target, 'mouseenter', { passive: usePassiveEvents })
-  const onMouseLeave = useEvent<MouseEvent, TElement>(target, 'mouseleave', { passive: usePassiveEvents })
-  const onMouseMove = useEvent<MouseEvent, TElement>(target, 'mousemove', { passive: usePassiveEvents })
-  const onMouseOut = useEvent<MouseEvent, TElement>(target, 'mouseout', { passive: usePassiveEvents })
-  const onMouseOver = useEvent<MouseEvent, TElement>(target, 'mouseover', { passive: usePassiveEvents })
-  const onMouseUp = useEvent<MouseEvent, TElement>(target, 'mouseup', { passive: usePassiveEvents })
+  const onMouseDown = useEvent<MouseEvent, TElement>(target, 'mousedown', { passive })
+  const onMouseEnter = useEvent<MouseEvent, TElement>(target, 'mouseenter', { passive })
+  const onMouseLeave = useEvent<MouseEvent, TElement>(target, 'mouseleave', { passive })
+  const onMouseMove = useEvent<MouseEvent, TElement>(target, 'mousemove', { passive })
+  const onMouseOut = useEvent<MouseEvent, TElement>(target, 'mouseout', { passive })
+  const onMouseOver = useEvent<MouseEvent, TElement>(target, 'mouseover', { passive })
+  const onMouseUp = useEvent<MouseEvent, TElement>(target, 'mouseup', { passive })
 
   return Object.freeze({
     onMouseDown,

diff --git a/src/useSwipe.ts b/src/useSwipe.ts
@@ -7,14 +7,14 @@ export type UseSwipeOptions = {
   direction?: 'both' | 'horizontal' | 'vertical',
   threshold?: number,
   preventDefault?: boolean,
-  usePassiveEvents?: boolean
+  passive?: boolean
 }
 
 const defaultOptions: UseSwipeOptions = {
   direction: 'both',
   threshold: 10,
   preventDefault: true,
-  usePassiveEvents: undefined,
+  passive: undefined,
 }
 
 type LocalSwipeState = {
@@ -43,8 +43,8 @@ const useSwipe = <TElement extends HTMLElement>(targetRef: RefObject<TElement> =
   const startingPointRef = useRef<[number, number]>([-1, -1])
   const isDraggingRef = useRef(false)
   const opts = { ...defaultOptions, ...(options || {}) }
-  const { onMouseDown, onMouseMove, onMouseLeave, onMouseUp } = useMouseEvents<TElement>(targetRef, opts.usePassiveEvents)
-  const { onTouchStart, onTouchMove, onTouchEnd, onTouchCancel } = useTouchEvents<TElement>(targetRef, opts.usePassiveEvents)
+  const { onMouseDown, onMouseMove, onMouseLeave, onMouseUp } = useMouseEvents<TElement>(targetRef, opts.passive)
+  const { onTouchStart, onTouchMove, onTouchEnd, onTouchCancel } = useTouchEvents<TElement>(targetRef, opts.passive)
 
   const startSwipe = (event: MouseEvent | TouchEvent) => {
     const [clientX, clientY] = getPointerCoordinates(event)

diff --git a/src/useSwipeEvents.ts b/src/useSwipeEvents.ts
@@ -17,13 +17,13 @@ export type SwipeState = {
 export type UseSwipeEventsOpts = {
   threshold?: number,
   preventDefault?: boolean,
-  usePassiveEvents?: boolean,
+  passive?: boolean,
 }
 
 const defaultOptions: UseSwipeEventsOpts = {
   threshold: 15,
   preventDefault: true,
-  usePassiveEvents: undefined,
+  passive: undefined,
 }
 /* eslint-disable @typescript-eslint/default-param-last */
 
@@ -41,8 +41,8 @@ const useSilentSwipeState = <TElement extends HTMLElement>(
   const isDraggingRef = useRef(false)
   const alphaRef = useRef<number[]>([])
   const opts = { ...defaultOptions, ...(options || {}) }
-  const { onMouseDown, onMouseMove, onMouseLeave, onMouseUp } = useMouseEvents<TElement>(targetRef, opts.usePassiveEvents)
-  const { onTouchStart, onTouchMove, onTouchEnd, onTouchCancel } = useTouchEvents<TElement>(targetRef, opts.usePassiveEvents)
+  const { onMouseDown, onMouseMove, onMouseLeave, onMouseUp } = useMouseEvents<TElement>(targetRef, opts.passive)
+  const { onTouchStart, onTouchMove, onTouchEnd, onTouchCancel } = useTouchEvents<TElement>(targetRef, opts.passive)
   const [state, setState] = useState<SwipeState>()
 
   const startSwipe = (event: MouseEvent | TouchEvent) => {

diff --git a/src/useTouchEvents.ts b/src/useTouchEvents.ts
@@ -16,12 +16,12 @@ import useEvent from './useEvent'
  * If you were doing something like the following:
  *
  */
-const useTouchEvents = <TElement extends HTMLElement>(targetRef?: RefObject<TElement>, usePassiveEvents?: boolean) => {
+const useTouchEvents = <TElement extends HTMLElement>(targetRef?: RefObject<TElement>, passive?: boolean) => {
   const target = targetRef || { current: window.document } as unknown as RefObject<TElement> // hackish but works
-  const onTouchStart = useEvent<TouchEvent, TElement>(target, 'touchstart', { passive: usePassiveEvents })
-  const onTouchEnd = useEvent<TouchEvent, TElement>(target, 'touchend', { passive: usePassiveEvents })
-  const onTouchCancel = useEvent<TouchEvent, TElement>(target, 'touchcancel', { passive: usePassiveEvents })
-  const onTouchMove = useEvent<TouchEvent, TElement>(target, 'touchmove', { passive: usePassiveEvents })
+  const onTouchStart = useEvent<TouchEvent, TElement>(target, 'touchstart', { passive })
+  const onTouchEnd = useEvent<TouchEvent, TElement>(target, 'touchend', { passive })
+  const onTouchCancel = useEvent<TouchEvent, TElement>(target, 'touchcancel', { passive })
+  const onTouchMove = useEvent<TouchEvent, TElement>(target, 'touchmove', { passive })
 
   return Object.freeze({
     onTouchStart,