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
125
126

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 }
///         </>
///     }
/// }
/// ```
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_deps(
            move |_| {
                reset();

                move || *timeout_ref.borrow_mut() = None
            },
            millis,
        );
    }

    use_unmount(move || {
        *timeout_ref.borrow_mut() = None;
    });

    UseTimeoutHandle { reset, cancel }
}