change button example to showcase tabindex

examples/tui_buttons.rs

@@ -1,28 +1,51 @@
-#![allow(non_snake_case)]
-
-use dioxus::prelude::*;
+use dioxus::{events::KeyCode, prelude::*};
 
 fn main() {
     dioxus::tui::launch(app);
 }
 
-fn Button(cx: Scope) -> Element {
-    let state = use_state(&cx, || false);
-    let color = if *state.get() { "red" } else { "blue" };
-    let text = if *state.get() { "☐" } else { "☒" };
+#[derive(PartialEq, Props)]
+struct ButtonProps {
+    color_offset: u32,
+    layer: u16,
+}
+
+#[allow(non_snake_case)]
+fn Button(cx: Scope<ButtonProps>) -> Element {
+    let toggle = use_state(&cx, || false);
+    let hovered = use_state(&cx, || false);
+
+    let hue = cx.props.color_offset % 255;
+    let saturation = if *toggle.get() { 50 } else { 25 } + if *hovered.get() { 50 } else { 25 };
+    let brightness = saturation / 2;
+    let color = format!("hsl({hue}, {saturation}, {brightness})");
 
     cx.render(rsx! {
-        div {
-            border_width: "1px",
-            width: "50%",
+        div{
+            width: "100%",
             height: "100%",
             background_color: "{color}",
+            tabindex: "{cx.props.layer}",
+            onkeydown: |e| {
+                if let KeyCode::Space = e.data.key_code{
+                    toggle.modify(|f| !f);
+                }
+            },
+            onclick: |_| {
+                toggle.modify(|f| !f);
+            },
+            onmouseenter: |_|{
+                hovered.set(true);
+            },
+            onmouseleave: |_|{
+                hovered.set(false);
+            },
             justify_content: "center",
             align_items: "center",
-            onkeydown: |_| state.modify(|s| !s),
-            onclick: |_| state.modify(|s| !s),
+            display: "flex",
+            flex_direction: "column",
 
-            "{text}"
+            p{"tabindex: {cx.props.layer}"}
         }
     })
 }
@@ -30,31 +53,41 @@ fn Button(cx: Scope) -> Element {
 fn app(cx: Scope) -> Element {
     cx.render(rsx! {
         div {
+            display: "flex",
+            flex_direction: "column",
             width: "100%",
             height: "100%",
-            flex_direction: "column",
 
-            div {
-                width: "100%",
-                height: "50%",
-                flex_direction: "row",
-
-                Button{},
-                Button{},
-                Button{},
-                Button{},
-            }
-
-            div {
-                width: "100%",
-                height: "50%",
-                flex_direction: "row",
-
-                Button{},
-                Button{},
-                Button{},
-                Button{},
-            }
+            (1..8).map(|y|
+                cx.render(rsx!{
+                    div{
+                        display: "flex",
+                        flex_direction: "row",
+                        width: "100%",
+                        height: "100%",
+                        (1..8).map(|x|{
+                            if (x + y) % 2 == 0{
+                                cx.render(rsx!{
+                                    div{
+                                        width: "100%",
+                                        height: "100%",
+                                        background_color: "rgb(100, 100, 100)",
+                                    }
+                                })
+                            }
+                            else{
+                                let layer = (x + y) % 3;
+                                cx.render(rsx!{
+                                    Button{
+                                        color_offset: x * y,
+                                        layer: layer as u16,
+                                    }
+                                })
+                            }
+                        })
+                    }
+                })
+            )
         }
     })
 }