bitforum-frontend/hooks/useDragScroll.ts

import { useRef, useCallback, MouseEvent } from 'react';

export default function useDragScroll<T extends HTMLElement = HTMLElement>() {
	const ref = useRef<T>(null);
	const isDragging = useRef(false);
	const startX = useRef(0);
	const scrollLeft = useRef(0);

	const onMouseDown = useCallback((e: MouseEvent) => {
		const el = ref.current;
		if (!el) return;

		isDragging.current = true;
		startX.current = e.pageX - el.offsetLeft;
		scrollLeft.current = el.scrollLeft;
		el.style.cursor = 'grabbing';
	}, []);

	const onMouseMove = useCallback((e: MouseEvent) => {
		if (!isDragging.current) return;
		const el = ref.current;
		if (!el) return;

		e.preventDefault();
		const x = e.pageX - el.offsetLeft;
		const walk = x - startX.current;
		el.scrollLeft = scrollLeft.current - walk;
	}, []);

	const onMouseUp = useCallback(() => {
		isDragging.current = false;
		const el = ref.current;
		if (el) {
			el.style.cursor = 'grab';
		}
	}, []);

	const onMouseLeave = useCallback(() => {
		isDragging.current = false;
		const el = ref.current;
		if (el) {
			el.style.cursor = 'grab';
		}
	}, []);

	return {
		ref,
		onMouseDown,
		onMouseMove,
		onMouseUp,
		onMouseLeave,
	};
}