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