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