more fixes in 1.2.0

2023-01-25 18:45:02 +05:30
parent afcf95ef81
commit 0a76034083
8 changed files with 3131 additions and 1 deletions
@@ -0,0 +1,84 @@
+import React, { useRef, useState } from "react";
+import { useEffect } from "react";
+import BackupIcon from "@material-ui/icons/Backup";
+
+const dragOverStyle = {
+  backgroundColor: "rgba(0,0,0,0.8)",
+  border: "5px dashed white",
+  borderRadius: "8px",
+  width: "100%",
+  height: "100%",
+  position: "absolute",
+  overflow: "hidden",
+  zIndex: 100,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+};
+
+const Dropzone = ({ children, style, onDrop }) => {
+  const dropzoneRef = useRef(null);
+  const [dragging, setDragging] = useState(false);
+
+  let dragCounter = 0;
+
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const handleDragEnter = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounter++;
+    if (e.dataTransfer.items && e.dataTransfer.items.length > 0)
+      setDragging(true);
+  };
+
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounter--;
+    if (dragCounter === 0) setDragging(false);
+  };
+
+  const handleDrop = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragging(false);
+    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+      onDrop(e);
+      e.dataTransfer.clearData();
+      dragCounter = 0;
+    }
+  };
+
+  useEffect(() => {
+    if (!dropzoneRef.current) return;
+
+    dropzoneRef.current.addEventListener("dragover", handleDragOver);
+    dropzoneRef.current.addEventListener("dragenter", handleDragEnter);
+    dropzoneRef.current.addEventListener("dragleave", handleDragLeave);
+    dropzoneRef.current.addEventListener("drop", handleDrop);
+
+    return () => {
+      dropzoneRef.current.removeEventListener("dragover", handleDragOver);
+      dropzoneRef.current.removeEventListener("dragenter", handleDragEnter);
+      dropzoneRef.current.removeEventListener("dragleave", handleDragLeave);
+      dropzoneRef.current.removeEventListener("drop", handleDrop);
+    };
+  }, [dropzoneRef]);
+
+  return (
+    <div ref={dropzoneRef} style={{ position: "relative", ...style }}>
+      {dragging && (
+        <div style={dragOverStyle}>
+          <BackupIcon fontSize="large" />
+        </div>
+      )}
+      {children}
+    </div>
+  );
+};
+
+export default Dropzone;