import { useCallback, useRef } from 'react'; var isTouchEvent = function (ev) { return 'touches' in ev; }; var preventDefault = function (ev) { if (!isTouchEvent(ev)) return; if (ev.touches.length < 2 && ev.preventDefault) { ev.preventDefault(); } }; var useLongPress = function (callback, _a) { var _b = _a === void 0 ? {} : _a, _c = _b.isPreventDefault, isPreventDefault = _c === void 0 ? true : _c, _d = _b.delay, delay = _d === void 0 ? 300 : _d; var timeout = useRef(); var target = useRef(); var start = useCallback(function (event) { // prevent ghost click on mobile devices if (isPreventDefault && event.target) { event.target.addEventListener('touchend', preventDefault, { passive: false }); target.current = event.target; } timeout.current = setTimeout(function () { return callback(event); }, delay); }, [callback, delay, isPreventDefault]); var clear = useCallback(function () { // clearTimeout and removeEventListener timeout.current && clearTimeout(timeout.current); if (isPreventDefault && target.current) { target.current.removeEventListener('touchend', preventDefault); } }, [isPreventDefault]); return { onMouseDown: function (e) { return start(e); }, onTouchStart: function (e) { return start(e); }, onMouseUp: clear, onMouseLeave: clear, onTouchEnd: clear, }; }; export default useLongPress;