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! (
div {
style: "{CONTAINER_STYLE}",
div { style: "{CONTAINER_STYLE}",
div {
style: "{RECT_STYLE}",
// focusing is necessary to catch keyboard events
@@ -62,7 +61,7 @@ fn app(cx: Scope) -> Element {
onmousemove: move |event| log_event(Event::MouseMove(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)),
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"
}
div {
events.read().iter().map(|event| rsx!( div { "{event:?}" } ))
},
},
div { 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! {
section { class: "todoapp",
style { include_str!("./assets/todomvc.css") }
TodoHeader {
todos: todos,
}
section {
class: "main",
TodoHeader { todos: todos }
section { class: "main",
if !todos.is_empty() {
rsx! {
input {
@@ -103,31 +100,34 @@ pub fn TodoHeader<'a>(cx: Scope<'a, TodoHeaderProps<'a>>) -> Element {
cx.render(rsx! {
header { class: "header",
h1 {"todos"}
input {
class: "new-todo",
placeholder: "What needs to be done?",
value: "{draft}",
autofocus: "true",
oninput: move |evt| {
draft.set(evt.value.clone());
},
onkeydown: move |evt| {
if evt.key() == Key::Enter && !draft.is_empty() {
cx.props.todos.make_mut().insert(
**todo_id,
TodoItem {
id: **todo_id,
checked: false,
contents: draft.to_string(),
},
);
*todo_id.make_mut() += 1;
draft.set("".to_string());
h1 { "todos" }
input {
class: "new-todo",
placeholder: "What needs to be done?",
value: "{draft}",
autofocus: "true",
oninput: move |evt| {
draft.set(evt.value.clone());
},
onkeydown: move |evt| {
if evt.key() == Key::Enter && !draft.is_empty() {
cx.props
.todos
.make_mut()
.insert(
**todo_id,
TodoItem {
id: **todo_id,
checked: false,
contents: draft.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 { "" };
cx.render(rsx!{
li {
class: "{completed} {editing}",
li { class: "{completed} {editing}",
div { class: "view",
input {
class: "toggle",
@@ -160,14 +159,16 @@ pub fn TodoEntry<'a>(cx: Scope<'a, TodoEntryProps<'a>>) -> Element {
}
label {
r#for: "cbg-{todo.id}",
ondblclick: move |_| is_editing.set(true),
ondoubleclick: move |_| is_editing.set(true),
prevent_default: "onclick",
"{todo.contents}"
}
button {
class: "destroy",
onclick: move |_| { cx.props.todos.make_mut().remove(&todo.id); },
prevent_default: "onclick",
onclick: move |_| {
cx.props.todos.make_mut().remove(&todo.id);
},
prevent_default: "onclick"
}
}
is_editing.then(|| rsx!{
@@ -213,15 +214,15 @@ pub fn ListFooter<'a>(cx: Scope<'a, ListFooterProps<'a>>) -> Element {
cx.render(rsx! {
footer { class: "footer",
span { class: "todo-count",
strong {"{active_todo_count} "}
span {"{active_todo_text} left"}
strong { "{active_todo_count} " }
span { "{active_todo_text} left" }
}
ul { class: "filters",
for (state, state_text, url) in [
(FilterState::All, "All", "#/"),
(FilterState::Active, "Active", "#/active"),
(FilterState::Completed, "Completed", "#/completed"),
] {
for (state , state_text , url) in [
(FilterState::All, "All", "#/"),
(FilterState::Active, "Active", "#/active"),
(FilterState::Completed, "Completed", "#/completed"),
] {
li {
a {
href: url,
@@ -250,8 +251,14 @@ pub fn PageFooter(cx: Scope) -> Element {
cx.render(rsx! {
footer { class: "info",
p { "Double-click to edit a todo" }
p { "Created by ", a { href: "http://github.com/jkelleyrtp/", "jkelleyrtp" }}
p { "Part of ", a { href: "http://todomvc.com", "TodoMVC" }}
p {
"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);
assert!(event.data.modifiers().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)
},
}
}
div {
id: "mouse_move_div",
onmousemove: move |event| {
println!("{:?}", event.data);
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)
},
}
}
div {
id: "mouse_click_div",
onclick: move |event| {
println!("{:?}", event.data);
assert!(event.data.modifiers().is_empty());
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_dblclick_div",
ondblclick: 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));
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{
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",
onmousedown: move |event| {
println!("{:?}", event.data);
assert!(event.data.modifiers().is_empty());
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));
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{
div {
id: "mouse_up_div",
onmouseup: move |event| {
println!("{:?}", event.data);
assert!(event.data.modifiers().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)
}
}
div{
div {
id: "wheel_div",
width: "100px",
height: "100px",
background_color: "red",
onwheel: move |event| {
println!("{:?}", event.data);
let dioxus_html::geometry::WheelDelta::Pixels(delta)= event.data.delta()else{
panic!("Expected delta to be in pixels")
};
let dioxus_html::geometry::WheelDelta::Pixels(delta) = event.data.delta() else {
panic!("Expected delta to be in pixels") };
assert_eq!(delta, Vector3D::new(1.0, 2.0, 3.0));
recieved_events.modify(|x| *x + 1)
}
}
input{
input {
id: "key_down_div",
onkeydown: move |event| {
println!("{:?}", event.data);
@@ -306,11 +342,10 @@ fn app(cx: Scope) -> Element {
assert_eq!(event.data.code().to_string(), "KeyA");
assert_eq!(event.data.location, 0);
assert!(event.data.is_auto_repeating());
recieved_events.modify(|x| *x + 1)
}
}
input{
input {
id: "key_up_div",
onkeyup: move |event| {
println!("{:?}", event.data);
@@ -319,11 +354,10 @@ fn app(cx: Scope) -> Element {
assert_eq!(event.data.code().to_string(), "KeyA");
assert_eq!(event.data.location, 0);
assert!(!event.data.is_auto_repeating());
recieved_events.modify(|x| *x + 1)
}
}
input{
input {
id: "key_press_div",
onkeypress: move |event| {
println!("{:?}", event.data);
@@ -332,18 +366,17 @@ fn app(cx: Scope) -> Element {
assert_eq!(event.data.code().to_string(), "KeyA");
assert_eq!(event.data.location, 0);
assert!(!event.data.is_auto_repeating());
recieved_events.modify(|x| *x + 1)
}
}
input{
input {
id: "focus_in_div",
onfocusin: move |event| {
println!("{:?}", event.data);
recieved_events.modify(|x| *x + 1)
}
}
input{
input {
id: "focus_out_div",
onfocusout: move |event| {
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
let mut trimmed = format!("{event:?}");
trimmed.truncate(200);
rsx!(p { "{trimmed}" })
rsx!( p { "{trimmed}" } )
});
let log_event = move |event: Event| {
@@ -45,10 +45,7 @@ fn app(cx: Scope) -> Element {
};
cx.render(rsx! {
div {
width: "100%",
height: "100%",
flex_direction: "column",
div { width: "100%", height: "100%", flex_direction: "column",
div {
width: "80%",
height: "50%",
@@ -59,7 +56,7 @@ fn app(cx: Scope) -> Element {
onmousemove: move |event| log_event(Event::MouseMove(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())),
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())),
"Hover, click, type or scroll to see the info down below"
},
div {
width: "80%",
height: "50%",
flex_direction: "column",
events_rendered,
},
},
}
div { 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::*;
///
/// fn app(cx: Scope) -> Element {
/// let state1 = use_state(cx, || from_server(|| {
/// let state1 = use_state(cx, || server_cached(|| {
/// 1234
/// }));
///
/// todo!()
/// }
/// ```
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
/// ondoubleclick
ondoubleclick
/// ondoubleclick
#[deprecated(since = "0.5.0", note = "use ondoubleclick instead")]
ondblclick
/// onmousedown
@@ -149,6 +146,19 @@ impl_event! {
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 {
/// 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",
"oncuechange",
"oncut",
"ondblclick",
"ondoubleclick",
"ondrag",
"ondragend",
"ondragenter",