From acc355cfa4843202fbfc0d2adec0e444d34b2b5b Mon Sep 17 00:00:00 2001
From: streamich <streamich@gmail.com>
Date: Wed, 27 Mar 2019 19:57:18 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20track=20"over"=20state=20?=
 =?UTF-8?q?better=20in=20useDrop=20hook?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/useDrop.ts | 35 +++++++++++++++++------------------
 1 file changed, 17 insertions(+), 18 deletions(-)

diff --git a/src/useDrop.ts b/src/useDrop.ts
index 352bcf83..a52c37e2 100644
--- a/src/useDrop.ts
+++ b/src/useDrop.ts
@@ -51,7 +51,7 @@ const createProcess = (options: DropAreaOptions, mounted: React.RefObject<boolea
   }
 };
 
-const useDrop = (options: DropAreaOptions = {}): DropAreaState => {
+const useDrop = (options: DropAreaOptions = {}, args = []): DropAreaState => {
   const {onFiles, onText, onUri} = options;
   const mounted = useRefMounted();
   const [over, setOverRaw] = useState<boolean>(false);
@@ -61,6 +61,7 @@ const useDrop = (options: DropAreaOptions = {}): DropAreaState => {
   useEffect(() => {
     const onDragOver = (event) => {
       event.preventDefault();
+      setOver(true);
     };
 
     const onDragEnter = (event) => {
@@ -69,7 +70,7 @@ const useDrop = (options: DropAreaOptions = {}): DropAreaState => {
     };
 
     const onDragLeave = () => {
-      setOver(true);
+      setOver(false);
     };
 
     const onDragExit = () => {
@@ -86,25 +87,23 @@ const useDrop = (options: DropAreaOptions = {}): DropAreaState => {
       process(event.clipboardData, event);
     };
 
-    window.addEventListener('dragover', onDragOver);
-    window.addEventListener('dragenter', onDragEnter);
-    window.addEventListener('dragleave', onDragLeave);
-    window.addEventListener('dragexit', onDragExit);
-    window.addEventListener('drop', onDrop);
-
-    if (onText) {
-      window.addEventListener('paste', onPaste);
-    }
+    document.addEventListener('dragover', onDragOver);
+    document.addEventListener('dragenter', onDragEnter);
+    document.addEventListener('dragleave', onDragLeave);
+    document.addEventListener('dragexit', onDragExit);
+    document.addEventListener('drop', onDrop);
+    if (onText)
+      document.addEventListener('paste', onPaste);
 
     return () => {
-      window.removeEventListener('dragover', onDragOver);
-      window.removeEventListener('dragenter', onDragEnter);
-      window.removeEventListener('dragleave', onDragLeave);
-      window.removeEventListener('dragexit', onDragExit);
-      window.removeEventListener('drop', onDrop);
-      window.removeEventListener('paste', onPaste);
+      document.removeEventListener('dragover', onDragOver);
+      document.removeEventListener('dragenter', onDragEnter);
+      document.removeEventListener('dragleave', onDragLeave);
+      document.removeEventListener('dragexit', onDragExit);
+      document.removeEventListener('drop', onDrop);
+      document.removeEventListener('paste', onPaste);
     };
-  }, [process]);
+  }, [process, ...args]);
 
   return {over};
 };