From da2703087a17492291251016b1e90566786d0d4c Mon Sep 17 00:00:00 2001 From: Enigo <> Date: Mon, 15 Jan 2024 10:49:14 +0800 Subject: [PATCH] Add Function Delayed Input Processing Example --- Cargo.lock | 37 +++++++----- examples/README.md | 1 + examples/function_delayed_input/Cargo.toml | 11 ++++ examples/function_delayed_input/README.md | 18 ++++++ examples/function_delayed_input/index.html | 12 ++++ examples/function_delayed_input/src/main.rs | 64 +++++++++++++++++++++ 6 files changed, 129 insertions(+), 14 deletions(-) create mode 100644 examples/function_delayed_input/Cargo.toml create mode 100644 examples/function_delayed_input/README.md create mode 100644 examples/function_delayed_input/index.html create mode 100644 examples/function_delayed_input/src/main.rs diff --git a/Cargo.lock b/Cargo.lock index 262361ca551..5a0e8d57704 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -876,6 +876,15 @@ dependencies = [ "percent-encoding", ] +[[package]] +name = "function_delayed_input" +version = "0.1.0" +dependencies = [ + "gloo-timers 0.3.0", + "web-sys", + "yew", +] + [[package]] name = "function_memory_game" version = "0.1.0" @@ -1844,9 +1853,9 @@ dependencies = [ [[package]] name = "js-sys" -version = "0.3.64" +version = "0.3.67" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "c5f195fe497f702db0f318b07fdd68edb16955aed830df8363d837542f8f935a" +checksum = "9a1d36f1235bc969acba30b7f5990b864423a6068a10f7c90ae8f0112e3a59d1" dependencies = [ "wasm-bindgen", ] @@ -3470,9 +3479,9 @@ checksum = "9c8d87e72b64a3b4db28d11ce29237c246188f4f51057d65a7eab63b7987e423" [[package]] name = "wasm-bindgen" -version = "0.2.87" +version = "0.2.90" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "7706a72ab36d8cb1f80ffbf0e071533974a60d0a308d01a5d0375bf60499a342" +checksum = "b1223296a201415c7fad14792dbefaace9bd52b62d33453ade1c5b5f07555406" dependencies = [ "cfg-if", "wasm-bindgen-macro", @@ -3480,9 +3489,9 @@ dependencies = [ [[package]] name = "wasm-bindgen-backend" -version = "0.2.87" +version = "0.2.90" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "5ef2b6d3c510e9625e5fe6f509ab07d66a760f0885d858736483c32ed7809abd" +checksum = "fcdc935b63408d58a32f8cc9738a0bffd8f05cc7c002086c6ef20b7312ad9dcd" dependencies = [ "bumpalo", "log", @@ -3507,9 +3516,9 @@ dependencies = [ [[package]] name = "wasm-bindgen-macro" -version = "0.2.87" +version = "0.2.90" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "dee495e55982a3bd48105a7b947fd2a9b4a8ae3010041b9e0faab3f9cd028f1d" +checksum = "3e4c238561b2d428924c49815533a8b9121c664599558a5d9ec51f8a1740a999" dependencies = [ "quote", "wasm-bindgen-macro-support", @@ -3517,9 +3526,9 @@ dependencies = [ [[package]] name = "wasm-bindgen-macro-support" -version = "0.2.87" +version = "0.2.90" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "54681b18a46765f095758388f2d0cf16eb8d4169b639ab575a8f5693af210c7b" +checksum = "bae1abb6806dc1ad9e560ed242107c0f6c84335f1749dd4e8ddb012ebd5e25a7" dependencies = [ "proc-macro2", "quote", @@ -3530,9 +3539,9 @@ dependencies = [ [[package]] name = "wasm-bindgen-shared" -version = "0.2.87" +version = "0.2.90" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "ca6ad05a4870b2bf5fe995117d3728437bd27d7cd5f06f13c17443ef369775a1" +checksum = "4d91413b1c31d7539ba5ef2451af3f0b833a005eb27a631cec32bc0635a8602b" [[package]] name = "wasm-bindgen-test" @@ -3571,9 +3580,9 @@ dependencies = [ [[package]] name = "web-sys" -version = "0.3.64" +version = "0.3.67" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "9b85cbef8c220a6abc02aefd892dfc0fc23afb1c6a426316ec33253a3877249b" +checksum = "58cd2333b6e0be7a39605f0e255892fd7418a682d8da8fe042fe25128794d2ed" dependencies = [ "js-sys", "wasm-bindgen", diff --git a/examples/README.md b/examples/README.md index e196494df3e..f486ded96b4 100644 --- a/examples/README.md +++ b/examples/README.md @@ -35,6 +35,7 @@ As an example, check out the TodoMVC example here: "] +edition = "2021" +license = "MIT OR Apache-2.0" + +[dependencies] +gloo-timers = "0.3.0" +web-sys = { version = "0.3.67", features = ["Window"]} +yew = { path = "../../packages/yew", features = ["csr"] } \ No newline at end of file diff --git a/examples/function_delayed_input/README.md b/examples/function_delayed_input/README.md new file mode 100644 index 00000000000..c30588a6ce0 --- /dev/null +++ b/examples/function_delayed_input/README.md @@ -0,0 +1,18 @@ +# Delayed Input Processing Example + +[![Demo](https://img.shields.io/website?label=demo&url=https%3A%2F%2Fexamples.yew.rs%2Ffunction_delayed_input)](https://examples.yew.rs/function_delayed_input) + +This is a demonstration of how to create an input form with delayed input processing. + +A typical use case is to send user input to the backend only when they have stopped typing, rather than on every keystroke. + +## Concepts +- Uses [`gloo-timers`](https://crates.io/crates/gloo-timers) to delay the processing + +## Running + +Run this application with the trunk development server: + +```bash +trunk serve --open +``` diff --git a/examples/function_delayed_input/index.html b/examples/function_delayed_input/index.html new file mode 100644 index 00000000000..b5c55a2a060 --- /dev/null +++ b/examples/function_delayed_input/index.html @@ -0,0 +1,12 @@ + + + + + + Yew • Function Delayed Input + + + + + + diff --git a/examples/function_delayed_input/src/main.rs b/examples/function_delayed_input/src/main.rs new file mode 100644 index 00000000000..240e07a8e33 --- /dev/null +++ b/examples/function_delayed_input/src/main.rs @@ -0,0 +1,64 @@ +use gloo_timers::callback::Timeout; +use web_sys::wasm_bindgen::JsCast; +use web_sys::HtmlInputElement; +use yew::*; + +#[function_component(App)] +fn app() -> Html { + let search = use_state(|| String::new()); + let response_data = use_state(|| String::new()); + { + let search = search.clone(); + let response_data = response_data.clone(); + use_effect_with(search.clone(), move |_| { + // here you would typically do a REST call to send the search input to backend + // for simplicity sake here we just set back the original input + let search = &*search; + response_data.set(search.clone()) + }); + } + + let timeout_state = use_state(|| None); + let search_clone = search.clone(); + let oninput = Callback::from(move |e: InputEvent| { + if let Some(target) = e.target() { + let input = target.dyn_into::().ok(); + if let Some(input) = input { + let value = input.value(); + if !value.is_empty() { + let prev_timeout = timeout_state.clone(); + if prev_timeout.is_some() { + drop(prev_timeout); + } + let search = search_clone.clone(); + let timeout = Timeout::new(1_000, move || { + search.set(value); + }); + timeout_state.set(Some(timeout)); + } + } + } + }); + + let response = response_data.clone(); + let response = &*response; + html! { +
+
+
+
+ +
+
+
+

{"The input value will appear below after a timeout:"}

+

{response.clone()}

+
+
+
+ } +} + +fn main() { + yew::Renderer::::new().render(); +}