use-long-press - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

dist/index.module.js

+import{useCallback as r,useEffect as n,useRef as t}from"react";var o,e=function(){};function u(u,c){void 0===c&&(c={});var i=c.threshold;void 0===i&&(i=400);var v=c.captureEvent;void 0===v&&(v=!1);var a=c.detect;void 0===a&&(a=o.BOTH);var s=c.onStart;void 0===s&&(s=e);var d=c.onFinish;void 0===d&&(d=e);var f=c.onCancel;void 0===f&&(f=e);var T=t(!1),h=t(!1),O=t(),l=t(u),m=r(function(r){v&&r.persist(),v?s(r):s(),h.current=!0,O.current=setTimeout(function(){l.current&&(v?l.current(r):l.current(),T.current=!0)},i)},[s,v,i]),p=r(function(r){v&&r.persist(),T.current?v?d(r):d():h.current&&(v?f(r):f()),T.current=!1,h.current=!1,void 0!==O.current&&clearTimeout(O.current)},[v,d,f]);n(function(){return function(){void 0!==O.current&&clearTimeout(O.current)}},[]),n(function(){l.current=u},[u]);var M={onMouseDown:m,onMouseUp:p,onMouseLeave:p},U={onTouchStart:m,onTouchEnd:p};return null===u?{}:a===o.MOUSE?M:a===o.TOUCH?U:Object.assign({},M,U)}!function(r){r.BOTH="both",r.MOUSE="mouse",r.TOUCH="touch"}(o||(o={}));export{o as LongPressDetectEvents,u as useLongPress};
+//# sourceMappingURL=index.module.js.map

dist/index.module.js.map

