dioxus/examples/calculator.rs

206 lines
7.6 KiB
Rust
Raw Normal View History

2021-09-24 04:05:56 +00:00
/*
This example is a simple iOS-style calculator. This particular example can run any platform - Web, Mobile, Desktop.
This calculator version uses React-style state management. All state is held as individual use_states.
*/
2021-07-02 19:48:19 +00:00
use dioxus::events::*;
use dioxus::html::input_data::keyboard_types::Key;
2021-07-02 19:48:19 +00:00
use dioxus::prelude::*;
use dioxus_desktop::{Config, WindowBuilder};
2021-07-02 19:48:19 +00:00
2021-09-24 04:05:56 +00:00
fn main() {
let config = Config::new().with_window(
WindowBuilder::default()
.with_title("Calculator")
.with_inner_size(dioxus_desktop::LogicalSize::new(300.0, 500.0)),
);
dioxus_desktop::launch_cfg(app, config);
2021-07-02 19:48:19 +00:00
}
2021-12-30 02:28:28 +00:00
fn app(cx: Scope) -> Element {
2022-03-01 07:50:03 +00:00
let val = use_state(&cx, || String::from("0"));
2021-07-02 19:48:19 +00:00
2022-01-06 18:08:14 +00:00
let input_digit = move |num: u8| {
2022-03-01 07:50:03 +00:00
if val.get() == "0" {
val.set(String::new());
2022-01-07 14:17:19 +00:00
}
2022-03-01 07:50:03 +00:00
val.make_mut().push_str(num.to_string().as_str());
2022-01-06 18:08:14 +00:00
};
2022-03-01 07:50:03 +00:00
let input_operator = move |key: &str| val.make_mut().push_str(key);
2021-07-02 19:48:19 +00:00
2022-05-12 11:36:52 +00:00
let handle_key_down_event = move |evt: KeyboardEvent| match evt.key() {
Key::Backspace => {
if !val.len() != 0 {
val.make_mut().pop();
}
}
Key::Character(character) => match character.as_str() {
"+" => input_operator("+"),
"-" => input_operator("-"),
"/" => input_operator("/"),
"*" => input_operator("*"),
"0" => input_digit(0),
"1" => input_digit(1),
"2" => input_digit(2),
"3" => input_digit(3),
"4" => input_digit(4),
"5" => input_digit(5),
"6" => input_digit(6),
"7" => input_digit(7),
"8" => input_digit(8),
"9" => input_digit(9),
_ => {}
},
_ => {}
};
2021-12-30 02:28:28 +00:00
cx.render(rsx!(
style { include_str!("./assets/calculator.css") }
div { id: "wrapper",
div { class: "app",
div { class: "calculator",
2022-05-12 11:36:52 +00:00
onkeydown: handle_key_down_event,
div { class: "calculator-display", val.to_string() }
div { class: "calculator-keypad",
div { class: "input-keys",
div { class: "function-keys",
button {
class: "calculator-key key-clear",
onclick: move |_| {
2022-03-01 07:50:03 +00:00
val.set(String::new());
if !val.is_empty(){
val.set("0".into());
}
},
if val.is_empty() { "C" } else { "AC" }
}
button {
class: "calculator-key key-sign",
onclick: move |_| {
2022-03-01 07:50:03 +00:00
let temp = calc_val(val.as_str());
2022-01-06 23:45:21 +00:00
if temp > 0.0 {
2022-03-01 07:50:03 +00:00
val.set(format!("-{}", temp));
2022-01-06 23:45:21 +00:00
} else {
2022-03-01 07:50:03 +00:00
val.set(format!("{}", temp.abs()));
2022-01-06 23:45:21 +00:00
}
},
"±"
}
button {
class: "calculator-key key-percent",
onclick: move |_| {
2022-03-01 07:50:03 +00:00
val.set(
format!("{}", calc_val(val.as_str()) / 100.0)
2022-01-07 14:17:19 +00:00
);
},
"%"
}
}
div { class: "digit-keys",
button { class: "calculator-key key-0", onclick: move |_| input_digit(0),
"0"
}
2022-03-01 07:50:03 +00:00
button { class: "calculator-key key-dot", onclick: move |_| val.make_mut().push('.'),
""
}
(1..10).map(|k| rsx!{
button {
class: "calculator-key {k}",
name: "key-{k}",
onclick: move |_| input_digit(k),
"{k}"
}
}),
2021-12-30 02:28:28 +00:00
}
}
div { class: "operator-keys",
2022-03-01 07:50:03 +00:00
button { class: "calculator-key key-divide", onclick: move |_| input_operator("/"),
"÷"
}
2022-03-01 07:50:03 +00:00
button { class: "calculator-key key-multiply", onclick: move |_| input_operator("*"),
"×"
}
2022-03-01 07:50:03 +00:00
button { class: "calculator-key key-subtract", onclick: move |_| input_operator("-"),
""
}
2022-03-01 07:50:03 +00:00
button { class: "calculator-key key-add", onclick: move |_| input_operator("+"),
"+"
2021-12-30 02:28:28 +00:00
}
button { class: "calculator-key key-equals",
onclick: move |_| {
2022-03-01 07:50:03 +00:00
val.set(format!("{}", calc_val(val.as_str())));
},
"="
}
}
2021-12-30 02:28:28 +00:00
}
2021-11-22 20:22:42 +00:00
}
2021-07-02 19:48:19 +00:00
}
}
))
2021-07-02 19:48:19 +00:00
}
2022-01-07 16:16:28 +00:00
2022-03-01 07:50:03 +00:00
fn calc_val(val: &str) -> f64 {
2022-01-07 16:16:28 +00:00
let mut temp = String::new();
let mut operation = "+".to_string();
let mut start_index = 0;
let mut temp_value;
let mut fin_index = 0;
2022-01-07 16:27:58 +00:00
2022-01-07 16:16:28 +00:00
if &val[0..1] == "-" {
temp_value = String::from("-");
fin_index = 1;
start_index += 1;
} else {
temp_value = String::from("");
}
for c in val[fin_index..].chars() {
if c == '+' || c == '-' || c == '*' || c == '/' {
break;
}
temp_value.push(c);
start_index += 1;
}
2022-02-28 07:38:17 +00:00
let mut result = temp_value.parse::<f64>().unwrap();
2022-01-07 16:16:28 +00:00
if start_index + 1 >= val.len() {
return result;
}
for c in val[start_index..].chars() {
if c == '+' || c == '-' || c == '*' || c == '/' {
2022-01-25 00:52:12 +00:00
if !temp.is_empty() {
2022-01-07 16:16:28 +00:00
match &operation as &str {
2022-01-07 16:27:58 +00:00
"+" => result += temp.parse::<f64>().unwrap(),
"-" => result -= temp.parse::<f64>().unwrap(),
"*" => result *= temp.parse::<f64>().unwrap(),
"/" => result /= temp.parse::<f64>().unwrap(),
2022-01-07 16:16:28 +00:00
_ => unreachable!(),
};
}
operation = c.to_string();
temp = String::new();
} else {
temp.push(c);
}
}
2022-01-25 00:52:12 +00:00
if !temp.is_empty() {
2022-01-07 16:16:28 +00:00
match &operation as &str {
2022-01-07 16:27:58 +00:00
"+" => result += temp.parse::<f64>().unwrap(),
"-" => result -= temp.parse::<f64>().unwrap(),
"*" => result *= temp.parse::<f64>().unwrap(),
"/" => result /= temp.parse::<f64>().unwrap(),
2022-01-07 16:16:28 +00:00
_ => unreachable!(),
};
}
result
}