swaits/dioxus
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' into jk/remove-dioxus-bin

Browse Source
This commit is contained in:
Jonathan Kelley committed 2023-07-18 18:31:48 -07:00
2 parents df23c3c651 4e278fead5
commit cd30b42e2d
259 files changed
+11706 -4788
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

examples/crm.rs
+175 -83
View File
@@ -1,11 +1,21 @@
/*
Tiny CRM: A port of the Yew CRM example to Dioxus.
*/
//! Tiny CRM: A port of the Yew CRM example to Dioxus.
#![allow(non_snake_case)]
use dioxus::prelude::*;
use dioxus_router::{Link, Route, Router};
use dioxus_router::prelude::*;
fn main() {
dioxus_desktop::launch(app);
dioxus_desktop::launch(App);
}
#[derive(Routable, Clone)]
#[rustfmt::skip]
enum Route {
#[route("/")]
ClientList {},
#[route("/new")]
ClientAdd {},
#[route("/settings")]
Settings {},
}
#[derive(Clone, Debug, Default)]
@@ -15,92 +25,174 @@ pub struct Client {
pub description: String,
}
fn app(cx: Scope) -> Element {
let clients = use_ref(cx, || vec![] as Vec<Client>);
let firstname = use_state(cx, String::new);
let lastname = use_state(cx, String::new);
type ClientContext = Vec<Client>;
fn App(cx: Scope) -> Element {
use_shared_state_provider::<ClientContext>(cx, Default::default);
render! {
link {
rel: "stylesheet",
href: "https://unpkg.com/purecss@2.0.6/build/pure-min.css",
integrity: "sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5",
crossorigin: "anonymous",
}
style { "
.red {{
background-color: rgb(202, 60, 60) !important;
}}
" }
h1 { "Dioxus CRM Example" }
Router {}
}
}
#[inline_props]
fn ClientList(cx: Scope) -> Element {
let clients = use_shared_state::<ClientContext>(cx).unwrap();
cx.render(rsx! {
h2 { "List of Clients" }
Link {
target: Route::ClientAdd {},
class: "pure-button pure-button-primary",
"Add Client"
}
Link {
target: Route::Settings {},
class: "pure-button",
"Settings"
}
clients.read().iter().map(|client| rsx! {
div {
class: "client",
style: "margin-bottom: 50px",
p { "Name: {client.first_name} {client.last_name}" }
p { "Description: {client.description}" }
}
})
})
}
#[inline_props]
fn ClientAdd(cx: Scope) -> Element {
let clients = use_shared_state::<ClientContext>(cx).unwrap();
let first_name = use_state(cx, String::new);
let last_name = use_state(cx, String::new);
let description = use_state(cx, String::new);
cx.render(rsx!(
body {
margin_left: "35%",
link {
rel: "stylesheet",
href: "https://unpkg.com/purecss@2.0.6/build/pure-min.css",
integrity: "sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5",
crossorigin: "anonymous",
}
h1 { "Dioxus CRM Example" }
Router {
Route { to: "/",
div { class: "crm",
h2 { margin_bottom: "10px", "List of clients" }
div { class: "clients", margin_left: "10px",
clients.read().iter().map(|client| rsx!(
div { class: "client", style: "margin-bottom: 50px",
p { "First Name: {client.first_name}" }
p { "Last Name: {client.last_name}" }
p { "Description: {client.description}" }
})
)
}
Link { to: "/new", class: "pure-button pure-button-primary", "Add New" }
Link { to: "/settings", class: "pure-button", "Settings" }
let navigator = use_navigator(cx);
cx.render(rsx! {
h2 { "Add new Client" }
form {
class: "pure-form pure-form-aligned",
onsubmit: move |_| {
let mut clients = clients.write();
clients.push(Client {
first_name: first_name.to_string(),
last_name: last_name.to_string(),
description: description.to_string(),
});
navigator.push(Route::ClientList {});
},
fieldset {
div {
class: "pure-control-group",
label {
"for": "first_name",
"First Name"
}
input {
id: "first_name",
"type": "text",
placeholder: "First Name…",
required: "",
value: "{first_name}",
oninput: move |e| first_name.set(e.value.clone())
}
}
Route { to: "/new",
div { class: "crm",
h2 { margin_bottom: "10px", "Add new client" }
form { class: "pure-form",
input {
class: "new-client firstname",
placeholder: "First name",
value: "{firstname}",
oninput: move |e| firstname.set(e.value.clone())
}
input {
class: "new-client lastname",
placeholder: "Last name",
value: "{lastname}",
oninput: move |e| lastname.set(e.value.clone())
}
textarea {
class: "new-client description",
placeholder: "Description",
value: "{description}",
oninput: move |e| description.set(e.value.clone())
}
}
button {
class: "pure-button pure-button-primary",
onclick: move |_| {
clients.write().push(Client {
description: description.to_string(),
first_name: firstname.to_string(),
last_name: lastname.to_string(),
});
description.set(String::new());
firstname.set(String::new());
lastname.set(String::new());
},
"Add New"
}
Link { to: "/", class: "pure-button", "Go Back" }
div {
class: "pure-control-group",
label {
"for": "last_name",
"Last Name"
}
input {
id: "last_name",
"type": "text",
placeholder: "Last Name…",
required: "",
value: "{last_name}",
oninput: move |e| last_name.set(e.value.clone())
}
}
Route { to: "/settings",
div {
h2 { margin_bottom: "10px", "Settings" }
button {
background: "rgb(202, 60, 60)",
class: "pure-button pure-button-primary",
onclick: move |_| clients.write().clear(),
"Remove all clients"
}
Link { to: "/", class: "pure-button pure-button-primary", "Go Back" }
div {
class: "pure-control-group",
label {
"for": "description",
"Description"
}
textarea {
id: "description",
placeholder: "Description…",
value: "{description}",
oninput: move |e| description.set(e.value.clone())
}
}
div {
class: "pure-controls",
button {
"type": "submit",
class: "pure-button pure-button-primary",
"Save"
}
Link {
target: Route::ClientList {},
class: "pure-button pure-button-primary red",
"Cancel"
}
}
}
}
))
})
}
#[inline_props]
fn Settings(cx: Scope) -> Element {
let clients = use_shared_state::<ClientContext>(cx).unwrap();
cx.render(rsx! {
h2 { "Settings" }
button {
class: "pure-button pure-button-primary red",
onclick: move |_| {
let mut clients = clients.write();
clients.clear();
},
"Remove all Clients"
}
Link {
target: Route::ClientList {},
class: "pure-button",
"Go back"
}
})
}
examples/dog_app.rs
+6 -6
View File
@@ -10,7 +10,7 @@ struct ListBreeds {
message: HashMap<String, Vec<String>>,
}
async fn app_root(cx: Scope<'_>) -> Element {
fn app_root(cx: Scope<'_>) -> Element {
let breed = use_state(cx, || "deerhound".to_string());
let breeds = use_future!(cx, || async move {
@@ -21,13 +21,13 @@ async fn app_root(cx: Scope<'_>) -> Element {
.await
});
match breeds.await {
Ok(breeds) => cx.render(rsx! {
match breeds.value()? {
Ok(breed_list) => cx.render(rsx! {
div { height: "500px",
h1 { "Select a dog breed!" }
div { display: "flex",
ul { flex: "50%",
for cur_breed in breeds.message.keys().take(10) {
for cur_breed in breed_list.message.keys().take(10) {
li { key: "{cur_breed}",
button {
onclick: move |_| breed.set(cur_breed.clone()),
@@ -50,7 +50,7 @@ struct DogApi {
}
#[inline_props]
async fn breed_pic(cx: Scope, breed: String) -> Element {
fn breed_pic(cx: Scope, breed: String) -> Element {
let fut = use_future!(cx, |breed| async move {
reqwest::get(format!("https://dog.ceo/api/breed/{breed}/images/random"))
.await
@@ -59,7 +59,7 @@ async fn breed_pic(cx: Scope, breed: String) -> Element {
.await
});
match fut.await {
match fut.value()? {
Ok(resp) => render! {
div {
button {
examples/fermi.rs
+5 -5
View File
@@ -7,11 +7,11 @@ fn main() {
dioxus_desktop::launch(app)
}
static NAME: Atom<String> = |_| "world".to_string();
static NAME: Atom<String> = Atom(|_| "world".to_string());
fn app(cx: Scope) -> Element {
use_init_atom_root(cx);
let name = use_read(cx, NAME);
let name = use_read(cx, &NAME);
cx.render(rsx! {
div { "hello {name}!" }
@@ -21,7 +21,7 @@ fn app(cx: Scope) -> Element {
}
fn Child(cx: Scope) -> Element {
let set_name = use_set(cx, NAME);
let set_name = use_set(cx, &NAME);
cx.render(rsx! {
button {
@@ -31,10 +31,10 @@ fn Child(cx: Scope) -> Element {
})
}
static NAMES: AtomRef<Vec<String>> = |_| vec!["world".to_string()];
static NAMES: AtomRef<Vec<String>> = AtomRef(|_| vec!["world".to_string()]);
fn ChildWithRef(cx: Scope) -> Element {
let names = use_atom_ref(cx, NAMES);
let names = use_atom_ref(cx, &NAMES);
cx.render(rsx! {
div {
examples/file_upload.rs
+21 -6
View File
@@ -1,32 +1,47 @@
#![allow(non_snake_case)]
use dioxus::prelude::*;
use tokio::time::sleep;
fn main() {
dioxus_desktop::launch(App);
}
fn App(cx: Scope) -> Element {
let enable_directory_upload = use_state(cx, || false);
let files_uploaded: &UseRef<Vec<String>> = use_ref(cx, Vec::new);
cx.render(rsx! {
label {
input {
r#type: "checkbox",
checked: "{enable_directory_upload}",
oninput: move |evt| {
enable_directory_upload.set(evt.value.parse().unwrap());
},
},
"Enable directory upload"
}
input {
r#type: "file",
accept: ".txt, .rs",
accept: ".txt,.rs",
multiple: true,
directory: **enable_directory_upload,
onchange: |evt| {
to_owned![files_uploaded];
async move {
if let Some(file_engine) = &evt.files {
let files = file_engine.files();
for file_name in &files {
if let Some(file) = file_engine.read_file_to_string(file_name).await{
files_uploaded.write().push(file);
}
for file_name in files {
sleep(std::time::Duration::from_secs(1)).await;
files_uploaded.write().push(file_name);
}
}
}
},
}
},
div { "progress: {files_uploaded.read().len()}" },
ul {
for file in files_uploaded.read().iter() {
examples/flat_router.rs
+58 -17
View File
@@ -1,6 +1,8 @@
#![allow(non_snake_case)]
use dioxus::prelude::*;
use dioxus_desktop::{tao::dpi::LogicalSize, Config, WindowBuilder};
use dioxus_router::{Link, Route, Router};
use dioxus_router::prelude::*;
fn main() {
env_logger::init();
@@ -15,24 +17,63 @@ fn main() {
}
fn app(cx: Scope) -> Element {
cx.render(rsx! {
div {
Router {
Route { to: "/", "Home" }
Route { to: "/games", "Games" }
Route { to: "/play", "Play" }
Route { to: "/settings", "Settings" }
render! {
Router {}
}
}
p { "----" }
nav {
ul {
Link { to: "/", li { "Home" } }
Link { to: "/games", li { "Games" } }
Link { to: "/play", li { "Play" } }
Link { to: "/settings", li { "Settings" } }
}
#[derive(Routable, Clone)]
#[rustfmt::skip]
enum Route {
#[layout(Footer)]
#[route("/")]
Home {},
#[route("/games")]
Games {},
#[route("/play")]
Play {},
#[route("/settings")]
Settings {},
}
#[inline_props]
fn Footer(cx: Scope) -> Element {
render! {
div {
Outlet { }
p {
"----"
}
nav {
ul {
li { Link { target: Route::Home {}, "Home" } }
li { Link { target: Route::Games {}, "Games" } }
li { Link { target: Route::Play {}, "Play" } }
li { Link { target: Route::Settings {}, "Settings" } }
}
}
}
})
}
}
#[inline_props]
fn Home(cx: Scope) -> Element {
render!("Home")
}
#[inline_props]
fn Games(cx: Scope) -> Element {
render!("Games")
}
#[inline_props]
fn Play(cx: Scope) -> Element {
render!("Play")
}
#[inline_props]
fn Settings(cx: Scope) -> Element {
render!("Settings")
}
examples/link.rs
+36 -10
View File
@@ -1,5 +1,7 @@
#![allow(non_snake_case)]
use dioxus::prelude::*;
use dioxus_router::{Link, Route, Router};
use dioxus_router::prelude::*;
fn main() {
dioxus_desktop::launch(app);
@@ -21,15 +23,39 @@ fn app(cx: Scope) -> Element {
}
}
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" } },
}
}
Router {}
}
))
}
#[derive(Routable, Clone)]
#[rustfmt::skip]
enum Route {
#[layout(Header)]
#[route("/")]
Home {},
#[route("/settings")]
Settings {},
}
#[inline_props]
fn Header(cx: Scope) -> Element {
render! {
h1 { "Your app here" }
ul {
li { Link { target: Route::Home {}, "home" } }
li { Link { target: Route::Settings {}, "settings" } }
}
Outlet {}
}
}
#[inline_props]
fn Home(cx: Scope) -> Element {
render!(h1 { "Home" })
}
#[inline_props]
fn Settings(cx: Scope) -> Element {
render!(h1 { "Settings" })
}
examples/router.rs
+101 -56
View File
@@ -1,67 +1,112 @@
#![allow(non_snake_case)]
use dioxus::prelude::*;
use dioxus_router::{Link, Route, Router};
use serde::Deserialize;
use dioxus_router::prelude::*;
fn main() {
dioxus_desktop::launch(app);
#[cfg(target_arch = "wasm32")]
dioxus_web::launch(App);
#[cfg(not(target_arch = "wasm32"))]
dioxus_desktop::launch(App);
}
fn app(cx: Scope) -> Element {
cx.render(rsx! {
Router {
// ANCHOR: router
#[derive(Routable, Clone)]
#[rustfmt::skip]
enum Route {
#[layout(NavBar)]
#[route("/")]
Home {},
#[nest("/blog")]
#[layout(Blog)]
#[route("/")]
BlogList {},
#[route("/blog/:name")]
BlogPost { name: String },
#[end_layout]
#[end_nest]
#[end_layout]
#[nest("/myblog")]
#[redirect("/", || Route::BlogList {})]
#[redirect("/:name", |name: String| Route::BlogPost { name })]
#[end_nest]
#[route("/:..route")]
PageNotFound {
route: Vec<String>,
},
}
// ANCHOR_END: router
fn App(cx: Scope) -> Element {
render! {
Router {}
}
}
#[inline_props]
fn NavBar(cx: Scope) -> Element {
render! {
nav {
ul {
Link { to: "/", li { "Go home!" } }
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", "User list" }
Route { to: "/users/:name", User {} }
Route { to: "/blog", "Blog list" }
Route { to: "/blog/:post", BlogPost {} }
Route { to: "", "Err 404 Route Not Found" }
}
})
}
fn BlogPost(cx: Scope) -> Element {
let post = dioxus_router::use_route(cx).last_segment().unwrap();
cx.render(rsx! {
div {
h1 { "Reading blog post: {post}" }
p { "example blog post" }
}
})
}
#[derive(Deserialize)]
struct Query {
bold: bool,
}
fn User(cx: Scope) -> Element {
let post = dioxus_router::use_route(cx).last_segment().unwrap();
let query = dioxus_router::use_route(cx)
.query::<Query>()
.unwrap_or(Query { bold: false });
cx.render(rsx! {
div {
h1 { "Reading blog post: {post}" }
p { "example blog post" }
if query.bold {
rsx!{ b { "bold" } }
} else {
rsx!{ i { "italic" } }
li { Link { target: Route::Home {}, "Home" } }
li { Link { target: Route::BlogList {}, "Blog" } }
}
}
})
Outlet {}
}
}
#[inline_props]
fn Home(cx: Scope) -> Element {
render! {
h1 { "Welcome to the Dioxus Blog!" }
}
}
#[inline_props]
fn Blog(cx: Scope) -> Element {
render! {
h1 { "Blog" }
Outlet {}
}
}
#[inline_props]
fn BlogList(cx: Scope) -> Element {
render! {
h2 { "Choose a post" }
ul {
li {
Link {
target: Route::BlogPost { name: "Blog post 1".into() },
"Read the first blog post"
}
}
li {
Link {
target: Route::BlogPost { name: "Blog post 2".into() },
"Read the second blog post"
}
}
}
}
}
#[inline_props]
fn BlogPost(cx: Scope, name: String) -> Element {
render! {
h2 { "Blog Post: {name}"}
}
}
#[inline_props]
fn PageNotFound(cx: Scope, route: Vec<String>) -> Element {
render! {
h1 { "Page not found" }
p { "We are terribly sorry, but the page you requested doesn't exist." }
pre {
color: "red",
"log:\nattemped to navigate to: {route:?}"
}
}
}
examples/shared_state.rs
+77
View File
@@ -0,0 +1,77 @@
#![allow(non_snake_case)]
use std::collections::HashMap;
use dioxus::prelude::*;
fn main() {
dioxus_desktop::launch(App);
}
#[derive(Default)]
struct CoolData {
data: HashMap<usize, String>,
}
impl CoolData {
pub fn new(data: HashMap<usize, String>) -> Self {
Self { data }
}
pub fn view(&self, id: &usize) -> Option<&String> {
self.data.get(id)
}
pub fn set(&mut self, id: usize, data: String) {
self.data.insert(id, data);
}
}
#[rustfmt::skip]
pub fn App(cx: Scope) -> Element {
use_shared_state_provider(cx, || CoolData::new(HashMap::from([
(0, "Hello, World!".to_string()),
(1, "Dioxus is amazing!".to_string())
])));
render!(
DataEditor {
id: 0
}
DataEditor {
id: 1
}
DataView {
id: 0
}
DataView {
id: 1
}
)
}
#[inline_props]
fn DataEditor(cx: Scope, id: usize) -> Element {
let cool_data = use_shared_state::<CoolData>(cx).unwrap().read();
let my_data = &cool_data.view(id).unwrap();
render!(p {
"{my_data}"
})
}
#[inline_props]
fn DataView(cx: Scope, id: usize) -> Element {
let cool_data = use_shared_state::<CoolData>(cx).unwrap();
let oninput = |e: FormEvent| cool_data.write().set(*id, e.value.clone());
let cool_data = cool_data.read();
let my_data = &cool_data.view(id).unwrap();
render!(input {
oninput: oninput,
value: "{my_data}"
})
}
examples/simple_desktop.rs
+53 -34
View File
@@ -1,12 +1,11 @@
#![allow(non_snake_case)]
use dioxus::prelude::*;
use dioxus_router::*;
use dioxus_router::prelude::*;
fn main() {
simple_logger::SimpleLogger::new()
.with_level(log::LevelFilter::Debug)
.with_module_level("dioxus_router", log::LevelFilter::Trace)
.with_module_level("dioxus", log::LevelFilter::Trace)
.init()
.unwrap();
@@ -14,49 +13,69 @@ fn main() {
}
fn app(cx: Scope) -> Element {
cx.render(rsx! {
Router {
h1 { "Your app here" }
ul {
Link { to: "/", li { "home" } }
Link { to: "/blog", li { "blog" } }
Link { to: "/blog/tim", li { "tims' blog" } }
Link { to: "/blog/bill", li { "bills' blog" } }
Link { to: "/blog/james",
li { "james amazing' blog" }
}
Link { to: "/apples", li { "go to apples" } }
}
Route { to: "/", Home {} }
Route { to: "/blog/", BlogList {} }
Route { to: "/blog/:id/", BlogPost {} }
Route { to: "/oranges", "Oranges are not apples!" }
Redirect { from: "/apples", to: "/oranges" }
}
})
render! {
Router {}
}
}
#[derive(Routable, Clone)]
#[rustfmt::skip]
enum Route {
#[layout(NavBar)]
#[route("/")]
Home {},
#[nest("/new")]
#[route("/")]
BlogList {},
#[route("/:post")]
BlogPost {
post: String,
},
#[end_nest]
#[route("/oranges")]
Oranges {},
}
#[inline_props]
fn NavBar(cx: Scope) -> Element {
render! {
h1 { "Your app here" }
ul {
li { Link { target: Route::Home {}, "home" } }
li { Link { target: Route::BlogList {}, "blog" } }
li { Link { target: Route::BlogPost { post: "tim".into() }, "tims' blog" } }
li { Link { target: Route::BlogPost { post: "bill".into() }, "bills' blog" } }
li { Link { target: Route::BlogPost { post: "james".into() }, "james amazing' blog" } }
}
Outlet {}
}
}
#[inline_props]
fn Home(cx: Scope) -> Element {
log::debug!("rendering home {:?}", cx.scope_id());
cx.render(rsx! { h1 { "Home" } })
render! { h1 { "Home" } }
}
#[inline_props]
fn BlogList(cx: Scope) -> Element {
log::debug!("rendering blog list {:?}", cx.scope_id());
cx.render(rsx! { div { "Blog List" } })
render! { div { "Blog List" } }
}
fn BlogPost(cx: Scope) -> Element {
let Some(id) = use_route(cx).segment("id") else {
return cx.render(rsx! { div { "No blog post id" } })
};
#[inline_props]
fn BlogPost(cx: Scope, post: String) -> Element {
log::debug!("rendering blog post {}", post);
log::debug!("rendering blog post {}", id);
cx.render(rsx! {
render! {
div {
h3 { "blog post: {id:?}" }
Link { to: "/blog/", "back to blog list" }
h3 { "blog post: {post}" }
Link { target: Route::BlogList {}, "back to blog list" }
}
})
}
}
#[inline_props]
fn Oranges(cx: Scope) -> Element {
render!("Oranges are not apples!")
}