+{"version":3,"file":"index.module.js","sources":["../src/index.ts"],"sourcesContent":["import {\n    MouseEvent,\n    MouseEventHandler,\n    TouchEvent,\n    TouchEventHandler,\n    useCallback,\n    useEffect,\n    useRef,\n} from 'react';\n\nconst noop = (): void => {};\n\nexport type LongPressEvent<Target = Element> = MouseEvent<Target> | TouchEvent<Target>;\nexport type LongPressCallback<Target = Element> = (event?: LongPressEvent<Target>) => void;\nexport enum LongPressDetectEvents {\n    BOTH = 'both',\n    MOUSE = 'mouse',\n    TOUCH = 'touch',\n}\n\nexport type LongPressResult<\n    Target,\n    Callback,\n    DetectType extends LongPressDetectEvents = LongPressDetectEvents.BOTH\n> = DetectType extends LongPressDetectEvents.BOTH\n    ? {\n          onMouseDown: MouseEventHandler<Target>;\n          onMouseUp: MouseEventHandler<Target>;\n          onMouseLeave: MouseEventHandler<Target>;\n          onTouchStart: TouchEventHandler<Target>;\n          onTouchEnd: TouchEventHandler<Target>;\n      }\n    : DetectType extends LongPressDetectEvents.MOUSE\n    ? {\n          onMouseDown: MouseEventHandler<Target>;\n          onMouseUp: MouseEventHandler<Target>;\n          onMouseLeave: MouseEventHandler<Target>;\n      }\n    : DetectType extends LongPressDetectEvents.TOUCH\n    ? {\n          onTouchStart: TouchEventHandler<Target>;\n          onTouchEnd: TouchEventHandler<Target>;\n      }\n    : never;\n\nexport interface LongPressOptions<Target = Element> {\n    threshold?: number;\n    captureEvent?: boolean;\n    detect?: LongPressDetectEvents;\n    onStart?: LongPressCallback<Target>;\n    onFinish?: LongPressCallback<Target>;\n    onCancel?: LongPressCallback<Target>;\n}\n\nexport function useLongPress<Target = Element>(callback: null, options?: LongPressOptions<Target>): {};\nexport function useLongPress<\n    Target = Element,\n    Callback extends LongPressCallback<Target> = LongPressCallback<Target>\n>(callback: Callback, options?: LongPressOptions<Target>): LongPressResult<Target, Callback>;\nexport function useLongPress<\n    Target = Element,\n    Callback extends LongPressCallback<Target> = LongPressCallback<Target>\n>(callback: Callback | null, options?: LongPressOptions<Target>): LongPressResult<Target, Callback> | {};\n/**\n * Detect click / tap and hold event\n *\n * @param callback <p>\n *   Function to call when long press event is detected\n *   (click or tap lasts for <i>threshold</i> amount of time or longer)\n *   </p>\n * @param options <ul>\n * <li><b>threshold</b>\n * - Period of time that must elapse after detecting click or tap in order to trigger <i>callback</i></li>\n * <li><b>captureEvent</b>\n * - If React Event will be supplied as first argument to all callbacks</li>\n * <li><b>detect</b>\n * - Which type of events should be detected ('mouse' | 'touch' | 'both' )\n * <li><b>onStart</b>\n * - Called right after detecting click / tap event (e.g. onMouseDown or onTouchStart)\n * <li><b>onFinish</b>\n * - Called (if long press <u>was triggered</u>)\n * on releasing click or tap (e.g. onMouseUp, onMouseLeave or onTouchEnd)\n * <li><b>onCancel</b>\n * - Called (if long press <u>was <b>not</b> triggered</u>)\n * on releasing click or tap (e.g. onMouseUp, onMouseLeave or onTouchEnd)\n * </ul>\n */\nexport function useLongPress<\n    Target = Element,\n    Callback extends LongPressCallback<Target> = LongPressCallback<Target>\n>(\n    callback: Callback | null,\n    {\n        threshold = 400,\n        captureEvent = false,\n        detect = LongPressDetectEvents.BOTH,\n        onStart = noop,\n        onFinish = noop,\n        onCancel = noop,\n    }: LongPressOptions<Target> = {}\n): LongPressResult<Target, Callback, typeof detect> | {} {\n    const isLongPressActive = useRef(false);\n    const isPressed = useRef(false);\n    const timer = useRef<NodeJS.Timeout>();\n    const savedCallback = useRef(callback);\n\n    const start = useCallback(\n        (event: LongPressEvent<Target>) => {\n            if (captureEvent) {\n                event.persist();\n            }\n            // When touched trigger onStart and start timer\n            captureEvent ? onStart(event) : onStart();\n            isPressed.current = true;\n            timer.current = setTimeout(() => {\n                if (savedCallback.current) {\n                    captureEvent ? savedCallback.current(event) : savedCallback.current();\n                    isLongPressActive.current = true;\n                }\n            }, threshold);\n        },\n        [onStart, captureEvent, threshold]\n    );\n\n    const cancel = useCallback(\n        (event: LongPressEvent<Target>) => {\n            if (captureEvent) {\n                event.persist();\n            }\n            // Trigger onFinish callback only if timer was active\n            if (isLongPressActive.current) {\n                captureEvent ? onFinish(event) : onFinish();\n            } else if (isPressed.current) {\n                // Otherwise if not active trigger onCancel\n                captureEvent ? onCancel(event) : onCancel();\n            }\n            isLongPressActive.current = false;\n            isPressed.current = false;\n            timer.current !== undefined && clearTimeout(timer.current);\n        },\n        [captureEvent, onFinish, onCancel]\n    );\n\n    useEffect(\n        () => (): void => {\n            // Clear timeout on unmount\n            timer.current !== undefined && clearTimeout(timer.current);\n        },\n        []\n    );\n\n    useEffect(() => {\n        savedCallback.current = callback;\n    }, [callback]);\n\n    const mouseHandlers = {\n        onMouseDown: start as MouseEventHandler<Target>,\n        onMouseUp: cancel as MouseEventHandler<Target>,\n        onMouseLeave: cancel as MouseEventHandler<Target>,\n    };\n\n    const touchHandlers = {\n        onTouchStart: start as TouchEventHandler<Target>,\n        onTouchEnd: cancel as TouchEventHandler<Target>,\n    };\n\n    // eslint-disable-next-line no-nested-ternary\n    return callback === null\n        ? {}\n        : // eslint-disable-next-line no-nested-ternary\n        detect === LongPressDetectEvents.MOUSE\n        ? mouseHandlers\n        : detect === LongPressDetectEvents.TOUCH\n        ? touchHandlers\n        : { ...mouseHandlers, ...touchHandlers };\n}\n"],"names":["const","LongPressDetectEvents","noop","useLongPress","callback","BOTH","isLongPressActive","useRef","isPressed","timer","savedCallback","start","useCallback","event","captureEvent","persist","onStart","current","setTimeout","threshold","cancel","onFinish","onCancel","undefined","clearTimeout","useEffect","mouseHandlers","onMouseDown","onMouseUp","onMouseLeave","touchHandlers","onTouchStart","onTouchEnd","detect","MOUSE","TOUCH","Object"],"mappings":"+DAUAA,IAIYC,EAJNC,wBA6EUC,EAIZC,oBAQ8B,qCANd,0CACG,iCACNH,EAAsBI,qCACrBH,mCACCA,mCACAA,OAGTI,EAAoBC,GAAO,GAC3BC,EAAYD,GAAO,GACnBE,EAAQF,IACRG,EAAgBH,EAAOH,GAEvBO,EAAQC,WACTC,GACOC,GACAD,EAAME,UAGVD,EAAeE,EAAQH,GAASG,IAChCR,EAAUS,SAAU,EACpBR,EAAMQ,QAAUC,sBACRR,EAAcO,UACdH,EAAeJ,EAAcO,QAAQJ,GAASH,EAAcO,UAC5DX,EAAkBW,SAAU,IAEjCE,IAEP,CAACH,EAASF,EAAcK,IAGtBC,EAASR,WACVC,GACOC,GACAD,EAAME,UAGNT,EAAkBW,QAClBH,EAAeO,EAASR,GAASQ,IAC1Bb,EAAUS,UAEjBH,EAAeQ,EAAST,GAASS,KAErChB,EAAkBW,SAAU,EAC5BT,EAAUS,SAAU,OACFM,IAAlBd,EAAMQ,SAAyBO,aAAaf,EAAMQ,UAEtD,CAACH,EAAcO,EAAUC,IAG7BG,oCAG0BF,IAAlBd,EAAMQ,SAAyBO,aAAaf,EAAMQ,WAEtD,IAGJQ,aACIf,EAAcO,QAAUb,GACzB,CAACA,QAEEsB,EAAgB,CAClBC,YAAahB,EACbiB,UAAWR,EACXS,aAAcT,GAGZU,EAAgB,CAClBC,aAAcpB,EACdqB,WAAYZ,UAII,OAAbhB,EACD,GAEF6B,IAAWhC,EAAsBiC,MAC/BR,EACAO,IAAWhC,EAAsBkC,MACjCL,EACAM,iBAAKV,EAAkBI,IAhKjC,SAAY7B,GACRA,cACAA,gBACAA,gBAHJ,CAAYA,IAAAA"}

