From 3feace82c5d4421cd0774adfe41449aba9846e04 Mon Sep 17 00:00:00 2001
From: Michael Liendo <michael.m.liendo.r@gmail.com>
Date: Sat, 20 Jul 2024 17:47:37 -0400
Subject: [PATCH] feat: base `TextField` component (#209)

---
 crates/web/src/components/text_field.rs | 8 ++++++--
 crates/web/src/views/home.rs            | 4 ++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/crates/web/src/components/text_field.rs b/crates/web/src/components/text_field.rs
index cbb67d6..5ce350e 100644
--- 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
index 6367145..4ffc764 100644
--- 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>
     }