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

fix: exampels

Browse Source
This commit is contained in:
Jonathan Kelley committed 2022-01-25 21:41:40 -05:00
1 parent 5c4bd0881b
commit a8952a9ee8
14 files changed
+400 -285
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

examples/calculator.rs
+19 -17
View File
@@ -18,17 +18,19 @@ fn main() {
}
fn app(cx: Scope) -> Element {
let display_value = use_state(&cx, || String::from("0"));
let (display_value, set_display_value) = use_state(&cx, || String::from("0"));
let input_digit = move |num: u8| {
if display_value.get() == "0" {
display_value.set(String::new());
if display_value == "0" {
set_display_value(String::new());
}
display_value.modify().push_str(num.to_string().as_str());
set_display_value
.make_mut()
.push_str(num.to_string().as_str());
};
let input_operator = move |key: &str| {
display_value.modify().push_str(key);
set_display_value.make_mut().push_str(key);
};
cx.render(rsx!(
@@ -53,7 +55,7 @@ fn app(cx: Scope) -> Element {
KeyCode::Num9 => input_digit(9),
KeyCode::Backspace => {
if !display_value.len() != 0 {
display_value.modify().pop();
set_display_value.make_mut().pop();
}
}
_ => {}
@@ -65,21 +67,21 @@ fn app(cx: Scope) -> Element {
button {
class: "calculator-key key-clear",
onclick: move |_| {
display_value.set(String::new());
if *display_value != "" {
display_value.set("0".into());
set_display_value(String::new());
if !display_value.is_empty(){
set_display_value("0".into());
}
},
[if *display_value == "" { "C" } else { "AC" }]
[if display_value.is_empty() { "C" } else { "AC" }]
}
button {
class: "calculator-key key-sign",
onclick: move |_| {
let temp = calc_val(display_value.get().clone());
let temp = calc_val(display_value.clone());
if temp > 0.0 {
display_value.set(format!("-{}", temp));
set_display_value(format!("-{}", temp));
} else {
display_value.set(format!("{}", temp.abs()));
set_display_value(format!("{}", temp.abs()));
}
},
"±"
@@ -87,8 +89,8 @@ fn app(cx: Scope) -> Element {
button {
class: "calculator-key key-percent",
onclick: move |_| {
display_value.set(
format!("{}", calc_val(display_value.get().clone()) / 100.0)
set_display_value(
format!("{}", calc_val(display_value.clone()) / 100.0)
);
},
"%"
@@ -98,7 +100,7 @@ fn app(cx: Scope) -> Element {
button { class: "calculator-key key-0", onclick: move |_| input_digit(0),
"0"
}
button { class: "calculator-key key-dot", onclick: move |_| display_value.modify().push('.'),
button { class: "calculator-key key-dot", onclick: move |_| set_display_value.make_mut().push('.'),
"●"
}
(1..10).map(|k| rsx!{
@@ -130,7 +132,7 @@ fn app(cx: Scope) -> Element {
}
button { class: "calculator-key key-equals",
onclick: move |_| {
display_value.set(format!("{}", calc_val(display_value.get().clone())));
set_display_value(format!("{}", calc_val(display_value.clone())));
},
"="
}
examples/crm.rs
+15 -15
View File
@@ -20,11 +20,11 @@ pub struct Client {
}
fn app(cx: Scope) -> Element {
let scene = use_state(&cx, || Scene::ClientsList);
let clients = use_ref(&cx, || vec![] as Vec<Client>);
let firstname = use_state(&cx, String::new);
let lastname = use_state(&cx, String::new);
let description = use_state(&cx, String::new);
let (scene, set_scene) = use_state(&cx, || Scene::ClientsList);
let (firstname, set_firstname) = use_state(&cx, String::new);
let (lastname, set_lastname) = use_state(&cx, String::new);
let (description, set_description) = use_state(&cx, String::new);
cx.render(rsx!(
body {
@@ -38,7 +38,7 @@ fn app(cx: Scope) -> Element {
h1 {"Dioxus CRM Example"}
match scene.get() {
match scene {
Scene::ClientsList => rsx!(
div { class: "crm",
h2 { margin_bottom: "10px", "List of clients" }
@@ -51,8 +51,8 @@ fn app(cx: Scope) -> Element {
})
)
}
button { class: "pure-button pure-button-primary", onclick: move |_| scene.set(Scene::NewClientForm), "Add New" }
button { class: "pure-button", onclick: move |_| scene.set(Scene::Settings), "Settings" }
button { class: "pure-button pure-button-primary", onclick: move |_| set_scene(Scene::NewClientForm), "Add New" }
button { class: "pure-button", onclick: move |_| set_scene(Scene::Settings), "Settings" }
}
),
Scene::NewClientForm => rsx!(
@@ -63,19 +63,19 @@ fn app(cx: Scope) -> Element {
class: "new-client firstname",
placeholder: "First name",
value: "{firstname}",
oninput: move |e| firstname.set(e.value.clone())
oninput: move |e| set_firstname(e.value.clone())
}
input {
class: "new-client lastname",
placeholder: "Last name",
value: "{lastname}",
oninput: move |e| lastname.set(e.value.clone())
oninput: move |e| set_lastname(e.value.clone())
}
textarea {
class: "new-client description",
placeholder: "Description",
value: "{description}",
oninput: move |e| description.set(e.value.clone())
oninput: move |e| set_description(e.value.clone())
}
}
button {
@@ -86,13 +86,13 @@ fn app(cx: Scope) -> Element {
first_name: (*firstname).clone(),
last_name: (*lastname).clone(),
});
description.set(String::new());
firstname.set(String::new());
lastname.set(String::new());
set_description(String::new());
set_firstname(String::new());
set_lastname(String::new());
},
"Add New"
}
button { class: "pure-button", onclick: move |_| scene.set(Scene::ClientsList),
button { class: "pure-button", onclick: move |_| set_scene(Scene::ClientsList),
"Go Back"
}
}
@@ -108,7 +108,7 @@ fn app(cx: Scope) -> Element {
}
button {
class: "pure-button pure-button-primary",
onclick: move |_| scene.set(Scene::ClientsList),
onclick: move |_| set_scene(Scene::ClientsList),
"Go Back"
}
}
examples/disabled.rs
+3 -3
View File
@@ -5,13 +5,13 @@ fn main() {
}
fn app(cx: Scope) -> Element {
let disabled = use_state(&cx, || false);
let (disabled, set_disabled) = use_state(&cx, || false);
cx.render(rsx! {
div {
button {
onclick: move |_| disabled.set(!disabled.get()),
"click to " [if **disabled {"enable"} else {"disable"} ] " the lower button"
onclick: move |_| set_disabled(!disabled),
"click to " [if *disabled {"enable"} else {"disable"} ] " the lower button"
}
button {
examples/dog_app.rs
+6 -6
View File
@@ -24,7 +24,7 @@ fn app(cx: Scope) -> Element {
.await
});
let selected_breed = use_state(&cx, || None);
let (breed, set_breed) = use_state(&cx, || None);
match fut.value() {
Some(Ok(breeds)) => cx.render(rsx! {
@@ -36,14 +36,14 @@ fn app(cx: Scope) -> Element {
breeds.message.keys().map(|breed| rsx!(
li {
button {
onclick: move |_| selected_breed.set(Some(breed.clone())),
onclick: move |_| set_breed(Some(breed.clone())),
"{breed}"
}
}
))
}
div { flex: "50%",
match selected_breed.get() {
match breed {
Some(breed) => rsx!( Breed { breed: breed.clone() } ),
None => rsx!("No Breed selected"),
}
@@ -73,9 +73,9 @@ fn Breed(cx: Scope, breed: String) -> Element {
reqwest::get(endpoint).await.unwrap().json::<DogApi>().await
});
let breed_name = use_state(&cx, || breed.clone());
if breed_name.get() != breed {
breed_name.set(breed.clone());
let (name, set_name) = use_state(&cx, || breed.clone());
if name != breed {
set_name(breed.clone());
fut.restart();
}
examples/framework_benchmark.rs
+2 -2
View File
@@ -33,7 +33,7 @@ impl Label {
fn app(cx: Scope) -> Element {
let items = use_ref(&cx, Vec::new);
let selected = use_state(&cx, || None);
let (selected, set_selected) = use_state(&cx, || None);
cx.render(rsx! {
div { class: "container",
@@ -71,7 +71,7 @@ fn app(cx: Scope) -> Element {
rsx!(tr { class: "{is_in_danger}",
td { class:"col-md-1" }
td { class:"col-md-1", "{item.key}" }
td { class:"col-md-1", onclick: move |_| selected.set(Some(id)),
td { class:"col-md-1", onclick: move |_| set_selected(Some(id)),
a { class: "lbl", item.labels }
}
td { class: "col-md-1",
examples/hydration.rs
+2 -2
View File
@@ -20,13 +20,13 @@ fn main() {
}
fn app(cx: Scope) -> Element {
let val = use_state(&cx, || 0);
let (val, set_val) = use_state(&cx, || 0);
cx.render(rsx! {
div {
h1 { "hello world. Count: {val}" }
button {
onclick: move |_| *val.modify() += 1,
onclick: move |_| set_val(val + 1),
"click to increment"
}
}
examples/pattern_reducer.rs
+3 -3
View File
@@ -15,16 +15,16 @@ fn main() {
}
fn app(cx: Scope) -> Element {
let state = use_state(&cx, PlayerState::new);
let (state, set_state) = use_state(&cx, PlayerState::new);
cx.render(rsx!(
div {
h1 {"Select an option"}
h3 { "The radio is... " [state.is_playing()] "!" }
button { onclick: move |_| state.modify().reduce(PlayerAction::Pause),
button { onclick: move |_| set_state.make_mut().reduce(PlayerAction::Pause),
"Pause"
}
button { onclick: move |_| state.modify().reduce(PlayerAction::Play),
button { onclick: move |_| set_state.make_mut().reduce(PlayerAction::Play),
"Play"
}
}
examples/readme.rs
+3 -3
View File
@@ -9,13 +9,13 @@ fn main() {
}
fn app(cx: Scope) -> Element {
let count = use_state(&cx, || 0);
let (count, set_count) = use_state(&cx, || 0);
cx.render(rsx! {
div {
h1 { "High-Five counter: {count}" }
button { onclick: move |_| *count.modify() += 1, "Up high!" }
button { onclick: move |_| *count.modify() -= 1, "Down low!" }
button { onclick: move |_| set_count(count + 1), "Up high!" }
button { onclick: move |_| set_count(count - 1), "Down low!" }
}
})
}
examples/rsx_compile_fail.rs
+1 -1
View File
@@ -12,7 +12,7 @@ fn main() {
}
fn example(cx: Scope) -> Element {
let items = use_state(&cx, || {
let (items, _set_items) = use_state(&cx, || {
vec![Thing {
a: "asd".to_string(),
b: 10,
examples/tasks.rs
+4 -4
View File
@@ -10,14 +10,14 @@ fn main() {
}
fn app(cx: Scope) -> Element {
let count = use_state(&cx, || 0);
let (count, set_count) = use_state(&cx, || 0);
use_future(&cx, move || {
let mut count = count.for_async();
let set_count = set_count.to_owned();
async move {
loop {
tokio::time::sleep(Duration::from_millis(1000)).await;
count += 1;
set_count.modify(|f| f + 1);
}
}
});
@@ -26,7 +26,7 @@ fn app(cx: Scope) -> Element {
div {
h1 { "Current count: {count}" }
button {
onclick: move |_| count.set(0),
onclick: move |_| set_count(0),
"Reset the count"
}
}
examples/todomvc.rs
+25 -23
View File
@@ -19,15 +19,15 @@ pub struct TodoItem {
}
pub fn app(cx: Scope<()>) -> Element {
let todos = use_state(&cx, im_rc::HashMap::<u32, TodoItem>::default);
let filter = use_state(&cx, || FilterState::All);
let draft = use_state(&cx, || "".to_string());
let (todo_id, set_todo_id) = use_state(&cx, || 0).split();
let (todos, set_todos) = use_state(&cx, im_rc::HashMap::<u32, TodoItem>::default);
let (filter, set_filter) = use_state(&cx, || FilterState::All);
let (draft, set_draft) = use_state(&cx, || "".to_string());
let (todo_id, set_todo_id) = use_state(&cx, || 0);
// Filter the todos based on the filter state
let mut filtered_todos = todos
.iter()
.filter(|(_, item)| match **filter {
.filter(|(_, item)| match filter {
FilterState::All => true,
FilterState::Active => !item.checked,
FilterState::Completed => item.checked,
@@ -54,25 +54,25 @@ pub fn app(cx: Scope<()>) -> Element {
placeholder: "What needs to be done?",
value: "{draft}",
autofocus: "true",
oninput: move |evt| draft.set(evt.value.clone()),
oninput: move |evt| set_draft(evt.value.clone()),
onkeydown: move |evt| {
if evt.key == "Enter" && !draft.is_empty() {
todos.modify().insert(
set_todos.make_mut().insert(
*todo_id,
TodoItem {
id: *todo_id,
checked: false,
contents: draft.get().clone(),
contents: draft.clone(),
},
);
set_todo_id(todo_id + 1);
draft.set("".to_string());
set_draft("".to_string());
}
}
}
}
ul { class: "todo-list",
filtered_todos.iter().map(|id| rsx!(todo_entry( key: "{id}", id: *id, todos: todos )))
filtered_todos.iter().map(|id| rsx!(todo_entry( key: "{id}", id: *id, set_todos: set_todos )))
}
(!todos.is_empty()).then(|| rsx!(
footer { class: "footer",
@@ -81,14 +81,14 @@ pub fn app(cx: Scope<()>) -> Element {
span {"{item_text} left"}
}
ul { class: "filters",
li { class: "All", a { onclick: move |_| filter.set(FilterState::All), "All" }}
li { class: "Active", a { onclick: move |_| filter.set(FilterState::Active), "Active" }}
li { class: "Completed", a { onclick: move |_| filter.set(FilterState::Completed), "Completed" }}
li { class: "All", a { onclick: move |_| set_filter(FilterState::All), "All" }}
li { class: "Active", a { onclick: move |_| set_filter(FilterState::Active), "Active" }}
li { class: "Completed", a { onclick: move |_| set_filter(FilterState::Completed), "Completed" }}
}
(show_clear_completed).then(|| rsx!(
button {
class: "clear-completed",
onclick: move |_| todos.modify().retain(|_, todo| !todo.checked),
onclick: move |_| set_todos.make_mut().retain(|_, todo| !todo.checked),
"Clear completed"
}
))
@@ -106,24 +106,26 @@ pub fn app(cx: Scope<()>) -> Element {
#[derive(Props)]
pub struct TodoEntryProps<'a> {
todos: &'a UseState<im_rc::HashMap<u32, TodoItem>>,
set_todos: &'a UseState<im_rc::HashMap<u32, TodoItem>>,
id: u32,
}
pub fn todo_entry<'a>(cx: Scope<'a, TodoEntryProps<'a>>) -> Element {
let todo = &cx.props.todos[&cx.props.id];
let is_editing = use_state(&cx, || false);
let (is_editing, set_is_editing) = use_state(&cx, || false);
let todos = cx.props.set_todos.get();
let todo = &todos[&cx.props.id];
let completed = if todo.checked { "completed" } else { "" };
let editing = if *is_editing.get() { "editing" } else { "" };
let editing = if *is_editing { "editing" } else { "" };
rsx!(cx, li {
class: "{completed} {editing}",
onclick: move |_| is_editing.set(true),
onfocusout: move |_| is_editing.set(false),
onclick: move |_| set_is_editing(true),
onfocusout: move |_| set_is_editing(false),
div { class: "view",
input { class: "toggle", r#type: "checkbox", id: "cbg-{todo.id}", checked: "{todo.checked}",
onchange: move |evt| {
cx.props.todos.modify()[&cx.props.id].checked = evt.value.parse().unwrap();
cx.props.set_todos.make_mut()[&cx.props.id].checked = evt.value.parse().unwrap();
}
}
label { r#for: "cbg-{todo.id}", pointer_events: "none", "{todo.contents}" }
@@ -132,11 +134,11 @@ pub fn todo_entry<'a>(cx: Scope<'a, TodoEntryProps<'a>>) -> Element {
input {
class: "edit",
value: "{todo.contents}",
oninput: move |evt| cx.props.todos.modify()[&cx.props.id].contents = evt.value.clone(),
oninput: move |evt| cx.props.set_todos.make_mut()[&cx.props.id].contents = evt.value.clone(),
autofocus: "true",
onkeydown: move |evt| {
match evt.key.as_str() {
"Enter" | "Escape" | "Tab" => is_editing.set(false),
"Enter" | "Escape" | "Tab" => set_is_editing(false),
_ => {}
}
},
examples/xss_safety.rs
+2 -2
View File
@@ -9,7 +9,7 @@ fn main() {
}
fn app(cx: Scope) -> Element {
let contents = use_state(&cx, || {
let (contents, set_contents) = use_state(&cx, || {
String::from("<script>alert(\"hello world\")</script>")
});
@@ -20,7 +20,7 @@ fn app(cx: Scope) -> Element {
input {
value: "{contents}",
r#type: "text",
oninput: move |e| contents.set(e.value.clone()),
oninput: move |e| set_contents(e.value.clone()),
}
}
})