1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
use std::rc::Rc;
use gloo::timers::callback::Timeout;
use yew::prelude::*;
use super::{use_mut_latest, use_unmount};
/// State handle for the [`use_timeout`] hook.
pub struct UseTimeoutHandle {
reset: Rc<dyn Fn()>,
cancel: Rc<dyn Fn()>,
}
impl UseTimeoutHandle {
/// Reset the timeout.
pub fn reset(&self) {
(self.reset)();
}
/// Cancel the timeout.
pub fn cancel(&self) {
(self.cancel)();
}
}
impl Clone for UseTimeoutHandle {
fn clone(&self) -> Self {
Self {
reset: self.reset.clone(),
cancel: self.cancel.clone(),
}
}
}
/// A hook that schedules a timeout to invoke `callback` in `millis` milliseconds from now.
/// The timeout will be cancelled if `millis` is set to 0 or `cancel()` is called.
///
/// # Example
///
/// ```rust
/// # use yew::prelude::*;
/// #
/// use yew_hooks::prelude::*;
///
/// #[function_component(Timeout)]
/// fn timeout() -> Html {
/// let state = use_state(|| 0);
///
/// let timeout = {
/// let state = state.clone();
/// use_timeout(move || {
/// state.set(*state + 1);
/// }, 2000)
/// };
///
/// let onreset = {
/// let timeout = timeout.clone();
/// Callback::from(move |_| timeout.reset())
/// };
///
/// let oncancel = {
/// let timeout = timeout.clone();
/// Callback::from(move |_| timeout.cancel())
/// };
///
/// html! {
/// <>
/// <button onclick={onreset}>{ "Reset timeout" }</button>
/// <button onclick={oncancel}>{ "Cancel timeout" }</button>
/// { *state }
/// </>
/// }
/// }
/// ```
#[hook]
pub fn use_timeout<Callback>(callback: Callback, millis: u32) -> UseTimeoutHandle
where
Callback: FnOnce() + 'static,
{
let callback_ref = use_mut_latest(Some(callback));
let timeout_ref = use_mut_ref(|| None);
let reset = {
let timeout_ref = timeout_ref.clone();
Rc::new(move || {
let timeout_ref = timeout_ref.clone();
let callback_ref = callback_ref.clone();
if millis > 0 {
*timeout_ref.borrow_mut() = Some(Timeout::new(millis, move || {
let callback_ref = callback_ref.current();
let callback = (*callback_ref.borrow_mut()).take();
if let Some(callback) = callback {
callback();
}
}));
} else {
*timeout_ref.borrow_mut() = None;
}
})
};
let cancel = {
let timeout_ref = timeout_ref.clone();
Rc::new(move || {
*timeout_ref.borrow_mut() = None;
})
};
{
let reset = reset.clone();
let timeout_ref = timeout_ref.clone();
use_effect_with(millis, move |_| {
reset();
move || *timeout_ref.borrow_mut() = None
});
}
use_unmount(move || {
*timeout_ref.borrow_mut() = None;
});
UseTimeoutHandle { reset, cancel }
}