first commit

common/resources/client/ui/interactions/dnd/use-drag-monitor.ts

@@ -0,0 +1,27 @@
+import {InteractableEvent} from '../interactable-event';
+import {useEffect, useId, useRef} from 'react';
+import {dragMonitors, DragSessionStatus} from './drag-state';
+import {ConnectedDraggable} from './use-draggable';
+
+export interface DragMonitor {
+  type: string;
+  onDragStart?: (e: InteractableEvent, dragTarget: ConnectedDraggable) => void;
+  onDragMove?: (e: InteractableEvent, dragTarget: ConnectedDraggable) => void;
+  onDragEnd?: (
+    e: InteractableEvent,
+    dragTarget: ConnectedDraggable,
+    status: DragSessionStatus
+  ) => void;
+}
+
+export function useDragMonitor(monitor: DragMonitor) {
+  const monitorRef = useRef(monitor);
+  const id = useId();
+
+  useEffect(() => {
+    dragMonitors.set(id, monitorRef.current);
+    return () => {
+      dragMonitors.delete(id);
+    };
+  }, [id]);
+}