mirror of
https://github.com/leptos-rs/leptos
synced 2024-11-10 06:44:17 +00:00
working on examples
This commit is contained in:
parent
b50de3a005
commit
ec3f0933fe
4 changed files with 21 additions and 16 deletions
|
@ -9,7 +9,7 @@ codegen-units = 1
|
|||
lto = true
|
||||
|
||||
[dependencies]
|
||||
leptos = { path = "../../leptos", features = ["csr"] }
|
||||
leptos = { path = "../../leptos" }
|
||||
console_log = "1"
|
||||
log = "0.4"
|
||||
console_error_panic_hook = "0.1.7"
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
use leptos::{html::*, *};
|
||||
use leptos::{html::*, prelude::*, signals::RwSignal, IntoView};
|
||||
|
||||
/// A simple counter view.
|
||||
// A component is really just a function call: it runs once to create the DOM and reactive system
|
||||
|
|
|
@ -8,7 +8,7 @@ codegen-units = 1
|
|||
lto = true
|
||||
|
||||
[dependencies]
|
||||
leptos = { path = "../../leptos", features = ["csr"] }
|
||||
leptos = { path = "../../leptos" }
|
||||
console_log = "1"
|
||||
log = "0.4"
|
||||
console_error_panic_hook = "0.1.7"
|
||||
|
@ -16,9 +16,7 @@ wasm-bindgen = "0.2"
|
|||
|
||||
[dependencies.web-sys]
|
||||
version = "0.3"
|
||||
features = [
|
||||
"Window",
|
||||
]
|
||||
features = ["Window"]
|
||||
|
||||
[dev-dependencies]
|
||||
wasm-bindgen-test = "0.3.0"
|
||||
|
|
|
@ -1,4 +1,10 @@
|
|||
use leptos::{leptos_dom::helpers::IntervalHandle, *};
|
||||
use leptos::{
|
||||
effect::Effect,
|
||||
leptos_dom::helpers::{set_interval_with_handle, IntervalHandle},
|
||||
prelude::*,
|
||||
signals::RwSignal,
|
||||
*,
|
||||
};
|
||||
use std::time::Duration;
|
||||
|
||||
/// Timer example, demonstrating the use of `use_interval`.
|
||||
|
@ -6,16 +12,16 @@ use std::time::Duration;
|
|||
pub fn TimerDemo() -> impl IntoView {
|
||||
// count_a updates with a fixed interval of 1000 ms, whereas count_b has a dynamic
|
||||
// update interval.
|
||||
let (count_a, set_count_a) = create_signal(0_i32);
|
||||
let (count_b, set_count_b) = create_signal(0_i32);
|
||||
let count_a = RwSignal::new(0_i32);
|
||||
let count_b = RwSignal::new(0_i32);
|
||||
|
||||
let (interval, set_interval) = create_signal(1000);
|
||||
let interval = RwSignal::new(1000);
|
||||
|
||||
use_interval(1000, move || {
|
||||
set_count_a.update(|c| *c += 1);
|
||||
count_a.update(|c| *c += 1);
|
||||
});
|
||||
use_interval(interval, move || {
|
||||
set_count_b.update(|c| *c += 1);
|
||||
count_b.update(|c| *c += 1);
|
||||
});
|
||||
|
||||
view! {
|
||||
|
@ -24,9 +30,10 @@ pub fn TimerDemo() -> impl IntoView {
|
|||
<div>{count_a}</div>
|
||||
<div>"Count B (dynamic interval, currently " {interval} " ms)"</div>
|
||||
<div>{count_b}</div>
|
||||
<input prop:value=interval on:input=move |ev| {
|
||||
if let Ok(value) = event_target_value(&ev).parse::<u64>() {
|
||||
set_interval.set(value);
|
||||
// TODO impl Property directly on signal types in stable
|
||||
<input prop:value=interval on:input:target=move |ev| {
|
||||
if let Ok(value) = ev.target().value().parse::<u64>() {
|
||||
interval.set.set(value);
|
||||
}
|
||||
}/>
|
||||
</div>
|
||||
|
@ -41,7 +48,7 @@ where
|
|||
T: Into<MaybeSignal<u64>> + 'static,
|
||||
{
|
||||
let interval_millis = interval_millis.into();
|
||||
create_effect(move |prev_handle: Option<IntervalHandle>| {
|
||||
Effect::new(move |prev_handle: Option<IntervalHandle>| {
|
||||
// effects get their previous return value as an argument
|
||||
// each time the effect runs, it will return the interval handle
|
||||
// so if we have a previous one, we cancel it
|
||||
|
|
Loading…
Reference in a new issue