dist/index.umd.js

+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t(e.useLongPress={},e.react)}(this,function(e,t){var n,r=function(){};(n=e.LongPressDetectEvents||(e.LongPressDetectEvents={})).BOTH="both",n.MOUSE="mouse",n.TOUCH="touch",e.useLongPress=function(n,o){void 0===o&&(o={});var u=o.threshold;void 0===u&&(u=400);var c=o.captureEvent;void 0===c&&(c=!1);var s=o.detect;void 0===s&&(s=e.LongPressDetectEvents.BOTH);var i=o.onStart;void 0===i&&(i=r);var f=o.onFinish;void 0===f&&(f=r);var a=o.onCancel;void 0===a&&(a=r);var v=t.useRef(!1),d=t.useRef(!1),l=t.useRef(),E=t.useRef(n),p=t.useCallback(function(e){c&&e.persist(),c?i(e):i(),d.current=!0,l.current=setTimeout(function(){E.current&&(c?E.current(e):E.current(),v.current=!0)},u)},[i,c,u]),T=t.useCallback(function(e){c&&e.persist(),v.current?c?f(e):f():d.current&&(c?a(e):a()),v.current=!1,d.current=!1,void 0!==l.current&&clearTimeout(l.current)},[c,f,a]);t.useEffect(function(){return function(){void 0!==l.current&&clearTimeout(l.current)}},[]),t.useEffect(function(){E.current=n},[n]);var g={onMouseDown:p,onMouseUp:T,onMouseLeave:T},h={onTouchStart:p,onTouchEnd:T};return null===n?{}:s===e.LongPressDetectEvents.MOUSE?g:s===e.LongPressDetectEvents.TOUCH?h:Object.assign({},g,h)}});
+//# sourceMappingURL=index.umd.js.map

dist/index.umd.js.map

