feat: two calculator examples
This commit is contained in:
Jonathan Kelley committed
1 parent
d9e6d0925b
commit
b5e5ef171a
6 files changed
+677
-5
No files matched your search
@@ -0,0 +1,148 @@
|
||||
//! Example: Calculator
|
||||
//! -------------------------
|
||||
|
||||
// use dioxus::events::on::*;
|
||||
// use dioxus::prelude::*;
|
||||
|
||||
fn main() {
|
||||
dioxus::webview::launch(App);
|
||||
}
|
||||
|
||||
use dioxus::events::on::*;
|
||||
use dioxus::prelude::*;
|
||||
|
||||
enum Operator {
|
||||
Add,
|
||||
Sub,
|
||||
Mul,
|
||||
Div,
|
||||
}
|
||||
|
||||
static App: FC<()> = |cx| {
|
||||
let cur_val = use_state_new(&cx, || 0.0_f64);
|
||||
let operator = use_state_new(&cx, || None as Option<Operator>);
|
||||
let display_value = use_state_new(&cx, || "".to_string());
|
||||
|
||||
let clear_display = display_value.eq("0");
|
||||
let clear_text = if clear_display { "C" } else { "AC" };
|
||||
|
||||
let input_digit =
|
||||
move |num: u8| display_value.modify(move |f| f.push_str(num.to_string().as_str()));
|
||||
|
||||
let input_dot = move || display_value.modify(move |f| f.push_str("."));
|
||||
|
||||
let perform_operation = move || {
|
||||
if let Some(op) = operator.as_ref() {
|
||||
let rhs = display_value.parse::<f64>().unwrap();
|
||||
let new_val = match op {
|
||||
Operator::Add => **cur_val + rhs,
|
||||
Operator::Sub => **cur_val - rhs,
|
||||
Operator::Mul => **cur_val * rhs,
|
||||
Operator::Div => **cur_val / rhs,
|
||||
};
|
||||
cur_val.set(new_val);
|
||||
display_value.set(new_val.to_string());
|
||||
operator.set(None);
|
||||
}
|
||||
};
|
||||
|
||||
let toggle_sign = move |_| {
|
||||
if display_value.starts_with("-") {
|
||||
display_value.set(display_value.trim_start_matches("-").to_string())
|
||||
} else {
|
||||
display_value.set(format!("-{}", **display_value))
|
||||
}
|
||||
};
|
||||
let toggle_percent = move |_| todo!();
|
||||
|
||||
let clear_key = move |_| {
|
||||
display_value.set("0".to_string());
|
||||
if !clear_display {
|
||||
operator.set(None);
|
||||
cur_val.set(0.0);
|
||||
}
|
||||
};
|
||||
|
||||
let keydownhandler = move |evt: KeyboardEvent| match evt.key_code() {
|
||||
KeyCode::Backspace => display_value.modify(|f| {
|
||||
if !f.as_str().eq("0") {
|
||||
f.pop();
|
||||
}
|
||||
}),
|
||||
KeyCode::_0 => input_digit(0),
|
||||
KeyCode::_1 => input_digit(1),
|
||||
KeyCode::_2 => input_digit(2),
|
||||
KeyCode::_3 => input_digit(3),
|
||||
KeyCode::_4 => input_digit(4),
|
||||
KeyCode::_5 => input_digit(5),
|
||||
KeyCode::_6 => input_digit(6),
|
||||
KeyCode::_7 => input_digit(7),
|
||||
KeyCode::_8 => input_digit(8),
|
||||
KeyCode::_9 => input_digit(9),
|
||||
KeyCode::Add => operator.set(Some(Operator::Add)),
|
||||
KeyCode::Subtract => operator.set(Some(Operator::Sub)),
|
||||
KeyCode::Divide => operator.set(Some(Operator::Div)),
|
||||
KeyCode::Multiply => operator.set(Some(Operator::Mul)),
|
||||
_ => {}
|
||||
};
|
||||
|
||||
cx.render(rsx! {
|
||||
div { class: "calculator", onkeydown: {keydownhandler}
|
||||
div { class: "input-keys"
|
||||
div { class: "function-keys"
|
||||
CalculatorKey { name: "key-clear", onclick: {clear_key} "{clear_text}" }
|
||||
CalculatorKey { name: "key-sign", onclick: {toggle_sign}, "±"}
|
||||
CalculatorKey { name: "key-percent", onclick: {toggle_percent} "%"}
|
||||
}
|
||||
div { class: "digit-keys"
|
||||
CalculatorKey { name: "key-0", onclick: move |_| input_digit(0), "0" }
|
||||
CalculatorKey { name: "key-dot", onclick: move |_| input_dot(), "●" }
|
||||
|
||||
{(1..9).map(|k| rsx!{
|
||||
CalculatorKey { key: "{k}", name: "key-{k}", onclick: move |_| input_digit(k), "{k}" }
|
||||
})}
|
||||
}
|
||||
div { class: "operator-keys"
|
||||
CalculatorKey { name:"key-divide", onclick: move |_| operator.set(Some(Operator::Div)) "÷" }
|
||||
CalculatorKey { name:"key-multiply", onclick: move |_| operator.set(Some(Operator::Mul)) "×" }
|
||||
CalculatorKey { name:"key-subtract", onclick: move |_| operator.set(Some(Operator::Sub)) "−" }
|
||||
CalculatorKey { name:"key-add", onclick: move |_| operator.set(Some(Operator::Add)) "+" }
|
||||
CalculatorKey { name:"key-equals", onclick: move |_| perform_operation() "=" }
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
#[derive(Props)]
|
||||
struct CalculatorKeyProps<'a> {
|
||||
name: &'static str,
|
||||
onclick: &'a dyn Fn(MouseEvent),
|
||||
}
|
||||
|
||||
fn CalculatorKey<'a, 'r>(cx: Context<'a, CalculatorKeyProps<'r>>) -> VNode<'a> {
|
||||
cx.render(rsx! {
|
||||
button {
|
||||
class: "calculator-key {cx.name}"
|
||||
onclick: {cx.onclick}
|
||||
{cx.children()}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
#[derive(Props, PartialEq)]
|
||||
struct CalculatorDisplayProps {
|
||||
val: f64,
|
||||
}
|
||||
|
||||
fn CalculatorDisplay(cx: Context<CalculatorDisplayProps>) -> VNode {
|
||||
use separator::Separatable;
|
||||
// Todo, add float support to the num-format crate
|
||||
let formatted = cx.val.separated_string();
|
||||
// TODO: make it autoscaling with css
|
||||
cx.render(rsx! {
|
||||
div { class: "calculator-display"
|
||||
"{formatted}"
|
||||
}
|
||||
})
|
||||
}
|
||||
Whitespace-only changes.
@@ -0,0 +1,226 @@
|
||||
//! Example: Calculator
|
||||
//! -------------------
|
||||
//!
|
||||
//! Some components benefit through the use of "Models". Models are a single block of encapsulated state that allow mutative
|
||||
//! methods to be performed on them. Dioxus exposes the ability to use the model pattern through the "use_model" hook.
|
||||
//!
|
||||
//! `use_model` is basically just a fancy wrapper around set_state, but saves a "working copy" of the new state behind a
|
||||
//! RefCell. To modify the working copy, you need to call "modify" which returns the RefMut. This makes it easy to write
|
||||
//! fully encapsulated apps that retain a certain feel of native Rusty-ness. A calculator app is a good example of when this
|
||||
//! is useful.
|
||||
|
||||
use dioxus::events::on::*;
|
||||
use dioxus::prelude::*;
|
||||
use std::{
|
||||
cell::RefCell,
|
||||
ops::{Deref, DerefMut},
|
||||
};
|
||||
|
||||
fn main() {
|
||||
dioxus::webview::launch(App)
|
||||
}
|
||||
|
||||
static App: FC<()> = |cx| {
|
||||
let state = use_model(&cx, || CalculatorState::new());
|
||||
|
||||
let clear_display = state.display_value.eq("0");
|
||||
let clear_text = if clear_display { "C" } else { "AC" };
|
||||
let formatted = state.formatted();
|
||||
|
||||
cx.render(rsx! {
|
||||
div { class: "calculator", onkeydown: move |evt| state.modify().handle_keydown(evt),
|
||||
div { class: "calculator-display", "{formatted}"}
|
||||
div { class: "input-keys"
|
||||
div { class: "function-keys"
|
||||
CalculatorKey { name: "key-clear", onclick: move |_| state.modify().clear_display() "{clear_text}" }
|
||||
CalculatorKey { name: "key-sign", onclick: move |_| state.modify().toggle_sign(), "±"}
|
||||
CalculatorKey { name: "key-percent", onclick: move |_| state.modify().toggle_percent() "%"}
|
||||
}
|
||||
div { class: "digit-keys"
|
||||
CalculatorKey { name: "key-0", onclick: move |_| state.modify().input_digit(0), "0" }
|
||||
CalculatorKey { name: "key-dot", onclick: move |_| state.modify().input_dot(), "●" }
|
||||
{(1..9).map(|k| rsx!{
|
||||
CalculatorKey { key: "{k}", name: "key-{k}", onclick: move |_| state.modify().input_digit(k), "{k}" }
|
||||
})}
|
||||
}
|
||||
div { class: "operator-keys"
|
||||
CalculatorKey { name:"key-divide", onclick: move |_| state.modify().set_operator(Operator::Div) "÷" }
|
||||
CalculatorKey { name:"key-multiply", onclick: move |_| state.modify().set_operator(Operator::Mul) "×" }
|
||||
CalculatorKey { name:"key-subtract", onclick: move |_| state.modify().set_operator(Operator::Sub) "−" }
|
||||
CalculatorKey { name:"key-add", onclick: move |_| state.modify().set_operator(Operator::Add) "+" }
|
||||
CalculatorKey { name:"key-equals", onclick: move |_| state.modify().perform_operation() "=" }
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
#[derive(Clone)]
|
||||
struct CalculatorState {
|
||||
display_value: String,
|
||||
operator: Option<Operator>,
|
||||
cur_val: f64,
|
||||
}
|
||||
#[derive(Clone)]
|
||||
enum Operator {
|
||||
Add,
|
||||
Sub,
|
||||
Mul,
|
||||
Div,
|
||||
}
|
||||
impl CalculatorState {
|
||||
fn new() -> Self {
|
||||
CalculatorState {
|
||||
display_value: "0".to_string(),
|
||||
operator: None,
|
||||
cur_val: 0.0,
|
||||
}
|
||||
}
|
||||
fn formatted(&self) -> String {
|
||||
use separator::Separatable;
|
||||
self.cur_val.separated_string()
|
||||
}
|
||||
fn clear_display(&mut self) {
|
||||
self.display_value = "0".to_string();
|
||||
}
|
||||
fn input_digit(&mut self, digit: u8) {
|
||||
self.display_value.push_str(digit.to_string().as_str())
|
||||
}
|
||||
fn input_dot(&mut self) {
|
||||
if self.display_value.find(".").is_none() {
|
||||
self.display_value.push_str(".");
|
||||
}
|
||||
}
|
||||
fn perform_operation(&mut self) {
|
||||
if let Some(op) = &self.operator {
|
||||
let rhs = self.display_value.parse::<f64>().unwrap();
|
||||
let new_val = match op {
|
||||
Operator::Add => self.cur_val + rhs,
|
||||
Operator::Sub => self.cur_val - rhs,
|
||||
Operator::Mul => self.cur_val * rhs,
|
||||
Operator::Div => self.cur_val / rhs,
|
||||
};
|
||||
self.cur_val = new_val;
|
||||
self.display_value = new_val.to_string();
|
||||
self.operator = None;
|
||||
}
|
||||
}
|
||||
fn toggle_sign(&mut self) {
|
||||
if self.display_value.starts_with("-") {
|
||||
self.display_value = self.display_value.trim_start_matches("-").to_string();
|
||||
} else {
|
||||
self.display_value = format!("-{}", self.display_value);
|
||||
}
|
||||
}
|
||||
fn toggle_percent(&mut self) {}
|
||||
fn backspace(&mut self) {
|
||||
if !self.display_value.as_str().eq("0") {
|
||||
self.display_value.pop();
|
||||
}
|
||||
}
|
||||
fn set_operator(&mut self, operator: Operator) {}
|
||||
fn handle_keydown(&mut self, evt: KeyboardEvent) {
|
||||
match evt.key_code() {
|
||||
KeyCode::Backspace => self.backspace(),
|
||||
KeyCode::_0 => self.input_digit(0),
|
||||
KeyCode::_1 => self.input_digit(1),
|
||||
KeyCode::_2 => self.input_digit(2),
|
||||
KeyCode::_3 => self.input_digit(3),
|
||||
KeyCode::_4 => self.input_digit(4),
|
||||
KeyCode::_5 => self.input_digit(5),
|
||||
KeyCode::_6 => self.input_digit(6),
|
||||
KeyCode::_7 => self.input_digit(7),
|
||||
KeyCode::_8 => self.input_digit(8),
|
||||
KeyCode::_9 => self.input_digit(9),
|
||||
KeyCode::Add => self.operator = Some(Operator::Add),
|
||||
KeyCode::Subtract => self.operator = Some(Operator::Sub),
|
||||
KeyCode::Divide => self.operator = Some(Operator::Div),
|
||||
KeyCode::Multiply => self.operator = Some(Operator::Mul),
|
||||
_ => {}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#[derive(Props)]
|
||||
struct CalculatorKeyProps<'a> {
|
||||
name: &'static str,
|
||||
onclick: &'a dyn Fn(MouseEvent),
|
||||
}
|
||||
|
||||
fn CalculatorKey<'a, 'r>(cx: Context<'a, CalculatorKeyProps<'r>>) -> VNode<'a> {
|
||||
cx.render(rsx! {
|
||||
button {
|
||||
class: "calculator-key {cx.name}"
|
||||
onclick: {cx.onclick}
|
||||
{cx.children()}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
use odl::use_model;
|
||||
mod odl {
|
||||
use super::*;
|
||||
/// Use model makes it easy to use "models" as state for components. To modify the model, call "modify" and a clone of the
|
||||
/// current model will be made, with a RefMut lock on it. Dioxus will never run your components multithreaded, so you can
|
||||
/// be relatively sure that this won't fail in practice
|
||||
pub fn use_model<'a, T: Clone>(cx: &impl Scoped<'a>, f: impl FnOnce() -> T) -> &'a UseModel<T> {
|
||||
todo!()
|
||||
}
|
||||
|
||||
trait ModelAble {
|
||||
type Out;
|
||||
}
|
||||
fn make_model<F: ModelAble>(f: F) -> F::Out {
|
||||
todo!()
|
||||
}
|
||||
|
||||
// fn use_model(w: &mut ModelWrapper<MyModel>) {
|
||||
// let mut g1 = move || {
|
||||
// //
|
||||
// w.eat();
|
||||
// };
|
||||
// let mut g2 = move || {
|
||||
// //
|
||||
// w.eat();
|
||||
// };
|
||||
// g1();
|
||||
// g2();
|
||||
// }
|
||||
|
||||
pub struct UseModel<T: Clone> {
|
||||
real: T,
|
||||
wip: RefCell<T>,
|
||||
}
|
||||
|
||||
use std::cell::{Ref, RefMut};
|
||||
impl<T: Clone> Deref for UseModel<T> {
|
||||
type Target = T;
|
||||
|
||||
fn deref(&self) -> &Self::Target {
|
||||
&self.real
|
||||
}
|
||||
}
|
||||
|
||||
impl<T: Clone> UseModel<T> {
|
||||
pub fn new(t: T) -> Self {
|
||||
Self {
|
||||
real: t.clone(),
|
||||
wip: RefCell::new(t),
|
||||
}
|
||||
}
|
||||
pub fn modify(&self) -> RefMut<'_, T> {
|
||||
self.wip.borrow_mut()
|
||||
}
|
||||
}
|
||||
|
||||
#[derive(Clone, Copy)]
|
||||
struct MyModel {
|
||||
hunger: u32,
|
||||
}
|
||||
|
||||
impl MyModel {
|
||||
fn eat(&mut self) {
|
||||
self.hunger -= 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user