use-long-press/index.js

React hook for detecting click, tap or point and hold event. Easy to use, highly customizable options, thoroughly tested.

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react");var c=(e=>(e.Mouse="mouse",e.Touch="touch",e.Pointer="pointer",e))(c||{}),a=(e=>(e.CancelledByMovement="cancelled-by-movement",e.CancelledByRelease="cancelled-by-release",e.CancelledOutsideElement="cancelled-outside-element",e))(a||{});const U=["mousedown","mousemove","mouseup","mouseleave","mouseout"],q=["touchstart","touchmove","touchend","touchcancel"],v=["pointerdown","pointermove","pointerup","pointerleave","pointerout"];function H(e){return typeof e=="object"&&e!==null&&"pageX"in e&&typeof e.pageX=="number"&&"pageY"in e&&typeof e.pageY=="number"}function I(e){var t;return U.includes((t=e==null?void 0:e.nativeEvent)==null?void 0:t.type)}function X(e){var t;return q.includes((t=e==null?void 0:e.nativeEvent)==null?void 0:t.type)||"touches"in e}function k(e){const{nativeEvent:t}=e;return t?v.includes(t==null?void 0:t.type)||"pointerId"in t:!1}function C(e){return I(e)||X(e)||k(e)}function D(e){var i;const t=X(e)?(i=e==null?void 0:e.touches)==null?void 0:i[0]:e;return H(t)?{x:t.pageX,y:t.pageY}:null}function z(e){return{target:e.target,currentTarget:e.currentTarget,nativeEvent:e,persist:()=>{}}}function G(e,{threshold:t=400,captureEvent:i=!1,detect:M=c.Pointer,cancelOnMovement:p=!1,cancelOutsideElement:h=!0,filterEvents:T,onStart:m,onMove:g,onFinish:y,onCancel:w}={}){const L=n.useRef(!1),f=n.useRef(!1),Y=n.useRef(),l=n.useRef(),R=n.useRef(e),d=n.useRef(null),E=n.useCallback(r=>u=>{f.current||C(u)&&(T!==void 0&&!T(u)||(i&&u.persist(),m==null||m(u,{context:r}),d.current=D(u),f.current=!0,Y.current=u.currentTarget,l.current=setTimeout(()=>{R.current&&(R.current(u,{context:r}),L.current=!0)},t)))},[i,T,m,t]),o=n.useCallback(r=>(u,s)=>{C(u)&&f.current&&(d.current=null,i&&u.persist(),L.current?y==null||y(u,{context:r}):f.current&&(w==null||w(u,{context:r,reason:s??a.CancelledByRelease})),L.current=!1,f.current=!1,l.current!==void 0&&clearTimeout(l.current))},[i,y,w]),P=n.useCallback(r=>u=>{if(C(u)&&(g==null||g(u,{context:r}),p!==!1&&d.current)){const s=D(u);if(s){const b=p===!0?25:p,B={x:Math.abs(s.x-d.current.x),y:Math.abs(s.y-d.current.y)};(B.x>b||B.y>b)&&o(r)(u,a.CancelledByMovement)}}},[o,p,g]),A=n.useCallback(r=>{if(e===null)return{};switch(M){case c.Mouse:{const u={onMouseDown:E(r),onMouseMove:P(r),onMouseUp:o(r)};return h&&(u.onMouseLeave=s=>{o(r)(s,a.CancelledOutsideElement)}),u}case c.Touch:return{onTouchStart:E(r),onTouchMove:P(r),onTouchEnd:o(r)};case c.Pointer:{const u={onPointerDown:E(r),onPointerMove:P(r),onPointerUp:o(r)};return h&&(u.onPointerLeave=s=>o(r)(s,a.CancelledOutsideElement)),u}}},[e,o,h,M,P,E]);return n.useEffect(()=>{function r(u){const s=z(u);o()(s)}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]),n.useEffect(()=>()=>{l.current!==void 0&&clearTimeout(l.current)},[]),n.useEffect(()=>{R.current=e},[e]),A}exports.LongPressCallbackReason=a;exports.LongPressEventType=c;exports.useLongPress=G;