InputGroup: update deprecated onkeypress + NodeRef forwarding (#100)

* InputGroup: updated onkeypress to onkey[up/down]

* added NodeRef forwarding to InputGroup

* Updated examples
This commit is contained in:
Théo Degioanni 2021-03-22 17:31:38 +01:00 committed by GitHub
parent 24ae8f898d
commit 2dab3eda41
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 5 deletions

View file

@ -105,7 +105,7 @@ impl Component for Example {
placeholder={"Filter histogram..."}
value=&self.histogram_value
oninput=self.link.callback(|e: InputData| Msg::UpdateHistogram(e.value))
onkeypress=self.link.callback(|e: KeyboardEvent| {
onkeydown=self.link.callback(|e: KeyboardEvent| {
if e.key() == "Enter" { Msg::AddHistogramEntry } else { Msg::Nope }
})
/>
@ -118,7 +118,7 @@ impl Component for Example {
placeholder={"Enter your password..."}
value=&self.password_value
oninput=self.link.callback(|e: InputData| Msg::UpdatePassword(e.value))
onkeypress=self.link.callback(|e: KeyboardEvent| {
onkeydown=self.link.callback(|e: KeyboardEvent| {
if e.key() == "Enter" { Msg::AddPasswordEntry } else { Msg::Nope }
})
right_element=html! {
@ -139,7 +139,7 @@ impl Component for Example {
placeholder={"Find tags"}
value=&self.tags_value
oninput=self.link.callback(|e: InputData| Msg::UpdateTags(e.value))
onkeypress=self.link.callback(|e: KeyboardEvent| {
onkeydown=self.link.callback(|e: KeyboardEvent| {
if e.key() == "Enter" { Msg::AddTagsEntry } else { Msg::Nope }
})
right_element=html! {

View file

@ -69,11 +69,15 @@ pub struct InputGroupProps {
#[prop_or_default]
pub oninput: Callback<InputData>,
#[prop_or_default]
pub onkeypress: Callback<KeyboardEvent>,
pub onkeyup: Callback<KeyboardEvent>,
#[prop_or_default]
pub onkeydown: Callback<KeyboardEvent>,
#[prop_or_default]
pub value: String,
#[prop_or_default]
pub class: Classes,
#[prop_or_default]
pub input_ref: NodeRef,
}
impl Component for InputGroup {
@ -132,12 +136,14 @@ impl Component for InputGroup {
}
}
<input
ref=self.props.input_ref.clone()
class="bp3-input"
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()}
onkeyup={self.props.onkeyup.clone()}
onkeydown={self.props.onkeydown.clone()}
value=&self.props.value
/>
{