update

src/hooks/dropHandler.ts

@@ -2,14 +2,30 @@ import config from "@/config";
 
 const { uploadSizeLimit } = config;
 
-type dropHandlerHooks = {
-	onDrop?: (files: File[]) => void;
-	onEnter?: () => void;
+export type dropHandlerHooks = {
+	/**
+	 * 仅返回小于config.ts中大小限制的文件，不会返回文件夹
+	 */
+	onDropFiles?: (files: File[]) => void;
 	/**
 	 * 当拖动时
 	 */
 	onOver?: () => void;
+	/**
+	 * 当进入时
+	 */
+	onEnter?: () => void;
+
+	/**
+	 * 当离开时
+	 */
 	onLeave?: () => void;
+
+	/**
+	 * 离开或是放下时都会触发
+	 * @returns {any}
+	 */
+	onEnd?: () => void;
 };
 
 const isFile = (file: File) =>
@@ -26,7 +42,6 @@ const isFile = (file: File) =>
 		reader.readAsText(file);
 	});
 
-
 /**
  * 只保留文件，移去文件夹
  * @param {File[]} files
@@ -36,7 +51,6 @@ const filesFilter = async (files: File[]) => {
 	while (index < files.length) {
 		const currentFile = files[index];
 		const _isFile = await isFile(currentFile);
-		console.log(_isFile);
 		if (_isFile) {
 			index += 1;
 			continue;
@@ -48,7 +62,6 @@ const filesFilter = async (files: File[]) => {
 };
 
 export default function dropHandler(dom: HTMLDivElement, hooks?: dropHandlerHooks) {
-	console.log(dom);
 	dom.addEventListener(
 		"dragenter",
 		function (e) {
@@ -75,6 +88,7 @@ export default function dropHandler(dom: HTMLDivElement, hooks?: dropHandlerHook
 			e.preventDefault();
 			e.stopPropagation();
 			hooks?.onLeave && hooks?.onLeave();
+			hooks?.onEnd && hooks.onEnd();
 		},
 		false
 	);
@@ -87,7 +101,8 @@ export default function dropHandler(dom: HTMLDivElement, hooks?: dropHandlerHook
 			e.stopPropagation();
 			const files = [...(e.dataTransfer?.files ?? [])].filter(file => file.size < uploadSizeLimit);
 			await filesFilter(files);
-			hooks?.onDrop && hooks.onDrop(files);
+			hooks?.onDropFiles && hooks.onDropFiles(files);
+			hooks?.onEnd && hooks.onEnd();
 		},
 		false
 	);