slightly improved state management

2024-12-18 23:43:17 +01:00
parent 1c67eaa3a2
commit 97141eae77
4 changed files with 92 additions and 47 deletions
@@ -1,49 +1,68 @@
-use crate::prelude::*;
+pub mod counter_example {
+    use crate::prelude::*;

-pub fn todo_app() -> Element {
-    let todo = vec!["Todo", "Hovering", "Completed", "Foo", "Bar"];
+    pub fn app() -> Element {
+        let count = State::new(0);

-    rsx! {
-        @SetStyle(todo_styling())
+        rsx! {
+            button {
+                on_click: fn(_, _, _) @count {
+                    count += 1;
+                },

-        text { class: "title", static "Todo list app made with OSUI" }
-        text { class: "title", "{}", "-".repeat(crossterm::terminal::size().unwrap().0 as usize) }
-        for (t in todo) {
-            ersx!(button { class: "todo", on_click: fn(btn: &mut Button, _, _) {
-                btn.class = if btn.class == "todo" {
-                    "complete"
-                } else {
-                    "todo"
-                };
-            }, "{t}" } )
+                "The current count is: {count}"
+            }
        }
    }
 }

-pub fn todo_styling() -> Css {
-    css! {
-        "todo" {
-            x: 0 px,
-            y: Auto,
-            color: Red,
+pub mod todo_example {
+    use crate::prelude::*;
+    pub fn todo_app() -> Element {
+        let todo = vec!["Todo", "Hovering", "Completed", "Foo", "Bar"];
+
+        rsx! {
+            @SetStyle(todo_styling())
+
+            text { class: "title", static "Todo list app made with OSUI" }
+            text { class: "title", "{}", "-".repeat(crossterm::terminal::size().unwrap().0 as usize) }
+            for (t in todo) {
+                ersx!(button { class: "todo", on_click: fn(btn: &mut Button, _, _) {
+                    btn.class = if btn.class == "todo" {
+                        "complete"
+                    } else {
+                        "todo"
+                    };
+                }, "{t}" } )
+            }
        }
-        "todo": "hover" {
-            color: Blue,
-        }
-        "complete" {
-            x: 0 px,
-            y: Auto,
-            color: Green,
-        }
-        "complete": "hover" {
-            color: Cyan
-        }
-        "title" {
-            x: 0 px,
-            y: Auto,
-        }
-        "title": "hover" {
-            color: Blue
+    }
+
+    pub fn todo_styling() -> Css {
+        css! {
+            "todo" {
+                x: 0 px,
+                y: Auto,
+                color: Red,
+            }
+            "todo": "hover" {
+                color: Blue,
+            }
+            "complete" {
+                x: 0 px,
+                y: Auto,
+                color: Green,
+            }
+            "complete": "hover" {
+                color: Cyan
+            }
+            "title" {
+                x: 0 px,
+                y: Auto,
+            }
+            "title": "hover" {
+                color: Blue
+            }
        }
    }
 }