dan/gpui-component
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

menu: Add menu_with_element to add a custom render item. (#330)

Browse source 
<img width="230" alt="image"
src="https://github.com/user-attachments/assets/e12dbde4-c02e-4445-b8ff-5bf0b54c7aac">
This commit is contained in:
Jason Lee 2024-10-10 20:22:25 +08:00 committed by GitHub
parent 2706656e27
commit 5f1b68a431
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 81 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
crates/story/src/popup_story.rs
View file

@ -14,6 +14,7 @@ use ui::{
popover::{Popover, PopoverContent},
popup_menu::PopupMenuExt,
switch::Switch,
theme::ActiveTheme as _,
v_flex, ContextModal, IconName, Sizable,
};
@ -274,6 +275,18 @@ impl Render for PopupStory {
Box::new(ToggleWindowMode),
)
.separator()
.menu_with_element(
|cx| {
v_flex().gap_1().child("Custom Element").child(
div()
.text_sm()
.text_color(cx.theme().muted_foreground)
.child("THis is sub-title"),
)
},
Box::new(Info(0)),
)
.separator()
.submenu("Links", cx, |menu, _| {
menu.link_with_icon(
"GitHub Repository",

95
crates/ui/src/popup_menu.rs
View file

@ -8,8 +8,8 @@ use gpui::{
SharedString, Styled as _, View, ViewContext, VisualContext as _, WindowContext,
};
use gpui::{
anchored, canvas, rems, AnchorCorner, Bounds, Edges, FocusableView, Keystroke, ScrollHandle,
StatefulInteractiveElement, WeakView,
anchored, canvas, rems, AnchorCorner, AnyElement, Bounds, Edges, FocusableView, Keystroke,
ScrollHandle, StatefulInteractiveElement, WeakView,
};
use crate::scroll::{Scrollbar, ScrollbarState};
@ -53,6 +53,10 @@ enum PopupMenuItem {
action: Option<Box<dyn Action>>,
handler: Rc<dyn Fn(&mut WindowContext)>,
},
ElementItem {
render: Box<dyn Fn(&mut WindowContext) -> AnyElement + 'static>,
handler: Rc<dyn Fn(&mut WindowContext)>,
},
Submenu {
icon: Option<Icon>,
label: SharedString,
@ -214,6 +218,45 @@ impl PopupMenu {
self
}
/// Add Menu Item with custom element render.
pub fn menu_with_element<F, E>(mut self, builder: F, action: Box<dyn Action>) -> Self
where
F: Fn(&mut WindowContext) -> E + 'static,
E: IntoElement,
{
self.menu_items.push(PopupMenuItem::ElementItem {
render: Box::new(move |cx| builder(cx).into_any_element()),
handler: self.wrap_handler(action),
});
self
}
fn wrap_handler(&self, action: Box<dyn Action>) -> Rc<dyn Fn(&mut WindowContext)> {
let action_focus_handle = self.action_focus_handle.clone();
Rc::new(move |cx| {
cx.activate_window();
// Focus back to the user expected focus handle
// Then the actions listened on that focus handle can be received
//
// For example:
//
// TabPanel
// |- PopupMenu
// |- PanelContent (actions are listened here)
//
// The `PopupMenu` and `PanelContent` are at the same level in the TabPanel
// If the actions are listened on the `PanelContent`,
// it can't receive the actions from the `PopupMenu`, unless we focus on `PanelContent`.
if let Some(handle) = action_focus_handle.as_ref() {
cx.focus(&handle);
}
cx.dispatch_action(action.boxed_clone());
})
}
fn add_menu_item(
&mut self,
label: impl Into<SharedString>,
@ -224,33 +267,11 @@ impl PopupMenu {
self.has_icon = true;
}
let action_focus_handle = self.action_focus_handle.clone();
self.menu_items.push(PopupMenuItem::Item {
icon,
label: label.into(),
action: Some(action.boxed_clone()),
handler: Rc::new(move |cx| {
cx.activate_window();
// Focus back to the user expected focus handle
// Then the actions listened on that focus handle can be received
//
// For example:
//
// TabPanel
// |- PopupMenu
// |- PanelContent (actions are listened here)
//
// The `PopupMenu` and `PanelContent` are at the same level in the TabPanel
// If the actions are listened on the `PanelContent`,
// it can't receive the actions from the `PopupMenu`, unless we focus on `PanelContent`.
if let Some(handle) = action_focus_handle.as_ref() {
cx.focus(&handle);
}
cx.dispatch_action(action.boxed_clone());
}),
handler: self.wrap_handler(action),
});
self
}
@ -336,6 +357,10 @@ impl PopupMenu {
handler(cx);
self.dismiss(&Dismiss, cx)
}
Some(PopupMenuItem::ElementItem { handler, .. }) => {
handler(cx);
self.dismiss(&Dismiss, cx)
}
_ => {}
}
}
@ -422,7 +447,7 @@ impl PopupMenu {
.text_sm()
.map(|this| {
if let Some(icon) = icon {
this.child(icon.clone().small().clone())
this.child(icon.clone().small())
} else {
this.children(icon_placeholder.clone())
}
@ -451,6 +476,8 @@ impl Render for PopupMenu {
let window_haft_height = cx.window_bounds().get_bounds().size.height * 0.5;
let max_height = window_haft_height.min(px(450.));
const ITEM_HEIGHT: Pixels = px(26.);
v_flex()
.id("popup-menu")
.key_context("PopupMenu")
@ -521,6 +548,20 @@ impl Render for PopupMenu {
.bg(cx.theme().muted),
)
}
PopupMenuItem::ElementItem { render, .. } => this
.on_click(cx.listener(move |this, _, cx| {
this.on_click(ix, cx)
}))
.child(
h_flex()
.min_h(ITEM_HEIGHT)
.items_center()
.gap_x_1p5()
.children(Self::render_icon(
has_icon, None, cx,
))
.child((render)(cx)),
),
PopupMenuItem::Item {
icon,
label,
@ -537,7 +578,7 @@ impl Render for PopupMenu {
}))
.child(
h_flex()
.h(px(26.))
.h(ITEM_HEIGHT)
.items_center()
.gap_x_1p5()
.children(Self::render_icon(