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