Merge pull request #53 from zkemail/drag-n-drop

Added drag and drop feature

src/components/DragAndDropTextBox.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import styled from 'styled-components';
+import { useDragAndDrop } from '../hooks/useDragAndDrop';
+
+const DragAndDropTextBoxWrapper = styled.div`
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	border: 2px dashed #ccc;
+	padding: 20px;
+`;
+
+type Props = {
+	onFileDrop: (file: File) => void;
+};
+
+const DragAndDropTextBox: React.FC<Props> = ({onFileDrop}) => {
+    const {
+		dragging,
+		handleDragEnter,
+		handleDragLeave,
+		handleDragOver,
+		handleDrop,
+		handleDragEnd,
+	} = useDragAndDrop();
+
+	return (
+		<DragAndDropTextBoxWrapper
+			onDragEnter={handleDragEnter}
+			onDragLeave={handleDragLeave}
+			onDragOver={handleDragOver}
+			onDragEnd={handleDragEnd}
+			onDrop={(e) => handleDrop(e, onFileDrop)}
+		>
+			{dragging ? (
+				<div>Drop here</div>
+			) : (
+				<div>Drop .eml file here</div>
+			)}
+		</DragAndDropTextBoxWrapper>
+	);
+};
+
+export default DragAndDropTextBox;

src/hooks/useDragAndDrop.ts

@@ -0,0 +1,51 @@
+import React, { useCallback, useState } from "react";
+
+export const useDragAndDrop = () => {
+  const [dragging, setDragging] = useState(false);
+
+  const handleDragEnter = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragging(true);
+  }, []);
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragging(false);
+  }, []);
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent, onDrop: (file: File) => void) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setDragging(false);
+
+      const files = e.dataTransfer.files;
+
+      if (files.length > 0) {
+        onDrop(files[0]);
+      }
+    },
+    []
+  );
+
+  const handleDragEnd = useCallback((e: React.DragEvent) => {
+		e.preventDefault();
+		setDragging(false);
+  }, []);
+
+  return {
+    dragging,
+    handleDragEnter,
+    handleDragLeave,
+    handleDragOver,
+    handleDrop,
+    handleDragEnd,
+  };
+};