feat: overhaul examples and clean things up
This commit is contained in:
1 parent
601632fc7e
commit
420a30e5d4
33 files changed
+1089
-1417
No files matched your search
+60
-22
@@ -22,7 +22,6 @@ use dioxus::events::*;
|
||||
use dioxus::prelude::*;
|
||||
|
||||
fn main() {
|
||||
env_logger::init();
|
||||
dioxus::desktop::launch_cfg(app, |cfg| {
|
||||
cfg.with_window(|w| {
|
||||
w.with_title("Calculator Demo")
|
||||
@@ -35,38 +34,78 @@ fn main() {
|
||||
fn app(cx: Scope) -> Element {
|
||||
let state = use_ref(&cx, || Calculator::new());
|
||||
|
||||
let clear_display = state.read().display_value.eq("0");
|
||||
let clear_text = if clear_display { "C" } else { "AC" };
|
||||
let formatted = state.read().formatted_display();
|
||||
|
||||
cx.render(rsx!{
|
||||
cx.render(rsx! {
|
||||
style { [include_str!("./assets/calculator.css")] }
|
||||
div { id: "wrapper",
|
||||
div {
|
||||
class: "app",
|
||||
style { [include_str!("./assets/calculator.css")] }
|
||||
div { class: "app",
|
||||
div { class: "calculator", onkeypress: move |evt| state.write().handle_keydown(evt),
|
||||
div { class: "calculator-display", "{formatted}"}
|
||||
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(), "{clear_text}" }
|
||||
CalculatorKey { name: "key-sign", onclick: move |_| state.write().toggle_sign(), "±"}
|
||||
CalculatorKey { name: "key-percent", onclick: move |_| state.write().toggle_percent(), "%"}
|
||||
CalculatorKey {
|
||||
name: "key-clear",
|
||||
onclick: move |_| state.write().clear_display(),
|
||||
[if state.read().display_value == "0" { "C" } else { "AC" }]
|
||||
}
|
||||
CalculatorKey {
|
||||
name: "key-sign",
|
||||
onclick: move |_| state.write().toggle_sign(),
|
||||
"±"
|
||||
}
|
||||
CalculatorKey {
|
||||
name: "key-percent",
|
||||
onclick: move |_| state.write().toggle_percent(),
|
||||
"%"
|
||||
}
|
||||
}
|
||||
div { class: "digit-keys",
|
||||
CalculatorKey { name: "key-0", onclick: move |_| state.write().input_digit(0), "0" }
|
||||
CalculatorKey { name: "key-dot", onclick: move |_| state.write().input_dot(), "●" }
|
||||
CalculatorKey {
|
||||
name: "key-0",
|
||||
onclick: move |_| state.write().input_digit(0),
|
||||
"0"
|
||||
}
|
||||
CalculatorKey {
|
||||
name: "key-dot",
|
||||
onclick: move |_| state.write().input_dot(),
|
||||
"●"
|
||||
}
|
||||
(1..10).map(move |k| rsx!{
|
||||
CalculatorKey { key: "{k}", name: "key-{k}", onclick: move |_| state.write().input_digit(k), "{k}" }
|
||||
CalculatorKey {
|
||||
key: "{k}",
|
||||
name: "key-{k}",
|
||||
onclick: move |_| state.write().input_digit(k),
|
||||
"{k}"
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
div { class: "operator-keys",
|
||||
CalculatorKey { name:"key-divide", onclick: move |_| state.write().set_operator(Operator::Div), "÷" }
|
||||
CalculatorKey { name:"key-multiply", onclick: move |_| state.write().set_operator(Operator::Mul), "×" }
|
||||
CalculatorKey { name:"key-subtract", onclick: move |_| state.write().set_operator(Operator::Sub), "−" }
|
||||
CalculatorKey { name:"key-add", onclick: move |_| state.write().set_operator(Operator::Add), "+" }
|
||||
CalculatorKey { name:"key-equals", onclick: move |_| state.write().perform_operation(), "=" }
|
||||
CalculatorKey {
|
||||
name: "key-divide",
|
||||
onclick: move |_| state.write().set_operator(Operator::Div),
|
||||
"÷"
|
||||
}
|
||||
CalculatorKey {
|
||||
name: "key-multiply",
|
||||
onclick: move |_| state.write().set_operator(Operator::Mul),
|
||||
"×"
|
||||
}
|
||||
CalculatorKey {
|
||||
name: "key-subtract",
|
||||
onclick: move |_| state.write().set_operator(Operator::Sub),
|
||||
"−"
|
||||
}
|
||||
CalculatorKey {
|
||||
name: "key-add",
|
||||
onclick: move |_| state.write().set_operator(Operator::Add),
|
||||
"+"
|
||||
}
|
||||
CalculatorKey {
|
||||
name: "key-equals",
|
||||
onclick: move |_| state.write().perform_operation(),
|
||||
"="
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -105,7 +144,6 @@ enum Operator {
|
||||
Mul,
|
||||
Div,
|
||||
}
|
||||
|
||||
impl Calculator {
|
||||
fn new() -> Self {
|
||||
Calculator {
|
||||
|
||||
Reference in new issue
Block a user