1use std::sync::Arc;
2
3use component::{Component, ComponentScope, example_group_with_title, single_example};
4use gpui::{AnyElement, AnyView, ClickEvent, MouseButton, MouseDownEvent, Pixels, px};
5use smallvec::SmallVec;
6
7use crate::{Disclosure, GradientFade, prelude::*};
8
9#[derive(Debug, PartialEq, Eq, PartialOrd, Ord, Hash, Clone, Copy, Default)]
10pub enum ListItemSpacing {
11 #[default]
12 Dense,
13 ExtraDense,
14 Sparse,
15}
16
17#[derive(IntoElement, RegisterComponent)]
18pub struct ListItem {
19 id: ElementId,
20 group_name: Option<SharedString>,
21 disabled: bool,
22 selected: bool,
23 spacing: ListItemSpacing,
24 indent_level: usize,
25 indent_step_size: Pixels,
26 /// A slot for content that appears before the children, like an icon or avatar.
27 start_slot: Option<AnyElement>,
28 /// A slot for content that appears after the children, usually on the other side of the header.
29 /// This might be a button, a disclosure arrow, a face pile, etc.
30 end_slot: Option<AnyElement>,
31 /// A slot for content that appears on hover after the children
32 /// It will obscure the `end_slot` when visible.
33 end_hover_slot: Option<AnyElement>,
34 /// When true, renders a gradient fade overlay before the `end_hover_slot`
35 /// to smoothly truncate overflowing content.
36 end_hover_gradient_overlay: bool,
37 toggle: Option<bool>,
38 inset: bool,
39 on_click: Option<Box<dyn Fn(&ClickEvent, &mut Window, &mut App) + 'static>>,
40 on_hover: Option<Box<dyn Fn(&bool, &mut Window, &mut App) + 'static>>,
41 on_toggle: Option<Arc<dyn Fn(&ClickEvent, &mut Window, &mut App) + 'static>>,
42 tooltip: Option<Box<dyn Fn(&mut Window, &mut App) -> AnyView + 'static>>,
43 on_secondary_mouse_down: Option<Box<dyn Fn(&MouseDownEvent, &mut Window, &mut App) + 'static>>,
44 children: SmallVec<[AnyElement; 2]>,
45 selectable: bool,
46 always_show_disclosure_icon: bool,
47 outlined: bool,
48 rounded: bool,
49 overflow_x: bool,
50 focused: Option<bool>,
51 docked_right: bool,
52 height: Option<Pixels>,
53}
54
55impl ListItem {
56 pub fn new(id: impl Into<ElementId>) -> Self {
57 Self {
58 id: id.into(),
59 group_name: None,
60 disabled: false,
61 selected: false,
62 spacing: ListItemSpacing::Dense,
63 indent_level: 0,
64 indent_step_size: px(12.),
65 start_slot: None,
66 end_slot: None,
67 end_hover_slot: None,
68 end_hover_gradient_overlay: false,
69 toggle: None,
70 inset: false,
71 on_click: None,
72 on_secondary_mouse_down: None,
73 on_toggle: None,
74 on_hover: None,
75 tooltip: None,
76 children: SmallVec::new(),
77 selectable: true,
78 always_show_disclosure_icon: false,
79 outlined: false,
80 rounded: false,
81 overflow_x: false,
82 focused: None,
83 docked_right: false,
84 height: None,
85 }
86 }
87
88 pub fn group_name(mut self, group_name: impl Into<SharedString>) -> Self {
89 self.group_name = Some(group_name.into());
90 self
91 }
92
93 pub fn spacing(mut self, spacing: ListItemSpacing) -> Self {
94 self.spacing = spacing;
95 self
96 }
97
98 pub fn selectable(mut self, has_hover: bool) -> Self {
99 self.selectable = has_hover;
100 self
101 }
102
103 pub fn always_show_disclosure_icon(mut self, show: bool) -> Self {
104 self.always_show_disclosure_icon = show;
105 self
106 }
107
108 pub fn on_click(
109 mut self,
110 handler: impl Fn(&ClickEvent, &mut Window, &mut App) + 'static,
111 ) -> Self {
112 self.on_click = Some(Box::new(handler));
113 self
114 }
115
116 pub fn on_hover(mut self, handler: impl Fn(&bool, &mut Window, &mut App) + 'static) -> Self {
117 self.on_hover = Some(Box::new(handler));
118 self
119 }
120
121 pub fn on_secondary_mouse_down(
122 mut self,
123 handler: impl Fn(&MouseDownEvent, &mut Window, &mut App) + 'static,
124 ) -> Self {
125 self.on_secondary_mouse_down = Some(Box::new(handler));
126 self
127 }
128
129 pub fn tooltip(mut self, tooltip: impl Fn(&mut Window, &mut App) -> AnyView + 'static) -> Self {
130 self.tooltip = Some(Box::new(tooltip));
131 self
132 }
133
134 pub fn inset(mut self, inset: bool) -> Self {
135 self.inset = inset;
136 self
137 }
138
139 pub fn indent_level(mut self, indent_level: usize) -> Self {
140 self.indent_level = indent_level;
141 self
142 }
143
144 pub fn indent_step_size(mut self, indent_step_size: Pixels) -> Self {
145 self.indent_step_size = indent_step_size;
146 self
147 }
148
149 pub fn toggle(mut self, toggle: impl Into<Option<bool>>) -> Self {
150 self.toggle = toggle.into();
151 self
152 }
153
154 pub fn on_toggle(
155 mut self,
156 on_toggle: impl Fn(&ClickEvent, &mut Window, &mut App) + 'static,
157 ) -> Self {
158 self.on_toggle = Some(Arc::new(on_toggle));
159 self
160 }
161
162 pub fn start_slot<E: IntoElement>(mut self, start_slot: impl Into<Option<E>>) -> Self {
163 self.start_slot = start_slot.into().map(IntoElement::into_any_element);
164 self
165 }
166
167 pub fn end_slot<E: IntoElement>(mut self, end_slot: impl Into<Option<E>>) -> Self {
168 self.end_slot = end_slot.into().map(IntoElement::into_any_element);
169 self
170 }
171
172 pub fn end_hover_slot<E: IntoElement>(mut self, end_hover_slot: impl Into<Option<E>>) -> Self {
173 self.end_hover_slot = end_hover_slot.into().map(IntoElement::into_any_element);
174 self
175 }
176
177 pub fn end_hover_gradient_overlay(mut self, show: bool) -> Self {
178 self.end_hover_gradient_overlay = show;
179 self
180 }
181
182 pub fn outlined(mut self) -> Self {
183 self.outlined = true;
184 self
185 }
186
187 pub fn rounded(mut self) -> Self {
188 self.rounded = true;
189 self
190 }
191
192 pub fn overflow_x(mut self) -> Self {
193 self.overflow_x = true;
194 self
195 }
196
197 pub fn focused(mut self, focused: bool) -> Self {
198 self.focused = Some(focused);
199 self
200 }
201
202 pub fn docked_right(mut self, docked_right: bool) -> Self {
203 self.docked_right = docked_right;
204 self
205 }
206
207 pub fn height(mut self, height: Pixels) -> Self {
208 self.height = Some(height);
209 self
210 }
211}
212
213impl Disableable for ListItem {
214 fn disabled(mut self, disabled: bool) -> Self {
215 self.disabled = disabled;
216 self
217 }
218}
219
220impl Toggleable for ListItem {
221 fn toggle_state(mut self, selected: bool) -> Self {
222 self.selected = selected;
223 self
224 }
225}
226
227impl ParentElement for ListItem {
228 fn extend(&mut self, elements: impl IntoIterator<Item = AnyElement>) {
229 self.children.extend(elements)
230 }
231}
232
233impl RenderOnce for ListItem {
234 fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
235 let color = cx.theme().colors();
236
237 let base_bg = if self.selected {
238 color.element_active
239 } else {
240 color.panel_background
241 };
242
243 let end_hover_gradient_overlay =
244 GradientFade::new(base_bg, color.element_hover, color.element_active)
245 .width(px(96.0))
246 .when_some(self.group_name.clone(), |fade, group| {
247 fade.group_name(group)
248 });
249
250 h_flex()
251 .id(self.id)
252 .when_some(self.group_name, |this, group| this.group(group))
253 .w_full()
254 .when_some(self.height, |this, height| this.h(height))
255 .relative()
256 // When an item is inset draw the indent spacing outside of the item
257 .when(self.inset, |this| {
258 this.ml(self.indent_level as f32 * self.indent_step_size)
259 .px(DynamicSpacing::Base04.rems(cx))
260 })
261 .when(!self.inset && !self.disabled, |this| {
262 this.when_some(self.focused, |this, focused| {
263 if focused {
264 this.border_1()
265 .when(self.docked_right, |this| this.border_r_2())
266 .border_color(cx.theme().colors().border_focused)
267 } else {
268 this.border_1()
269 }
270 })
271 .when(self.selectable, |this| {
272 this.hover(|style| style.bg(cx.theme().colors().ghost_element_hover))
273 .active(|style| style.bg(cx.theme().colors().ghost_element_active))
274 .when(self.outlined, |this| this.rounded_sm())
275 .when(self.selected, |this| {
276 this.bg(cx.theme().colors().ghost_element_selected)
277 })
278 })
279 })
280 .when(self.rounded, |this| this.rounded_sm())
281 .when_some(self.on_hover, |this, on_hover| this.on_hover(on_hover))
282 .child(
283 h_flex()
284 .id("inner_list_item")
285 .group("list_item")
286 .w_full()
287 .relative()
288 .gap_1()
289 .px(DynamicSpacing::Base06.rems(cx))
290 .map(|this| match self.spacing {
291 ListItemSpacing::Dense => this,
292 ListItemSpacing::ExtraDense => this.py_neg_px(),
293 ListItemSpacing::Sparse => this.py_1(),
294 })
295 .when(self.inset && !self.disabled, |this| {
296 this.when_some(self.focused, |this, focused| {
297 if focused {
298 this.border_1()
299 .border_color(cx.theme().colors().border_focused)
300 } else {
301 this.border_1()
302 }
303 })
304 .when(self.selectable, |this| {
305 this.hover(|style| style.bg(cx.theme().colors().ghost_element_hover))
306 .active(|style| style.bg(cx.theme().colors().ghost_element_active))
307 .when(self.selected, |this| {
308 this.bg(cx.theme().colors().ghost_element_selected)
309 })
310 })
311 })
312 .when_some(
313 self.on_click.filter(|_| !self.disabled),
314 |this, on_click| this.cursor_pointer().on_click(on_click),
315 )
316 .when(self.outlined, |this| {
317 this.border_1()
318 .border_color(cx.theme().colors().border)
319 .rounded_sm()
320 .overflow_hidden()
321 })
322 .when_some(self.on_secondary_mouse_down, |this, on_mouse_down| {
323 this.on_mouse_down(MouseButton::Right, move |event, window, cx| {
324 (on_mouse_down)(event, window, cx)
325 })
326 })
327 .when_some(self.tooltip, |this, tooltip| this.tooltip(tooltip))
328 .map(|this| {
329 if self.inset {
330 this.rounded_sm()
331 } else {
332 // When an item is not inset draw the indent spacing inside of the item
333 this.ml(self.indent_level as f32 * self.indent_step_size)
334 }
335 })
336 .children(self.toggle.map(|is_open| {
337 div()
338 .flex()
339 .absolute()
340 .left(rems(-1.))
341 .when(is_open && !self.always_show_disclosure_icon, |this| {
342 this.visible_on_hover("")
343 })
344 .child(
345 Disclosure::new("toggle", is_open)
346 .on_toggle_expanded(self.on_toggle),
347 )
348 }))
349 .child(
350 h_flex()
351 .flex_grow()
352 .flex_shrink_0()
353 .flex_basis(relative(0.25))
354 .gap(DynamicSpacing::Base06.rems(cx))
355 .map(|list_content| {
356 if self.overflow_x {
357 list_content
358 } else {
359 list_content.overflow_hidden()
360 }
361 })
362 .children(self.start_slot)
363 .children(self.children),
364 )
365 .when_some(self.end_slot, |this, end_slot| {
366 this.justify_between().child(
367 h_flex()
368 .flex_shrink()
369 .overflow_hidden()
370 .when(self.end_hover_slot.is_some(), |this| {
371 this.visible()
372 .group_hover("list_item", |this| this.invisible())
373 })
374 .child(end_slot),
375 )
376 })
377 .when_some(self.end_hover_slot, |this, end_hover_slot| {
378 this.child(
379 h_flex()
380 .h_full()
381 .absolute()
382 .right(DynamicSpacing::Base06.rems(cx))
383 .top_0()
384 .visible_on_hover("list_item")
385 .when(self.end_hover_gradient_overlay, |this| {
386 this.child(end_hover_gradient_overlay)
387 })
388 .child(end_hover_slot),
389 )
390 }),
391 )
392 }
393}
394
395impl Component for ListItem {
396 fn scope() -> ComponentScope {
397 ComponentScope::DataDisplay
398 }
399
400 fn description() -> Option<&'static str> {
401 Some(
402 "A flexible list item component with support for icons, actions, disclosure toggles, and hierarchical display.",
403 )
404 }
405
406 fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
407 Some(
408 v_flex()
409 .gap_6()
410 .children(vec![
411 example_group_with_title(
412 "Basic List Items",
413 vec![
414 single_example(
415 "Simple",
416 ListItem::new("simple")
417 .child(Label::new("Simple list item"))
418 .into_any_element(),
419 ),
420 single_example(
421 "With Icon",
422 ListItem::new("with_icon")
423 .start_slot(Icon::new(IconName::File))
424 .child(Label::new("List item with icon"))
425 .into_any_element(),
426 ),
427 single_example(
428 "Selected",
429 ListItem::new("selected")
430 .toggle_state(true)
431 .start_slot(Icon::new(IconName::Check))
432 .child(Label::new("Selected item"))
433 .into_any_element(),
434 ),
435 ],
436 ),
437 example_group_with_title(
438 "List Item Spacing",
439 vec![
440 single_example(
441 "Dense",
442 ListItem::new("dense")
443 .spacing(ListItemSpacing::Dense)
444 .child(Label::new("Dense spacing"))
445 .into_any_element(),
446 ),
447 single_example(
448 "Extra Dense",
449 ListItem::new("extra_dense")
450 .spacing(ListItemSpacing::ExtraDense)
451 .child(Label::new("Extra dense spacing"))
452 .into_any_element(),
453 ),
454 single_example(
455 "Sparse",
456 ListItem::new("sparse")
457 .spacing(ListItemSpacing::Sparse)
458 .child(Label::new("Sparse spacing"))
459 .into_any_element(),
460 ),
461 ],
462 ),
463 example_group_with_title(
464 "With Slots",
465 vec![
466 single_example(
467 "End Slot",
468 ListItem::new("end_slot")
469 .child(Label::new("Item with end slot"))
470 .end_slot(Icon::new(IconName::ChevronRight))
471 .into_any_element(),
472 ),
473 single_example(
474 "With Toggle",
475 ListItem::new("with_toggle")
476 .toggle(Some(true))
477 .child(Label::new("Expandable item"))
478 .into_any_element(),
479 ),
480 ],
481 ),
482 example_group_with_title(
483 "States",
484 vec![
485 single_example(
486 "Disabled",
487 ListItem::new("disabled")
488 .disabled(true)
489 .child(Label::new("Disabled item"))
490 .into_any_element(),
491 ),
492 single_example(
493 "Non-selectable",
494 ListItem::new("non_selectable")
495 .selectable(false)
496 .child(Label::new("Non-selectable item"))
497 .into_any_element(),
498 ),
499 ],
500 ),
501 ])
502 .into_any_element(),
503 )
504 }
505}