orbital-ui 0.1.1

Leptos component library and design system for focused, accessible product UIs
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

use icondata_core::Icon;
use leptos::prelude::*;
use leptos_router::hooks::{use_location, use_navigate};
#[cfg(feature = "hydrate")]
use orbital_base_components::NavigationInjection;
use orbital_core_components::{NavigationItem, NavigationItemConfig};

use crate::nav::use_route_active;

fn preserve_env_query_suffix(search: &str) -> String {
    let trimmed = search.trim_start_matches('?');
    if trimmed.is_empty() {
        return String::new();
    }
    for pair in trimmed.split('&') {
        let mut it = pair.splitn(2, '=');
        let key = it.next().unwrap_or("");
        if key.eq_ignore_ascii_case("env") {
            let value = it.next().unwrap_or("");
            return format!("?env={value}");
        }
    }
    String::new()
}

/// Route-aware wrapper around [`NavigationItem`] for Leptos Router apps.
///
/// Syncs selection with the active route and navigates client-side on click.
#[component]
pub fn NavigationLink(
    #[prop(into)] path: String,
    #[prop(into)] value: String,
    icon: Icon,
    #[prop(default = false)] exact: bool,
    #[prop(optional, into)] test_id: Option<String>,
    children: Children,
) -> impl IntoView {
    #[cfg(feature = "hydrate")]
    let nav = NavigationInjection::expect_context();
    let active = use_route_active(&path, exact);

    #[cfg(feature = "hydrate")]
    {
        let value_for_effect = value.clone();
        Effect::new(move |_| {
            if active.get() {
                nav.selected_value().set(Some(value_for_effect.clone()));
            }
        });
    }

    #[cfg(not(feature = "hydrate"))]
    let _ = active;

    let location = use_location();
    let navigate = use_navigate();
    let navigate_store = StoredValue::new(navigate);
    let nav_path = path.clone();
    let href = Signal::derive({
        let nav_path = nav_path.clone();
        move || nav_path.clone()
    });
    let item_value = Signal::derive(move || value.clone());
    let on_click = Callback::new(move |ev: leptos::ev::MouseEvent| {
        ev.prevent_default();
        let from_query = location
            .query
            .get_untracked()
            .get_str("env")
            .filter(|v| !v.is_empty())
            .map(|v| format!("?env={v}"));
        let suffix = from_query
            .unwrap_or_else(|| preserve_env_query_suffix(&location.search.get_untracked()));
        let dest = format!("{}{}", nav_path, suffix);
        navigate_store.with_value(|navigate| {
            navigate(&dest, Default::default());
        });
    });

    view! {
        <div data-testid=test_id.unwrap_or_default()>
            <NavigationItem config=NavigationItemConfig::from_signal(item_value).with_href(href).with_on_click(on_click) icon=icon>
                {children()}
            </NavigationItem>
        </div>
    }
}

/// Backward-compatible alias for [`NavigationLink`].
pub use NavigationLink as NavLink;