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

use js_sys::Function;
use wasm_bindgen::{prelude::Closure, JsCast, UnwrapThrowExt};

use crate::{callback::Callable, react_bindings};

/// Allows access to the transition state.
#[derive(Debug, Clone)]
pub struct Transition {
  is_pending: bool,
  start_transition: Function,
}

impl Transition {
  /// Returns whether the transition is active or not.
  pub fn is_pending(&self) -> bool {
    self.is_pending
  }

  /// Marks the updates in the given closure as transitions.
  pub fn start(&mut self, f: impl FnOnce() + 'static) {
    self
      .start_transition
      .call(&Closure::once_into_js(f))
      .expect_throw("unable to call start function");
  }
}

/// Returns a stateful value for the pending state of the transition, and a
/// function to start it.
///
/// # Example
///
/// ```
/// # use wasm_react::{*, hooks::*, callback::*};
/// #
/// # fn render() -> VNode {
/// let count = use_state(|| 0);
/// let transition = use_transition();
///
/// let handle_click = use_callback({
///   let mut transition = transition.clone();
///
///   move |_| {
///     let mut count = count.clone();
///
///     transition.start(move || {
///       count.set(|c| c + 1);
///     });
///   }
/// }, Deps::none());
///
/// h!(div).build(c![
///   transition.is_pending().then(||
///     h!(div).build(c!["Loading…"])
///   ),
///   h!(button).on_click(&handle_click).build(c![]),
/// ])
/// # }
/// ```
pub fn use_transition() -> Transition {
  let result = react_bindings::use_transition();

  let is_pending = result
    .get(0)
    .as_bool()
    .expect_throw("unable to read pending state from transition");
  let start_transition = result
    .get(1)
    .dyn_into::<Function>()
    .expect_throw("unable to read start function from transition");

  Transition {
    is_pending,
    start_transition,
  }
}