hikari-animation 0.3.14

Animation hooks, easing functions and transition utilities for the Hikari design system
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

//! Animated value and transition hooks for tairitsu components

use tairitsu_hooks::use_signal;
use tairitsu_vdom::Signal;
use wasm_bindgen::JsCast;

use crate::provider::try_use_animation_config;

pub fn use_animated_value<T: Clone + 'static>(initial: T) -> Signal<T> {
    use_signal(move || initial).inner().clone()
}

/// Create a persistent transition controller for the current component.
///
/// Uses `use_signal` so the controller is constructed once and shared across
/// re-renders (the controller is `Signal`-backed, so cloning is cheap).
pub fn use_transition(duration_ms: u64) -> UseTransition {
    use_signal(move || UseTransition::new(duration_ms))
        .inner()
        .get()
}

/// Like [`use_transition`], but scales the duration by the active animation
/// configuration when one is provided via an [`AnimationProvider`](crate::AnimationProvider).
pub fn use_transition_with_config(duration_ms: u64) -> UseTransition {
    let scaled_duration = if let Some(ctx) = try_use_animation_config() {
        ctx.config.read().scale_duration(duration_ms)
    } else {
        duration_ms
    };
    use_signal(move || UseTransition::new(scaled_duration))
        .inner()
        .get()
}

#[derive(Clone)]
pub struct UseTransition {
    is_visible: Signal<bool>,
    is_animating: Signal<bool>,
    duration_ms: u64,
}

impl UseTransition {
    fn new(duration_ms: u64) -> Self {
        Self {
            is_visible: Signal::new(false),
            is_animating: Signal::new(false),
            duration_ms,
        }
    }

    pub fn is_visible(&self) -> bool {
        self.is_visible.read()
    }

    pub fn is_animating(&self) -> bool {
        self.is_animating.read()
    }

    pub fn enter(&self) {
        self.is_visible.set(true);
        self.is_animating.set(true);

        let is_animating = self.is_animating.clone();
        let duration_ms = self.duration_ms as i32;

        let closure = wasm_bindgen::closure::Closure::once(Box::new(move || {
            is_animating.set(false);
        }) as Box<dyn FnOnce()>);

        web_sys::window()
            .unwrap()
            .set_timeout_with_callback_and_timeout_and_arguments_0(
                closure.as_ref().unchecked_ref(),
                duration_ms,
            )
            .unwrap();
        closure.forget();
    }

    pub fn exit(&self) {
        self.is_animating.set(true);

        let is_visible = self.is_visible.clone();
        let is_animating = self.is_animating.clone();
        let duration_ms = self.duration_ms as i32;

        let closure = wasm_bindgen::closure::Closure::once(Box::new(move || {
            is_visible.set(false);
            is_animating.set(false);
        }) as Box<dyn FnOnce()>);

        web_sys::window()
            .unwrap()
            .set_timeout_with_callback_and_timeout_and_arguments_0(
                closure.as_ref().unchecked_ref(),
                duration_ms,
            )
            .unwrap();
        closure.forget();
    }

    pub fn toggle(&self) {
        if self.is_visible.read() {
            self.exit();
        } else {
            self.enter();
        }
    }
}