add dropzone of OpenAPI files

2020-10-22 22:34:39 +02:00
parent 14f983828b
commit 57d4fa7719
2 changed files with 120 additions and 25 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;