summaryrefslogtreecommitdiff
path: root/apps/web/src/components/editor/timeline/timeline-wheel-handler.tsx
blob: 8036b96ccd1000a425d0717a21866091e4e89740 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import { useEffect } from "react";

export interface TimelineWheelHandlerProps {
	timelineRef: React.RefObject<HTMLDivElement>;
	isInTimeline: boolean;
	handleWheel: (e: React.WheelEvent) => void;
}

export function useTimelineWheelHandler({
	timelineRef,
	isInTimeline,
	handleWheel,
}: TimelineWheelHandlerProps) {
	useEffect(() => {
		const timelineContainer = timelineRef.current;
		if (!timelineContainer || !isInTimeline) return;

		const handleWheelCapture = (e: WheelEvent) => {
			handleWheel(e as any);
		};

		timelineContainer.addEventListener("wheel", handleWheelCapture, {
			passive: false,
		});

		return () => {
			timelineContainer.removeEventListener("wheel", handleWheelCapture);
		};
	}, [handleWheel, isInTimeline, timelineRef]);

	return null;
}