+{"version":3,"file":"index.umd.js","sources":["../src/index.ts"],"sourcesContent":["import {\n    MouseEvent,\n    MouseEventHandler,\n    TouchEvent,\n    TouchEventHandler,\n    useCallback,\n    useEffect,\n    useRef,\n} from 'react';\n\nconst noop = (): void => {};\n\nexport type LongPressEvent<Target = Element> = MouseEvent<Target> | TouchEvent<Target>;\nexport type LongPressCallback<Target = Element> = (event?: LongPressEvent<Target>) => void;\nexport enum LongPressDetectEvents {\n    BOTH = 'both',\n    MOUSE = 'mouse',\n    TOUCH = 'touch',\n}\n\nexport type LongPressResult<\n    Target,\n    Callback,\n    DetectType extends LongPressDetectEvents = LongPressDetectEvents.BOTH\n> = DetectType extends LongPressDetectEvents.BOTH\n    ? {\n          onMouseDown: MouseEventHandler<Target>;\n          onMouseUp: MouseEventHandler<Target>;\n          onMouseLeave: MouseEventHandler<Target>;\n          onTouchStart: TouchEventHandler<Target>;\n          onTouchEnd: TouchEventHandler<Target>;\n      }\n    : DetectType extends LongPressDetectEvents.MOUSE\n    ? {\n          onMouseDown: MouseEventHandler<Target>;\n          onMouseUp: MouseEventHandler<Target>;\n          onMouseLeave: MouseEventHandler<Target>;\n      }\n    : DetectType extends LongPressDetectEvents.TOUCH\n    ? {\n          onTouchStart: TouchEventHandler<Target>;\n          onTouchEnd: TouchEventHandler<Target>;\n      }\n    : never;\n\nexport interface LongPressOptions<Target = Element> {\n    threshold?: number;\n    captureEvent?: boolean;\n    detect?: LongPressDetectEvents;\n    onStart?: LongPressCallback<Target>;\n    onFinish?: LongPressCallback<Target>;\n    onCancel?: LongPressCallback<Target>;\n}\n\nexport function useLongPress<Target = Element>(callback: null, options?: LongPressOptions<Target>): {};\nexport function useLongPress<\n    Target = Element,\n    Callback extends LongPressCallback<Target> = LongPressCallback<Target>\n>(callback: Callback, options?: LongPressOptions<Target>): LongPressResult<Target, Callback>;\nexport function useLongPress<\n    Target = Element,\n    Callback extends LongPressCallback<Target> = LongPressCallback<Target>\n>(callback: Callback | null, options?: LongPressOptions<Target>): LongPressResult<Target, Callback> | {};\n/**\n * Detect click / tap and hold event\n *\n * @param callback <p>\n *   Function to call when long press event is detected\n *   (click or tap lasts for <i>threshold</i> amount of time or longer)\n *   </p>\n * @param options <ul>\n * <li><b>threshold</b>\n * - Period of time that must elapse after detecting click or tap in order to trigger <i>callback</i></li>\n * <li><b>captureEvent</b>\n * - If React Event will be supplied as first argument to all callbacks</li>\n * <li><b>detect</b>\n * - Which type of events should be detected ('mouse' | 'touch' | 'both' )\n * <li><b>onStart</b>\n * - Called right after detecting click / tap event (e.g. onMouseDown or onTouchStart)\n * <li><b>onFinish</b>\n * - Called (if long press <u>was triggered</u>)\n * on releasing click or tap (e.g. onMouseUp, onMouseLeave or onTouchEnd)\n * <li><b>onCancel</b>\n * - Called (if long press <u>was <b>not</b> triggered</u>)\n * on releasing click or tap (e.g. onMouseUp, onMouseLeave or onTouchEnd)\n * </ul>\n */\nexport function useLongPress<\n    Target = Element,\n    Callback extends LongPressCallback<Target> = LongPressCallback<Target>\n>(\n    callback: Callback | null,\n    {\n        threshold = 400,\n        captureEvent = false,\n        detect = LongPressDetectEvents.BOTH,\n        onStart = noop,\n        onFinish = noop,\n        onCancel = noop,\n    }: LongPressOptions<Target> = {}\n): LongPressResult<Target, Callback, typeof detect> | {} {\n    const isLongPressActive = useRef(false);\n    const isPressed = useRef(false);\n    const timer = useRef<NodeJS.Timeout>();\n    const savedCallback = useRef(callback);\n\n    const start = useCallback(\n        (event: LongPressEvent<Target>) => {\n            if (captureEvent) {\n                event.persist();\n            }\n            // When touched trigger onStart and start timer\n            captureEvent ? onStart(event) : onStart();\n            isPressed.current = true;\n            timer.current = setTimeout(() => {\n                if (savedCallback.current) {\n                    captureEvent ? savedCallback.current(event) : savedCallback.current();\n                    isLongPressActive.current = true;\n                }\n            }, threshold);\n        },\n        [onStart, captureEvent, threshold]\n    );\n\n    const cancel = useCallback(\n        (event: LongPressEvent<Target>) => {\n            if (captureEvent) {\n                event.persist();\n            }\n            // Trigger onFinish callback only if timer was active\n            if (isLongPressActive.current) {\n                captureEvent ? onFinish(event) : onFinish();\n            } else if (isPressed.current) {\n                // Otherwise if not active trigger onCancel\n                captureEvent ? onCancel(event) : onCancel();\n            }\n            isLongPressActive.current = false;\n            isPressed.current = false;\n            timer.current !== undefined && clearTimeout(timer.current);\n        },\n        [captureEvent, onFinish, onCancel]\n    );\n\n    useEffect(\n        () => (): void => {\n            // Clear timeout on unmount\n            timer.current !== undefined && clearTimeout(timer.current);\n        },\n        []\n    );\n\n    useEffect(() => {\n        savedCallback.current = callback;\n    }, [callback]);\n\n    const mouseHandlers = {\n        onMouseDown: start as MouseEventHandler<Target>,\n        onMouseUp: cancel as MouseEventHandler<Target>,\n        onMouseLeave: cancel as MouseEventHandler<Target>,\n    };\n\n    const touchHandlers = {\n        onTouchStart: start as TouchEventHandler<Target>,\n        onTouchEnd: cancel as TouchEventHandler<Target>,\n    };\n\n    // eslint-disable-next-line no-nested-ternary\n    return callback === null\n        ? {}\n        : // eslint-disable-next-line no-nested-ternary\n        detect === LongPressDetectEvents.MOUSE\n        ? mouseHandlers\n        : detect === LongPressDetectEvents.TOUCH\n        ? touchHandlers\n        : { ...mouseHandlers, ...touchHandlers };\n}\n"],"names":["const","LongPressDetectEvents","noop","callback","BOTH","isLongPressActive","useRef","isPressed","timer","savedCallback","start","useCallback","event","captureEvent","persist","onStart","current","setTimeout","threshold","cancel","onFinish","onCancel","undefined","clearTimeout","useEffect","mouseHandlers","onMouseDown","onMouseUp","onMouseLeave","touchHandlers","onTouchStart","onTouchEnd","detect","MOUSE","TOUCH","Object"],"mappings":"qNAUAA,IAIYC,EAJNC,gBAIMD,EAAAA,0BAAAA,yCAERA,gBACAA,wCA0EAE,oBAQ8B,qCANd,0CACG,iCACNF,wBAAsBG,qCACrBF,mCACCA,mCACAA,OAGTG,EAAoBC,UAAO,GAC3BC,EAAYD,UAAO,GACnBE,EAAQF,WACRG,EAAgBH,SAAOH,GAEvBO,EAAQC,uBACTC,GACOC,GACAD,EAAME,UAGVD,EAAeE,EAAQH,GAASG,IAChCR,EAAUS,SAAU,EACpBR,EAAMQ,QAAUC,sBACRR,EAAcO,UACdH,EAAeJ,EAAcO,QAAQJ,GAASH,EAAcO,UAC5DX,EAAkBW,SAAU,IAEjCE,IAEP,CAACH,EAASF,EAAcK,IAGtBC,EAASR,uBACVC,GACOC,GACAD,EAAME,UAGNT,EAAkBW,QAClBH,EAAeO,EAASR,GAASQ,IAC1Bb,EAAUS,UAEjBH,EAAeQ,EAAST,GAASS,KAErChB,EAAkBW,SAAU,EAC5BT,EAAUS,SAAU,OACFM,IAAlBd,EAAMQ,SAAyBO,aAAaf,EAAMQ,UAEtD,CAACH,EAAcO,EAAUC,IAG7BG,8CAG0BF,IAAlBd,EAAMQ,SAAyBO,aAAaf,EAAMQ,WAEtD,IAGJQ,uBACIf,EAAcO,QAAUb,GACzB,CAACA,QAEEsB,EAAgB,CAClBC,YAAahB,EACbiB,UAAWR,EACXS,aAAcT,GAGZU,EAAgB,CAClBC,aAAcpB,EACdqB,WAAYZ,UAII,OAAbhB,EACD,GAEF6B,IAAW/B,wBAAsBgC,MAC/BR,EACAO,IAAW/B,wBAAsBiC,MACjCL,EACAM,iBAAKV,EAAkBI"}

