[*] Typed DropdownMenu implemented.

Author: npatsakula

preview/src/components/dropdown_menu/variants/main/mod.rs

@@ -2,8 +2,33 @@ use dioxus::prelude::*;
 use dioxus_primitives::dropdown_menu::{
     DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,
 };
+use strum::IntoEnumIterator;
+
+#[derive(Clone, Copy, strum::Display, strum::EnumIter, PartialEq)]
+enum Operation {
+    Edit,
+    Undo,
+    Duplicate,
+    Delete,
+}
+
 #[component]
 pub fn Demo() -> Element {
+    let operations = Operation::iter().enumerate().map(|(i, o)| {
+        rsx! {
+            DropdownMenuItem::<Operation> {
+                class: "dropdown-menu-item",
+                value: o,
+                index: i,
+                disabled: matches!(o, Operation::Undo),
+                on_select: move |value| {
+                    tracing::info!("Selected: {value}");
+                },
+                {o.to_string()}
+            }
+        }
+    });
+
     rsx! {
         document::Link {
             rel: "stylesheet",
@@ -12,43 +37,7 @@ pub fn Demo() -> Element {
         DropdownMenu { class: "dropdown-menu", default_open: false,
             DropdownMenuTrigger { class: "dropdown-menu-trigger", "Open Menu" }
             DropdownMenuContent { class: "dropdown-menu-content",
-                DropdownMenuItem {
-                    class: "dropdown-menu-item",
-                    value: "edit".to_string(),
-                    index: 0usize,
-                    on_select: move |value| {
-                        tracing::info!("Selected: {}", value);
-                    },
-                    "Edit"
-                }
-                DropdownMenuItem {
-                    class: "dropdown-menu-item",
-                    value: "undo".to_string(),
-                    index: 1usize,
-                    disabled: true,
-                    on_select: move |value| {
-                        tracing::info!("Selected: {}", value);
-                    },
-                    "Undo"
-                }
-                DropdownMenuItem {
-                    class: "dropdown-menu-item",
-                    value: "duplicate".to_string(),
-                    index: 2usize,
-                    on_select: move |value| {
-                        tracing::info!("Selected: {}", value);
-                    },
-                    "Duplicate"
-                }
-                DropdownMenuItem {
-                    class: "dropdown-menu-item",
-                    value: "delete".to_string(),
-                    index: 3usize,
-                    on_select: move |value| {
-                        tracing::info!("Selected: {}", value);
-                    },
-                    "Delete"
-                }
+                {operations}
             }
         }
     }

primitives/src/dropdown_menu.rs

@@ -68,15 +68,15 @@ pub struct DropdownMenuProps {
 ///         DropdownMenu { default_open: false,
 ///             DropdownMenuTrigger { "Open Menu" }
 ///             DropdownMenuContent {
-///                 DropdownMenuItem {
+///                 DropdownMenuItem::<String> {
 ///                     value: "edit".to_string(),
 ///                     index: 0usize,
 ///                     on_select: move |value| {
 ///                         tracing::info!("Selected: {}", value);
 ///                     },
 ///                     "Edit"
 ///                 }
-///                 DropdownMenuItem {
+///                 DropdownMenuItem::<String> {
 ///                     value: "undo".to_string(),
 ///                     index: 1usize,
 ///                     disabled: true,
@@ -183,15 +183,15 @@ pub struct DropdownMenuTriggerProps {
 ///         DropdownMenu { default_open: false,
 ///             DropdownMenuTrigger { "Open Menu" }
 ///             DropdownMenuContent {
-///                 DropdownMenuItem {
+///                 DropdownMenuItem::<String> {
 ///                     value: "edit".to_string(),
 ///                     index: 0usize,
 ///                     on_select: move |value| {
 ///                         tracing::info!("Selected: {}", value);
 ///                     },
 ///                     "Edit"
 ///                 }
-///                 DropdownMenuItem {
+///                 DropdownMenuItem::<String> {
 ///                     value: "undo".to_string(),
 ///                     index: 1usize,
 ///                     disabled: true,
@@ -281,15 +281,15 @@ pub struct DropdownMenuContentProps {
 ///         DropdownMenu { default_open: false,
 ///             DropdownMenuTrigger { "Open Menu" }
 ///             DropdownMenuContent {
-///                 DropdownMenuItem {
+///                 DropdownMenuItem::<String> {
 ///                     value: "edit".to_string(),
 ///                     index: 0usize,
 ///                     on_select: move |value| {
 ///                         tracing::info!("Selected: {}", value);
 ///                     },
 ///                     "Edit"
 ///                 }
-///                 DropdownMenuItem {
+///                 DropdownMenuItem::<String> {
 ///                     value: "undo".to_string(),
 ///                     index: 1usize,
 ///                     disabled: true,
@@ -332,9 +332,9 @@ pub fn DropdownMenuContent(props: DropdownMenuContentProps) -> Element {
 
 /// The props for the [`DropdownMenuItem`] component
 #[derive(Props, Clone, PartialEq)]
-pub struct DropdownMenuItemProps {
+pub struct DropdownMenuItemProps<T: Clone + PartialEq + 'static> {
     /// The value of the item, which will be passed to the `on_select` callback when clicked.
-    pub value: ReadOnlySignal<String>,
+    pub value: ReadOnlySignal<T>,
     /// The index of the item within the [`DropdownMenuContent`]. This is used to order the items for keyboard navigation.
     pub index: ReadOnlySignal<usize>,
 
@@ -345,7 +345,7 @@ pub struct DropdownMenuItemProps {
 
     /// The callback function that will be called when the item is selected. The value of the item will be passed as an argument.
     #[props(default)]
-    pub on_select: Callback<String>,
+    pub on_select: Callback<T>,
 
     /// Additional attributes to apply to the item element.
     #[props(extends = GlobalAttributes)]
@@ -372,15 +372,15 @@ pub struct DropdownMenuItemProps {
 ///         DropdownMenu { default_open: false,
 ///             DropdownMenuTrigger { "Open Menu" }
 ///             DropdownMenuContent {
-///                 DropdownMenuItem {
+///                 DropdownMenuItem::<String> {
 ///                     value: "edit".to_string(),
 ///                     index: 0usize,
 ///                     on_select: move |value| {
 ///                         tracing::info!("Selected: {}", value);
 ///                     },
 ///                     "Edit"
 ///                 }
-///                 DropdownMenuItem {
+///                 DropdownMenuItem::<String> {
 ///                     value: "undo".to_string(),
 ///                     index: 1usize,
 ///                     disabled: true,
@@ -400,7 +400,9 @@ pub struct DropdownMenuItemProps {
 /// The [`DropdownMenuItem`] component defines the following data attributes you can use to control styling:
 /// - `data-disabled`: Indicates whether the item is disabled. Values are `true` or `false`.
 #[component]
-pub fn DropdownMenuItem(props: DropdownMenuItemProps) -> Element {
+pub fn DropdownMenuItem<T: Clone + PartialEq + 'static>(
+    props: DropdownMenuItemProps<T>,
+) -> Element {
     let mut ctx: DropdownMenuContext = use_context();
 
     let disabled = move || (ctx.disabled)() || (props.disabled)();