chore: remove unnecessary brackets from examples (#552)

This commit is contained in:
Jon Kelley authored and GitHub committed 2022-09-13 14:57:23 -07:00
1 parent e4466fee0a
commit 41b450eedf
11 files changed
+44 -52

No files matched your search

+3 -3
View File
@@ -57,12 +57,12 @@ fn app(cx: Scope) -> Element {
};
cx.render(rsx!(
style { [include_str!("./assets/calculator.css")] }
style { include_str!("./assets/calculator.css") }
div { id: "wrapper",
div { class: "app",
div { class: "calculator",
onkeydown: handle_key_down_event,
div { class: "calculator-display", [val.to_string()] }
div { class: "calculator-display", val.to_string() }
div { class: "calculator-keypad",
div { class: "input-keys",
div { class: "function-keys",
@@ -74,7 +74,7 @@ fn app(cx: Scope) -> Element {
val.set("0".into());
}
},
[if val.is_empty() { "C" } else { "AC" }]
if val.is_empty() { "C" } else { "AC" }
}
button {
class: "calculator-key key-sign",
+1 -1
View File
@@ -12,7 +12,7 @@ fn app(cx: Scope) -> Element {
button {
onclick: move |_| disabled.set(!disabled),
"click to "
[if disabled == true {"enable"} else {"disable"}]
if disabled == true { "enable" } else { "disable" }
" the lower button"
}
+2 -2
View File
@@ -19,10 +19,10 @@ fn app(cx: Scope) -> Element {
rsx!(cx, div {
link { href:"https://fonts.googleapis.com/icon?family=Material+Icons", rel:"stylesheet", }
style { [include_str!("./assets/fileexplorer.css")] }
style { include_str!("./assets/fileexplorer.css") }
header {
i { class: "material-icons icon-menu", "menu" }
h1 { "Files: " [files.read().current()] }
h1 { "Files: ", files.read().current() }
span { }
i { class: "material-icons", onclick: move |_| files.write().go_up(), "logout" }
}
-7
View File
@@ -38,12 +38,6 @@ const FIELDS: &[(&str, &str)] = &[
fn app(cx: Scope) -> Element {
cx.render(rsx! {
div { margin_left: "30px",
// radio group
div {
// handling inputs on divs will catch all input events below
// so the value of our input event will be either huey, dewey, louie, or true/false (because of the checkboxe)
@@ -127,7 +121,6 @@ fn app(cx: Scope) -> Element {
name: "{field}",
r#type: "{field}",
value: "{value}",
// checked: "false",
oninput: move |evt: FormEvent| {
println!("{:?}", evt);
},
-1
View File
@@ -15,7 +15,6 @@ fn app(cx: Scope) -> Element {
div {
onclick: move |_| println!("clicked! top"),
"- div"
button {
onclick: move |_| println!("clicked! bottom propoate"),
"Propogate"
+3 -3
View File
@@ -36,18 +36,18 @@ fn app(cx: Scope) -> Element {
let state = use_ref(&cx, Calculator::new);
cx.render(rsx! {
style { [include_str!("./assets/calculator.css")] }
style { include_str!("./assets/calculator.css") }
div { id: "wrapper",
div { class: "app",
div { class: "calculator", onkeypress: move |evt| state.write().handle_keydown(evt),
div { class: "calculator-display", [state.read().formatted_display()]}
div { class: "calculator-display", state.read().formatted_display() }
div { class: "calculator-keypad",
div { class: "input-keys",
div { class: "function-keys",
CalculatorKey {
name: "key-clear",
onclick: move |_| state.write().clear_display(),
[if state.read().display_value == "0" { "C" } else { "AC" }]
if state.read().display_value == "0" { "C" } else { "AC" }
}
CalculatorKey {
name: "key-sign",
+1 -1
View File
@@ -20,7 +20,7 @@ fn app(cx: Scope) -> Element {
cx.render(rsx!(
div {
h1 {"Select an option"}
h3 { "The radio is... " [state.is_playing()] "!" }
h3 { "The radio is... ", state.is_playing(), "!" }
button { onclick: move |_| state.make_mut().reduce(PlayerAction::Pause),
"Pause"
}
+5 -13
View File
@@ -32,27 +32,19 @@ fn example(cx: Scope) -> Element {
cx.render(rsx!(
div {
div {
id: "asd",
div { id: "asd",
"your neighborhood spiderman"
items.iter().cycle().take(5).map(|f| rsx!{
div {
"{f.a}"
}
div { "{f.a}" }
})
things_list.iter().map(|f| rsx!{
div {
"{f.a}"
"{f.b}"
}
div { "{f.a}" "{f.b}" }
})
mything_read.as_ref().map(|f| rsx!{
div {
"{f}"
}
mything_read.as_ref().map(|f| rsx! {
div { "{f}" }
})
}
}
+22 -13
View File
@@ -1,3 +1,5 @@
#![allow(non_snake_case)]
//! A tour of the rsx! macro
//! ------------------------
//!
@@ -42,10 +44,6 @@ fn main() {
dioxus_desktop::launch(app);
}
/// When trying to return "nothing" to Dioxus, you'll need to specify the type parameter or Rust will be sad.
/// This type alias specifies the type for you so you don't need to write "None as Option<()>"
const NONE_ELEMENT: Option<()> = None;
use core::{fmt, str::FromStr};
use std::fmt::Display;
@@ -63,7 +61,7 @@ fn app(cx: Scope) -> Element {
h1 {"Some text"}
h1 {"Some text with {formatting}"}
h1 {"Formatting basic expressions {formatting_tuple.0} and {formatting_tuple.1}"}
h1 {"Formatting without interpolation " [formatting_tuple.0] "and" [formatting_tuple.1] }
h1 {"Formatting without interpolation " formatting_tuple.0 "and" formatting_tuple.1 }
h2 {
"Multiple"
"Text"
@@ -131,13 +129,9 @@ fn app(cx: Scope) -> Element {
None
}
// returning "None" without a diverging branch is a bit noisy... but rare in practice
None as Option<()>,
// Use the Dioxus type-alias for less noise
NONE_ELEMENT,
// can also just use empty fragments
Fragment {}
@@ -160,7 +154,7 @@ fn app(cx: Scope) -> Element {
// Can accept any paths
// Notice how you still get syntax highlighting and IDE support :)
Baller {}
baller::Baller { }
baller::Baller {}
crate::baller::Baller {}
// Can take properties
@@ -187,11 +181,13 @@ fn app(cx: Scope) -> Element {
// This component's props are defined *inline* with the `inline_props` macro
WithInline { text: "using functionc all syntax" }
// Components can be geneirc too
// Components can be generic too
// This component takes i32 type to give you typed input
TypedInput::<TypedInputProps<i32>> {}
// Type inference can be used too
TypedInput { initial: 10.0 }
// geneircs with the `inline_props` macro
Label { text: "hello geneirc world!" }
Label { text: 99.9 }
@@ -205,10 +201,23 @@ fn app(cx: Scope) -> Element {
// helper functions
// Anything that implements IntoVnode can be dropped directly into Rsx
helper(&cx, "hello world!")
// Strings can be supplied directly
String::from("Hello world!")
// So can format_args
format_args!("Hello {}!", "world")
// Or we can shell out to a helper function
format_dollars(10, 50)
}
})
}
fn format_dollars(dollars: u32, cents: u32) -> String {
format!("${}.{:02}", dollars, cents)
}
fn helper<'a>(cx: &'a ScopeState, text: &str) -> Element<'a> {
cx.render(rsx! {
p { "{text}" }
@@ -223,7 +232,7 @@ fn lowercase_helper(cx: Scope) -> Element {
mod baller {
use super::*;
#[derive(Props, PartialEq)]
#[derive(Props, PartialEq, Eq)]
pub struct BallerProps {}
#[allow(non_snake_case)]
@@ -252,7 +261,7 @@ pub fn Taller<'a>(cx: Scope<'a, TallerProps<'a>>) -> Element {
})
}
#[derive(Props, PartialEq)]
#[derive(Props, PartialEq, Eq)]
pub struct TypedInputProps<T> {
#[props(optional, default)]
initial: Option<T>,
+6 -5
View File
@@ -1,3 +1,5 @@
#![allow(non_snake_case)]
use dioxus::prelude::*;
use dioxus_elements::input_data::keyboard_types::Key;
@@ -5,14 +7,14 @@ fn main() {
dioxus_desktop::launch(app);
}
#[derive(PartialEq)]
#[derive(Eq, PartialEq)]
pub enum FilterState {
All,
Active,
Completed,
}
#[derive(Debug, PartialEq, Clone)]
#[derive(Debug, Eq, PartialEq, Clone)]
pub struct TodoItem {
pub id: u32,
pub checked: bool,
@@ -46,7 +48,7 @@ pub fn app(cx: Scope<()>) -> Element {
cx.render(rsx!{
section { class: "todoapp",
style { [include_str!("./assets/todomvc.css")] }
style { include_str!("./assets/todomvc.css") }
div {
header { class: "header",
h1 {"todos"}
@@ -86,7 +88,7 @@ pub fn app(cx: Scope<()>) -> Element {
li { class: "Active", a { onclick: move |_| filter.set(FilterState::Active), "Active" }}
li { class: "Completed", a { onclick: move |_| filter.set(FilterState::Completed), "Completed" }}
}
(show_clear_completed).then(|| rsx!(
show_clear_completed.then(|| rsx!(
button {
class: "clear-completed",
onclick: move |_| todos.make_mut().retain(|_, todo| !todo.checked),
@@ -123,7 +125,6 @@ pub fn TodoEntry<'a>(cx: Scope<'a, TodoEntryProps<'a>>) -> Element {
li {
class: "{completed} {editing}",
div { class: "view",
input {
class: "toggle",
r#type: "checkbox",
+1 -3
View File
@@ -84,9 +84,7 @@ fn app(cx: Scope) -> Element {
button {
class: "inline-flex items-center text-white bg-blue-500 border-0 py-1 px-3 hover:bg-green-700 rounded",
onmousedown: |evt| evt.cancel_bubble(),
onclick: move |_| {
window.set_title("Dioxus Application");
},
onclick: move |_| window.set_title("Dioxus Application"),
"Change Title"
}
}