rename inner on event to data
This commit is contained in:
12 files changed
+47
-50
No files matched your search
+12
-12
@@ -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"
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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
@@ -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;
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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
@@ -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 {
|
||||||
|
|||||||
@@ -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():?}"
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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"
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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"
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
@@ -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",
|
||||||
|
|||||||
Reference in new issue
Block a user