summaryrefslogtreecommitdiff
path: root/apps/web/src/components/ui/use-overlay-open-change.ts
blob: dbc46cfcfa6885f5fcb536d03d3c254f92c72f13 (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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
import { useCallback, useEffect, useId, useRef } from "react";
import { useKeybindingsStore } from "@/stores/keybindings-store";

export function useOverlayOpenChange({
	open,
	onOpenChange,
}: {
	open?: boolean;
	onOpenChange?: (open: boolean) => void;
}) {
	const { openOverlay, closeOverlay } = useKeybindingsStore();
	const isTrackedRef = useRef(false);
	const isControlled = typeof open === "boolean";
	const overlayId = useId();

	useEffect(() => {
		if (!isControlled) return;

		if (open && !isTrackedRef.current) {
			openOverlay(overlayId);
			isTrackedRef.current = true;
			return;
		}

		if (!open && isTrackedRef.current) {
			closeOverlay(overlayId);
			isTrackedRef.current = false;
		}
	}, [closeOverlay, isControlled, open, openOverlay, overlayId]);

	useEffect(() => {
		return () => {
			if (!isTrackedRef.current) return;
			closeOverlay(overlayId);
			isTrackedRef.current = false;
		};
	}, [closeOverlay, overlayId]);

	return useCallback(
		(nextOpen: boolean) => {
			if (!isControlled) {
				if (nextOpen && !isTrackedRef.current) {
					openOverlay(overlayId);
					isTrackedRef.current = true;
				} else if (!nextOpen && isTrackedRef.current) {
					closeOverlay(overlayId);
					isTrackedRef.current = false;
				}
			}

			onOpenChange?.(nextOpen);
		},
		[closeOverlay, isControlled, onOpenChange, openOverlay, overlayId],
	);
}