[@mantine/dropzone] Fix Dropzone.Fullscreen not disappearing correctl…

…y after first file drop (mantinedev#4580)
esheliko · Jul 27, 2023 · 0f2ecba · 0f2ecba
1 parent cf0f85f
commit 0f2ecba
Showing 1 changed file with 7 additions and 9 deletions.
diff --git a/src/mantine-dropzone/src/DropzoneFullScreen.tsx b/src/mantine-dropzone/src/DropzoneFullScreen.tsx
@@ -8,7 +8,7 @@ import {
   getDefaultZIndex,
   PortalProps,
 } from '@mantine/core';
-import { useDisclosure } from '@mantine/hooks';
+import { useDisclosure, useCounter } from '@mantine/hooks';
 import { DropzoneStylesNames, DropzoneProps, _Dropzone } from './Dropzone';
 import useFullScreenStyles from './DropzoneFullScreen.styles';
 
@@ -64,7 +64,7 @@ export function DropzoneFullScreen(props: DropzoneFullScreenProps) {
     ...others
   } = useComponentDefaultProps('DropzoneFullScreen', fullScreenDefaultProps, props);
 
-  const [counter, setCounter] = React.useState(0);
+  const [counter, counterHandlers] = useCounter(0);
   const [visible, { open, close }] = useDisclosure(false);
   const { classes, cx } = useFullScreenStyles(null, {
     name: 'DropzoneFullScreen',
@@ -75,15 +75,11 @@ export function DropzoneFullScreen(props: DropzoneFullScreenProps) {
 
   const handleDragEnter = (event: DragEvent) => {
     if (event.dataTransfer.types.includes('Files')) {
-      setCounter((prev) => prev + 1);
+      counterHandlers.increment();
       open();
     }
   };
 
-  const handleDragLeave = () => {
-    setCounter((prev) => prev - 1);
-  };
-
   useEffect(() => {
     counter === 0 && close();
   }, [counter]);
@@ -92,11 +88,11 @@ export function DropzoneFullScreen(props: DropzoneFullScreenProps) {
     if (!active) return undefined;
 
     document.addEventListener('dragenter', handleDragEnter, false);
-    document.addEventListener('dragleave', handleDragLeave, false);
+    document.addEventListener('dragleave', counterHandlers.decrement, false);
 
     return () => {
       document.removeEventListener('dragenter', handleDragEnter, false);
-      document.removeEventListener('dragleave', handleDragLeave, false);
+      document.removeEventListener('dragleave', counterHandlers.decrement, false);
     };
   }, [active]);
 
@@ -121,10 +117,12 @@ export function DropzoneFullScreen(props: DropzoneFullScreenProps) {
           onDrop={(files: any) => {
             onDrop?.(files);
             close();
+            counterHandlers.reset();
           }}
           onReject={(files: any) => {
             onReject?.(files);
             close();
+            counterHandlers.reset();
           }}
         />
       </Box>