shadow-design 0.4.0

Modular, high-performance UI component library for Dioxus 0.7 applications
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

use dioxus::prelude::*;
use crate::badge::{Badge, BadgeVariant};
use crate::icon::{RenderSvgIcon, SvgIcon};

/// Proprietà della singola voce o destinazione [`BottomNavItem`].
#[derive(Props, Clone, PartialEq)]
pub struct BottomNavItemProps {
    /// Etichetta testuale della destinazione visualizzata sotto l'icona.
    pub label: String,
    /// Icona vettoriale di contesto.
    pub icon: SvgIcon,
    /// Indica se questa destinazione è attualmente attiva.
    #[props(default)]
    pub active: bool,
    /// Badge numerico o indicatore testuale posizionato sopra l'icona (es. "3", "•", "NEW").
    #[props(default)]
    pub badge: Option<String>,
    /// Variante cromatica del badge (default: `BadgeVariant::Default`).
    #[props(default)]
    pub badge_variant: Option<BadgeVariant>,
    /// URL di navigazione (renderizza un tag `<a>`).
    #[props(default)]
    pub href: Option<String>,
    /// Callback invocata al click sulla destinazione.
    #[props(default)]
    pub on_click: Option<EventHandler<MouseEvent>>,
    /// Disabilita la voce prevenendo interazioni.
    #[props(default)]
    pub disabled: bool,
    /// Classi CSS addizionali.
    #[props(default)]
    pub class: String,
}

/// Singola destinazione all'interno della barra di navigazione inferiore.
#[component]
pub fn BottomNavItem(props: BottomNavItemProps) -> Element {
    #[cfg(feature = "theme")]
    let theme_val = crate::theme::use_theme()();
    #[cfg(feature = "theme")]
    let base_override = theme_val.resolve_component_base("bottom_nav_item").unwrap_or("");
    #[cfg(feature = "theme")]
    let class_modifiers = theme_val.resolve_class_modifiers("bottom_nav_item", &props.class);

    #[cfg(not(feature = "theme"))]
    let base_override = "";
    #[cfg(not(feature = "theme"))]
    let class_modifiers = String::new();

    let active_class = if props.active { "sd-bottom-nav-item--active" } else { "" };
    let disabled_class = if props.disabled { "sd-bottom-nav-item--disabled" } else { "" };

    let badge_el = if let Some(ref b) = props.badge {
        let variant = props.badge_variant.unwrap_or(BadgeVariant::Default);
        rsx! {
            span { class: "sd-bottom-nav-item__badge-wrapper",
                Badge {
                    label: b.clone(),
                    variant: variant,
                    pill: true,
                }
            }
        }
    } else {
        rsx! {}
    };

    let inner_content = rsx! {
        span { class: "sd-bottom-nav-item__icon-container",
            RenderSvgIcon { icon: props.icon.clone(), size: 20 }
            {badge_el}
            span { class: "sd-bottom-nav-item__active-pill", "aria-hidden": "true" }
        }
        span { class: "sd-bottom-nav-item__label", "{props.label}" }
    };

    if let Some(ref href) = props.href {
        rsx! {
            a {
                class: "sd-bottom-nav-item {active_class} {disabled_class} {base_override} {class_modifiers} {props.class}",
                href: "{href}",
                "aria-current": if props.active { "page" } else { "" },
                onclick: move |evt| {
                    if let Some(ref handler) = props.on_click {
                        handler.call(evt);
                    }
                },
                {inner_content}
            }
        }
    } else {
        rsx! {
            button {
                r#type: "button",
                class: "sd-bottom-nav-item sd-bottom-nav-item--button {active_class} {disabled_class} {base_override} {class_modifiers} {props.class}",
                disabled: props.disabled,
                "aria-current": if props.active { "page" } else { "" },
                onclick: move |evt| {
                    if let Some(ref handler) = props.on_click {
                        handler.call(evt);
                    }
                },
                {inner_content}
            }
        }
    }
}