From 17d8da630e0eb795afc9a7e14ead22bd5a7835e9 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Tue, 27 Jun 2023 21:17:45 +0200
Subject: [PATCH] feat(useDropZone): expose more hooks

---
 packages/core/useDropZone/index.ts | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/core/useDropZone/index.ts b/packages/core/useDropZone/index.ts
index 5a499978aca..15859bae302 100644
--- a/packages/core/useDropZone/index.ts
+++ b/packages/core/useDropZone/index.ts
@@ -8,18 +8,31 @@ export interface UseDropZoneReturn {
   isOverDropZone: Ref<boolean>
 }
 
+export interface UseDropZoneOptions {
+  onDrop?: (files: File[] | null, event: DragEvent) => void
+  onEnter?: (files: File[] | null, event: DragEvent) => void
+  onLeave?: (files: File[] | null, event: DragEvent) => void
+}
+
 export function useDropZone(
   target: MaybeRefOrGetter<HTMLElement | null | undefined>,
-  onDrop?: (files: File[] | null) => void,
+  options: UseDropZoneOptions | UseDropZoneOptions['onDrop'] = {},
 ): UseDropZoneReturn {
   const isOverDropZone = ref(false)
   let counter = 0
 
   if (isClient) {
+    const _options = typeof options === 'function' ? { onDrop: options } : options
+    const getFiles = (event: DragEvent) => {
+      const files = Array.from(event.dataTransfer?.files ?? [])
+      return files.length === 0 ? null : files
+    }
+
     useEventListener<DragEvent>(target, 'dragenter', (event) => {
       event.preventDefault()
       counter += 1
       isOverDropZone.value = true
+      _options.onEnter?.(getFiles(event), event)
     })
     useEventListener<DragEvent>(target, 'dragover', (event) => {
       event.preventDefault()
@@ -29,13 +42,13 @@ export function useDropZone(
       counter -= 1
       if (counter === 0)
         isOverDropZone.value = false
+      _options.onLeave?.(getFiles(event), event)
     })
     useEventListener<DragEvent>(target, 'drop', (event) => {
       event.preventDefault()
       counter = 0
       isOverDropZone.value = false
-      const files = Array.from(event.dataTransfer?.files ?? [])
-      onDrop?.(files.length === 0 ? null : files)
+      _options.onDrop?.(getFiles(event), event)
     })
   }