Function useIsDroppingFiles

packages/rooks/src/hooks/useIsDroppingFiles.ts:15–100

(
  isTargetWindow = false
)

): [CallbackRef<HTMLElement | null>, boolean];

function useIsDroppingFiles(
  isTargetWindow = false
): boolean | [CallbackRef<HTMLElement | null>, boolean] {
  const [targetNode, setTargetNode] = useState<HTMLElementOrNull>(null);

  const ref = useCallback((node: HTMLElement | null) => {
    setTargetNode(node);
  }, []);
  const [isDroppingFiles, setIsDroppingFiles] = useState(false);

  const handleDragEnter = useCallback(
    (e: DragEvent) => {
      e.preventDefault();
      if (e.dataTransfer?.types.includes("Files")) {
        if (!isDroppingFiles) {
          setIsDroppingFiles(true);
        }
      } else {
        setIsDroppingFiles(false);
      }
    },
    [isDroppingFiles]
  );

  const handleDragOver = useCallback(
    (e: DragEvent) => {
      e.preventDefault();
      if (e.dataTransfer?.types.includes("Files")) {
        if (!isDroppingFiles) {
          setIsDroppingFiles(true);
        }
      } else {
        setIsDroppingFiles(false);
      }
    },
    [isDroppingFiles]
  );

  const handleDragLeave = useCallback((e: DragEvent) => {
    e.preventDefault();
    setIsDroppingFiles(false);
  }, []);

  const handleDrop = useCallback((e: DragEvent) => {
    e.preventDefault();
    setIsDroppingFiles(false);
  }, []);

  const freshHandleDragEnter = useFreshCallback(handleDragEnter);
  const freshHandleDragOver = useFreshCallback(handleDragOver);
  const freshHandleDragLeave = useFreshCallback(handleDragLeave);
  const freshHandleDrop = useFreshCallback(handleDrop);

  useEffect(() => {
    const target = isTargetWindow ? window : targetNode;

    if (target) {
      target.addEventListener("dragenter", freshHandleDragEnter as EventListener);