dist/index.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["import { MouseEvent, MouseEventHandler, TouchEvent, TouchEventHandler, useCallback, useEffect, useRef } from 'react';\n\nconst noop = () => {};\n\nexport type LongPressEvent<Target = Element> = MouseEvent<Target> | TouchEvent<Target>;\nexport type LongPressCallback<Target = Element> = (event?: LongPressEvent<Target>) => void;\nexport enum LongPressDetectEvents {\n    BOTH = 'both',\n    MOUSE = 'mouse',\n    TOUCH = 'touch',\n}\n\nexport type LongPressResult<\n    Target,\n    Callback,\n    DetectType extends LongPressDetectEvents = LongPressDetectEvents.BOTH\n> = DetectType extends LongPressDetectEvents.BOTH\n    ? {\n          onMouseDown: MouseEventHandler<Target>;\n          onMouseUp: MouseEventHandler<Target>;\n          onMouseLeave: MouseEventHandler<Target>;\n          onTouchStart: TouchEventHandler<Target>;\n          onTouchEnd: TouchEventHandler<Target>;\n      }\n    : DetectType extends LongPressDetectEvents.MOUSE\n    ? {\n          onMouseDown: MouseEventHandler<Target>;\n          onMouseUp: MouseEventHandler<Target>;\n          onMouseLeave: MouseEventHandler<Target>;\n      }\n    : DetectType extends LongPressDetectEvents.TOUCH\n    ? {\n          onTouchStart: TouchEventHandler<Target>;\n          onTouchEnd: TouchEventHandler<Target>;\n      }\n    : never;\n\nexport interface LongPressOptions<Target = Element> {\n    threshold?: number;\n    captureEvent?: boolean;\n    detect?: LongPressDetectEvents;\n    onStart?: LongPressCallback<Target>;\n    onFinish?: LongPressCallback<Target>;\n    onCancel?: LongPressCallback<Target>;\n}\n\nexport function useLongPress<Target = Element>(callback: null, options?: LongPressOptions<Target>): {};\nexport function useLongPress<\n    Target = Element,\n    Callback extends LongPressCallback<Target> = LongPressCallback<Target>\n>(callback: Callback, options?: LongPressOptions<Target>): LongPressResult<Target, Callback>;\nexport function useLongPress<\n    Target = Element,\n    Callback extends LongPressCallback<Target> = LongPressCallback<Target>\n>(callback: Callback | null, options?: LongPressOptions<Target>): LongPressResult<Target, Callback> | {};\n/**\n * Detect click / tap and hold event\n *\n * @param callback <p>Function to call when long press event is detected (click or tap lasts for <i>threshold</i> amount of time or longer)<p>\n * @param options <ul>\n * <li><b>threshold</b> - Period of time that must elapse after detecting click or tap in order to trigger <i>callback</i></li>\n * <li><b>captureEvent</b> - If React Event will be supplied as first argument to all callbacks</li>\n * <li><b>detect</b> - Which type of events should be detected ('mouse' | 'touch' | 'both' )\n * <li><b>onStart</b> - Called right after detecting click / tap event (e.g. onMouseDown or onTouchStart)\n * <li><b>onFinish</b> - Called (if long press <u>was triggered</u>) on releasing click or tap (e.g. onMouseUp, onMouseLeave or onTouchEnd)\n * <li><b>onCancel</b> - Called (if long press <u>was <b>not</b> triggered</u>) on releasing click or tap (e.g. onMouseUp, onMouseLeave or onTouchEnd)\n * </ul>\n */\nexport function useLongPress<\n    Target = Element,\n    Callback extends LongPressCallback<Target> = LongPressCallback<Target>\n>(\n    callback: Callback | null,\n    {\n        threshold = 400,\n        captureEvent = false,\n        detect = LongPressDetectEvents.BOTH,\n        onStart = noop,\n        onFinish = noop,\n        onCancel = noop,\n    }: LongPressOptions<Target> = {}\n): LongPressResult<Target, Callback, typeof detect> | {} {\n    const isLongPressActive = useRef(false);\n    const isPressed = useRef(false);\n    const timer = useRef<NodeJS.Timeout>();\n    const savedCallback = useRef(callback);\n\n    const start = useCallback(\n        (event: LongPressEvent<Target>) => {\n            if (captureEvent) {\n                event.persist();\n            }\n            // When touched trigger onStart and start timer\n            captureEvent ? onStart(event) : onStart();\n            isPressed.current = true;\n            timer.current = setTimeout(() => {\n                if (savedCallback.current) {\n                    captureEvent ? savedCallback.current(event) : savedCallback.current();\n                    isLongPressActive.current = true;\n                }\n            }, threshold);\n        },\n        [onStart, captureEvent, threshold]\n    );\n\n    const cancel = useCallback(\n        (event: LongPressEvent<Target>) => {\n            if (captureEvent) {\n                event.persist();\n            }\n            // Trigger onFinish callback only if timer was active\n            if (isLongPressActive.current) {\n                captureEvent ? onFinish(event) : onFinish();\n            } else if (isPressed.current) {\n                // Otherwise if not active trigger onCancel\n                captureEvent ? onCancel(event) : onCancel();\n            }\n            isLongPressActive.current = false;\n            isPressed.current = false;\n            timer.current !== undefined && clearTimeout(timer.current);\n        },\n        [captureEvent, onFinish, onCancel]\n    );\n\n    useEffect(() => {\n        return () => {\n            // Clear timeout on unmount\n            timer.current !== undefined && clearTimeout(timer.current);\n        };\n    }, []);\n\n    useEffect(() => {\n        savedCallback.current = callback;\n    }, [callback]);\n\n    const mouseHandlers = {\n        onMouseDown: start as MouseEventHandler<Target>,\n        onMouseUp: cancel as MouseEventHandler<Target>,\n        onMouseLeave: cancel as MouseEventHandler<Target>,\n    };\n\n    const touchHandlers = {\n        onTouchStart: start as TouchEventHandler<Target>,\n        onTouchEnd: cancel as TouchEventHandler<Target>,\n    };\n\n    return callback === null\n        ? {}\n        : detect === LongPressDetectEvents.MOUSE\n        ? mouseHandlers\n        : detect === LongPressDetectEvents.TOUCH\n        ? touchHandlers\n        : { ...mouseHandlers, ...touchHandlers };\n}\n"],"names":["LongPressDetectEvents","noop","callback","BOTH","isLongPressActive","useRef","isPressed","timer","savedCallback","start","useCallback","event","captureEvent","persist","onStart","current","setTimeout","threshold","cancel","onFinish","onCancel","undefined","clearTimeout","useEffect","mouseHandlers","onMouseDown","onMouseUp","onMouseLeave","touchHandlers","onTouchStart","onTouchEnd","detect","MOUSE","TOUCH","Object"],"mappings":"IAMYA,qBAJNC,gBAIMD,EAAAA,gCAAAA,+CAERA,gBACAA,8CA+DAE,oBAQ8B,qCANd,0CACG,iCACNF,8BAAsBG,qCACrBF,mCACCA,mCACAA,OAGTG,EAAoBC,UAAO,GAC3BC,EAAYD,UAAO,GACnBE,EAAQF,WACRG,EAAgBH,SAAOH,GAEvBO,EAAQC,uBACTC,GACOC,GACAD,EAAME,UAGVD,EAAeE,EAAQH,GAASG,IAChCR,EAAUS,SAAU,EACpBR,EAAMQ,QAAUC,sBACRR,EAAcO,UACdH,EAAeJ,EAAcO,QAAQJ,GAASH,EAAcO,UAC5DX,EAAkBW,SAAU,IAEjCE,IAEP,CAACH,EAASF,EAAcK,IAGtBC,EAASR,uBACVC,GACOC,GACAD,EAAME,UAGNT,EAAkBW,QAClBH,EAAeO,EAASR,GAASQ,IAC1Bb,EAAUS,UAEjBH,EAAeQ,EAAST,GAASS,KAErChB,EAAkBW,SAAU,EAC5BT,EAAUS,SAAU,OACFM,IAAlBd,EAAMQ,SAAyBO,aAAaf,EAAMQ,UAEtD,CAACH,EAAcO,EAAUC,IAG7BG,8CAG0BF,IAAlBd,EAAMQ,SAAyBO,aAAaf,EAAMQ,WAEvD,IAEHQ,uBACIf,EAAcO,QAAUb,GACzB,CAACA,QAEEsB,EAAgB,CAClBC,YAAahB,EACbiB,UAAWR,EACXS,aAAcT,GAGZU,EAAgB,CAClBC,aAAcpB,EACdqB,WAAYZ,UAGI,OAAbhB,EACD,GACA6B,IAAW/B,8BAAsBgC,MACjCR,EACAO,IAAW/B,8BAAsBiC,MACjCL,EACAM,iBAAKV,EAAkBI"}
+{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["import {\n    MouseEvent,\n    MouseEventHandler,\n    TouchEvent,\n    TouchEventHandler,\n    useCallback,\n    useEffect,\n    useRef,\n} from 'react';\n\nconst noop = (): void => {};\n\nexport type LongPressEvent<Target = Element> = MouseEvent<Target> | TouchEvent<Target>;\nexport type LongPressCallback<Target = Element> = (event?: LongPressEvent<Target>) => void;\nexport enum LongPressDetectEvents {\n    BOTH = 'both',\n    MOUSE = 'mouse',\n    TOUCH = 'touch',\n}\n\nexport type LongPressResult<\n    Target,\n    Callback,\n    DetectType extends LongPressDetectEvents = LongPressDetectEvents.BOTH\n> = DetectType extends LongPressDetectEvents.BOTH\n    ? {\n          onMouseDown: MouseEventHandler<Target>;\n          onMouseUp: MouseEventHandler<Target>;\n          onMouseLeave: MouseEventHandler<Target>;\n          onTouchStart: TouchEventHandler<Target>;\n          onTouchEnd: TouchEventHandler<Target>;\n      }\n    : DetectType extends LongPressDetectEvents.MOUSE\n    ? {\n          onMouseDown: MouseEventHandler<Target>;\n          onMouseUp: MouseEventHandler<Target>;\n          onMouseLeave: MouseEventHandler<Target>;\n      }\n    : DetectType extends LongPressDetectEvents.TOUCH\n    ? {\n          onTouchStart: TouchEventHandler<Target>;\n          onTouchEnd: TouchEventHandler<Target>;\n      }\n    : never;\n\nexport interface LongPressOptions<Target = Element> {\n    threshold?: number;\n    captureEvent?: boolean;\n    detect?: LongPressDetectEvents;\n    onStart?: LongPressCallback<Target>;\n    onFinish?: LongPressCallback<Target>;\n    onCancel?: LongPressCallback<Target>;\n}\n\nexport function useLongPress<Target = Element>(callback: null, options?: LongPressOptions<Target>): {};\nexport function useLongPress<\n    Target = Element,\n    Callback extends LongPressCallback<Target> = LongPressCallback<Target>\n>(callback: Callback, options?: LongPressOptions<Target>): LongPressResult<Target, Callback>;\nexport function useLongPress<\n    Target = Element,\n    Callback extends LongPressCallback<Target> = LongPressCallback<Target>\n>(callback: Callback | null, options?: LongPressOptions<Target>): LongPressResult<Target, Callback> | {};\n/**\n * Detect click / tap and hold event\n *\n * @param callback <p>\n *   Function to call when long press event is detected\n *   (click or tap lasts for <i>threshold</i> amount of time or longer)\n *   </p>\n * @param options <ul>\n * <li><b>threshold</b>\n * - Period of time that must elapse after detecting click or tap in order to trigger <i>callback</i></li>\n * <li><b>captureEvent</b>\n * - If React Event will be supplied as first argument to all callbacks</li>\n * <li><b>detect</b>\n * - Which type of events should be detected ('mouse' | 'touch' | 'both' )\n * <li><b>onStart</b>\n * - Called right after detecting click / tap event (e.g. onMouseDown or onTouchStart)\n * <li><b>onFinish</b>\n * - Called (if long press <u>was triggered</u>)\n * on releasing click or tap (e.g. onMouseUp, onMouseLeave or onTouchEnd)\n * <li><b>onCancel</b>\n * - Called (if long press <u>was <b>not</b> triggered</u>)\n * on releasing click or tap (e.g. onMouseUp, onMouseLeave or onTouchEnd)\n * </ul>\n */\nexport function useLongPress<\n    Target = Element,\n    Callback extends LongPressCallback<Target> = LongPressCallback<Target>\n>(\n    callback: Callback | null,\n    {\n        threshold = 400,\n        captureEvent = false,\n        detect = LongPressDetectEvents.BOTH,\n        onStart = noop,\n        onFinish = noop,\n        onCancel = noop,\n    }: LongPressOptions<Target> = {}\n): LongPressResult<Target, Callback, typeof detect> | {} {\n    const isLongPressActive = useRef(false);\n    const isPressed = useRef(false);\n    const timer = useRef<NodeJS.Timeout>();\n    const savedCallback = useRef(callback);\n\n    const start = useCallback(\n        (event: LongPressEvent<Target>) => {\n            if (captureEvent) {\n                event.persist();\n            }\n            // When touched trigger onStart and start timer\n            captureEvent ? onStart(event) : onStart();\n            isPressed.current = true;\n            timer.current = setTimeout(() => {\n                if (savedCallback.current) {\n                    captureEvent ? savedCallback.current(event) : savedCallback.current();\n                    isLongPressActive.current = true;\n                }\n            }, threshold);\n        },\n        [onStart, captureEvent, threshold]\n    );\n\n    const cancel = useCallback(\n        (event: LongPressEvent<Target>) => {\n            if (captureEvent) {\n                event.persist();\n            }\n            // Trigger onFinish callback only if timer was active\n            if (isLongPressActive.current) {\n                captureEvent ? onFinish(event) : onFinish();\n            } else if (isPressed.current) {\n                // Otherwise if not active trigger onCancel\n                captureEvent ? onCancel(event) : onCancel();\n            }\n            isLongPressActive.current = false;\n            isPressed.current = false;\n            timer.current !== undefined && clearTimeout(timer.current);\n        },\n        [captureEvent, onFinish, onCancel]\n    );\n\n    useEffect(\n        () => (): void => {\n            // Clear timeout on unmount\n            timer.current !== undefined && clearTimeout(timer.current);\n        },\n        []\n    );\n\n    useEffect(() => {\n        savedCallback.current = callback;\n    }, [callback]);\n\n    const mouseHandlers = {\n        onMouseDown: start as MouseEventHandler<Target>,\n        onMouseUp: cancel as MouseEventHandler<Target>,\n        onMouseLeave: cancel as MouseEventHandler<Target>,\n    };\n\n    const touchHandlers = {\n        onTouchStart: start as TouchEventHandler<Target>,\n        onTouchEnd: cancel as TouchEventHandler<Target>,\n    };\n\n    // eslint-disable-next-line no-nested-ternary\n    return callback === null\n        ? {}\n        : // eslint-disable-next-line no-nested-ternary\n        detect === LongPressDetectEvents.MOUSE\n        ? mouseHandlers\n        : detect === LongPressDetectEvents.TOUCH\n        ? touchHandlers\n        : { ...mouseHandlers, ...touchHandlers };\n}\n"],"names":["LongPressDetectEvents","noop","callback","BOTH","isLongPressActive","useRef","isPressed","timer","savedCallback","start","useCallback","event","captureEvent","persist","onStart","current","setTimeout","threshold","cancel","onFinish","onCancel","undefined","clearTimeout","useEffect","mouseHandlers","onMouseDown","onMouseUp","onMouseLeave","touchHandlers","onTouchStart","onTouchEnd","detect","MOUSE","TOUCH","Object"],"mappings":"IAcYA,qBAJNC,gBAIMD,EAAAA,gCAAAA,+CAERA,gBACAA,8CA0EAE,oBAQ8B,qCANd,0CACG,iCACNF,8BAAsBG,qCACrBF,mCACCA,mCACAA,OAGTG,EAAoBC,UAAO,GAC3BC,EAAYD,UAAO,GACnBE,EAAQF,WACRG,EAAgBH,SAAOH,GAEvBO,EAAQC,uBACTC,GACOC,GACAD,EAAME,UAGVD,EAAeE,EAAQH,GAASG,IAChCR,EAAUS,SAAU,EACpBR,EAAMQ,QAAUC,sBACRR,EAAcO,UACdH,EAAeJ,EAAcO,QAAQJ,GAASH,EAAcO,UAC5DX,EAAkBW,SAAU,IAEjCE,IAEP,CAACH,EAASF,EAAcK,IAGtBC,EAASR,uBACVC,GACOC,GACAD,EAAME,UAGNT,EAAkBW,QAClBH,EAAeO,EAASR,GAASQ,IAC1Bb,EAAUS,UAEjBH,EAAeQ,EAAST,GAASS,KAErChB,EAAkBW,SAAU,EAC5BT,EAAUS,SAAU,OACFM,IAAlBd,EAAMQ,SAAyBO,aAAaf,EAAMQ,UAEtD,CAACH,EAAcO,EAAUC,IAG7BG,8CAG0BF,IAAlBd,EAAMQ,SAAyBO,aAAaf,EAAMQ,WAEtD,IAGJQ,uBACIf,EAAcO,QAAUb,GACzB,CAACA,QAEEsB,EAAgB,CAClBC,YAAahB,EACbiB,UAAWR,EACXS,aAAcT,GAGZU,EAAgB,CAClBC,aAAcpB,EACdqB,WAAYZ,UAII,OAAbhB,EACD,GAEF6B,IAAW/B,8BAAsBgC,MAC/BR,EACAO,IAAW/B,8BAAsBiC,MACjCL,EACAM,iBAAKV,EAAkBI"}

