@yamada-ui/react/dist/esm/hooks/use-pan-event/index.js

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


import { useUnmountEffect } from "../../utils/effect.js";
import { mergeRefs, useCallbackRef } from "../../utils/ref.js";
import { utils_exports } from "../../utils/index.js";
import { useEnvironment } from "../../core/system/environment-provider.js";
import { useCallback, useRef } from "react";

//#region src/hooks/use-pan-event/index.ts
const usePanEvent = ({ threshold = 3,...rest } = {}) => {
	const { getWindow } = useEnvironment();
	const onStart = useCallbackRef(rest.onStart);
	const onMove = useCallbackRef(rest.onMove);
	const onEnd = useCallbackRef(rest.onEnd);
	const latestPoint = useRef(null);
	const unsubscribe = useRef([]);
	const ref = useRef(null);
	const cleanup = useCallback(() => {
		unsubscribe.current.forEach((unsubscribe$1) => unsubscribe$1());
		latestPoint.current = null;
		unsubscribe.current = [];
	}, []);
	const shouldMove = useCallback((point) => {
		if (threshold === 0) return true;
		if (!latestPoint.current) return true;
		return Math.sqrt(Math.pow(point.x - latestPoint.current.x, 2) + Math.pow(point.y - latestPoint.current.y, 2)) >= threshold;
	}, [threshold]);
	useUnmountEffect(() => {
		cleanup();
	});
	return [ref, useCallback((props = {}) => {
		return {
			...props,
			ref: mergeRefs(ref, props.ref),
			onPointerDown: (0, utils_exports.handlerAll)(props.onPointerDown, (ev) => {
				const win = ev.nativeEvent.view ?? getWindow();
				if (!win) return;
				if ((0, utils_exports.isMultiTouchEvent)(ev.nativeEvent)) return;
				if (!ref.current) return;
				ev.preventDefault();
				const point = (0, utils_exports.getEventPoint)(ev.nativeEvent);
				const rect = ref.current.getBoundingClientRect();
				onStart(ev.nativeEvent, point, rect);
				latestPoint.current = point;
				unsubscribe.current.push((0, utils_exports.addDomEvent)(win, "pointermove", (ev$1) => {
					if (!ref.current) return;
					const point$1 = (0, utils_exports.getEventPoint)(ev$1);
					const rect$1 = ref.current.getBoundingClientRect();
					if (!shouldMove(point$1)) return;
					latestPoint.current = point$1;
					onMove(ev$1, point$1, rect$1);
				}));
				unsubscribe.current.push((0, utils_exports.addDomEvent)(win, "pointerup", (ev$1) => {
					if (!ref.current) return;
					cleanup();
					onEnd(ev$1, (0, utils_exports.getEventPoint)(ev$1), ref.current.getBoundingClientRect());
				}));
				unsubscribe.current.push((0, utils_exports.addDomEvent)(win, "pointercancel", (ev$1) => {
					if (!ref.current) return;
					cleanup();
					onEnd(ev$1, (0, utils_exports.getEventPoint)(ev$1), ref.current.getBoundingClientRect());
				}));
			})
		};
	}, [
		cleanup,
		getWindow,
		onEnd,
		onMove,
		onStart,
		shouldMove
	])];
};

//#endregion
export { usePanEvent };
//# sourceMappingURL=index.js.map