feat: apply local router changes
This commit is contained in:
Jonathan Kelley committed
1 parent
3928856a9b
commit
f2979cb12a
28 files changed
+672
-516
No files matched your search
@@ -1,97 +1,116 @@
|
||||
use crate::RouterService;
|
||||
use dioxus::Attribute;
|
||||
use std::sync::Arc;
|
||||
|
||||
use crate::RouterCore;
|
||||
use dioxus_core as dioxus;
|
||||
use dioxus_core::prelude::*;
|
||||
use dioxus_core_macro::{format_args_f, rsx, Props};
|
||||
use dioxus_html as dioxus_elements;
|
||||
|
||||
/// Props for the [`Link`](struct.Link.html) component.
|
||||
#[derive(Props)]
|
||||
pub struct LinkProps<'a> {
|
||||
to: &'a str,
|
||||
|
||||
/// The url that gets pushed to the history stack
|
||||
/// The route to link to. This can be a relative path, or a full URL.
|
||||
///
|
||||
/// You can either put in your own inline method or just autoderive the route using `derive(Routable)`
|
||||
///
|
||||
/// ```rust, ignore
|
||||
///
|
||||
/// Link { to: Route::Home, href: |_| "home".to_string() }
|
||||
///
|
||||
/// // or
|
||||
///
|
||||
/// Link { to: Route::Home, href: Route::as_url }
|
||||
/// ```rust
|
||||
/// // Absolute path
|
||||
/// Link { to: "/home", "Go Home" }
|
||||
///
|
||||
/// // Relative path
|
||||
/// Link { to: "../", "Go Up" }
|
||||
/// ```
|
||||
#[props(default, strip_option)]
|
||||
href: Option<&'a str>,
|
||||
pub to: &'a str,
|
||||
|
||||
/// Set the class of the inner link ['a'](https://www.w3schools.com/tags/tag_a.asp) element.
|
||||
///
|
||||
/// This can be useful when styling the inner link element.
|
||||
#[props(default, strip_option)]
|
||||
class: Option<&'a str>,
|
||||
pub class: Option<&'a str>,
|
||||
|
||||
/// Set the ID of the inner link ['a'](https://www.w3schools.com/tags/tag_a.asp) element.
|
||||
///
|
||||
/// This can be useful when styling the inner link element.
|
||||
#[props(default, strip_option)]
|
||||
id: Option<&'a str>,
|
||||
pub id: Option<&'a str>,
|
||||
|
||||
/// Set the title of the window after the link is clicked..
|
||||
#[props(default, strip_option)]
|
||||
title: Option<&'a str>,
|
||||
pub title: Option<&'a str>,
|
||||
|
||||
/// Autodetect if a link is external or not.
|
||||
///
|
||||
/// This is automatically set to `true` and will use http/https detection
|
||||
#[props(default = true)]
|
||||
autodetect: bool,
|
||||
pub autodetect: bool,
|
||||
|
||||
/// Is this link an external link?
|
||||
#[props(default = false)]
|
||||
external: bool,
|
||||
pub external: bool,
|
||||
|
||||
/// New tab?
|
||||
#[props(default = false)]
|
||||
new_tab: bool,
|
||||
pub new_tab: bool,
|
||||
|
||||
children: Element<'a>,
|
||||
|
||||
#[props(default)]
|
||||
attributes: Option<&'a [Attribute<'a>]>,
|
||||
/// Pass children into the `<a>` element
|
||||
pub children: Element<'a>,
|
||||
}
|
||||
|
||||
/// A component that renders a link to a route.
|
||||
///
|
||||
/// `Link` components are just [`<a>`](https://www.w3schools.com/tags/tag_a.asp) elements
|
||||
/// that link to different pages *within* your single-page app.
|
||||
///
|
||||
/// If you need to link to a resource outside of your app, then just use a regular
|
||||
/// `<a>` element directly.
|
||||
///
|
||||
/// # Examples
|
||||
///
|
||||
/// ```rust
|
||||
/// fn Header(cx: Scope) -> Element {
|
||||
/// cx.render(rsx!{
|
||||
/// Link { to: "/home", "Go Home" }
|
||||
/// })
|
||||
/// }
|
||||
/// ```
|
||||
pub fn Link<'a>(cx: Scope<'a, LinkProps<'a>>) -> Element {
|
||||
if let Some(service) = cx.consume_context::<RouterService>() {
|
||||
let LinkProps {
|
||||
to,
|
||||
href,
|
||||
class,
|
||||
id,
|
||||
title,
|
||||
autodetect,
|
||||
external,
|
||||
new_tab,
|
||||
children,
|
||||
..
|
||||
} = cx.props;
|
||||
let svc = cx.use_hook(|_| cx.consume_context::<Arc<RouterCore>>());
|
||||
|
||||
let is_http = to.starts_with("http") || to.starts_with("https");
|
||||
let outerlink = (*autodetect && is_http) || *external;
|
||||
let LinkProps {
|
||||
to,
|
||||
class,
|
||||
id,
|
||||
title,
|
||||
autodetect,
|
||||
external,
|
||||
new_tab,
|
||||
children,
|
||||
..
|
||||
} = cx.props;
|
||||
|
||||
let prevent_default = if outerlink { "" } else { "onclick" };
|
||||
let is_http = to.starts_with("http") || to.starts_with("https");
|
||||
let outerlink = (*autodetect && is_http) || *external;
|
||||
let prevent_default = if outerlink { "" } else { "onclick" };
|
||||
|
||||
return cx.render(rsx! {
|
||||
a {
|
||||
href: "{to}",
|
||||
class: format_args!("{}", class.unwrap_or("")),
|
||||
id: format_args!("{}", id.unwrap_or("")),
|
||||
title: format_args!("{}", title.unwrap_or("")),
|
||||
prevent_default: "{prevent_default}",
|
||||
target: format_args!("{}", if *new_tab { "_blank" } else { "" }),
|
||||
onclick: move |_| {
|
||||
if !outerlink {
|
||||
cx.render(rsx! {
|
||||
a {
|
||||
href: "{to}",
|
||||
class: format_args!("{}", class.unwrap_or("")),
|
||||
id: format_args!("{}", id.unwrap_or("")),
|
||||
title: format_args!("{}", title.unwrap_or("")),
|
||||
prevent_default: "{prevent_default}",
|
||||
target: format_args!("{}", if *new_tab { "_blank" } else { "" }),
|
||||
onclick: move |_| {
|
||||
if !outerlink {
|
||||
if let Some(service) = svc {
|
||||
service.push_route(to);
|
||||
} else {
|
||||
log::error!(
|
||||
"Attempted to create a Link to {} outside of a Router context",
|
||||
cx.props.to,
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
&cx.props.children
|
||||
}
|
||||
});
|
||||
}
|
||||
log::warn!(
|
||||
"Attempted to create a Link to {} outside of a Router context",
|
||||
cx.props.to,
|
||||
);
|
||||
None
|
||||
}
|
||||
},
|
||||
children
|
||||
}
|
||||
})
|
||||
}
|
||||
Reference in new issue
Block a user