chore: clean up all_events example

examples/all_events.rs

@@ -1,6 +1,4 @@
-use dioxus::prelude::*;
+use dioxus::{events::*, prelude::*};
-use dioxus_html::on::{FocusData, KeyboardData, MouseData, WheelData};
-use std::sync::Arc;
 
 fn main() {
     dioxus::desktop::launch(app);
@@ -8,31 +6,31 @@ fn main() {
 
 #[derive(Debug)]
 enum Event {
-    MouseMove(Arc<MouseData>),
+    MouseMove(MouseEvent),
-    MouseClick(Arc<MouseData>),
+    MouseClick(MouseEvent),
-    MouseDoubleClick(Arc<MouseData>),
+    MouseDoubleClick(MouseEvent),
-    MouseDown(Arc<MouseData>),
+    MouseDown(MouseEvent),
-    MouseUp(Arc<MouseData>),
+    MouseUp(MouseEvent),
 
-    Wheel(Arc<WheelData>),
+    Wheel(WheelEvent),
 
-    KeyDown(Arc<KeyboardData>),
+    KeyDown(KeyboardEvent),
-    KeyUp(Arc<KeyboardData>),
+    KeyUp(KeyboardEvent),
-    KeyPress(Arc<KeyboardData>),
+    KeyPress(KeyboardEvent),
 
-    FocusIn(Arc<FocusData>),
+    FocusIn(FocusEvent),
-    FocusOut(Arc<FocusData>),
+    FocusOut(FocusEvent),
 }
 
 const MAX_EVENTS: usize = 8;
 
-fn app(cx: Scope) -> Element {
+const CONTAINER_STYLE: &str = r#"
-    let container_style = r#"
         display: flex;
         flex-direction: column;
         align-items: center;
     "#;
-    let rect_style = r#"
+
+const RECT_STYLE: &str = r#"
         background: deepskyblue;
         height: 50vh;
         width: 50vw;
@@ -42,44 +40,45 @@ fn app(cx: Scope) -> Element {
         text-aligh: center;
     "#;
 
-    let events = use_ref(&cx, || Vec::new());
+fn app(cx: Scope) -> Element {
+    let events = use_ref(&cx, Vec::new);
 
-    let events_lock = events.read();
+    let log_event = move |event: Event| events.write().push(event);
-    let first_index = events_lock.len().saturating_sub(MAX_EVENTS);
-    let events_rendered = events_lock[first_index..]
-        .iter()
-        .map(|event| cx.render(rsx!(div {"{event:?}"})));
-
-    let log_event = move |event: Event| {
-        events.write().push(event);
-    };
 
     cx.render(rsx! (
         div {
-            style: "{container_style}",
+            style: "{CONTAINER_STYLE}",
             div {
-                style: "{rect_style}",
+                style: "{RECT_STYLE}",
                 // focusing is necessary to catch keyboard events
                 tabindex: "0",
 
-                onmousemove: move |event| log_event(Event::MouseMove(event.data)),
+                onmousemove: move |event| log_event(Event::MouseMove(event)),
-                onclick: move |event| log_event(Event::MouseClick(event.data)),
+                onclick: move |event| log_event(Event::MouseClick(event)),
-                ondblclick: move |event| log_event(Event::MouseDoubleClick(event.data)),
+                ondblclick: move |event| log_event(Event::MouseDoubleClick(event)),
-                onmousedown: move |event| log_event(Event::MouseDown(event.data)),
+                onmousedown: move |event| log_event(Event::MouseDown(event)),
-                onmouseup: move |event| log_event(Event::MouseUp(event.data)),
+                onmouseup: move |event| log_event(Event::MouseUp(event)),
 
-                onwheel: move |event| log_event(Event::Wheel(event.data)),
+                onwheel: move |event| log_event(Event::Wheel(event)),
 
-                onkeydown: move |event| log_event(Event::KeyDown(event.data)),
+                onkeydown: move |event| log_event(Event::KeyDown(event)),
-                onkeyup: move |event| log_event(Event::KeyUp(event.data)),
+                onkeyup: move |event| log_event(Event::KeyUp(event)),
-                onkeypress: move |event| log_event(Event::KeyPress(event.data)),
+                onkeypress: move |event| log_event(Event::KeyPress(event)),
 
-                onfocusin: move |event| log_event(Event::FocusIn(event.data)),
+                onfocusin: move |event| log_event(Event::FocusIn(event)),
-                onfocusout: move |event| log_event(Event::FocusOut(event.data)),
+                onfocusout: move |event| log_event(Event::FocusOut(event)),
 
                 "Hover, click, type or scroll to see the info down below"
             }
-            div { events_rendered },
+            div {
+                events
+                    .read()
+                    .iter()
+                    .rev()
+                    .take(MAX_EVENTS)
+                    .rev()
+                    .map(|event| cx.render(rsx!(div {"{event:?}"})))
+            },
         },
     ))
 }