add context menu

examples/gallery/src/main.rs

@@ -12,6 +12,7 @@ use gpui_native_core::badge::{Badge, BadgeVariant};
 use gpui_native_core::button::{Button, ButtonVariant};
 use gpui_native_core::checkbox::Checkbox;
 use gpui_native_core::common::{Sizable as _, h_flex, v_flex};
+use gpui_native_core::context_menu::ContextMenu;
 use gpui_native_core::dialog::Dialog;
 use gpui_native_core::input::{Input, InputState};
 use gpui_native_core::link::Link;
@@ -47,6 +48,7 @@ struct Gallery {
     menu_open: bool,
     strategy: Option<Strategy>,
     explore_filter: ExploreFilter,
+    context_action: SharedString,
     dialog_open: bool,
     alert_open: bool,
     update_alert_dismissed: bool,
@@ -76,6 +78,9 @@ enum ExploreFilter {
     Recent,
 }
 
+/// The context menu section's demo actions.
+const CONTEXT_ACTIONS: [&str; 3] = ["Rename", "Duplicate", "Archive"];
+
 /// A demo model for the tree section: the app owns the real tree and its
 /// expansion set, and flattens the visible nodes for the component.
 #[derive(Clone)]
@@ -473,6 +478,55 @@ impl Render for Gallery {
                         )
                     }),
             )
+            .child(
+                div()
+                    .flex()
+                    .flex_col()
+                    .gap_2()
+                    .child(section_label(
+                        "context menu · native refs — NSMenu (context), WinUI MenuFlyout, Adwaita context popover",
+                        colors,
+                    ))
+                    .child({
+                        let gallery = gallery.clone();
+                        ContextMenu::new("gallery-context")
+                            .target(move |_, cx| {
+                                let theme = cx.theme();
+                                div()
+                                    .px_3()
+                                    .py_2()
+                                    .rounded(theme.radius.overlay)
+                                    .border_1()
+                                    .border_color(theme.colors.border)
+                                    .bg(theme.colors.surface)
+                                    .text_size(theme.sizes.medium.text_size)
+                                    .child("Right-click this card")
+                                    .into_any_element()
+                            })
+                            .items(move |_, _| {
+                                CONTEXT_ACTIONS
+                                    .iter()
+                                    .map(|action| {
+                                        let gallery = gallery.clone();
+                                        MenuItem::new(*action).handler(move |_, cx| {
+                                            gallery.update(cx, |gallery, cx| {
+                                                gallery.context_action =
+                                                    SharedString::from(*action);
+                                                cx.notify();
+                                            });
+                                        })
+                                    })
+                                    .collect()
+                            })
+                            .accessibility_label("Card actions")
+                    })
+                    .child(
+                        div()
+                            .text_sm()
+                            .text_color(colors.muted_foreground)
+                            .child(self.context_action.clone()),
+                    ),
+            )
             .child(
                 div()
                     .flex()
@@ -1394,6 +1448,7 @@ fn main() {
                         menu_open: false,
                         strategy: Some(Strategy::Curated),
                         explore_filter: ExploreFilter::All,
+                        context_action: "Right-click the card".into(),
                         dialog_open: false,
                         alert_open: false,
                         update_alert_dismissed: false,