dunkirk.sh
pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
1import { useEffect, useState } from "react";
2import type { DragEvent, ReactNode } from "react";
3
4interface FileDropHandlerProps {
5 children: ReactNode;
6 className: string;
7 onDrop: (event: DragEvent<HTMLDivElement>) => void;
8 onDraggingChange: (isDragging: boolean) => void;
9}
10
11export function FileDropHandler(props: FileDropHandlerProps) {
12 const [dragging, setDragging] = useState(false);
13
14 const handleDragEnter = (event: DragEvent<HTMLDivElement>) => {
15 event.preventDefault();
16 setDragging(true);
17 };
18
19 const handleDragLeave = (event: DragEvent<HTMLDivElement>) => {
20 if (!event.currentTarget.contains(event.relatedTarget as Node)) {
21 setDragging(false);
22 }
23 };
24
25 const handleDragOver = (event: DragEvent<HTMLDivElement>) => {
26 event.preventDefault();
27 };
28
29 const handleDrop = (event: DragEvent<HTMLDivElement>) => {
30 event.preventDefault();
31 setDragging(false);
32
33 props.onDrop(event);
34 };
35
36 useEffect(() => {
37 props.onDraggingChange(dragging);
38 }, [dragging, props]);
39
40 return (
41 <div
42 onDragEnter={handleDragEnter}
43 onDragLeave={handleDragLeave}
44 onDragOver={handleDragOver}
45 onDrop={handleDrop}
46 className={props.className}
47 >
48 {props.children}
49 </div>
50 );
51}