From c0160ff8dc5ff41c2f60ad34a1362fcf43b511b5 Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Mon, 3 Apr 2023 17:31:50 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=E6=B7=BB=E5=8A=A0=20input?=
 =?UTF-8?q?=20=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/basic/src/main.rs |  9 +++++++++
 src/input/input.css        |  0
 src/input/mod.rs           | 27 +++++++++++++++++++++++++++
 src/lib.rs                 |  2 ++
 4 files changed, 38 insertions(+)
 create mode 100644 src/input/input.css
 create mode 100644 src/input/mod.rs

diff --git a/examples/basic/src/main.rs b/examples/basic/src/main.rs
index ffd0f6e..c8a49c9 100644
--- a/examples/basic/src/main.rs
+++ b/examples/basic/src/main.rs
@@ -10,8 +10,17 @@ pub fn App(cx: Scope) -> impl IntoView {
     let (count, set_count) = create_signal(cx, 0.0);
     let (open, set_open) = create_signal(cx, true);
     let (button_type, set_button_type) = create_signal(cx, ButtonType::TEXT);
+    
+    let count_string = create_memo(cx, move |_| {
+        log!("sd");
+        count.get().to_string()
+    });
+    let on_input = SignalSetter::map(cx, move |value: String| {
+        set_count.set(value.parse().unwrap());
+    });
     view! { cx,
         <Space>
+            <Input value=count_string.get() on_input=on_input/>
             <Button on:click=move |_| set_button_type.update(move |value| *value = ButtonType::PRIMARY)>"click"</Button>
             <Button on:click=move |_| set_count.update(move |value| *value += 1.0) type_=button_type>"click"</Button>
             {move || count.get()}
diff --git a/src/input/input.css b/src/input/input.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/input/mod.rs b/src/input/mod.rs
new file mode 100644
index 0000000..f0de9df
--- /dev/null
+++ b/src/input/mod.rs
@@ -0,0 +1,27 @@
+use crate::utils::mount_style::mount_style;
+use leptos::*;
+use stylers::style_sheet_str;
+
+#[component]
+pub fn Input(
+    cx: Scope,
+    #[prop(optional, into)] value: MaybeSignal<String>,
+    #[prop(optional)] on_input: Option<SignalSetter<String>>,
+) -> impl IntoView {
+    let class_name = mount_style("modal", || style_sheet_str!("./src/input/input.css"));
+    let input_ref = create_node_ref::<html::Input>(cx);
+    if let Some(on_input) = on_input {
+        input_ref.on_load(cx, move |input| {
+            input.on(ev::input, move |ev| {
+                on_input.set(event_target_value(&ev));
+            });
+        });
+    }
+
+    view! {
+        cx, class=class_name,
+        <div class:jo-input=true>
+            <input type="text" prop:value=value.get() ref=input_ref/>
+        </div>
+    }
+}
diff --git a/src/lib.rs b/src/lib.rs
index 79897d8..add025f 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -1,5 +1,6 @@
 mod button;
 mod card;
+mod input;
 mod modal;
 mod progress;
 mod space;
@@ -9,6 +10,7 @@ mod theme;
 mod utils;
 
 pub use button::*;
+pub use input::*;
 pub use modal::*;
 pub use progress::*;
 pub use space::*;