From 35b22923b2e8b17a10c9b66329f09245adc5dba0 Mon Sep 17 00:00:00 2001 From: Jonathan Kelley Date: Sat, 5 Mar 2022 15:25:09 -0500 Subject: [PATCH] fix: some examples --- examples/filedragdrop.rs | 2 +- examples/inputs.rs | 3 -- examples/link.rs | 16 ++++++++-- examples/nested_listeners.rs | 4 ++- examples/router.rs | 19 ++++++----- examples/todomvc.rs | 61 +++++++++++++++++++++--------------- src/lib.rs | 2 +- 7 files changed, 63 insertions(+), 44 deletions(-) diff --git a/examples/filedragdrop.rs b/examples/filedragdrop.rs index e5644e2a0..e91334c50 100644 --- a/examples/filedragdrop.rs +++ b/examples/filedragdrop.rs @@ -12,7 +12,7 @@ fn main() { fn app(cx: Scope) -> Element { cx.render(rsx!( div { - h1 { "drag an file here" } + h1 { "drag a file here and check your console" } } )) } diff --git a/examples/inputs.rs b/examples/inputs.rs index 5e0a52244..e0f8cd300 100644 --- a/examples/inputs.rs +++ b/examples/inputs.rs @@ -104,7 +104,6 @@ fn app(cx: Scope) -> Element { // elements with driven values will preventdefault automatically. // you can disable this override with preventdefault: false - div { input { id: "pdf", @@ -121,8 +120,6 @@ fn app(cx: Scope) -> Element { } } - - FIELDS.iter().map(|(field, value)| rsx!( div { input { diff --git a/examples/link.rs b/examples/link.rs index 41b010e8d..6f7638c86 100644 --- a/examples/link.rs +++ b/examples/link.rs @@ -10,7 +10,7 @@ fn app(cx: Scope) -> Element { p { a { href: "http://dioxuslabs.com/", - "default link" + "Default link - links outside of your app" } } p { @@ -20,7 +20,19 @@ fn app(cx: Scope) -> Element { onclick: |_| { println!("Hello Dioxus"); }, - "custom event link", + "Custom event link - links inside of your app", + } + } + } + div { + Router { + Route { to: "/", h1 { "Home" } }, + Route { to: "/settings", h1 { "settings" } }, + + p { "----"} + ul { + Link { to: "/", li { "Router link to home" } }, + Link { to: "/settings", li { "Router link to settings" } }, } } } diff --git a/examples/nested_listeners.rs b/examples/nested_listeners.rs index 4b9fd14e0..aef17526d 100644 --- a/examples/nested_listeners.rs +++ b/examples/nested_listeners.rs @@ -14,6 +14,8 @@ fn app(cx: Scope) -> Element { cx.render(rsx! { div { onclick: move |_| println!("clicked! top"), + "- div" + button { onclick: move |_| println!("clicked! bottom propoate"), "Propogate" @@ -26,7 +28,7 @@ fn app(cx: Scope) -> Element { "Dont propogate" } button { - "Does not handle clicks" + "Does not handle clicks - only propogate" } } }) diff --git a/examples/router.rs b/examples/router.rs index 0dc09f566..c0c021a66 100644 --- a/examples/router.rs +++ b/examples/router.rs @@ -13,18 +13,17 @@ fn app(cx: Scope) -> Element { Router { ul { Link { to: "/", li { "Go home!" } } - Link { to: "users", li { "List all users" } } - Link { to: "blog", li { "Blog posts" } } + Link { to: "/users", li { "List all users" } } + Link { to: "/blog", li { "Blog posts" } } + + Link { to: "/users/bill", li { "List all users" } } + Link { to: "/blog/5", li { "Blog post 5" } } } Route { to: "/", "Home" } - Route { to: "users", - Route { to: "/", "User list" } - Route { to: ":name", User {} } - } - Route { to: "blog" - Route { to: "/", "Blog list" } - Route { to: ":post", BlogPost {} } - } + Route { to: "/users", "User list" } + Route { to: "/users/:name", User {} } + Route { to: "/blog", "Blog list" } + Route { to: "/blog/:post", BlogPost {} } Route { to: "", "Err 404 Route Not Found" } } }) diff --git a/examples/todomvc.rs b/examples/todomvc.rs index a031e8c8c..99cf67a69 100644 --- a/examples/todomvc.rs +++ b/examples/todomvc.rs @@ -118,34 +118,43 @@ pub fn todo_entry<'a>(cx: Scope<'a, TodoEntryProps<'a>>) -> Element { let completed = if todo.checked { "completed" } else { "" }; let editing = if **is_editing { "editing" } else { "" }; - rsx!(cx, li { - class: "{completed} {editing}", - div { class: "view", - input { class: "toggle", r#type: "checkbox", id: "cbg-{todo.id}", checked: "{todo.checked}", - onchange: move |evt| { - cx.props.todos.make_mut()[&cx.props.id].checked = evt.value.parse().unwrap(); + cx.render(rsx!{ + li { + class: "{completed} {editing}", + div { class: "view", + + input { + class: "toggle", + r#type: "checkbox", + id: "cbg-{todo.id}", + checked: "{todo.checked}", + oninput: move |evt| { + cx.props.todos.make_mut()[&cx.props.id].checked = evt.value.parse().unwrap(); + } + } + + label { + r#for: "cbg-{todo.id}", + onclick: move |_| is_editing.set(true), + prevent_default: "onclick", + "{todo.contents}" } } - label { - r#for: "cbg-{todo.id}", - onclick: move |_| is_editing.set(true), - "{todo.contents}" - } + is_editing.then(|| rsx!{ + input { + class: "edit", + value: "{todo.contents}", + oninput: move |evt| cx.props.todos.make_mut()[&cx.props.id].contents = evt.value.clone(), + autofocus: "true", + onfocusout: move |_| is_editing.set(false), + onkeydown: move |evt| { + match evt.key.as_str() { + "Enter" | "Escape" | "Tab" => is_editing.set(false), + _ => {} + } + }, + } + }) } - is_editing.then(|| rsx!{ - input { - class: "edit", - value: "{todo.contents}", - oninput: move |evt| cx.props.todos.make_mut()[&cx.props.id].contents = evt.value.clone(), - autofocus: "true", - onfocusout: move |_| is_editing.set(false), - onkeydown: move |evt| { - match evt.key.as_str() { - "Enter" | "Escape" | "Tab" => is_editing.set(false), - _ => {} - } - }, - } - }) }) } diff --git a/src/lib.rs b/src/lib.rs index ebcc0d93e..393e6c984 100644 --- a/src/lib.rs +++ b/src/lib.rs @@ -33,7 +33,7 @@ pub mod prelude { pub use dioxus_html as dioxus_elements; #[cfg(feature = "router")] - pub use dioxus_router::{use_route, use_router, Link, Redirect, Router, UseRoute}; + pub use dioxus_router::{use_route, use_router, Link, Redirect, Router, UseRoute, Route}; #[cfg(feature = "fermi")] pub use fermi::{use_atom_ref, use_init_atom_root, use_read, use_set, Atom, AtomRef};