orbital-base-components 0.1.1

Headless base primitives for Orbital — structure, semantics, and accessibility
Documentation 
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

use leptos::prelude::*;
#[cfg(feature = "ssr")]
use leptos::tachys::html::style::style;

use crate::WebSysCallback;

/// **Deprecated:** prefer [`orbital_motion::OrbitalPresence`] with [`orbital_motion::PresenceMotion`] presets.
#[deprecated(since = "0.1.0", note = "use orbital_motion::OrbitalPresence instead")]
/// Legacy wrapper around [`leptos_transition_group::CSSTransition`].
#[component]
pub fn OrbitalCSSTransition<T>(
    #[prop(into)] show: Signal<bool>,
    #[prop(into)] name: Signal<String>,
    #[prop(optional)] appear: bool,
    #[prop(optional)] on_before_enter: Option<WebSysCallback>,
    #[prop(optional)] on_enter: Option<WebSysCallback>,
    #[prop(optional)] on_after_enter: Option<WebSysCallback>,
    #[prop(optional)] on_before_leave: Option<WebSysCallback>,
    #[prop(optional)] on_leave: Option<WebSysCallback>,
    #[prop(optional)] on_after_leave: Option<WebSysCallback>,
    children: TypedChildren<T>,
) -> impl IntoView
where
    T: AddAnyAttr + IntoView + Send + 'static,
{
    #[cfg(not(feature = "ssr"))]
    {
        use leptos_transition_group::CSSTransition;

        let before = on_before_enter;
        let on_before_enter_cb = move |el: web_sys::HtmlElement| {
            if let Some(cb) = before {
                cb.run(el);
            }
        };

        let enter = on_enter;
        let on_enter_cb = move |el: web_sys::HtmlElement| {
            if let Some(cb) = enter {
                cb.run(el);
            }
        };

        let after_enter = on_after_enter;
        let on_after_enter_cb = move |el: web_sys::HtmlElement| {
            if let Some(cb) = after_enter {
                cb.run(el);
            }
        };

        let before_leave = on_before_leave;
        let on_before_leave_cb = move |el: web_sys::HtmlElement| {
            if let Some(cb) = before_leave {
                cb.run(el);
            }
        };

        let leave = on_leave;
        let on_leave_cb = move |el: web_sys::HtmlElement| {
            if let Some(cb) = leave {
                cb.run(el);
            }
        };

        let after = on_after_leave;
        let on_after_leave_cb = move |el: web_sys::HtmlElement| {
            if let Some(cb) = after {
                cb.run(el);
            }
        };

        view! {
            <CSSTransition
                show=show
                name=name
                appear=appear
                on_before_enter=on_before_enter_cb
                on_enter=on_enter_cb
                on_after_enter=on_after_enter_cb
                on_before_leave=on_before_leave_cb
                on_leave=on_leave_cb
                on_after_leave=on_after_leave_cb
            >
                {children.into_inner()().into_inner()}
            </CSSTransition>
        }
    }

    #[cfg(feature = "ssr")]
    {
        let _ = (
            name,
            appear,
            on_before_enter,
            on_enter,
            on_after_enter,
            on_before_leave,
            on_leave,
            on_after_leave,
        );
        children.into_inner()().into_inner().add_any_attr(style((
            "display",
            if show.get_untracked() { "" } else { "none" },
        )))
    }
}