From 01b213273c82b5c4ebd0e9bfb4e8e1370fb6eb8a Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Sun, 5 Nov 2023 20:10:21 +0800
Subject: [PATCH] feat: upload add drag and drop

---
 Cargo.toml                   |  7 ++++++-
 demo/src/pages/components.rs |  2 +-
 demo/src/pages/upload/mod.rs | 22 ++++++++++++++++------
 src/upload/mod.rs            | 33 ++++++++++++++++++++++++++++++++-
 4 files changed, 55 insertions(+), 9 deletions(-)

diff --git a/Cargo.toml b/Cargo.toml
index a91f7e7..4af0768 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -14,7 +14,12 @@ license = "MIT"
 
 [dependencies]
 leptos = { version = "0.5.1", features = ["csr"] }
-web-sys = { version = "0.3.62", features = ["DomRect", "File", "FileList"] }
+web-sys = { version = "0.3.62", features = [
+    "DomRect",
+    "File",
+    "FileList",
+    "DataTransfer",
+] }
 icondata = { version = "0.1.0", features = [
     "AiCloseOutlined",
     "AiCheckOutlined",
diff --git a/demo/src/pages/components.rs b/demo/src/pages/components.rs
index 33aa9f2..ac2627a 100644
--- a/demo/src/pages/components.rs
+++ b/demo/src/pages/components.rs
@@ -11,7 +11,7 @@ pub fn ComponentsPage() -> impl IntoView {
         let mut pathname = loaction.pathname.get_untracked();
 
         if pathname.starts_with("/thaw/components/") {
-            pathname.drain(20..).collect()
+            pathname.drain(17..).collect()
         } else {
             String::new()
         }
diff --git a/demo/src/pages/upload/mod.rs b/demo/src/pages/upload/mod.rs
index dde5428..dd79e42 100644
--- a/demo/src/pages/upload/mod.rs
+++ b/demo/src/pages/upload/mod.rs
@@ -51,7 +51,7 @@ pub fn UploadPage() -> impl IntoView {
             </Demo>
             <h3>"Drag to upload"</h3>
             <Demo>
-                <Upload>
+                <Upload custom_request>
                     <UploadDragger>
                         "Click or drag a file to this area to upload"
                     </UploadDragger>
@@ -60,11 +60,21 @@ pub fn UploadPage() -> impl IntoView {
                     slot
                     html=highlight_str!(
                         r#"
-                    <Upload>
-                        <UploadDragger>
-                            "Click or drag a file to this area to upload"
-                        </UploadDragger>
-                    </Upload>
+                    let message = use_message();
+                    let custom_request = move |file_list: FileList| {
+                        message.create(
+                            format!("Number of uploaded files: {}", file_list.length()),
+                            MessageVariant::Success,
+                            Default::default(),
+                        );
+                    };
+                    view! {
+                        <Upload custom_request>
+                            <UploadDragger>
+                                "Click or drag a file to this area to upload"
+                            </UploadDragger>
+                        </Upload>
+                    }
                 "#,
                         "rust"
                     )
diff --git a/src/upload/mod.rs b/src/upload/mod.rs
index f3afb15..7482150 100644
--- a/src/upload/mod.rs
+++ b/src/upload/mod.rs
@@ -34,17 +34,48 @@ pub fn Upload(
             input_ref.click();
         }
     };
+
+    let is_trigger_dargover = create_rw_signal(false);
+    let on_trigger_drop = move |event: ev::DragEvent| {
+        event.prevent_default();
+        if let Some(data) = event.data_transfer() {
+            if let Some(files) = data.files() {
+                on_file_addition(files);
+            }
+        }
+        is_trigger_dargover.set(false);
+    };
+    let on_trigger_dragover = move |event: ev::DragEvent| {
+        event.prevent_default();
+        is_trigger_dargover.set(true);
+    };
+    let on_trigger_dragenter = move |event: ev::DragEvent| {
+        event.prevent_default();
+    };
+    let on_trigger_dragleave = move |event: ev::DragEvent| {
+        event.prevent_default();
+        is_trigger_dargover.set(false);
+    };
+
     view! {
         <div class="thaw-upload">
             <input
                 class="thaw-upload__input"
+                class=("thaw-upload--drag-over", move || is_trigger_dargover.get())
                 ref=input_ref
                 type="file"
                 accept=move || accept.get()
                 multiple=move || multiple.get()
                 on:change=on_change
             />
-            <div class="thaw-upload__trigger" on:click=on_click>
+            <div
+                class="thaw-upload__trigger"
+                on:click=on_click
+                on:drop=on_trigger_drop
+                on:dragover=on_trigger_dragover
+                on:dragenter=on_trigger_dragenter
+                on:dragleave=on_trigger_dragleave
+            >
                 {children()}
             </div>
         </div>