[yew-devel] [PATCH yew-widget-toolkit 2/2] ui: list tile: implement on_activate callback

[Dominik Csapak <d.csapak@proxmox.com>]

sometimes it's useful to click a full list tile, so implement the `on_activate`
callback like we do for e.g. buttons, triggers, etc.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/widget/list/list_tile.rs | 36 +++++++++++++++++++++++++++++++++---
 1 file changed, 33 insertions(+), 3 deletions(-)

diff --git a/src/widget/list/list_tile.rs b/src/widget/list/list_tile.rs
index 2613fb1..3c373c3 100644
--- a/src/widget/list/list_tile.rs
+++ b/src/widget/list/list_tile.rs
@@ -1,10 +1,11 @@
 use std::borrow::Cow;
 
-use yew::html::IntoPropValue;
+use wasm_bindgen::JsCast;
+use yew::html::{IntoEventCallback, IntoPropValue};
 use yew::prelude::*;
 use yew::virtual_dom::VTag;
 
-use crate::props::{ListenersWrapper, WidgetStdProps};
+use crate::props::{EventSubscriber, ListenersWrapper, WidgetBuilder, WidgetStdProps};
 
 use pwt_macros::{builder, widget};
 
@@ -43,6 +44,11 @@ pub struct ListTile {
     #[prop_or_default]
     #[builder(IntoPropValue, into_prop_value)]
     force_height: Option<u32>,
+
+    /// Activate callback (click, enter, space)
+    #[builder_cb(IntoEventCallback, into_event_callback, Event)]
+    #[prop_or_default]
+    on_activate: Option<Callback<Event>>,
 }
 
 impl ListTile {
@@ -61,12 +67,36 @@ impl ListTile {
 }
 
 impl From<ListTile> for VTag {
-    fn from(val: ListTile) -> Self {
+    fn from(mut val: ListTile) -> Self {
         let classes = classes!(
             "pwt-list-tile",
             val.interactive.then_some("pwt-interactive"),
             val.disabled.then_some("disabled")
         );
+
+        if !val.disabled {
+            if let Some(on_activate) = val.on_activate.clone() {
+                val.set_tabindex(0);
+                val.add_onclick({
+                    let on_activate = on_activate.clone();
+                    move |event: MouseEvent| {
+                        event.stop_propagation();
+                        on_activate.emit(event.unchecked_into());
+                    }
+                });
+                val.add_onkeydown({
+                    let on_activate = on_activate.clone();
+                    move |event: KeyboardEvent| match event.key().as_str() {
+                        "Enter" | " " => {
+                            event.stop_propagation();
+                            on_activate.emit(event.unchecked_into());
+                        }
+                        _ => {}
+                    }
+                });
+            }
+        }
+
         val.std_props.into_vtag(
             Cow::Borrowed("div"),
             Some(classes),
-- 
2.47.2



_______________________________________________
yew-devel mailing list
yew-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/yew-devel