1use gpui::{AnyView, Corner, Entity, Pixels, Point};
2
3use crate::{ButtonLike, ContextMenu, PopoverMenu, prelude::*};
4
5use super::PopoverMenuHandle;
6
7#[derive(Debug, Default, Clone, Copy, PartialEq, Eq, Hash)]
8pub enum DropdownStyle {
9 #[default]
10 Solid,
11 Outlined,
12 Subtle,
13 Ghost,
14}
15
16enum LabelKind {
17 Text(SharedString),
18 Element(AnyElement),
19}
20
21#[derive(IntoElement, RegisterComponent)]
22pub struct DropdownMenu {
23 id: ElementId,
24 label: LabelKind,
25 trigger_size: ButtonSize,
26 trigger_tooltip: Option<Box<dyn Fn(&mut Window, &mut App) -> AnyView + 'static>>,
27 trigger_icon: Option<IconName>,
28 style: DropdownStyle,
29 menu: Entity<ContextMenu>,
30 full_width: bool,
31 disabled: bool,
32 handle: Option<PopoverMenuHandle<ContextMenu>>,
33 attach: Option<Corner>,
34 offset: Option<Point<Pixels>>,
35 tab_index: Option<isize>,
36 chevron: bool,
37}
38
39impl DropdownMenu {
40 pub fn new(
41 id: impl Into<ElementId>,
42 label: impl Into<SharedString>,
43 menu: Entity<ContextMenu>,
44 ) -> Self {
45 Self {
46 id: id.into(),
47 label: LabelKind::Text(label.into()),
48 trigger_size: ButtonSize::Default,
49 trigger_tooltip: None,
50 trigger_icon: Some(IconName::ChevronUpDown),
51 style: DropdownStyle::default(),
52 menu,
53 full_width: false,
54 disabled: false,
55 handle: None,
56 attach: None,
57 offset: None,
58 tab_index: None,
59 chevron: true,
60 }
61 }
62
63 pub fn new_with_element(
64 id: impl Into<ElementId>,
65 label: AnyElement,
66 menu: Entity<ContextMenu>,
67 ) -> Self {
68 Self {
69 id: id.into(),
70 label: LabelKind::Element(label),
71 trigger_size: ButtonSize::Default,
72 trigger_tooltip: None,
73 trigger_icon: Some(IconName::ChevronUpDown),
74 style: DropdownStyle::default(),
75 menu,
76 full_width: false,
77 disabled: false,
78 handle: None,
79 attach: None,
80 offset: None,
81 tab_index: None,
82 chevron: true,
83 }
84 }
85
86 pub fn style(mut self, style: DropdownStyle) -> Self {
87 self.style = style;
88 self
89 }
90
91 pub fn trigger_size(mut self, size: ButtonSize) -> Self {
92 self.trigger_size = size;
93 self
94 }
95
96 pub fn trigger_tooltip(
97 mut self,
98 tooltip: impl Fn(&mut Window, &mut App) -> AnyView + 'static,
99 ) -> Self {
100 self.trigger_tooltip = Some(Box::new(tooltip));
101 self
102 }
103
104 pub fn trigger_icon(mut self, icon: IconName) -> Self {
105 self.trigger_icon = Some(icon);
106 self
107 }
108
109 pub fn full_width(mut self, full_width: bool) -> Self {
110 self.full_width = full_width;
111 self
112 }
113
114 pub fn handle(mut self, handle: PopoverMenuHandle<ContextMenu>) -> Self {
115 self.handle = Some(handle);
116 self
117 }
118
119 /// Defines which corner of the handle to attach the menu's anchor to.
120 pub fn attach(mut self, attach: Corner) -> Self {
121 self.attach = Some(attach);
122 self
123 }
124
125 /// Offsets the position of the menu by that many pixels.
126 pub fn offset(mut self, offset: Point<Pixels>) -> Self {
127 self.offset = Some(offset);
128 self
129 }
130
131 pub fn tab_index(mut self, arg: isize) -> Self {
132 self.tab_index = Some(arg);
133 self
134 }
135
136 pub fn no_chevron(mut self) -> Self {
137 self.chevron = false;
138 self
139 }
140}
141
142impl Disableable for DropdownMenu {
143 fn disabled(mut self, disabled: bool) -> Self {
144 self.disabled = disabled;
145 self
146 }
147}
148
149impl RenderOnce for DropdownMenu {
150 fn render(self, _window: &mut Window, _cx: &mut App) -> impl IntoElement {
151 let button_style = match self.style {
152 DropdownStyle::Solid => ButtonStyle::Filled,
153 DropdownStyle::Subtle => ButtonStyle::Subtle,
154 DropdownStyle::Outlined => ButtonStyle::Outlined,
155 DropdownStyle::Ghost => ButtonStyle::Transparent,
156 };
157
158 let full_width = self.full_width;
159 let trigger_size = self.trigger_size;
160
161 let (text_button, element_button) = match self.label {
162 LabelKind::Text(text) => (
163 Some(
164 Button::new(self.id.clone(), text)
165 .style(button_style)
166 .when_some(self.trigger_icon.filter(|_| self.chevron), |this, icon| {
167 this.end_icon(
168 Icon::new(icon).size(IconSize::XSmall).color(Color::Muted),
169 )
170 })
171 .when(full_width, |this| this.full_width())
172 .size(trigger_size)
173 .disabled(self.disabled)
174 .when_some(self.tab_index, |this, tab_index| this.tab_index(tab_index)),
175 ),
176 None,
177 ),
178 LabelKind::Element(element) => (
179 None,
180 Some(
181 ButtonLike::new(self.id.clone())
182 .child(element)
183 .style(button_style)
184 .when(self.chevron, |this| {
185 this.child(
186 Icon::new(IconName::ChevronUpDown)
187 .size(IconSize::XSmall)
188 .color(Color::Muted),
189 )
190 })
191 .when(full_width, |this| this.full_width())
192 .size(trigger_size)
193 .disabled(self.disabled)
194 .when_some(self.tab_index, |this, tab_index| this.tab_index(tab_index)),
195 ),
196 ),
197 };
198
199 let mut popover = PopoverMenu::new((self.id.clone(), "popover"))
200 .full_width(self.full_width)
201 .menu(move |_window, _cx| Some(self.menu.clone()));
202
203 popover = match (text_button, element_button, self.trigger_tooltip) {
204 (Some(text_button), None, Some(tooltip)) => {
205 popover.trigger_with_tooltip(text_button, tooltip)
206 }
207 (Some(text_button), None, None) => popover.trigger(text_button),
208 (None, Some(element_button), Some(tooltip)) => {
209 popover.trigger_with_tooltip(element_button, tooltip)
210 }
211 (None, Some(element_button), None) => popover.trigger(element_button),
212 _ => popover,
213 };
214
215 popover
216 .attach(match self.attach {
217 Some(attach) => attach,
218 None => Corner::BottomRight,
219 })
220 .when_some(self.offset, |this, offset| this.offset(offset))
221 .when_some(self.handle, |this, handle| this.with_handle(handle))
222 }
223}
224
225impl Component for DropdownMenu {
226 fn scope() -> ComponentScope {
227 ComponentScope::Input
228 }
229
230 fn name() -> &'static str {
231 "DropdownMenu"
232 }
233
234 fn description() -> Option<&'static str> {
235 Some(
236 "A dropdown menu displays a list of actions or options. A dropdown menu is always activated by clicking a trigger (or via a keybinding).",
237 )
238 }
239
240 fn preview(window: &mut Window, cx: &mut App) -> Option<AnyElement> {
241 let menu = ContextMenu::build(window, cx, |this, _, _| {
242 this.entry("Option 1", None, |_, _| {})
243 .entry("Option 2", None, |_, _| {})
244 .entry("Option 3", None, |_, _| {})
245 .separator()
246 .entry("Option 4", None, |_, _| {})
247 });
248
249 let menu_with_submenu = ContextMenu::build(window, cx, |this, _, _| {
250 this.entry("Toggle All Docks", None, |_, _| {})
251 .submenu("Editor Layout", |menu, _, _| {
252 menu.entry("Split Up", None, |_, _| {})
253 .entry("Split Down", None, |_, _| {})
254 .separator()
255 .entry("Split Side", None, |_, _| {})
256 })
257 .separator()
258 .entry("Project Panel", None, |_, _| {})
259 .entry("Outline Panel", None, |_, _| {})
260 .separator()
261 .submenu("Autofill", |menu, _, _| {
262 menu.entry("Contact…", None, |_, _| {})
263 .entry("Passwords…", None, |_, _| {})
264 })
265 .submenu_with_icon("Predict", IconName::ZedPredict, |menu, _, _| {
266 menu.entry("Everywhere", None, |_, _| {})
267 .entry("At Cursor", None, |_, _| {})
268 .entry("Over Here", None, |_, _| {})
269 .entry("Over There", None, |_, _| {})
270 })
271 });
272
273 Some(
274 v_flex()
275 .gap_6()
276 .children(vec![
277 example_group_with_title(
278 "Basic Usage",
279 vec![
280 single_example(
281 "Default",
282 DropdownMenu::new("default", "Select an option", menu.clone())
283 .into_any_element(),
284 ),
285 single_example(
286 "Full Width",
287 DropdownMenu::new(
288 "full-width",
289 "Full Width Dropdown",
290 menu.clone(),
291 )
292 .full_width(true)
293 .into_any_element(),
294 ),
295 ],
296 ),
297 example_group_with_title(
298 "Submenus",
299 vec![single_example(
300 "With Submenus",
301 DropdownMenu::new("submenu", "Submenu", menu_with_submenu)
302 .into_any_element(),
303 )],
304 ),
305 example_group_with_title(
306 "Styles",
307 vec![
308 single_example(
309 "Outlined",
310 DropdownMenu::new("outlined", "Outlined Dropdown", menu.clone())
311 .style(DropdownStyle::Outlined)
312 .into_any_element(),
313 ),
314 single_example(
315 "Ghost",
316 DropdownMenu::new("ghost", "Ghost Dropdown", menu.clone())
317 .style(DropdownStyle::Ghost)
318 .into_any_element(),
319 ),
320 ],
321 ),
322 example_group_with_title(
323 "States",
324 vec![single_example(
325 "Disabled",
326 DropdownMenu::new("disabled", "Disabled Dropdown", menu)
327 .disabled(true)
328 .into_any_element(),
329 )],
330 ),
331 ])
332 .into_any_element(),
333 )
334 }
335}