Update InputGroup (#99)

yewprint-doc/src/input_group/example.rs

@@ -2,7 +2,11 @@ use yew::prelude::*;
 use yewprint::{Button, IconName, InputGroup, Tag};
 
 pub struct Example {
+    link: ComponentLink<Self>,
     props: ExampleProps,
+    histogram_value: String,
+    password_value: String,
+    tags_value: String,
 }
 
 #[derive(Clone, PartialEq, Properties)]
@@ -14,16 +18,69 @@ pub struct ExampleProps {
     pub round: bool,
 }
 
+pub enum Msg {
+    AddHistogramEntry,
+    UpdateHistogram(String),
+    AddPasswordEntry,
+    UpdatePassword(String),
+    AddTagsEntry,
+    UpdateTags(String),
+    Nope,
+}
+
+macro_rules! alert {
+    ($($arg:tt)*) => {
+        yew::services::DialogService::alert(&format!(
+            $($arg)*
+        ))
+    };
+}
+
 impl Component for Example {
-    type Message = ();
+    type Message = Msg;
     type Properties = ExampleProps;
 
-    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
-        Example { props }
+    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
+        Example {
+            props,
+            link,
+            histogram_value: String::new(),
+            password_value: String::new(),
+            tags_value: String::new(),
+        }
     }
 
-    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
-        true
+    fn update(&mut self, msg: Self::Message) -> bool {
+        match msg {
+            Msg::AddHistogramEntry => {
+                alert!("You sent: {}", self.histogram_value);
+                self.histogram_value = String::new();
+                true
+            }
+            Msg::UpdateHistogram(val) => {
+                self.histogram_value = val;
+                true
+            }
+            Msg::AddPasswordEntry => {
+                alert!("you sent: {}", self.password_value);
+                self.password_value = String::new();
+                true
+            }
+            Msg::UpdatePassword(val) => {
+                self.password_value = val;
+                true
+            }
+            Msg::AddTagsEntry => {
+                alert!("You sent: {}", self.tags_value);
+                self.tags_value = String::new();
+                true
+            }
+            Msg::UpdateTags(val) => {
+                self.tags_value = val;
+                true
+            }
+            Msg::Nope => false,
+        }
     }
 
     fn change(&mut self, props: Self::Properties) -> ShouldRender {
@@ -46,6 +103,11 @@ impl Component for Example {
                     disabled=self.props.disabled
                     left_icon=IconName::Filter
                     placeholder={"Filter histogram..."}
+                    value=&self.histogram_value
+                    oninput=self.link.callback(|e: InputData| Msg::UpdateHistogram(e.value))
+                    onkeypress=self.link.callback(|e: KeyboardEvent| {
+                        if e.key() == "Enter" { Msg::AddHistogramEntry } else { Msg::Nope }
+                    })
                 />
                 <InputGroup
                     fill=self.props.fill
@@ -54,6 +116,11 @@ impl Component for Example {
                     round=self.props.round
                     disabled=self.props.disabled
                     placeholder={"Enter your password..."}
+                    value=&self.password_value
+                    oninput=self.link.callback(|e: InputData| Msg::UpdatePassword(e.value))
+                    onkeypress=self.link.callback(|e: KeyboardEvent| {
+                        if e.key() == "Enter" { Msg::AddPasswordEntry } else { Msg::Nope }
+                    })
                     right_element=html! {
                         <Button
                             icon=IconName::Lock
@@ -70,6 +137,11 @@ impl Component for Example {
                     disabled=self.props.disabled
                     left_icon=IconName::Tag
                     placeholder={"Find tags"}
+                    value=&self.tags_value
+                    oninput=self.link.callback(|e: InputData| Msg::UpdateTags(e.value))
+                    onkeypress=self.link.callback(|e: KeyboardEvent| {
+                        if e.key() == "Enter" { Msg::AddTagsEntry } else { Msg::Nope }
+                    })
                     right_element=html! {
                         <Tag
                             minimal=true

yewprint/src/input_group.rs

@@ -67,6 +67,12 @@ pub struct InputGroupProps {
     #[prop_or_default]
     pub input_type: TextInputType,
     #[prop_or_default]
+    pub oninput: Callback<InputData>,
+    #[prop_or_default]
+    pub onkeypress: Callback<KeyboardEvent>,
+    #[prop_or_default]
+    pub value: String,
+    #[prop_or_default]
     pub class: Classes,
 }
 
@@ -130,6 +136,9 @@ impl Component for InputGroup {
                     type=self.props.input_type.as_str()
                     placeholder=&self.props.placeholder
                     disabled=self.props.disabled
+                    oninput={self.props.oninput.clone()}
+                    onkeypress={self.props.onkeypress.clone()}
+                    value=&self.props.value
                 />
                 {
                     if let Some(right_element) = self.props.right_element.clone() {