use-long-press - npm Package Compare versions

Comparing version 3.0.0-alpha.3 to 3.0.0-alpha.4

index.js

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

lib/use-long-press.d.ts

@@ -1,6 +0,7 @@
-import { LongPressCallback, LongPressEmptyHandlers, LongPressEventType, LongPressHandlers, LongPressMouseHandlers, LongPressOptions, LongPressResult, LongPressTouchHandlers } from "./use-long-press.types";
+import { LongPressCallback, LongPressEmptyHandlers, LongPressEventType, LongPressHandlers, LongPressMouseHandlers, LongPressOptions, LongPressPointerHandlers, LongPressResult, LongPressTouchHandlers } from "./use-long-press.types";
 export declare function useLongPress<Target extends Element = Element, Context = unknown>(callback: null, options?: LongPressOptions<Target, Context>): LongPressResult<LongPressEmptyHandlers, Context>;
-export declare function useLongPress<Target extends Element = Element, Context = unknown, Callback extends LongPressCallback<Target, Context> = LongPressCallback<Target, Context>>(callback: Callback, options: LongPressOptions<Target, Context, LongPressEventType.TOUCH>): LongPressResult<LongPressTouchHandlers<Target>, Context>;
-export declare function useLongPress<Target extends Element = Element, Context = unknown, Callback extends LongPressCallback<Target, Context> = LongPressCallback<Target, Context>>(callback: Callback, options: LongPressOptions<Target, Context, LongPressEventType.MOUSE>): LongPressResult<LongPressMouseHandlers<Target>, Context>;
-export declare function useLongPress<Target extends Element = Element, Context = unknown, Callback extends LongPressCallback<Target, Context> = LongPressCallback<Target, Context>>(callback: Callback): LongPressResult<LongPressMouseHandlers<Target>, Context>;
+export declare function useLongPress<Target extends Element = Element, Context = unknown, Callback extends LongPressCallback<Target, Context> = LongPressCallback<Target, Context>>(callback: Callback, options: LongPressOptions<Target, Context, LongPressEventType.Touch>): LongPressResult<LongPressTouchHandlers<Target>, Context>;
+export declare function useLongPress<Target extends Element = Element, Context = unknown, Callback extends LongPressCallback<Target, Context> = LongPressCallback<Target, Context>>(callback: Callback, options: LongPressOptions<Target, Context, LongPressEventType.Mouse>): LongPressResult<LongPressMouseHandlers<Target>, Context>;
+export declare function useLongPress<Target extends Element = Element, Context = unknown, Callback extends LongPressCallback<Target, Context> = LongPressCallback<Target, Context>>(callback: Callback, options: LongPressOptions<Target, Context, LongPressEventType.Pointer>): LongPressResult<LongPressPointerHandlers<Target>, Context>;
+export declare function useLongPress<Target extends Element = Element, Context = unknown, Callback extends LongPressCallback<Target, Context> = LongPressCallback<Target, Context>>(callback: Callback): LongPressResult<LongPressPointerHandlers<Target>, Context>;
 export declare function useLongPress<Target extends Element = Element, Context = unknown, Callback extends LongPressCallback<Target, Context> = LongPressCallback<Target, Context>>(callback: Callback | null, options?: LongPressOptions<Target, Context>): LongPressResult<LongPressHandlers<Target>, Context>;

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

@@ -1,2 +0,2 @@
-import { MouseEvent as ReactMouseEvent, MouseEventHandler, TouchEvent as ReactTouchEvent, TouchEventHandler } from "react";
+import { MouseEvent as ReactMouseEvent, MouseEventHandler, PointerEvent as ReactPointerEvent, PointerEventHandler, TouchEvent as ReactTouchEvent, TouchEventHandler } from "react";
 /**
@@ -6,4 +6,5 @@ * Which event listeners should be returned from the hook
 export declare enum LongPressEventType {
-    MOUSE = "mouse",
-    TOUCH = "touch"
+    Mouse = "mouse",
+    Touch = "touch",
+    Pointer = "pointer"
 }
@@ -34,3 +35,3 @@ /**
 export type LongPressCallback<Target extends Element = Element, Context = unknown> = (event: LongPressEvent<Target>, meta: LongPressCallbackMeta<Context>) => void;
-export type LongPressEvent<Target extends Element = Element> = ReactMouseEvent<Target> | ReactTouchEvent<Target>;
+export type LongPressEvent<Target extends Element = Element> = ReactMouseEvent<Target> | ReactTouchEvent<Target> | ReactPointerEvent<Target>;
 export type LongPressCallbackMeta<Context = unknown> = {
@@ -50,3 +51,3 @@ context?: Context;
     /**
-     * Which type of events should be detected ('mouse' | 'touch'). For TS use *LongPressEventType* enum.
+     * Which type of events should be detected ('mouse' | 'touch' | 'pointer'). For TS use *LongPressEventType* enum.
      * @see LongPressEventType
@@ -89,2 +90,7 @@ */
 }
-export type LongPressHandlers<Target extends Element = Element> = LongPressMouseHandlers<Target> | LongPressTouchHandlers<Target> | LongPressEmptyHandlers;
+export interface LongPressPointerHandlers<Target extends Element = Element> {
+    onPointerDown: PointerEventHandler<Target>;
+    onPointerMove: PointerEventHandler<Target>;
+    onPointerUp: PointerEventHandler<Target>;
+}
+export type LongPressHandlers<Target extends Element = Element> = LongPressMouseHandlers<Target> | LongPressTouchHandlers<Target> | LongPressPointerHandlers<Target> | LongPressEmptyHandlers;

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

 import { LongPressEvent } from './use-long-press.types';
-import { MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } from 'react';
-export declare function isTouchEvent<Target extends Element>(event: LongPressEvent<Target>): event is ReactTouchEvent<Target>;
-export declare function isMouseEvent<Target extends Element>(event: LongPressEvent<Target>): event is ReactMouseEvent<Target>;
+import { MouseEvent as ReactMouseEvent, PointerEvent as ReactPointerEvent, SyntheticEvent, TouchEvent as ReactTouchEvent } from 'react';
+export declare function isTouchEvent<Target extends Element>(event: SyntheticEvent<Target>): event is ReactTouchEvent<Target>;
+export declare function isMouseEvent<Target extends Element>(event: SyntheticEvent<Target>): event is ReactMouseEvent<Target>;
+export declare function isPointerEvent<Target extends Element>(event: SyntheticEvent<Target>): event is ReactPointerEvent<Target>;
+export declare function isRecognisableEvent<Target extends Element>(event: SyntheticEvent<Target>): event is LongPressEvent<Target>;
 export declare function getCurrentPosition<Target extends Element>(event: LongPressEvent<Target>): {
@@ -6,0 +8,0 @@ x: number;

package.json

 {
   "name": "use-long-press",
-  "version": "3.0.0-alpha.3",
+  "version": "3.0.0-alpha.4",
   "description": "React hook for detecting click (or tap) and hold event. Easy to use, highly customizable options, thoroughly tested.",
@@ -9,6 +9,6 @@ "author": "minwork",
     "react",
+    "long press",
     "hook",
     "click and hold",
-    "tap and hold",
-    "long press"
+    "tap and hold"
   ],
@@ -15,0 +15,0 @@ "scripts": {

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

13233

increased by14.74%

Lines of code

227

increased by7.58%

No dependency changes