init

Bin

2025-12-16 9e0b2ba2c317b1a86212f24cbae3195ad1f3dbfa

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
import { type MutableRefObject, useEffect } from "react";
 
interface Handlers<T extends HTMLElement = HTMLElement, D = any> {
  elementRef: MutableRefObject<T | undefined>;
  disabled?: boolean;
  capture?: boolean;
  passive?: boolean;
  onMouseDown?: (e: MouseEvent) => D;
  onMouseMove?: (e: MouseEvent, data?: D) => void;
  onMouseUp?: (e: MouseEvent, data?: D) => void;
  onUnmount?: () => void;
}
 
export const useDrag = <EL extends HTMLElement = HTMLElement, D = any>(options: Handlers<EL, D>, deps: any[] = []) => {
  useEffect(() => {
    const eventOptions = {
      capture: options.capture,
      passive: options.passive,
    };
    const element = options.elementRef.current;
 
    const onMouseDown = (e: MouseEvent) => {
      if (options.disabled) return;
      if (e.defaultPrevented) return;
 
      const result = options.onMouseDown?.(e);
 
      const onMouseMove = (e: MouseEvent) => {
        options.onMouseMove?.(e, result);
      };
 
      const onMouseUp = (e: MouseEvent) => {
        document.removeEventListener("mousemove", onMouseMove, eventOptions);
        document.removeEventListener("mouseup", onMouseUp);
        options.onMouseUp?.(e, result);
      };
 
      document.addEventListener("mousemove", onMouseMove, eventOptions);
      document.addEventListener("mouseup", onMouseUp);
    };
 
    element?.addEventListener("mousedown", onMouseDown);
 
    return () => {
      options.onUnmount?.();
      element?.removeEventListener("mousedown", onMouseDown);
    };
  }, deps);
};