From 0f0fde49a3eb3b5ef1ba80cdaab0422ad35d9a45 Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Sun, 22 Oct 2023 22:48:17 +0800
Subject: [PATCH] feat: add upload component

---
 demo/src/app.rs              |  1 +
 demo/src/pages/components.rs |  4 ++++
 demo/src/pages/mod.rs        |  2 ++
 demo/src/pages/upload/mod.rs | 36 ++++++++++++++++++++++++++++++++
 src/lib.rs                   |  2 ++
 src/upload/mod.rs            | 40 ++++++++++++++++++++++++++++++++++++
 src/upload/upload.css        |  5 +++++
 7 files changed, 90 insertions(+)
 create mode 100644 demo/src/pages/upload/mod.rs
 create mode 100644 src/upload/mod.rs
 create mode 100644 src/upload/upload.css

diff --git a/demo/src/app.rs b/demo/src/app.rs
index bd8c394..5d95042 100644
--- a/demo/src/app.rs
+++ b/demo/src/app.rs
@@ -40,6 +40,7 @@ pub fn App() -> impl IntoView {
                         <Route path="/skeleton" view=SkeletonPage/>
                         <Route path="/switch" view=SwitchPage/>
                         <Route path="/tag" view=TagPage/>
+                        <Route path="/upload" view=UploadPage/>
                     </Route>
                     <Route path="/mobile/tabbar" view=TabbarDemoPage/>
                     <Route path="/mobile/nav-bar" view=NavBarDemoPage/>
diff --git a/demo/src/pages/components.rs b/demo/src/pages/components.rs
index e9e6d24..ac8119c 100644
--- a/demo/src/pages/components.rs
+++ b/demo/src/pages/components.rs
@@ -145,6 +145,10 @@ fn gen_menu_data() -> Vec<MenuGroupOption> {
                     value: "switch".into(),
                     label: "Switch".into(),
                 },
+                MenuItemOption {
+                    value: "upload".into(),
+                    label: "Upload".into(),
+                },
             ],
         },
         MenuGroupOption {
diff --git a/demo/src/pages/mod.rs b/demo/src/pages/mod.rs
index 5a84b61..8422b70 100644
--- a/demo/src/pages/mod.rs
+++ b/demo/src/pages/mod.rs
@@ -30,6 +30,7 @@ mod table;
 mod tabs;
 mod tag;
 mod toast;
+mod upload;
 
 pub use alert::*;
 pub use auto_complete::*;
@@ -63,3 +64,4 @@ pub use table::*;
 pub use tabs::*;
 pub use tag::*;
 pub use toast::*;
+pub use upload::*;
diff --git a/demo/src/pages/upload/mod.rs b/demo/src/pages/upload/mod.rs
new file mode 100644
index 0000000..8f7e37e
--- /dev/null
+++ b/demo/src/pages/upload/mod.rs
@@ -0,0 +1,36 @@
+use crate::components::{Demo, DemoCode};
+use leptos::*;
+use melt_ui::*;
+use prisms::highlight_str;
+
+#[component]
+pub fn UploadPage() -> impl IntoView {
+    view! {
+        <div style="width: 896px; margin: 0 auto;">
+            <h1>"Upload(TODO)"</h1>
+            <Demo>
+                <Upload>
+                    <Button>
+                        "upload"
+                    </Button>
+                </Upload>
+                <DemoCode
+                    slot
+                    html=highlight_str!(
+                        r#"
+                    <Upload>
+                        <Button>
+                            "upload"
+                        </Button>
+                    </Upload>
+                "#,
+                        "rust"
+                    )
+                >
+
+                    ""
+                </DemoCode>
+            </Demo>
+        </div>
+    }
+}
diff --git a/src/lib.rs b/src/lib.rs
index a55adac..70458be 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -31,6 +31,7 @@ mod tabs;
 mod tag;
 mod teleport;
 mod theme;
+mod upload;
 mod utils;
 mod wave;
 
@@ -64,5 +65,6 @@ pub use table::*;
 pub use tabs::*;
 pub use tag::*;
 pub use theme::Theme;
+pub use upload::*;
 pub use utils::{mount_style::mount_style, signal::SignalWatch};
 pub use wave::*;
diff --git a/src/upload/mod.rs b/src/upload/mod.rs
new file mode 100644
index 0000000..0644f11
--- /dev/null
+++ b/src/upload/mod.rs
@@ -0,0 +1,40 @@
+use leptos::*;
+use crate::mount_style;
+// TODO
+
+#[component]
+pub fn Upload(
+    #[prop(optional, into)] accept: MaybeSignal<String>,
+    #[prop(optional, into)] multiple: MaybeSignal<bool>,
+    children: Children,
+) -> impl IntoView {
+    mount_style("upload", include_str!("./upload.css"));
+    let on_file_addition = move || {
+
+    };
+    let input_ref = create_node_ref::<html::Input>();
+    let on_change = move |_| {
+        if let Some(input_ref) = input_ref.get_untracked() {
+        }
+    };
+    let on_click= move |_| {
+        if let Some(input_ref) = input_ref.get_untracked() {
+            input_ref.click();
+        }
+    };
+    view! {
+        <div class="melt-upload">
+            <input
+                class="melt-upload__input"
+                ref=input_ref
+                type="file"
+                accept=move || accept.get()
+                multiple=move || multiple.get()
+                on:change=on_change
+            />
+            <div class="melt-upload__trigger" on:click=on_click>
+                {children()}
+            </div>
+        </div>
+    }
+}
diff --git a/src/upload/upload.css b/src/upload/upload.css
new file mode 100644
index 0000000..81fb12d
--- /dev/null
+++ b/src/upload/upload.css
@@ -0,0 +1,5 @@
+.melt-upload__input {
+    width: 0;
+    height: 0;
+    opacity: 0;
+}