use-long-press - npm Package Compare versions

Comparing version 3.0.4 to 3.1.0-alpha.1

index.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react");var i=(e=>(e.Mouse="mouse",e.Touch="touch",e.Pointer="pointer",e))(i||{}),h=(e=>(e.CancelledByMovement="cancelled-by-movement",e.CancelledByRelease="cancelled-by-release",e))(h||{});function b(e){const{nativeEvent:n}=e;return n?window.TouchEvent&&n instanceof TouchEvent||"touches"in n:!1}function B(e){return e.nativeEvent instanceof MouseEvent&&!(e.nativeEvent instanceof PointerEvent)}function D(e){const{nativeEvent:n}=e;return n?window.PointerEvent&&n instanceof PointerEvent||"pointerId"in n:!1}function C(e){return B(e)||b(e)||D(e)}function L(e){return b(e)?{x:e.touches[0].pageX,y:e.touches[0].pageY}:B(e)||D(e)?{x:e.pageX,y:e.pageY}:null}function S(e){return{target:e.target,currentTarget:e.currentTarget,nativeEvent:e,persist:()=>{}}}function A(e,{threshold:n=400,captureEvent:l=!1,detect:m=i.Pointer,cancelOnMovement:d=!1,filterEvents:v,onStart:T,onMove:y,onFinish:x,onCancel:M}={}){const g=t.useRef(!1),c=t.useRef(!1),s=t.useRef(),a=t.useRef(),p=t.useRef(e),f=t.useRef(null),E=t.useCallback(r=>{c.current||C(r)&&(v!==void 0&&!v(r)||(l&&r.persist(),T?.(r,{context:s.current}),f.current=L(r),c.current=!0,a.current=setTimeout(()=>{p.current&&(p.current(r,{context:s.current}),g.current=!0)},n)))},[l,v,T,n]),o=t.useCallback((r,u)=>{C(r)&&c.current&&(f.current=null,l&&r.persist(),g.current?x?.(r,{context:s.current}):c.current&&M?.(r,{context:s.current,reason:u??h.CancelledByRelease}),g.current=!1,c.current=!1,a.current!==void 0&&clearTimeout(a.current))},[l,x,M]),w=t.useCallback(r=>{if(y?.(r,{context:s.current}),d&&f.current){const u=L(r);if(u){const P=d===!0?25:d,R={x:Math.abs(u.x-f.current.x),y:Math.abs(u.y-f.current.y)};(R.x>P||R.y>P)&&o(r,h.CancelledByMovement)}}},[o,d,y]);return t.useEffect(()=>{function r(u){const P=S(u);o(P)}return window.addEventListener("mouseup",r),window.addEventListener("touchend",r),window.addEventListener("pointerup",r),()=>{window.removeEventListener("mouseup",r),window.removeEventListener("touchend",r),window.removeEventListener("pointerup",r)}},[o]),t.useEffect(()=>()=>{a.current!==void 0&&clearTimeout(a.current)},[]),t.useEffect(()=>{p.current=e},[e]),t.useCallback(r=>{if(s.current=r,e===null)return{};switch(m){case i.Mouse:return{onMouseDown:E,onMouseMove:w,onMouseUp:o};case i.Touch:return{onTouchStart:E,onTouchMove:w,onTouchEnd:o};case i.Pointer:return{onPointerDown:E,onPointerMove:w,onPointerUp:o}}},[e,o,m,w,E])}exports.LongPressCallbackReason=h;exports.LongPressEventType=i;exports.useLongPress=A;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react");var i=(e=>(e.Mouse="mouse",e.Touch="touch",e.Pointer="pointer",e))(i||{}),P=(e=>(e.CancelledByMovement="cancelled-by-movement",e.CancelledByRelease="cancelled-by-release",e))(P||{});function B(e){const{nativeEvent:o}=e;return o?window.TouchEvent&&o instanceof TouchEvent||"touches"in o:!1}function D(e){return e.nativeEvent instanceof MouseEvent&&!(e.nativeEvent instanceof PointerEvent)}function S(e){const{nativeEvent:o}=e;return o?window.PointerEvent&&o instanceof PointerEvent||"pointerId"in o:!1}function C(e){return D(e)||B(e)||S(e)}function b(e){return B(e)?{x:e.touches[0].pageX,y:e.touches[0].pageY}:D(e)||S(e)?{x:e.pageX,y:e.pageY}:null}function A(e){return{target:e.target,currentTarget:e.currentTarget,nativeEvent:e,persist:()=>{}}}function U(e,{threshold:o=400,captureEvent:l=!1,detect:T=i.Pointer,cancelOnMovement:d=!1,cancelOutsideElement:m=!1,filterEvents:h,onStart:y,onMove:M,onFinish:x,onCancel:L}={}){const g=n.useRef(!1),c=n.useRef(!1),s=n.useRef(),a=n.useRef(),p=n.useRef(e),f=n.useRef(null),E=n.useCallback(r=>{c.current||C(r)&&(h!==void 0&&!h(r)||(l&&r.persist(),y?.(r,{context:s.current}),f.current=b(r),c.current=!0,a.current=setTimeout(()=>{p.current&&(p.current(r,{context:s.current}),g.current=!0)},o)))},[l,h,y,o]),u=n.useCallback((r,t)=>{C(r)&&c.current&&(f.current=null,l&&r.persist(),g.current?x?.(r,{context:s.current}):c.current&&L?.(r,{context:s.current,reason:t??P.CancelledByRelease}),g.current=!1,c.current=!1,a.current!==void 0&&clearTimeout(a.current))},[l,x,L]),v=n.useCallback(r=>{if(M?.(r,{context:s.current}),d&&f.current){const t=b(r);if(t){const w=d===!0?25:d,R={x:Math.abs(t.x-f.current.x),y:Math.abs(t.y-f.current.y)};(R.x>w||R.y>w)&&u(r,P.CancelledByMovement)}}},[u,d,M]);return n.useEffect(()=>{function r(t){const w=A(t);u(w)}return window.addEventListener("mouseup",r),window.addEventListener("touchend",r),window.addEventListener("pointerup",r),()=>{window.removeEventListener("mouseup",r),window.removeEventListener("touchend",r),window.removeEventListener("pointerup",r)}},[u]),n.useEffect(()=>()=>{a.current!==void 0&&clearTimeout(a.current)},[]),n.useEffect(()=>{p.current=e},[e]),n.useCallback(r=>{if(s.current=r,e===null)return{};switch(T){case i.Mouse:{const t={onMouseDown:E,onMouseMove:v,onMouseUp:u};return m&&(t.onMouseLeave=u),t}case i.Touch:return{onTouchStart:E,onTouchMove:v,onTouchEnd:u};case i.Pointer:{const t={onPointerDown:E,onPointerMove:v,onPointerUp:u};return m&&(t.onPointerLeave=u),t}}},[e,u,T,v,E])}exports.LongPressCallbackReason=P;exports.LongPressEventType=i;exports.useLongPress=U;

