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

feat: beaf up the use_state hook

Browse Source
This commit is contained in:
Jonathan Kelley committed 2021-07-08 09:29:12 -04:00
1 parent 7aec40d57e
commit e4cdb645aa
11 files changed
+214 -218
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

examples/calculator.rs
+1 -1
View File
@@ -5,7 +5,7 @@
// use dioxus::prelude::*;
fn main() {
dioxus::desktop::launch(App);
dioxus::desktop::launch(App, |cfg| cfg);
}
use dioxus::events::on::*;
examples/model.rs
+141 -114
View File
@@ -18,39 +18,138 @@
use dioxus::events::on::*;
use dioxus::prelude::*;
const STYLE: &str = include_str!("./assets/calculator.css");
fn main() {
dioxus::webview::launch(App)
dioxus::desktop::launch(App, |cfg| {
cfg.title("Calculator Demo").resizable(false).size(350, 550)
});
}
enum Operator {
Add,
Sub,
Mul,
Div,
}
static App: FC<()> = |cx| {
let calc = use_model(cx, || Calculator::new());
let (cur_val, set_cur_val) = use_state_classic(cx, || 0.0_f64);
let (operator, set_operator) = use_state_classic(cx, || None as Option<Operator>);
let (display_value, set_display_value) = use_state_classic(cx, || "0".to_string());
let clear_display = calc.display_value.eq("0");
let clear_display = display_value.eq("0");
let clear_text = if clear_display { "C" } else { "AC" };
let formatted = calc.formatted();
let input_digit = move |num: u8| {
let mut new = if operator.is_some() {
String::new()
} else if display_value == "0" {
String::new()
} else {
display_value.clone()
};
if operator.is_some() {
let val = display_value.parse::<f64>().unwrap();
set_cur_val(val);
}
new.push_str(num.to_string().as_str());
set_display_value(new);
};
let input_dot = move || {
let mut new = display_value.clone();
new.push_str(".");
set_display_value(new);
};
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,
};
set_cur_val(new_val);
set_display_value(new_val.to_string());
set_operator(None);
}
};
let toggle_sign = move |_| {
if display_value.starts_with("-") {
set_display_value(display_value.trim_start_matches("-").to_string())
} else {
set_display_value(format!("-{}", *display_value))
}
};
let toggle_percent = move |_| todo!();
let clear_key = move |_| {
set_display_value("0".to_string());
if !clear_display {
set_operator(None);
set_cur_val(0.0);
}
};
let keydownhandler = move |evt: KeyboardEvent| match evt.key_code() {
KeyCode::Backspace => {
let mut new = display_value.clone();
if !new.as_str().eq("0") {
new.pop();
}
set_display_value(new);
}
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 => set_operator(Some(Operator::Add)),
KeyCode::Subtract => set_operator(Some(Operator::Sub)),
KeyCode::Divide => set_operator(Some(Operator::Div)),
KeyCode::Multiply => set_operator(Some(Operator::Mul)),
_ => {}
};
cx.render(rsx! {
div { class: "calculator", onkeydown: move |evt| calc.get_mut().handle_keydown(evt),
div { class: "calculator-display", "{formatted}" }
div { class: "input-keys"
div { class: "function-keys"
CalculatorKey { name: "key-clear", onclick: move |_| calc.get_mut().clear_display(), "{clear_text}" }
CalculatorKey { name: "key-sign", onclick: move |_| calc.get_mut().toggle_sign(), "±"}
CalculatorKey { name: "key-percent", onclick: move |_| calc.get_mut().toggle_percent(), "%"}
}
div { class: "digit-keys"
CalculatorKey { name: "key-0", onclick: move |_| calc.get_mut().input_digit(0), "0" }
CalculatorKey { name: "key-dot", onclick: move |_| calc.get_mut().input_dot(), "●" }
{(1..9).map(move |k| rsx!{
CalculatorKey { key: "{k}", name: "key-{k}", onclick: move |_| calc.get_mut().input_digit(k), "{k}" }
})}
}
div { class: "operator-keys"
CalculatorKey { name:"key-divide", onclick: move |_| calc.get_mut().set_operator(Operator::Div) "÷" }
CalculatorKey { name:"key-multiply", onclick: move |_| calc.get_mut().set_operator(Operator::Mul) "×" }
CalculatorKey { name:"key-subtract", onclick: move |_| calc.get_mut().set_operator(Operator::Sub) "−" }
CalculatorKey { name:"key-add", onclick: move |_| calc.get_mut().set_operator(Operator::Add) "+" }
CalculatorKey { name:"key-equals", onclick: move |_| calc.get_mut().perform_operation() "=" }
div {
id: "wrapper"
div { class: "app" onkeydown: {keydownhandler}
style { "{STYLE}" }
div { class: "calculator",
CalculatorDisplay { val: &display_value}
div { class: "calculator-keypad"
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..10).map(move |k| rsx!{
CalculatorKey { key: "{k}", name: "key-{k}", onclick: move |_| input_digit(k), "{k}" }
})}
}
}
div { class: "operator-keys"
CalculatorKey { name: "key-divide", onclick: move |_| set_operator(Some(Operator::Div)) "÷" }
CalculatorKey { name: "key-multiply", onclick: move |_| set_operator(Some(Operator::Mul)) "×" }
CalculatorKey { name: "key-subtract", onclick: move |_| set_operator(Some(Operator::Sub)) "−" }
CalculatorKey { name: "key-add", onclick: move |_| set_operator(Some(Operator::Add)) "+" }
CalculatorKey { name: "key-equals", onclick: move |_| perform_operation() "=" }
}
}
}
}
}
@@ -59,11 +158,14 @@ static App: FC<()> = |cx| {
#[derive(Props)]
struct CalculatorKeyProps<'a> {
/// Name!
name: &'static str,
/// Click!
onclick: &'a dyn Fn(MouseEvent),
}
fn CalculatorKey<'a>(cx: Context<'a, CalculatorKeyProps>) -> VNode<'a> {
fn CalculatorKey<'a, 'r>(cx: Context<'a, CalculatorKeyProps<'r>>) -> VNode<'a> {
cx.render(rsx! {
button {
class: "calculator-key {cx.name}"
@@ -73,94 +175,19 @@ fn CalculatorKey<'a>(cx: Context<'a, CalculatorKeyProps>) -> VNode<'a> {
})
}
#[derive(Clone)]
struct Calculator {
display_value: String,
operator: Option<Operator>,
cur_val: f64,
#[derive(Props, PartialEq)]
struct CalculatorDisplayProps<'a> {
val: &'a str,
}
#[derive(Clone)]
enum Operator {
Add,
Sub,
Mul,
Div,
}
impl Calculator {
fn new() -> Self {
Calculator {
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) {
self.display_value = (self.display_value.parse::<f64>().unwrap() / 100.0).to_string();
}
fn backspace(&mut self) {
if !self.display_value.as_str().eq("0") {
self.display_value.pop();
}
}
fn set_operator(&mut self, operator: Operator) {
self.operator = Some(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),
_ => {}
}
}
fn CalculatorDisplay<'a>(cx: Context<'a, CalculatorDisplayProps>) -> VNode<'a> {
use separator::Separatable;
// Todo, add float support to the num-format crate
let formatted = cx.val.parse::<f64>().unwrap().separated_string();
// TODO: make it autoscaling with css
cx.render(rsx! {
div { class: "calculator-display"
div { class: "auto-scaling-text", "{formatted}" }
}
})
}
examples/reducer.rs
+4 -2
View File
@@ -4,10 +4,12 @@
//! This pattern is very useful when a single component can handle many types of input that can
//! be represented by an enum.
fn main() {}
use dioxus::prelude::*;
fn main() {
dioxus::desktop::launch(App, |c| c);
}
pub static ExampleReducer: FC<()> = |cx| {
pub static App: FC<()> = |cx| {
let (state, reduce) = use_reducer(cx, PlayerState::new, PlayerState::reduce);
let is_playing = state.is_playing();
examples/rsx_usage.rs
+1 -1
View File
@@ -39,7 +39,7 @@
//! - Allow top-level fragments
//!
fn main() {
dioxus::webview::launch(Example);
dioxus::desktop::launch(Example, |c| c);
}
/// When trying to return "nothing" to Dioxus, you'll need to specify the type parameter or Rust will be sad.
examples/webview.rs
+1 -1
View File
@@ -12,7 +12,7 @@
use dioxus::prelude::*;
fn main() {
dioxus::desktop::launch(App);
dioxus::desktop::launch(App, |c| c);
}
static App: FC<()> = |cx| {