rename inner on event to data

This commit is contained in:
Jonathan Kelley committed 2024-01-31 16:26:19 -08:00
1 parent 33e90da314
commit a14789eebc
12 files changed
+47 -50

No files matched your search

+12 -12
View File
@@ -39,21 +39,21 @@ fn app() -> Element {
rsx! { rsx! {
div { style: "{CONTAINER_STYLE}", div { style: "{CONTAINER_STYLE}",
// focusing is necessary to catch keyboard events // focusing is necessary to catch keyboard events
div { style: "{RECT_STYLE}", tabindex: "0", div { style: "{RECT_STYLE}", tabindex: 0,
onmousemove: move |event| log_event(event.inner().clone()), onmousemove: move |event| log_event(event.data()),
onclick: move |event| log_event(event.inner().clone()), onclick: move |event| log_event(event.data()),
ondoubleclick: move |event| log_event(event.inner().clone()), ondoubleclick: move |event| log_event(event.data()),
onmousedown: move |event| log_event(event.inner().clone()), onmousedown: move |event| log_event(event.data()),
onmouseup: move |event| log_event(event.inner().clone()), onmouseup: move |event| log_event(event.data()),
onwheel: move |event| log_event(event.inner().clone()), onwheel: move |event| log_event(event.data()),
onkeydown: move |event| log_event(event.inner().clone()), onkeydown: move |event| log_event(event.data()),
onkeyup: move |event| log_event(event.inner().clone()), onkeyup: move |event| log_event(event.data()),
onkeypress: move |event| log_event(event.inner().clone()), onkeypress: move |event| log_event(event.data()),
onfocusin: move |event| log_event(event.inner().clone()), onfocusin: move |event| log_event(event.data()),
onfocusout: move |event| log_event(event.inner().clone()), onfocusout: move |event| log_event(event.data()),
"Hover, click, type or scroll to see the info down below" "Hover, click, type or scroll to see the info down below"
} }
+1 -1
View File
@@ -32,7 +32,7 @@ fn app() -> Element {
input { input {
value: "{i}", value: "{i}",
onmounted: move |cx| { onmounted: move |cx| {
elements.write().push(cx.inner().clone()); elements.write().push(cx.data());
}, },
oninput: move |_| { oninput: move |_| {
running.set(false); running.set(false);
+1 -1
View File
@@ -94,7 +94,7 @@ fn ClientAdd() -> Element {
// when the form mounts, focus the first name input // when the form mounts, focus the first name input
onmounted: move |e| async move { onmounted: move |e| async move {
_ = e.inner().set_focus(true).await; _ = e.set_focus(true).await;
}, },
} }
} }
+1 -1
View File
@@ -35,7 +35,7 @@ fn App() -> Element {
input { input {
r#type: "checkbox", r#type: "checkbox",
checked: enable_directory_upload, checked: enable_directory_upload,
oninput: move |evt| enable_directory_upload.set(evt.value().parse().unwrap()), oninput: move |evt| enable_directory_upload.set(evt.checked()),
}, },
"Enable directory upload" "Enable directory upload"
} }
+2 -5
View File
@@ -48,7 +48,7 @@ fn app() -> Element {
id: "huey", id: "huey",
r#type: "radio", r#type: "radio",
value: "huey", value: "huey",
checked: "", checked: true,
name: "drone", name: "drone",
} }
label { label {
@@ -63,10 +63,7 @@ fn app() -> Element {
value: "dewey", value: "dewey",
name: "drone", name: "drone",
} }
label { label { r#for: "dewey", "Dewey" }
r#for: "dewey",
"Dewey"
}
} }
div { div {
input { input {
+1 -1
View File
@@ -45,7 +45,7 @@ fn app() -> Element {
width: "50%", width: "50%",
height: "50%", height: "50%",
background_color: "red", background_color: "red",
onmounted: move |cx| div_element.set(Some(cx.inner().clone())), onmounted: move |cx| div_element.set(Some(cx.data())),
"This element is {dimensions():?}" "This element is {dimensions():?}"
} }
+1 -1
View File
@@ -10,7 +10,7 @@ fn app() -> Element {
rsx! { rsx! {
div { div {
h1 { h1 {
onmounted: move |cx| header_element.set(Some(cx.inner().clone())), onmounted: move |cx| header_element.set(Some(cx.data())),
"Scroll to top example" "Scroll to top example"
} }
+2 -2
View File
@@ -107,8 +107,8 @@ impl<T> Event<T> {
/// } /// }
/// } /// }
/// ``` /// ```
pub fn inner(&self) -> &Rc<T> { pub fn data(&self) -> Rc<T> {
&self.data self.data.clone()
} }
} }
@@ -23,23 +23,23 @@ fn app() -> Element {
background_color: "hsl(248, 53%, 58%)", background_color: "hsl(248, 53%, 58%)",
// Mosue // Mosue
onmousemove: move |event| log_event(event.inner().clone()), onmousemove: move |event| log_event(event.data()),
onclick: move |event| log_event(event.inner().clone()), onclick: move |event| log_event(event.data()),
ondoubleclick: move |event| log_event(event.inner().clone()), ondoubleclick: move |event| log_event(event.data()),
onmousedown: move |event| log_event(event.inner().clone()), onmousedown: move |event| log_event(event.data()),
onmouseup: move |event| log_event(event.inner().clone()), onmouseup: move |event| log_event(event.data()),
// Scroll // Scroll
onwheel: move |event| log_event(event.inner().clone()), onwheel: move |event| log_event(event.data()),
// Keyboard // Keyboard
onkeydown: move |event| log_event(event.inner().clone()), onkeydown: move |event| log_event(event.data()),
onkeyup: move |event| log_event(event.inner().clone()), onkeyup: move |event| log_event(event.data()),
onkeypress: move |event| log_event(event.inner().clone()), onkeypress: move |event| log_event(event.data()),
// Focus // Focus
onfocusin: move |event| log_event(event.inner().clone()), onfocusin: move |event| log_event(event.data()),
onfocusout: move |event| log_event(event.inner().clone()), onfocusout: move |event| log_event(event.data()),
"Hover, click, type or scroll to see the info down below" "Hover, click, type or scroll to see the info down below"
} }
+1 -1
View File
@@ -22,7 +22,7 @@ fn Button(color_offset: u32, layer: u16) -> Element {
background_color: "{color}", background_color: "{color}",
tabindex: "{layer}", tabindex: "{layer}",
onkeydown: move |e| { onkeydown: move |e| {
if let Code::Space = e.inner().code() { if let Code::Space = e.code() {
toggle.toggle(); toggle.toggle();
} }
}, },
+13 -13
View File
@@ -18,7 +18,7 @@ fn app() -> Element {
result result
} }
fn get_brightness(m: &Rc<MouseData>) -> i32 { fn get_brightness(m: Rc<MouseData>) -> i32 {
let b: i32 = m.held_buttons().len().try_into().unwrap(); let b: i32 = m.held_buttons().len().try_into().unwrap();
127 * b 127 * b
} }
@@ -59,9 +59,9 @@ fn app() -> Element {
justify_content: "center", justify_content: "center",
align_items: "center", align_items: "center",
background_color: to_str(&q1_color()), background_color: to_str(&q1_color()),
onmouseenter: move |m| q1_color.set([get_brightness(m.inner()), 0, 0]), onmouseenter: move |m| q1_color.set([get_brightness(m.data()), 0, 0]),
onmousedown: move |m| q1_color.set([get_brightness(m.inner()), 0, 0]), onmousedown: move |m| q1_color.set([get_brightness(m.data()), 0, 0]),
onmouseup: move |m| q1_color.set([get_brightness(m.inner()), 0, 0]), onmouseup: move |m| q1_color.set([get_brightness(m.data()), 0, 0]),
onwheel: move |w| q1_color.set([q1_color()[0] + (10.0 * w.delta().strip_units().y) as i32, 0, 0]), onwheel: move |w| q1_color.set([q1_color()[0] + (10.0 * w.delta().strip_units().y) as i32, 0, 0]),
onmouseleave: move |_| q1_color.set([200; 3]), onmouseleave: move |_| q1_color.set([200; 3]),
onmousemove: update_data, onmousemove: update_data,
@@ -73,9 +73,9 @@ fn app() -> Element {
justify_content: "center", justify_content: "center",
align_items: "center", align_items: "center",
background_color: to_str(&q2_color()), background_color: to_str(&q2_color()),
onmouseenter: move |m| q2_color.set([get_brightness(m.inner()); 3]), onmouseenter: move |m| q2_color.set([get_brightness(m.data()); 3]),
onmousedown: move |m| q2_color.set([get_brightness(m.inner()); 3]), onmousedown: move |m| q2_color.set([get_brightness(m.data()); 3]),
onmouseup: move |m| q2_color.set([get_brightness(m.inner()); 3]), onmouseup: move |m| q2_color.set([get_brightness(m.data()); 3]),
onwheel: move |w| q2_color.set([q2_color()[0] + (10.0 * w.delta().strip_units().y) as i32; 3]), onwheel: move |w| q2_color.set([q2_color()[0] + (10.0 * w.delta().strip_units().y) as i32; 3]),
onmouseleave: move |_| q2_color.set([200; 3]), onmouseleave: move |_| q2_color.set([200; 3]),
onmousemove: update_data, onmousemove: update_data,
@@ -93,9 +93,9 @@ fn app() -> Element {
justify_content: "center", justify_content: "center",
align_items: "center", align_items: "center",
background_color: to_str(&q3_color()), background_color: to_str(&q3_color()),
onmouseenter: move |m| q3_color.set([0, get_brightness(m.inner()), 0]), onmouseenter: move |m| q3_color.set([0, get_brightness(m.data()), 0]),
onmousedown: move |m| q3_color.set([0, get_brightness(m.inner()), 0]), onmousedown: move |m| q3_color.set([0, get_brightness(m.data()), 0]),
onmouseup: move |m| q3_color.set([0, get_brightness(m.inner()), 0]), onmouseup: move |m| q3_color.set([0, get_brightness(m.data()), 0]),
onwheel: move |w| q3_color.set([0, q3_color()[1] + (10.0 * w.delta().strip_units().y) as i32, 0]), onwheel: move |w| q3_color.set([0, q3_color()[1] + (10.0 * w.delta().strip_units().y) as i32, 0]),
onmouseleave: move |_| q3_color.set([200; 3]), onmouseleave: move |_| q3_color.set([200; 3]),
onmousemove: update_data, onmousemove: update_data,
@@ -107,9 +107,9 @@ fn app() -> Element {
justify_content: "center", justify_content: "center",
align_items: "center", align_items: "center",
background_color: to_str(&q4_color()), background_color: to_str(&q4_color()),
onmouseenter: move |m| q4_color.set([0, 0, get_brightness(m.inner())]), onmouseenter: move |m| q4_color.set([0, 0, get_brightness(m.data())]),
onmousedown: move |m| q4_color.set([0, 0, get_brightness(m.inner())]), onmousedown: move |m| q4_color.set([0, 0, get_brightness(m.data())]),
onmouseup: move |m| q4_color.set([0, 0, get_brightness(m.inner())]), onmouseup: move |m| q4_color.set([0, 0, get_brightness(m.data())]),
onwheel: move |w| q4_color.set([0, 0, q4_color()[2] + (10.0 * w.delta().strip_units().y) as i32]), onwheel: move |w| q4_color.set([0, 0, q4_color()[2] + (10.0 * w.delta().strip_units().y) as i32]),
onmouseleave: move |_| q4_color.set([200; 3]), onmouseleave: move |_| q4_color.set([200; 3]),
onmousemove: update_data, onmousemove: update_data,
+1 -1
View File
@@ -12,7 +12,7 @@ fn app() -> Element {
width: "100%", width: "100%",
height: "100%", height: "100%",
flex_direction: "column", flex_direction: "column",
onwheel: move |evt| alpha.set((alpha() + evt.inner().delta().strip_units().y as i64).clamp(0, 100)), onwheel: move |evt| alpha.set((alpha() + evt.delta().strip_units().y as i64).clamp(0, 100)),
p { p {
background_color: "black", background_color: "black",