leptonic 0.5.0

The Leptos component library. 
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

use std::rc::Rc;

use leptos::*;
use uuid::Uuid;

use crate::tabs::use_tabs;
use crate::Mount;

#[derive(Debug, Clone)]
pub struct TabData {
    pub id: Uuid,
    pub name: Oco<'static, str>,
    pub label: Rc<View>,
}

// TODO: We might want to take only `Children` and hide them when the tab is not active...
#[component]
pub fn Tab(
    // TODO: Can / should we accept a String instead?
    #[prop(optional)] id: Option<Uuid>,
    /// Uniquely identifies this tab.
    #[prop(into)]
    name: Oco<'static, str>,
    #[prop(into)] label: View,
    #[prop(optional)] mount: Option<Mount>,

    #[prop(optional)] children: Option<ChildrenFn>,

    /// Called whenever the tab comes into view.
    #[prop(into, optional)] on_show: Option<Callback<()>>,

    /// Called whenever the tab gets hidden.
    #[prop(into, optional)] on_hide: Option<Callback<()>>,
) -> impl IntoView {
    let id = id.unwrap_or_else(Uuid::new_v4);
    let tabs = use_tabs();

    let mount = mount.or(tabs.default_mount_type).unwrap_or(Mount::Once);

    let name = store_value(name);

    tabs.register(TabData {
        id,
        name: name.get_value(),
        label: Rc::new(label.into_view()),
    });

    on_cleanup(move || {
        tabs.deregister(id);
    });

    if let Some(on_show) = on_show {
        create_effect(move |_| {
            let history = tabs.history.get();
            let this = name.get_value();
            if history.get_active() == Some(&this) && history.get_previous() != Some(&this) {
                on_show.call(());
            }
        });
    }

    if let Some(on_hide) = on_hide {
        create_effect(move |_| {
            let history = tabs.history.get();
            let this = name.get_value();
            if history.get_active() != Some(&this) && history.get_previous() == Some(&this) {
                on_hide.call(());
            }
        });
    }

    let is_active = move || tabs.history.get().get_active() == Some(&name.get_value());

    match mount {
        Mount::Once => view! {
            {
                view! {
                    <leptonic-tab id=id.to_string() data-name=name.get_value() role="tabpanel" aria-hidden=move || if is_active() { "false" } else { "true"} >
                        {
                            if let Some(children) = &children {
                                children()
                            } else {
                                Fragment::new(vec![])
                            }
                        }
                    </leptonic-tab>
                }.into_view()
            }
        },
        Mount::WhenShown => view! {
            {
                view! {
                    <Show when=is_active fallback=|| ()>

                        <leptonic-tab id=id.to_string() data:name=name.get_value() role="tabpanel">
                            {
                                if let Some(children) = &children {
                                    children()
                                } else {
                                    Fragment::new(vec![])
                                }
                            }
                        </leptonic-tab>
                    </Show>
                }.into_view()
            }
        },
    }
}