From 41872a075f83684cecdbe9617475820b22d8f409 Mon Sep 17 00:00:00 2001 From: Jonathan Kelley Date: Sat, 2 Jul 2022 23:12:26 -0400 Subject: [PATCH] chore: clean up all_events example --- examples/all_events.rs | 81 +++++++++++++++++++++--------------------- 1 file changed, 40 insertions(+), 41 deletions(-) diff --git a/examples/all_events.rs b/examples/all_events.rs index 5430bdbf5..e34f56698 100644 --- a/examples/all_events.rs +++ b/examples/all_events.rs @@ -1,6 +1,4 @@ -use dioxus::prelude::*; -use dioxus_html::on::{FocusData, KeyboardData, MouseData, WheelData}; -use std::sync::Arc; +use dioxus::{events::*, prelude::*}; fn main() { dioxus::desktop::launch(app); @@ -8,31 +6,31 @@ fn main() { #[derive(Debug)] enum Event { - MouseMove(Arc), - MouseClick(Arc), - MouseDoubleClick(Arc), - MouseDown(Arc), - MouseUp(Arc), + MouseMove(MouseEvent), + MouseClick(MouseEvent), + MouseDoubleClick(MouseEvent), + MouseDown(MouseEvent), + MouseUp(MouseEvent), - Wheel(Arc), + Wheel(WheelEvent), - KeyDown(Arc), - KeyUp(Arc), - KeyPress(Arc), + KeyDown(KeyboardEvent), + KeyUp(KeyboardEvent), + KeyPress(KeyboardEvent), - FocusIn(Arc), - FocusOut(Arc), + FocusIn(FocusEvent), + FocusOut(FocusEvent), } const MAX_EVENTS: usize = 8; -fn app(cx: Scope) -> Element { - let container_style = r#" +const CONTAINER_STYLE: &str = 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 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); - }; + 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)), - onclick: move |event| log_event(Event::MouseClick(event.data)), - ondblclick: move |event| log_event(Event::MouseDoubleClick(event.data)), - onmousedown: move |event| log_event(Event::MouseDown(event.data)), - onmouseup: move |event| log_event(Event::MouseUp(event.data)), + onmousemove: move |event| log_event(Event::MouseMove(event)), + onclick: move |event| log_event(Event::MouseClick(event)), + ondblclick: move |event| log_event(Event::MouseDoubleClick(event)), + onmousedown: move |event| log_event(Event::MouseDown(event)), + 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)), - onkeyup: move |event| log_event(Event::KeyUp(event.data)), - onkeypress: move |event| log_event(Event::KeyPress(event.data)), + onkeydown: move |event| log_event(Event::KeyDown(event)), + onkeyup: move |event| log_event(Event::KeyUp(event)), + onkeypress: move |event| log_event(Event::KeyPress(event)), - onfocusin: move |event| log_event(Event::FocusIn(event.data)), - onfocusout: move |event| log_event(Event::FocusOut(event.data)), + onfocusin: move |event| log_event(Event::FocusIn(event)), + 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:?}"}))) + }, }, )) }