lib/use-long-press.types.d.ts

@@ -61,3 +61,3 @@ import { MouseEvent as ReactMouseEvent, MouseEventHandler, PointerEvent as ReactPointerEvent, PointerEventHandler, TouchEvent as ReactTouchEvent, TouchEventHandler } from "react";
     /**
-     * If long press should be canceled on mouse / touch move. Possible values:
+     * If long press should be canceled on mouse / touch / pointer move. Possible values:
      * - `false`: [default] Disable cancelling on movement
@@ -69,2 +69,8 @@ * - `true`: Enable cancelling on movement and use default 25px threshold
     /**
+     * If long press should be canceled when moving mouse / touch / pointer outside the element to which it was bound.
+     *
+     * Works for mouse and pointer events, touch events will be supported in the future.
+     */
+    cancelOutsideElement?: boolean;
+    /**
      * Called after detecting initial click / tap / point event. Allows to change event position before registering it for the purpose of `cancelOnMovement`.
@@ -92,2 +98,3 @@ */
     onMouseUp: MouseEventHandler<Target>;
+    onMouseLeave?: MouseEventHandler<Target>;
 }
@@ -103,3 +110,4 @@ export interface LongPressTouchHandlers<Target extends Element = Element> {
     onPointerUp: PointerEventHandler<Target>;
+    onPointerLeave?: PointerEventHandler<Target>;
 }
 export type LongPressHandlers<Target extends Element = Element> = LongPressMouseHandlers<Target> | LongPressTouchHandlers<Target> | LongPressPointerHandlers<Target> | LongPressEmptyHandlers;

package.json

 {
   "name": "use-long-press",
-  "version": "3.0.4",
+  "version": "3.1.0-alpha.1",
   "description": "React hook for detecting click, tap or point and hold event. Easy to use, highly customizable options, thoroughly tested.",
@@ -5,0 +5,0 @@ "author": "minwork",

README.md

@@ -18,3 +18,3 @@ # React Long Press Hook
 - Disable hook when necessary
-- Adjustable long press detection threshold
+- Filter undesired events (like mouse right clicks)
 
@@ -21,0 +21,0 @@ # Table of Contents

New alerts

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

Improved metrics

Total package byte prevSize

30907

increased by2.13%

Lines of code

270

increased by5.47%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes