wip: enable more diffing
This commit is contained in:
Jonathan Kelley committed
1 parent
b5e5ef171a
commit
e8f29a8f8a
26 files changed
+1326
-367
No files matched your search
@@ -1,5 +1,6 @@
|
||||
//! Basic example that renders a simple VNode to the browser.
|
||||
|
||||
use dioxus::events::on::MouseEvent;
|
||||
use dioxus_core as dioxus;
|
||||
use dioxus_core::prelude::*;
|
||||
use dioxus_web::*;
|
||||
@@ -14,56 +15,42 @@ fn main() {
|
||||
}
|
||||
|
||||
static App: FC<()> = |cx| {
|
||||
let (state, set_state) = use_state(&cx, || 0);
|
||||
cx.render(rsx! {
|
||||
div {
|
||||
h1 {"hello"}
|
||||
C1 {}
|
||||
C2 {}
|
||||
section { class: "py-12 px-4 text-center"
|
||||
div { class: "w-full max-w-2xl mx-auto"
|
||||
span { class: "text-sm font-semibold"
|
||||
"count: {state}"
|
||||
}
|
||||
div {
|
||||
C1 {
|
||||
onclick: move |_| set_state(state + 1)
|
||||
"incr"
|
||||
}
|
||||
C1 {
|
||||
onclick: move |_| set_state(state - 1)
|
||||
"decr"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
static C1: FC<()> = |cx| {
|
||||
#[derive(Props)]
|
||||
struct IncrementerProps<'a> {
|
||||
onclick: &'a dyn Fn(MouseEvent),
|
||||
}
|
||||
|
||||
fn C1<'a, 'b>(cx: Context<'a, IncrementerProps<'b>>) -> VNode<'a> {
|
||||
cx.render(rsx! {
|
||||
button {
|
||||
"numba 1"
|
||||
class: "inline-block py-4 px-8 mr-6 leading-none text-white bg-indigo-600 hover:bg-indigo-900 font-semibold rounded shadow"
|
||||
onclick: {cx.onclick}
|
||||
"becr"
|
||||
{cx.children()}
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
static C2: FC<()> = |cx| {
|
||||
cx.render(rsx! {
|
||||
button {
|
||||
"numba 2"
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
static DocExamples: FC<()> = |cx| {
|
||||
//
|
||||
|
||||
let is_ready = false;
|
||||
|
||||
let items = (0..10).map(|i| rsx! { li {"{i}"} });
|
||||
let _ = rsx! {
|
||||
ul {
|
||||
{items}
|
||||
}
|
||||
};
|
||||
|
||||
// rsx! {
|
||||
// div {}
|
||||
// h1 {}
|
||||
// {""}
|
||||
// "asbasd"
|
||||
// dioxus::Fragment {
|
||||
// //
|
||||
// }
|
||||
// }
|
||||
|
||||
cx.render(rsx! {
|
||||
div {
|
||||
{ is_ready.then(|| rsx!{ h1 {"We are ready!"} }) }
|
||||
}
|
||||
})
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,181 @@
|
||||
//! Example: Calculator
|
||||
//! -------------------------
|
||||
|
||||
// use dioxus::events::on::*;
|
||||
// use dioxus::prelude::*;
|
||||
|
||||
use dioxus_core as dioxus;
|
||||
use dioxus_web::WebsysRenderer;
|
||||
|
||||
const STYLE: &str = include_str!("../../../examples/assets/calculator.css");
|
||||
|
||||
fn main() {
|
||||
// Setup logging
|
||||
wasm_logger::init(wasm_logger::Config::new(log::Level::Debug));
|
||||
console_error_panic_hook::set_once();
|
||||
|
||||
// Run the app
|
||||
wasm_bindgen_futures::spawn_local(WebsysRenderer::start(App));
|
||||
}
|
||||
|
||||
use dioxus::events::on::*;
|
||||
use dioxus::prelude::*;
|
||||
|
||||
enum Operator {
|
||||
Add,
|
||||
Sub,
|
||||
Mul,
|
||||
Div,
|
||||
}
|
||||
|
||||
static App: FC<()> = |cx| {
|
||||
let (cur_val, set_cur_val) = use_state(&cx, || 0.0_f64);
|
||||
let (operator, set_operator) = use_state(&cx, || None as Option<Operator>);
|
||||
let (display_value, set_display_value) = use_state(&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| {
|
||||
log::warn!("Inputting digit {:#?}", num);
|
||||
let mut new = display_value.clone();
|
||||
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: "app"
|
||||
onkeydown: {keydownhandler}
|
||||
style {
|
||||
"{STYLE}"
|
||||
}
|
||||
div { class: "calculator",
|
||||
div { class: "input-keys"
|
||||
CalculatorDisplay { val: *cur_val }
|
||||
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(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() "=" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
#[derive(Props)]
|
||||
struct CalculatorKeyProps<'a> {
|
||||
/// Name!
|
||||
name: &'static str,
|
||||
|
||||
/// Click!
|
||||
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}"
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -3,15 +3,17 @@ use dioxus_core::prelude::*;
|
||||
use dioxus_web::WebsysRenderer;
|
||||
|
||||
fn main() {
|
||||
wasm_logger::init(wasm_logger::Config::new(log::Level::Debug));
|
||||
console_error_panic_hook::set_once();
|
||||
// wasm_logger::init(wasm_logger::Config::new(log::Level::Debug));
|
||||
// console_error_panic_hook::set_once();
|
||||
|
||||
// log::info!("hello world");
|
||||
dioxus_web::intern_cache();
|
||||
|
||||
log::info!("hello world");
|
||||
wasm_bindgen_futures::spawn_local(WebsysRenderer::start(Example));
|
||||
}
|
||||
|
||||
static Example: FC<()> = |cx| {
|
||||
let nodes = (0..15).map(|f| rsx! (li { key: "{f}", "{f}"}));
|
||||
let nodes = (0..500).map(|f| rsx! (li {"div"}));
|
||||
cx.render(rsx! {
|
||||
div {
|
||||
span {
|
||||
|
||||
Reference in new issue
Block a user