swaits/dioxus
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix the on double click event and depreciate ondblclick (#1743)

Browse Source
This commit is contained in:
ealmloff authored and GitHub committed 2024-01-03 14:02:08 -06:00
1 parent cde5ac5f58
commit 937be8b752
7 files changed
+143 -102
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

examples/all_events.rs
+4 -7
View File
@@ -53,8 +53,7 @@ fn app(cx: Scope) -> Element {
}; };
cx.render(rsx! ( cx.render(rsx! (
div { div { style: "{CONTAINER_STYLE}",
style: "{CONTAINER_STYLE}",
div { div {
style: "{RECT_STYLE}", style: "{RECT_STYLE}",
// focusing is necessary to catch keyboard events // focusing is necessary to catch keyboard events
@@ -62,7 +61,7 @@ fn app(cx: Scope) -> Element {
onmousemove: move |event| log_event(Event::MouseMove(event)), onmousemove: move |event| log_event(Event::MouseMove(event)),
onclick: move |event| log_event(Event::MouseClick(event)), onclick: move |event| log_event(Event::MouseClick(event)),
ondblclick: move |event| log_event(Event::MouseDoubleClick(event)), ondoubleclick: move |event| log_event(Event::MouseDoubleClick(event)),
onmousedown: move |event| log_event(Event::MouseDown(event)), onmousedown: move |event| log_event(Event::MouseDown(event)),
onmouseup: move |event| log_event(Event::MouseUp(event)), onmouseup: move |event| log_event(Event::MouseUp(event)),
@@ -77,9 +76,7 @@ fn app(cx: Scope) -> Element {
"Hover, click, type or scroll to see the info down below" "Hover, click, type or scroll to see the info down below"
} }
div { div { events.read().iter().map(|event| rsx!( div { "{event:?}" } )) }
events.read().iter().map(|event| rsx!( div { "{event:?}" } )) }
},
},
)) ))
} }
examples/todomvc.rs
+48 -41
View File
@@ -48,11 +48,8 @@ pub fn app(cx: Scope<()>) -> Element {
cx.render(rsx! { cx.render(rsx! {
section { class: "todoapp", section { class: "todoapp",
style { include_str!("./assets/todomvc.css") } style { include_str!("./assets/todomvc.css") }
TodoHeader { TodoHeader { todos: todos }
todos: todos, section { class: "main",
}
section {
class: "main",
if !todos.is_empty() { if !todos.is_empty() {
rsx! { rsx! {
input { input {
@@ -103,31 +100,34 @@ pub fn TodoHeader<'a>(cx: Scope<'a, TodoHeaderProps<'a>>) -> Element {
cx.render(rsx! { cx.render(rsx! {
header { class: "header", header { class: "header",
h1 {"todos"} h1 { "todos" }
input { input {
class: "new-todo", class: "new-todo",
placeholder: "What needs to be done?", placeholder: "What needs to be done?",
value: "{draft}", value: "{draft}",
autofocus: "true", autofocus: "true",
oninput: move |evt| { oninput: move |evt| {
draft.set(evt.value.clone()); draft.set(evt.value.clone());
}, },
onkeydown: move |evt| { onkeydown: move |evt| {
if evt.key() == Key::Enter && !draft.is_empty() { if evt.key() == Key::Enter && !draft.is_empty() {
cx.props.todos.make_mut().insert( cx.props
**todo_id, .todos
TodoItem { .make_mut()
id: **todo_id, .insert(
checked: false, **todo_id,
contents: draft.to_string(), TodoItem {
}, id: **todo_id,
); checked: false,
*todo_id.make_mut() += 1; contents: draft.to_string(),
draft.set("".to_string()); },
);
*todo_id.make_mut() += 1;
draft.set("".to_string());
}
} }
} }
} }
}
}) })
} }
@@ -146,8 +146,7 @@ pub fn TodoEntry<'a>(cx: Scope<'a, TodoEntryProps<'a>>) -> Element {
let editing = if **is_editing { "editing" } else { "" }; let editing = if **is_editing { "editing" } else { "" };
cx.render(rsx!{ cx.render(rsx!{
li { li { class: "{completed} {editing}",
class: "{completed} {editing}",
div { class: "view", div { class: "view",
input { input {
class: "toggle", class: "toggle",
@@ -160,14 +159,16 @@ pub fn TodoEntry<'a>(cx: Scope<'a, TodoEntryProps<'a>>) -> Element {
} }
label { label {
r#for: "cbg-{todo.id}", r#for: "cbg-{todo.id}",
ondblclick: move |_| is_editing.set(true), ondoubleclick: move |_| is_editing.set(true),
prevent_default: "onclick", prevent_default: "onclick",
"{todo.contents}" "{todo.contents}"
} }
button { button {
class: "destroy", class: "destroy",
onclick: move |_| { cx.props.todos.make_mut().remove(&todo.id); }, onclick: move |_| {
prevent_default: "onclick", cx.props.todos.make_mut().remove(&todo.id);
},
prevent_default: "onclick"
} }
} }
is_editing.then(|| rsx!{ is_editing.then(|| rsx!{
@@ -213,15 +214,15 @@ pub fn ListFooter<'a>(cx: Scope<'a, ListFooterProps<'a>>) -> Element {
cx.render(rsx! { cx.render(rsx! {
footer { class: "footer", footer { class: "footer",
span { class: "todo-count", span { class: "todo-count",
strong {"{active_todo_count} "} strong { "{active_todo_count} " }
span {"{active_todo_text} left"} span { "{active_todo_text} left" }
} }
ul { class: "filters", ul { class: "filters",
for (state, state_text, url) in [ for (state , state_text , url) in [
(FilterState::All, "All", "#/"), (FilterState::All, "All", "#/"),
(FilterState::Active, "Active", "#/active"), (FilterState::Active, "Active", "#/active"),
(FilterState::Completed, "Completed", "#/completed"), (FilterState::Completed, "Completed", "#/completed"),
] { ] {
li { li {
a { a {
href: url, href: url,
@@ -250,8 +251,14 @@ pub fn PageFooter(cx: Scope) -> Element {
cx.render(rsx! { cx.render(rsx! {
footer { class: "info", footer { class: "info",
p { "Double-click to edit a todo" } p { "Double-click to edit a todo" }
p { "Created by ", a { href: "http://github.com/jkelleyrtp/", "jkelleyrtp" }} p {
p { "Part of ", a { href: "http://todomvc.com", "TodoMVC" }} "Created by "
a { href: "http://github.com/jkelleyrtp/", "jkelleyrtp" }
}
p {
"Part of "
a { href: "http://todomvc.com", "TodoMVC" }
}
} }
}) })
} }
packages/desktop/headless_tests/events.rs
+67 -34
View File
@@ -229,75 +229,111 @@ fn app(cx: Scope) -> Element {
println!("{:?}", event.data); println!("{:?}", event.data);
assert!(event.data.modifiers().is_empty()); assert!(event.data.modifiers().is_empty());
assert!(event.data.held_buttons().is_empty()); assert!(event.data.held_buttons().is_empty());
assert_eq!(event.data.trigger_button(), Some(dioxus_html::input_data::MouseButton::Primary)); assert_eq!(
event.data.trigger_button(),
Some(dioxus_html::input_data::MouseButton::Primary),
);
recieved_events.modify(|x| *x + 1) recieved_events.modify(|x| *x + 1)
}, }
} }
div { div {
id: "mouse_move_div", id: "mouse_move_div",
onmousemove: move |event| { onmousemove: move |event| {
println!("{:?}", event.data); println!("{:?}", event.data);
assert!(event.data.modifiers().is_empty()); assert!(event.data.modifiers().is_empty());
assert!(event.data.held_buttons().contains(dioxus_html::input_data::MouseButton::Secondary)); assert!(
event
.data
.held_buttons()
.contains(dioxus_html::input_data::MouseButton::Secondary),
);
recieved_events.modify(|x| *x + 1) recieved_events.modify(|x| *x + 1)
}, }
} }
div { div {
id: "mouse_click_div", id: "mouse_click_div",
onclick: move |event| { onclick: move |event| {
println!("{:?}", event.data); println!("{:?}", event.data);
assert!(event.data.modifiers().is_empty()); assert!(event.data.modifiers().is_empty());
assert!(event.data.held_buttons().contains(dioxus_html::input_data::MouseButton::Secondary)); assert!(
assert_eq!(event.data.trigger_button(), Some(dioxus_html::input_data::MouseButton::Secondary)); event
recieved_events.modify(|x| *x + 1) .data
}, .held_buttons()
} .contains(dioxus_html::input_data::MouseButton::Secondary),
div{ );
id: "mouse_dblclick_div", assert_eq!(
ondblclick: move |event| { event.data.trigger_button(),
println!("{:?}", event.data); Some(dioxus_html::input_data::MouseButton::Secondary),
assert!(event.data.modifiers().is_empty()); );
assert!(event.data.held_buttons().contains(dioxus_html::input_data::MouseButton::Primary));
assert!(event.data.held_buttons().contains(dioxus_html::input_data::MouseButton::Secondary));
assert_eq!(event.data.trigger_button(), Some(dioxus_html::input_data::MouseButton::Secondary));
recieved_events.modify(|x| *x + 1) recieved_events.modify(|x| *x + 1)
} }
} }
div{ div {
id: "mouse_dblclick_div",
ondoubleclick: move |event| {
println!("{:?}", event.data);
assert!(event.data.modifiers().is_empty());
assert!(
event.data.held_buttons().contains(dioxus_html::input_data::MouseButton::Primary),
);
assert!(
event
.data
.held_buttons()
.contains(dioxus_html::input_data::MouseButton::Secondary),
);
assert_eq!(
event.data.trigger_button(),
Some(dioxus_html::input_data::MouseButton::Secondary),
);
recieved_events.modify(|x| *x + 1)
}
}
div {
id: "mouse_down_div", id: "mouse_down_div",
onmousedown: move |event| { onmousedown: move |event| {
println!("{:?}", event.data); println!("{:?}", event.data);
assert!(event.data.modifiers().is_empty()); assert!(event.data.modifiers().is_empty());
assert!(event.data.held_buttons().contains(dioxus_html::input_data::MouseButton::Secondary)); assert!(
assert_eq!(event.data.trigger_button(), Some(dioxus_html::input_data::MouseButton::Secondary)); event
.data
.held_buttons()
.contains(dioxus_html::input_data::MouseButton::Secondary),
);
assert_eq!(
event.data.trigger_button(),
Some(dioxus_html::input_data::MouseButton::Secondary),
);
recieved_events.modify(|x| *x + 1) recieved_events.modify(|x| *x + 1)
} }
} }
div{ div {
id: "mouse_up_div", id: "mouse_up_div",
onmouseup: move |event| { onmouseup: move |event| {
println!("{:?}", event.data); println!("{:?}", event.data);
assert!(event.data.modifiers().is_empty()); assert!(event.data.modifiers().is_empty());
assert!(event.data.held_buttons().is_empty()); assert!(event.data.held_buttons().is_empty());
assert_eq!(event.data.trigger_button(), Some(dioxus_html::input_data::MouseButton::Primary)); assert_eq!(
event.data.trigger_button(),
Some(dioxus_html::input_data::MouseButton::Primary),
);
recieved_events.modify(|x| *x + 1) recieved_events.modify(|x| *x + 1)
} }
} }
div{ div {
id: "wheel_div", id: "wheel_div",
width: "100px", width: "100px",
height: "100px", height: "100px",
background_color: "red", background_color: "red",
onwheel: move |event| { onwheel: move |event| {
println!("{:?}", event.data); println!("{:?}", event.data);
let dioxus_html::geometry::WheelDelta::Pixels(delta)= event.data.delta()else{ let dioxus_html::geometry::WheelDelta::Pixels(delta) = event.data.delta() else {
panic!("Expected delta to be in pixels") panic!("Expected delta to be in pixels") };
};
assert_eq!(delta, Vector3D::new(1.0, 2.0, 3.0)); assert_eq!(delta, Vector3D::new(1.0, 2.0, 3.0));
recieved_events.modify(|x| *x + 1) recieved_events.modify(|x| *x + 1)
} }
} }
input{ input {
id: "key_down_div", id: "key_down_div",
onkeydown: move |event| { onkeydown: move |event| {
println!("{:?}", event.data); println!("{:?}", event.data);
@@ -306,11 +342,10 @@ fn app(cx: Scope) -> Element {
assert_eq!(event.data.code().to_string(), "KeyA"); assert_eq!(event.data.code().to_string(), "KeyA");
assert_eq!(event.data.location, 0); assert_eq!(event.data.location, 0);
assert!(event.data.is_auto_repeating()); assert!(event.data.is_auto_repeating());
recieved_events.modify(|x| *x + 1) recieved_events.modify(|x| *x + 1)
} }
} }
input{ input {
id: "key_up_div", id: "key_up_div",
onkeyup: move |event| { onkeyup: move |event| {
println!("{:?}", event.data); println!("{:?}", event.data);
@@ -319,11 +354,10 @@ fn app(cx: Scope) -> Element {
assert_eq!(event.data.code().to_string(), "KeyA"); assert_eq!(event.data.code().to_string(), "KeyA");
assert_eq!(event.data.location, 0); assert_eq!(event.data.location, 0);
assert!(!event.data.is_auto_repeating()); assert!(!event.data.is_auto_repeating());
recieved_events.modify(|x| *x + 1) recieved_events.modify(|x| *x + 1)
} }
} }
input{ input {
id: "key_press_div", id: "key_press_div",
onkeypress: move |event| { onkeypress: move |event| {
println!("{:?}", event.data); println!("{:?}", event.data);
@@ -332,18 +366,17 @@ fn app(cx: Scope) -> Element {
assert_eq!(event.data.code().to_string(), "KeyA"); assert_eq!(event.data.code().to_string(), "KeyA");
assert_eq!(event.data.location, 0); assert_eq!(event.data.location, 0);
assert!(!event.data.is_auto_repeating()); assert!(!event.data.is_auto_repeating());
recieved_events.modify(|x| *x + 1) recieved_events.modify(|x| *x + 1)
} }
} }
input{ input {
id: "focus_in_div", id: "focus_in_div",
onfocusin: move |event| { onfocusin: move |event| {
println!("{:?}", event.data); println!("{:?}", event.data);
recieved_events.modify(|x| *x + 1) recieved_events.modify(|x| *x + 1)
} }
} }
input{ input {
id: "focus_out_div", id: "focus_out_div",
onfocusout: move |event| { onfocusout: move |event| {
println!("{:?}", event.data); println!("{:?}", event.data);
packages/dioxus-tui/examples/all_terminal_events.rs
+6 -14
View File
@@ -37,7 +37,7 @@ fn app(cx: Scope) -> Element {
// todo: remove // todo: remove
let mut trimmed = format!("{event:?}"); let mut trimmed = format!("{event:?}");
trimmed.truncate(200); trimmed.truncate(200);
rsx!(p { "{trimmed}" }) rsx!( p { "{trimmed}" } )
}); });
let log_event = move |event: Event| { let log_event = move |event: Event| {
@@ -45,10 +45,7 @@ fn app(cx: Scope) -> Element {
}; };
cx.render(rsx! { cx.render(rsx! {
div { div { width: "100%", height: "100%", flex_direction: "column",
width: "100%",
height: "100%",
flex_direction: "column",
div { div {
width: "80%", width: "80%",
height: "50%", height: "50%",
@@ -59,7 +56,7 @@ fn app(cx: Scope) -> Element {
onmousemove: move |event| log_event(Event::MouseMove(event.inner().clone())), onmousemove: move |event| log_event(Event::MouseMove(event.inner().clone())),
onclick: move |event| log_event(Event::MouseClick(event.inner().clone())), onclick: move |event| log_event(Event::MouseClick(event.inner().clone())),
ondblclick: move |event| log_event(Event::MouseDoubleClick(event.inner().clone())), ondoubleclick: move |event| log_event(Event::MouseDoubleClick(event.inner().clone())),
onmousedown: move |event| log_event(Event::MouseDown(event.inner().clone())), onmousedown: move |event| log_event(Event::MouseDown(event.inner().clone())),
onmouseup: move |event| log_event(Event::MouseUp(event.inner().clone())), onmouseup: move |event| log_event(Event::MouseUp(event.inner().clone())),
@@ -73,13 +70,8 @@ fn app(cx: Scope) -> Element {
onfocusout: move |event| log_event(Event::FocusOut(event.inner().clone())), onfocusout: move |event| log_event(Event::FocusOut(event.inner().clone())),
"Hover, click, type or scroll to see the info down below" "Hover, click, type or scroll to see the info down below"
}, }
div { div { width: "80%", height: "50%", flex_direction: "column", events_rendered }
width: "80%", }
height: "50%",
flex_direction: "column",
events_rendered,
},
},
}) })
} }
packages/fullstack/src/hooks/server_cached.rs
+3 -1
View File
@@ -12,9 +12,11 @@ use serde::{de::DeserializeOwned, Serialize};
/// use dioxus_fullstack::prelude::*; /// use dioxus_fullstack::prelude::*;
/// ///
/// fn app(cx: Scope) -> Element { /// fn app(cx: Scope) -> Element {
/// let state1 = use_state(cx, || from_server(|| { /// let state1 = use_state(cx, || server_cached(|| {
/// 1234 /// 1234
/// })); /// }));
///
/// todo!()
/// } /// }
/// ``` /// ```
pub fn server_cached<O: 'static + Serialize + DeserializeOwned>(server_fn: impl Fn() -> O) -> O { pub fn server_cached<O: 'static + Serialize + DeserializeOwned>(server_fn: impl Fn() -> O) -> O {
packages/html/src/events/mouse.rs
+14 -4
View File
@@ -119,10 +119,7 @@ impl_event! {
/// oncontextmenu /// oncontextmenu
oncontextmenu oncontextmenu
/// ondoubleclick #[deprecated(since = "0.5.0", note = "use ondoubleclick instead")]
ondoubleclick
/// ondoubleclick
ondblclick ondblclick
/// onmousedown /// onmousedown
@@ -149,6 +146,19 @@ impl_event! {
onmouseup onmouseup
} }
/// ondoubleclick
#[inline]
pub fn ondoubleclick<'a, E: crate::EventReturn<T>, T>(_cx: &'a ::dioxus_core::ScopeState, mut _f: impl FnMut(::dioxus_core::Event<MouseData>) -> E + 'a) -> ::dioxus_core::Attribute<'a> {
::dioxus_core::Attribute::new(
"ondblclick",
_cx.listener(move |e: ::dioxus_core::Event<MouseData>| {
_f(e).spawn(_cx);
}),
None,
false,
)
}
impl MouseData { impl MouseData {
/// Construct MouseData with the specified properties /// Construct MouseData with the specified properties
/// ///
packages/web/src/cache.rs
+1 -1
View File
@@ -190,7 +190,7 @@ pub static BUILTIN_INTERNED_STRINGS: &[&str] = &[
"oncopy", "oncopy",
"oncuechange", "oncuechange",
"oncut", "oncut",
"ondblclick", "ondoubleclick",
"ondrag", "ondrag",
"ondragend", "ondragend",
"ondragenter", "ondragenter",