Fix NumericInput's onchange prop (#129)

This commit is contained in:
Yohan Boogaert 2021-11-12 11:02:57 +01:00 committed by GitHub
parent 2e541af11c
commit 89e6c93b86
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 23 additions and 5 deletions

View file

@ -44,6 +44,7 @@ impl Component for CheckboxDoc {
html! { html! {
<div> <div>
<H1 class=classes!("docs-title")>{"Checkbox"}</H1> <H1 class=classes!("docs-title")>{"Checkbox"}</H1>
<SourceCodeUrl />
<ExampleContainer <ExampleContainer
source=source source=source
props=Some(html! { props=Some(html! {
@ -94,3 +95,5 @@ crate::build_example_prop_component! {
} }
} }
} }
crate::build_source_code_component!();

View file

@ -1,5 +1,5 @@
use yew::prelude::*; use yew::prelude::*;
use yewprint::{Button, IconName, NumericInput}; use yewprint::{Button, IconName, NumericInput, Text};
pub struct Example { pub struct Example {
props: ExampleProps, props: ExampleProps,
@ -17,6 +17,8 @@ pub struct ExampleProps {
pub enum Msg { pub enum Msg {
Reset, Reset,
UpdateValue(i32),
UpdateValueTwo(i32),
} }
impl Component for Example { impl Component for Example {
@ -38,6 +40,12 @@ impl Component for Example {
self.value = 4; self.value = 4;
self.value_two = 4; self.value_two = 4;
} }
Msg::UpdateValue(value) => {
self.value = value;
}
Msg::UpdateValueTwo(value) => {
self.value_two = value;
}
} }
true true
} }
@ -61,6 +69,7 @@ impl Component for Example {
bounds=i32::MIN..=i32::MAX bounds=i32::MIN..=i32::MAX
increment=10 increment=10
placeholder=String::from("Enter an integer...") placeholder=String::from("Enter an integer...")
onchange=self.link.callback(|x| Msg::UpdateValueTwo(x))
/> />
<NumericInput<i32> <NumericInput<i32>
disabled=self.props.disabled disabled=self.props.disabled
@ -70,6 +79,7 @@ impl Component for Example {
bounds=-10..=10 bounds=-10..=10
increment=1 increment=1
placeholder=String::from("Integer between -10 and 10") placeholder=String::from("Integer between -10 and 10")
onchange=self.link.callback(|x| Msg::UpdateValue(x))
/> />
<Button <Button
icon=IconName::Refresh icon=IconName::Refresh
@ -77,6 +87,7 @@ impl Component for Example {
> >
{"Reset at 4"} {"Reset at 4"}
</Button> </Button>
<Text>{format!("actual values are {} and {}", self.value, self.value_two)}</Text>
</> </>
} }
} }

View file

@ -44,6 +44,7 @@ impl Component for NumericInputDoc {
html! { html! {
<div> <div>
<H1 class=classes!("docs-title")>{"NumericInput"}</H1> <H1 class=classes!("docs-title")>{"NumericInput"}</H1>
<SourceCodeUrl />
<div> <div>
<ExampleContainer <ExampleContainer
source=source source=source
@ -96,3 +97,5 @@ crate::build_example_prop_component! {
} }
} }
} }
crate::build_source_code_component!();

View file

@ -104,6 +104,7 @@ where
self.props.value = Some(num); self.props.value = Some(num);
self.input = value; self.input = value;
} }
self.props.onchange.emit(self.props.value.clone().unwrap());
true true
} else { } else {
false false
@ -114,12 +115,12 @@ where
if num >= *self.props.bounds.end() { if num >= *self.props.bounds.end() {
self.props.value = Some(self.props.bounds.end().clone()); self.props.value = Some(self.props.bounds.end().clone());
self.input = self.props.bounds.end().to_string(); self.input = self.props.bounds.end().to_string();
true
} else { } else {
self.props.value = Some(num.clone() + self.props.increment.clone()); self.props.value = Some(num.clone() + self.props.increment.clone());
self.input = (num + self.props.increment.clone()).to_string(); self.input = (num + self.props.increment.clone()).to_string();
true
} }
self.props.onchange.emit(self.props.value.clone().unwrap());
true
} else { } else {
false false
} }
@ -129,12 +130,12 @@ where
if num <= *self.props.bounds.start() { if num <= *self.props.bounds.start() {
self.props.value = Some(self.props.bounds.start().clone()); self.props.value = Some(self.props.bounds.start().clone());
self.input = self.props.bounds.start().to_string(); self.input = self.props.bounds.start().to_string();
true
} else { } else {
self.props.value = Some(num.clone() - self.props.increment.clone()); self.props.value = Some(num.clone() - self.props.increment.clone());
self.input = (num - self.props.increment.clone()).to_string(); self.input = (num - self.props.increment.clone()).to_string();
true
} }
self.props.onchange.emit(self.props.value.clone().unwrap());
true
} else { } else {
false false
} }