feat: base TextField component (#209)

TownHallHQ · Jul 20, 2024 · 3feace8 · 3feace8
1 parent 7454de2
commit 3feace8
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/crates/web/src/components/text_field.rs b/crates/web/src/components/text_field.rs
@@ -1,7 +1,10 @@
 use core::fmt;
 use std::{collections::HashSet, fmt::Debug};
 
-use leptos::{component, create_memo, view, IntoView, MaybeProp, SignalGet, TextProp};
+use leptos::{
+    component, create_memo, event_target_value, view, Callable, Callback, IntoView, MaybeProp,
+    SignalGet, TextProp,
+};
 
 #[derive(Clone, Debug, Default)]
 pub enum TextFieldVariant {
@@ -36,6 +39,7 @@ pub fn TextField(
     #[prop(optional, into)] label: TextProp,
     #[prop(optional, into)] class: TextProp,
     #[prop(optional, into)] variant: MaybeProp<TextFieldVariant>,
+    #[prop(optional, into)] on_input: MaybeProp<Callback<String>>,
     #[prop(optional, into)] r#type: TextFieldType,
     #[prop(optional, into)] disabled: MaybeProp<bool>,
     #[prop(optional, into)] full_width: MaybeProp<bool>,
@@ -82,7 +86,7 @@ pub fn TextField(
     view! {
             <div>
             <label class="block mb-2 text-sm font-medium text-purple-500" for=id.clone()>{label}</label>
-            <input type=format!("{}", r#type) name=name value=value id=id placeholder=placeholder class=class_names  disabled=disabled />
+            <input type=format!("{}", r#type) name=name value=value id=id placeholder=placeholder class=class_names  disabled=disabled on:change=move |ev| {on_input.get().unwrap().call(event_target_value(&ev))}  />
             </div>
     }
 }
diff --git a/crates/web/src/views/home.rs b/crates/web/src/views/home.rs
@@ -1,5 +1,5 @@
 use crate::components::text_field::{TextField, TextFieldType};
-use leptos::{component, view, IntoView};
+use leptos::{component, leptos_dom::logging, view, IntoView};
 
 use crate::components::button::{Button, ButtonVariant};
 
@@ -13,7 +13,7 @@ pub fn Home() -> impl IntoView {
             <Button variant={ButtonVariant::Contained}>{"Contained"}</Button>
             <Button variant={ButtonVariant::Outlined}>{"Outlined"}</Button>
             <TextField r#type=TextFieldType::Text placeholder="Simple" />
-            <TextField placeholder="Label" label="Input Label" id="label" />
+            <TextField placeholder="Label" label="Input Label" id="label" on_input=|val: String| logging::console_log(&val) />
             <TextField placeholder="Disabled" disabled={true}/>
         </section>
     }