thaw 0.4.8

An easy to use leptos component library
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
107
108
109
110
111
112
113
114
115
116
117
118

use super::{NavCategoryInjection, NavDrawerInjection};
use crate::Icon;
use leptos::{either::Either, prelude::*};
use thaw_utils::{class_list, OptionModelWithValue};

#[component]
pub fn NavItem(
    #[prop(optional, into)] class: MaybeProp<String>,
    #[prop(optional, into)] icon: MaybeProp<icondata_core::Icon>,
    #[prop(into)] value: Signal<String>,
    #[prop(optional, into)] href: Option<Signal<String>>,
    children: Children,
) -> impl IntoView {
    let nav_drawer = NavDrawerInjection::expect_context();
    let nav_category = NavCategoryInjection::use_context();
    let on_click = move |_| {
        let value = value.get_untracked();
        if nav_drawer
            .selected_value
            .with_untracked(|selected_value| match selected_value {
                OptionModelWithValue::T(v) => v != &value,
                OptionModelWithValue::Option(v) => v.as_ref() != Some(&value),
            })
        {
            nav_drawer.selected_value.set(Some(value));
            nav_drawer
                .selected_category_value
                .set(nav_category.map(|c| c.value.get_untracked()));
        }
    };

    let children = || {
        view! {
            {move || {
                if let Some(icon) = icon.get() {
                    Either::Left(view! { <Icon icon=icon style="font-size: 20px" /> })
                } else {
                    Either::Right(())
                }
            }}
            {children()}
        }
    };

    let selected = Memo::new(move |_| {
        let selected = nav_drawer.selected_value.with(|selected_value| {
            value.with(|value| match selected_value {
                OptionModelWithValue::T(v) => v == value,
                OptionModelWithValue::Option(v) => v.as_ref() == Some(&value),
            })
        });

        if selected {
            if let Some(nav_category) = nav_category {
                let value = nav_category.value.get_untracked();
                if nav_drawer
                    .selected_category_value
                    .with_untracked(|selected_category_value| match selected_category_value {
                        OptionModelWithValue::T(v) => v != &value,
                        OptionModelWithValue::Option(v) => v.as_ref() != Some(&value),
                    })
                {
                    nav_drawer.selected_category_value.set(Some(value));
                }
            }
        }

        selected
    });

    if let Some(href) = href {
        Either::Left(view! {
            <a
                class=class_list![
                    "thaw-nav-item",
                    ("thaw-nav-item--selected", move || selected.get()),
                    class
                ]
                href=move || href.get()
                on:click=on_click
            >
                {children()}
            </a>
        })
    } else {
        Either::Right(view! {
            <button
                class=class_list![
                    "thaw-nav-item",
                    ("thaw-nav-item--selected", move || selected.get()),
                    class
                ]
                on:click=on_click
            >
                {children()}
            </button>
        })
    }
}

#[component]
pub fn NavSubItem(
    #[prop(optional, into)] class: MaybeProp<String>,
    #[prop(optional, into)] icon: MaybeProp<icondata_core::Icon>,
    #[prop(into)] value: Signal<String>,
    #[prop(optional, into)] href: Option<Signal<String>>,
    children: Children,
) -> impl IntoView {
    let class = MaybeProp::derive(move || {
        format!("thaw-nav-sub-item {}", class.get().unwrap_or_default()).into()
    });

    if let Some(href) = href {
        Either::Left(view! { <NavItem class href icon value children /> })
    } else {
        Either::Right(view! { <NavItem class icon value children /> })
    }
}