package.json

 {
     "name": "use-long-press",
-    "version": "1.0.2",
+    "version": "1.0.3",
     "description": "React hook for detecting click (or tap) and hold event. Easy to use, highly customizable options, thoroughly tested.",
@@ -15,5 +15,21 @@ "author": "minwork",
     "repository": "https://github.com/minwork/use-long-press",
-    "main": "dist/index.js",
-    "source": "src/index.ts",
-    "types": "dist/index.d.ts",
+    "main": "./dist/index.js",
+    "browser": "./dist/index.umd.js",
+    "umd:main": "./dist/index.umd.js",
+    "jsnext:main": "./dist/index.modern.js",
+    "module": "./dist/index.module.js",
+    "source": "./src/index.ts",
+    "syntax": {
+        "esmodules": "./dist/index.modern.js"
+    },
+    "types": "./dist/index.d.ts",
+    "typings": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "browser": "./dist/index.module.js",
+            "umd": "./dist/index.umd.js",
+            "import": "./dist/index.module.js",
+            "require": "./dist/index.js"
+        }
+    },
     "files": [
@@ -27,5 +43,7 @@ "dist/*"
     "scripts": {
-        "build": "rimraf dist/* && microbundle -f cjs --tsconfig tsconfig.build.json && rimraf dist/*test*",
+        "build": "rimraf dist/* && microbundle --jsx React.createElement --external react --name useLongPress --output dist/index.js",
+        "deploy": "yarn test && yarn build && npm publish",
         "test": "jest",
-        "start": "microbundle watch"
+        "start": "microbundle watch",
+        "lint": "eslint src tests --ext .ts,.tsx"
     },
@@ -59,2 +77,3 @@ "babel": {
         "@types/react": "^16.7.22",
+        "@typescript-eslint/eslint-plugin": "^2.29.0",
         "babel-preset-react": "^6.24.1",
@@ -64,2 +83,11 @@ "cross-env": "^5.2.0",
         "enzyme-adapter-react-16": "^1.15.2",
+        "eslint": "^6.8.0",
+        "eslint-config-airbnb": "^18.1.0",
+        "eslint-config-airbnb-typescript": "^7.2.1",
+        "eslint-config-prettier": "^6.11.0",
+        "eslint-plugin-import": "2.20.1",
+        "eslint-plugin-jsx-a11y": "6.2.3",
+        "eslint-plugin-prettier": "^3.1.3",
+        "eslint-plugin-react": "7.19.0",
+        "eslint-plugin-react-hooks": "2.5.0",
         "jest": "^24.9.0",
@@ -66,0 +94,0 @@ "microbundle": "^0.11.0",

README.md

@@ -56,3 +56,3 @@ # React Long Press Hook :point_down:
 ```typescript
-useLongPress(callback: (event?: MouseEvent | TouchEvent) => void | null, options?: LongPressOptions);
+useLongPress(callback: ((event?: MouseEvent | TouchEvent) => void) | null, options?: LongPressOptions);
 ```
@@ -59,0 +59,0 @@ ### Options

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

35604

116.31%

Number of package files

10

66.67%

Lines of code

52

33.33%

Worsened metrics

Dev dependency count

35

40%

Number of low quality alerts

4

100%

No dependency changes