main 🧊 change type for use drop zone

Author: debabin

packages/core/src/bundle/hooks/useDropZone/useDropZone.js

@@ -118,19 +118,15 @@ export const useDropZone = (...params) => {
       }
       if (event.type === 'dragover') options.onOver?.(event);
     };
-    const onDrop = (event) => onEvent(event);
-    const onDragOver = (event) => onEvent(event);
-    const onDragEnter = (event) => onEvent(event);
-    const onDragLeave = (event) => onEvent(event);
-    element.addEventListener('dragenter', onDragEnter);
-    element.addEventListener('dragover', onDragOver);
-    element.addEventListener('dragleave', onDragLeave);
-    element.addEventListener('drop', onDrop);
+    element.addEventListener('dragenter', onEvent);
+    element.addEventListener('dragover', onEvent);
+    element.addEventListener('dragleave', onEvent);
+    element.addEventListener('drop', onEvent);
     return () => {
-      element.removeEventListener('dragenter', onDragEnter);
-      element.removeEventListener('dragover', onDragOver);
-      element.removeEventListener('dragleave', onDragLeave);
-      element.removeEventListener('drop', onDrop);
+      element.removeEventListener('dragenter', onEvent);
+      element.removeEventListener('dragover', onEvent);
+      element.removeEventListener('dragleave', onEvent);
+      element.removeEventListener('drop', onEvent);
     };
   }, [target && isTarget.getRawElement(target), internalRef.state]);
   if (target) return { overed, files };

packages/core/src/hooks/useDropZone/useDropZone.ts

@@ -154,10 +154,7 @@ export const useDropZone = ((...params: any[]) => {
     const element = target ? isTarget.getElement(target) : internalRef.current;
 
     if (!element) return;
-    
-    const controller = new AbortController();
-    const options = { signal: controller.signal };
-    
+
     const onEvent = (event: DragEvent) => {
       if (!event.dataTransfer) return;
 
@@ -187,7 +184,9 @@ export const useDropZone = ((...params: any[]) => {
         return;
       }
 
-      if (event.type === 'dragleave' && (counterRef.current -= 1) === 0) {
+      if (event.type === 'dragleave') {
+        counterRef.current -= 1;
+        if (counterRef.current !== 0) return;
         setOvered(false);
         options.onLeave?.(event);
         return;
@@ -196,13 +195,16 @@ export const useDropZone = ((...params: any[]) => {
       if (event.type === 'dragover') options.onOver?.(event);
     };
 
-    element.addEventListener('dragenter', onEvent, options);
-    element.addEventListener('dragover', onEvent, options);
-    element.addEventListener('dragleave', onEvent, options);
-    element.addEventListener('drop', onEvent, options);
+    element.addEventListener('dragenter', onEvent as EventListener);
+    element.addEventListener('dragover', onEvent as EventListener);
+    element.addEventListener('dragleave', onEvent as EventListener);
+    element.addEventListener('drop', onEvent as EventListener);
 
     return () => {
-      controller.abort();
+      element.removeEventListener('dragenter', onEvent as EventListener);
+      element.removeEventListener('dragover', onEvent as EventListener);
+      element.removeEventListener('dragleave', onEvent as EventListener);
+      element.removeEventListener('drop', onEvent as EventListener);
     };
   }, [target && isTarget.getRawElement(target), internalRef.state]);