wip: move some examples around

examples/examples/calculator.rs

@@ -0,0 +1,181 @@
+use dioxus::events::on::*;
+use dioxus::prelude::*;
+use dioxus_core as dioxus;
+
+const STYLE: &str = include_str!("../../../examples/assets/calculator.css");
+
+fn main() {
+    dioxus_webview::launch(
+        |builder| {
+            builder
+                .title("Test Dioxus App")
+                .size(340, 560)
+                .resizable(false)
+                .debug(true)
+        },
+        (),
+        App,
+    )
+    .expect("Webview finished");
+}
+
+static App: FC<()> = |cx| {
+    let state = use_model(&cx, || Calculator::new());
+
+    let clear_display = state.display_value.eq("0");
+    let clear_text = if clear_display { "C" } else { "AC" };
+    let formatted = state.formatted_display();
+
+    cx.render(rsx! {
+        div { id: "wrapper"
+            div { class: "app", style { "{STYLE}" }
+                div { class: "calculator", onkeypress: move |evt| state.get_mut().handle_keydown(evt),
+                    div { class: "calculator-display", "{formatted}"}
+                    div { class: "calculator-keypad"
+                        div { class: "input-keys"
+                            div { class: "function-keys"
+                                CalculatorKey { name: "key-clear", onclick: move |_| state.get_mut().clear_display(), "{clear_text}" }
+                                CalculatorKey { name: "key-sign", onclick: move |_| state.get_mut().toggle_sign(), "±"}
+                                CalculatorKey { name: "key-percent", onclick: move |_| state.get_mut().toggle_percent(), "%"}
+                            }
+                            div { class: "digit-keys"
+                                CalculatorKey { name: "key-0", onclick: move |_| state.get_mut().input_digit(0), "0" }
+                                CalculatorKey { name: "key-dot", onclick: move |_|  state.get_mut().input_dot(), "●" }
+                                {(1..10).map(move |k| rsx!{
+                                    CalculatorKey { key: "{k}", name: "key-{k}", onclick: move |_|  state.get_mut().input_digit(k), "{k}" }
+                                })}
+                            }
+                        }
+                        div { class: "operator-keys"
+                            CalculatorKey { name:"key-divide", onclick: move |_| state.get_mut().set_operator(Operator::Div), "÷" }
+                            CalculatorKey { name:"key-multiply", onclick: move |_| state.get_mut().set_operator(Operator::Mul), "×" }
+                            CalculatorKey { name:"key-subtract", onclick: move |_| state.get_mut().set_operator(Operator::Sub), "−" }
+                            CalculatorKey { name:"key-add", onclick: move |_| state.get_mut().set_operator(Operator::Add), "+" }
+                            CalculatorKey { name:"key-equals", onclick: move |_| state.get_mut().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(Clone)]
+struct Calculator {
+    display_value: String,
+    operator: Option<Operator>,
+    waiting_for_operand: bool,
+    cur_val: f64,
+}
+#[derive(Clone)]
+enum Operator {
+    Add,
+    Sub,
+    Mul,
+    Div,
+}
+
+impl Calculator {
+    fn new() -> Self {
+        Calculator {
+            display_value: "0".to_string(),
+            operator: None,
+            waiting_for_operand: false,
+            cur_val: 0.0,
+        }
+    }
+    fn formatted_display(&self) -> String {
+        // use separator::Separatable;
+        self.display_value.clone()
+        // .parse::<f64>()
+        // .unwrap()
+        // .separated_string()
+    }
+    fn clear_display(&mut self) {
+        self.display_value = "0".to_string();
+    }
+    fn input_digit(&mut self, digit: u8) {
+        let content = digit.to_string();
+        if self.waiting_for_operand || self.display_value == "0" {
+            self.waiting_for_operand = false;
+            self.display_value = content;
+        } else {
+            self.display_value.push_str(content.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);
+        self.cur_val = self.display_value.parse::<f64>().unwrap();
+        self.waiting_for_operand = true;
+    }
+    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),
+            _ => {}
+        }
+    }
+}

examples/examples/demo.rs

@@ -0,0 +1,71 @@
+//! An example where the dioxus vdom is running in a native thread, interacting with webview
+//! Content is passed from the native thread into the webview
+use dioxus_core as dioxus;
+use dioxus_core::prelude::*;
+fn main() {
+    dioxus_webview::launch(
+        |builder| {
+            builder
+                .title("Test Dioxus App")
+                .size(320, 480)
+                .resizable(false)
+                .debug(true)
+        },
+        (),
+        Example,
+    )
+    .expect("Webview finished");
+}
+
+// static Example: FC<()> = |cx| {
+//     cx.render(html! {
+//         <div>
+//         <svg class="octicon octicon-star v-align-text-bottom"
+//         viewBox="0 0 14 16" version="1.1"
+//         width="14" height="16"
+//         xmlns="http://www.w3.org/2000/svg"
+//         >
+
+//         <path
+//         d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14"
+//         xmlns="http://www.w3.org/2000/svg"
+//         >
+//         </path>
+
+//         </svg>
+//         </div>
+//     })
+// };
+static Example: FC<()> = |cx| {
+    cx.render(rsx! {
+        div  {
+            class: "flex items-center justify-center flex-col"
+            div {
+                class: "flex items-center justify-center"
+                div {
+                    class: "flex flex-col bg-white rounded p-4 w-full max-w-xs"
+                    div { class: "font-bold text-xl", "Example desktop app" }
+                    div { class: "text-sm text-gray-500", "This is running natively" }
+                    div {
+                        class: "flex flex-row items-center justify-center mt-6"
+                        div { class: "font-medium text-6xl", "100%" }
+                    }
+                    div {
+                        class: "flex flex-row justify-between mt-6"
+                        a {
+                            href: "https://www.dioxuslabs.com"
+                            class: "underline"
+                            "Made with dioxus"
+                        }
+                    }
+                    ul {
+                        {(0..10).map(|f| rsx!(li {
+                            key: "{f}"
+                            "{f}"
+                        }))}
+                    }
+                }
+            }
+        }
+    })
+};

examples/examples/hifive.rs

@@ -0,0 +1,28 @@
+//! An example where the dioxus vdom is running in a native thread, interacting with webview
+//! Content is passed from the native thread into the webview
+use dioxus_core as dioxus;
+use dioxus_core::prelude::*;
+fn main() {
+    dioxus_webview::launch(
+        |builder| {
+            builder
+                .title("Test Dioxus App")
+                .size(320, 480)
+                .resizable(false)
+                .debug(true)
+        },
+        (),
+        App,
+    )
+    .expect("Webview finished");
+}
+
+static App: FC<()> = |cx| {
+    let hifives = use_model(&cx, || 0);
+    cx.render(rsx! {
+        div {
+            h1 { "Hi-fives collected: {hifives}" }
+            button { "Hi five me!", onclick: move |_| *hifives.get_mut() += 1 }
+        }
+    })
+};