Remove InputData & ChangeData (#2000)

Author: mc1098

examples/boids/src/slider.rs

@@ -1,5 +1,8 @@
 use std::cell::Cell;
-use yew::{html, Callback, Component, ComponentLink, Html, InputData, Properties, ShouldRender};
+use yew::{
+    html, web_sys::HtmlInputElement, Callback, Component, ComponentLink, Html, InputEvent,
+    Properties, ShouldRender, TargetCast,
+};
 
 thread_local! {
     static SLIDER_ID: Cell<usize> = Cell::default();
@@ -78,15 +81,19 @@ impl Component for Slider {
             10f64.powi(-(p as i32))
         });
 
+        let oninput = onchange.reform(|e: InputEvent| {
+            let input: HtmlInputElement = e.target_unchecked_into();
+            input.value_as_number()
+        });
+
         html! {
             <div class="slider">
                 <label for={id.clone()} class="slider__label">{ label }</label>
                 <input type="range"
                     {id}
                     class="slider__input"
                     min={min.to_string()} max={max.to_string()} step={step.to_string()}
-                    oninput={onchange.reform(|data: InputData| data.value.parse().unwrap())}
-                    value={value.to_string()}
+                    {oninput}
                 />
                 <span class="slider__value">{ display_value }</span>
             </div>

examples/crm/src/add_client.rs

@@ -1,6 +1,8 @@
 use crate::Client;
 use yew::{
-    classes, html, Callback, Component, ComponentLink, Html, InputData, Properties, ShouldRender,
+    classes, html,
+    web_sys::{Event, HtmlInputElement, HtmlTextAreaElement},
+    Callback, Component, ComponentLink, Html, Properties, ShouldRender, TargetCast,
 };
 
 #[derive(Debug)]
@@ -72,26 +74,36 @@ impl Component for AddClientForm {
 
     fn view(&self) -> Html {
         let Self { link, client, .. } = self;
+
+        let update_name = |f: fn(String) -> Msg| {
+            link.callback(move |e: Event| {
+                let input: HtmlInputElement = e.target_unchecked_into();
+                f(input.value())
+            })
+        };
+
+        let update_desc = link.callback(|e: Event| {
+            let textarea: HtmlTextAreaElement = e.target_unchecked_into();
+            Msg::UpdateDescription(textarea.value())
+        });
+
         html! {
             <>
                 <div class="names">
                     <input
                         class={classes!("new-client", "firstname")}
                         placeholder="First name"
-                        value={client.first_name.clone()}
-                        oninput={link.callback(|e: InputData| Msg::UpdateFirstName(e.value))}
+                        onchange={update_name(Msg::UpdateFirstName)}
                     />
                     <input
                         class={classes!("new-client", "lastname")}
                         placeholder="Last name"
-                        value={client.last_name.clone()}
-                        oninput={link.callback(|e: InputData| Msg::UpdateLastName(e.value))}
+                        onchange={update_name(Msg::UpdateLastName)}
                     />
                     <textarea
                         class={classes!("new-client", "description")}
                         placeholder="Description"
-                        value={client.description.clone()}
-                        oninput={link.callback(|e: InputData| Msg::UpdateDescription(e.value))}
+                        onchange={update_desc}
                     />
                 </div>
 

examples/file_upload/src/main.rs

@@ -1,4 +1,5 @@
-use yew::{html, ChangeData, Component, ComponentLink, Html, ShouldRender};
+use web_sys::{Event, HtmlInputElement};
+use yew::{html, html::TargetCast, Component, ComponentLink, Html, ShouldRender};
 
 use gloo::file::callbacks::FileReader;
 use gloo::file::File;
@@ -87,9 +88,11 @@ impl Component for Model {
             <div>
                 <div>
                     <p>{ "Choose a file to upload to see the uploaded bytes" }</p>
-                    <input type="file" multiple=true onchange={self.link.callback(move |value| {
+                    <input type="file" multiple=true onchange={self.link.callback(move |e: Event| {
                             let mut result = Vec::new();
-                            if let ChangeData::Files(files) = value {
+                            let input: HtmlInputElement = e.target_unchecked_into();
+
+                            if let Some(files) = input.files() {
                                 let files = js_sys::try_iter(&files)
                                     .unwrap()
                                     .unwrap()

examples/js_callback/src/main.rs

@@ -1,5 +1,5 @@
 use wasm_bindgen::prelude::*;
-use yew::prelude::*;
+use yew::{prelude::*, web_sys::HtmlTextAreaElement};
 
 mod bindings;
 
@@ -57,7 +57,10 @@ impl Component for Model {
             <>
                 <textarea
                     class="code-block"
-                    oninput={self.link.callback(|input: InputData| Msg::Payload(input.value))}
+                    oninput={self.link.callback(|e: InputEvent| {
+                        let input: HtmlTextAreaElement = e.target_unchecked_into();
+                        Msg::Payload(input.value())
+                    })}
                     value={self.payload.clone()}
                 />
                 <button onclick={self.link.callback(|_| Msg::Payload(bindings::get_payload()))}>

examples/keyed_list/src/main.rs

@@ -2,15 +2,15 @@ use instant::Instant;
 use person::PersonType;
 use yew::prelude::*;
 use yew::utils::NeqAssign;
-use yew::web_sys::HtmlElement;
+use yew::web_sys::{HtmlElement, HtmlInputElement};
 
 mod person;
 mod random;
 
 pub enum Msg {
     CreatePersons(usize),
     CreatePersonsPrepend(usize),
-    ChangeRatio(String),
+    ChangeRatio(f64),
     DeletePersonById(usize),
     DeleteEverybody,
     SwapRandom,
@@ -70,7 +70,6 @@ impl Component for Model {
                 true
             }
             Msg::ChangeRatio(ratio) => {
-                let ratio: f64 = ratio.parse().unwrap_or(0.5);
                 if self.build_component_ratio.neq_assign(ratio) {
                     log::info!("Ratio changed: {}", ratio);
                     true
@@ -169,8 +168,10 @@ impl Model {
                             { self.build_component_ratio }
                         </p>
                         <input name="ratio" type="range" class="form-control-range" min="0.0" max="1.0" step="any"
-                            value={self.build_component_ratio.to_string()}
-                            oninput={self.link.callback(|e: InputData| Msg::ChangeRatio(e.value))}
+                            oninput={self.link.callback(|e: InputEvent| {
+                                let input: HtmlInputElement = e.target_unchecked_into();
+                                Msg::ChangeRatio(input.value_as_number())
+                            })}
                         />
                     </div>
                 </div>

examples/mount_point/src/main.rs

@@ -1,6 +1,8 @@
 use wasm_bindgen::JsValue;
-use web_sys::{CanvasRenderingContext2d, Document, HtmlCanvasElement};
-use yew::{html, Component, ComponentLink, Html, InputData, ShouldRender};
+use web_sys::{
+    CanvasRenderingContext2d, Document, HtmlCanvasElement, HtmlInputElement, InputEvent,
+};
+use yew::{html, Component, ComponentLink, Html, ShouldRender, TargetCast};
 
 pub enum Msg {
     UpdateName(String),
@@ -40,7 +42,10 @@ impl Component for Model {
             <div>
                 <input
                     value={self.name.clone()}
-                    oninput={self.link.callback(|e: InputData| Msg::UpdateName(e.value))}
+                    oninput={self.link.callback(|e: InputEvent| {
+                        let input = e.target_unchecked_into::<HtmlInputElement>();
+                        Msg::UpdateName(input.value())
+                    })}
                 />
                 <p>{ self.name.chars().rev().collect::<String>() }</p>
             </div>

examples/store/src/text_input.rs

@@ -1,8 +1,8 @@
+use weblog::web_sys::HtmlInputElement;
 use yew::prelude::*;
 
 pub enum Msg {
-    SetText(String),
-    Submit,
+    Submit(String),
 }
 
 #[derive(Properties, Clone, PartialEq)]
@@ -31,12 +31,7 @@ impl Component for TextInput {
 
     fn update(&mut self, msg: Self::Message) -> ShouldRender {
         match msg {
-            Msg::SetText(text) => {
-                self.text = text;
-                true
-            }
-            Msg::Submit => {
-                let text = std::mem::replace(&mut self.text, self.props.value.clone());
+            Msg::Submit(text) => {
                 self.props.onsubmit.emit(text);
                 true
             }
@@ -54,15 +49,23 @@ impl Component for TextInput {
     }
 
     fn view(&self) -> Html {
+        let onkeydown = self.link.batch_callback(|e: KeyboardEvent| {
+            e.stop_propagation();
+            if e.key() == "Enter" {
+                let input: HtmlInputElement = e.target_unchecked_into();
+                let value = input.value();
+                input.set_value("");
+                Some(Msg::Submit(value))
+            } else {
+                None
+            }
+        });
+
         html! {
             <input
+                placeholder={self.props.value.clone()}
                 type="text"
-                value={self.text.clone()}
-                oninput={self.link.callback(|e: InputData| Msg::SetText(e.value))}
-                onkeydown={self.link.batch_callback(move |e: KeyboardEvent| {
-                    e.stop_propagation();
-                    if e.key() == "Enter" { Some(Msg::Submit) } else { None }
-                })}
+                {onkeydown}
             />
         }
     }

examples/todomvc/src/main.rs

@@ -2,18 +2,18 @@ use gloo::storage::{LocalStorage, Storage};
 use state::{Entry, Filter, State};
 use strum::IntoEnumIterator;
 use yew::web_sys::HtmlInputElement as InputElement;
-use yew::{classes, html, Component, ComponentLink, Html, InputData, NodeRef, ShouldRender};
+use yew::{
+    classes, html, Component, ComponentLink, FocusEvent, Html, NodeRef, ShouldRender, TargetCast,
+};
 use yew::{events::KeyboardEvent, Classes};
 
 mod state;
 
 const KEY: &str = "yew.todomvc.self";
 
 pub enum Msg {
-    Add,
-    Edit(usize),
-    Update(String),
-    UpdateEdit(String),
+    Add(String),
+    Edit((usize, String)),
     Remove(usize),
     SetFilter(Filter),
     ToggleAll,
@@ -38,7 +38,6 @@ impl Component for Model {
         let state = State {
             entries,
             filter: Filter::All,
-            value: "".into(),
             edit_value: "".into(),
         };
         let focus_ref = NodeRef::default();
@@ -51,31 +50,20 @@ impl Component for Model {
 
     fn update(&mut self, msg: Self::Message) -> ShouldRender {
         match msg {
-            Msg::Add => {
-                let description = self.state.value.trim();
+            Msg::Add(description) => {
                 if !description.is_empty() {
                     let entry = Entry {
-                        description: description.to_string(),
+                        description: description.trim().to_string(),
                         completed: false,
                         editing: false,
                     };
                     self.state.entries.push(entry);
                 }
-                self.state.value = "".to_string();
             }
-            Msg::Edit(idx) => {
-                let edit_value = self.state.edit_value.trim().to_string();
-                self.state.complete_edit(idx, edit_value);
+            Msg::Edit((idx, edit_value)) => {
+                self.state.complete_edit(idx, edit_value.trim().to_string());
                 self.state.edit_value = "".to_string();
             }
-            Msg::Update(val) => {
-                println!("Input: {}", val);
-                self.state.value = val;
-            }
-            Msg::UpdateEdit(val) => {
-                println!("Input: {}", val);
-                self.state.edit_value = val;
-            }
             Msg::Remove(idx) => {
                 self.state.remove(idx);
             }
@@ -180,17 +168,23 @@ impl Model {
     }
 
     fn view_input(&self) -> Html {
+        let onkeypress = self.link.batch_callback(|e: KeyboardEvent| {
+            if e.key() == "Enter" {
+                let input: InputElement = e.target_unchecked_into();
+                let value = input.value();
+                input.set_value("");
+                Some(Msg::Add(value))
+            } else {
+                None
+            }
+        });
         html! {
             // You can use standard Rust comments. One line:
             // <li></li>
             <input
                 class="new-todo"
                 placeholder="What needs to be done?"
-                value={self.state.value.clone()}
-                oninput={self.link.callback(|e: InputData| Msg::Update(e.value))}
-                onkeypress={self.link.batch_callback(|e: KeyboardEvent| {
-                    if e.key() == "Enter" { Some(Msg::Add) } else { None }
-                })}
+                {onkeypress}
             />
             /* Or multiline:
             <ul>
@@ -226,6 +220,20 @@ impl Model {
     }
 
     fn view_entry_edit_input(&self, (idx, entry): (usize, &Entry)) -> Html {
+        let edit = move |input: InputElement| {
+            let value = input.value();
+            input.set_value("");
+            Msg::Edit((idx, value))
+        };
+
+        let onblur = self
+            .link
+            .callback(move |e: FocusEvent| edit(e.target_unchecked_into()));
+
+        let onkeypress = self.link.batch_callback(move |e: KeyboardEvent| {
+            (e.key() == "Enter").then(|| edit(e.target_unchecked_into()))
+        });
+
         if entry.editing {
             html! {
                 <input
@@ -234,11 +242,8 @@ impl Model {
                     ref={self.focus_ref.clone()}
                     value={self.state.edit_value.clone()}
                     onmouseover={self.link.callback(|_| Msg::Focus)}
-                    oninput={self.link.callback(|e: InputData| Msg::UpdateEdit(e.value))}
-                    onblur={self.link.callback(move |_| Msg::Edit(idx))}
-                    onkeypress={self.link.batch_callback(move |e: KeyboardEvent| {
-                        if e.key() == "Enter" { Some(Msg::Edit(idx)) } else { None }
-                    })}
+                    {onblur}
+                    {onkeypress}
                 />
             }
         } else {

examples/todomvc/src/state.rs

@@ -5,7 +5,6 @@ use strum_macros::{EnumIter, ToString};
 pub struct State {
     pub entries: Vec<Entry>,
     pub filter: Filter,
-    pub value: String,
     pub edit_value: String,
 }
 

packages/yew-macro/tests/derive_props/fail.stderr

@@ -27,11 +27,11 @@ help: consider importing one of these items
 83 |     use crate::t9::foo;
    |
 
-error[E0277]: the trait bound `t1::Value: std::default::Default` is not satisfied
+error[E0277]: the trait bound `Value: std::default::Default` is not satisfied
  --> $DIR/fail.rs:9:21
   |
 9 |     #[derive(Clone, Properties)]
-  |                     ^^^^^^^^^^ the trait `std::default::Default` is not implemented for `t1::Value`
+  |                     ^^^^^^^^^^ the trait `std::default::Default` is not implemented for `Value`
   |
   = note: required by `Option::<T>::unwrap_or_default`
   = note: this error originates in a derive macro (in Nightly builds, run with -Z macro-backtrace for more info)