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 }
}