@mantine/hooks/esm/use-long-press/use-long-press.mjs

A collection of 50+ hooks for state and UI management

"use client";
import { useEffect, useMemo, useRef } from "react";
//#region packages/@mantine/hooks/src/use-long-press/use-long-press.ts
function useLongPress(onLongPress, options = {}) {
	const { threshold = 400, onStart, onFinish, onCancel } = options;
	const isLongPressActive = useRef(false);
	const isPressed = useRef(false);
	const timeout = useRef(-1);
	useEffect(() => () => window.clearTimeout(timeout.current), []);
	return useMemo(() => {
		if (typeof onLongPress !== "function") return {};
		const start = (event) => {
			if (!isMouseEvent(event) && !isTouchEvent(event)) return;
			if (onStart) onStart(event);
			isPressed.current = true;
			timeout.current = window.setTimeout(() => {
				onLongPress(event);
				isLongPressActive.current = true;
			}, threshold);
		};
		const cancel = (event) => {
			if (!isMouseEvent(event) && !isTouchEvent(event)) return;
			if (isLongPressActive.current) {
				if (onFinish) onFinish(event);
			} else if (isPressed.current) {
				if (onCancel) onCancel(event);
			}
			isLongPressActive.current = false;
			isPressed.current = false;
			if (timeout.current) window.clearTimeout(timeout.current);
		};
		return {
			onMouseDown: start,
			onMouseUp: cancel,
			onMouseLeave: cancel,
			onTouchStart: start,
			onTouchEnd: cancel
		};
	}, [
		onLongPress,
		threshold,
		onCancel,
		onFinish,
		onStart
	]);
}
function isTouchEvent(event) {
	return window.TouchEvent ? event.nativeEvent instanceof TouchEvent : "touches" in event.nativeEvent;
}
function isMouseEvent(event) {
	return event.nativeEvent instanceof MouseEvent;
}
//#endregion
export { useLongPress };

//# sourceMappingURL=use-long-press.mjs.map