1use std::sync::Arc;
2
3use gpui::{AnyElement, AnyView, ClickEvent, MouseButton, MouseDownEvent, Pixels, px};
4use smallvec::SmallVec;
5
6use crate::{Disclosure, prelude::*};
7
8#[derive(Debug, PartialEq, Eq, PartialOrd, Ord, Hash, Clone, Copy, Default)]
9pub enum ListItemSpacing {
10 #[default]
11 Dense,
12 ExtraDense,
13 Sparse,
14}
15
16#[derive(IntoElement)]
17pub struct ListItem {
18 id: ElementId,
19 group_name: Option<SharedString>,
20 disabled: bool,
21 selected: bool,
22 spacing: ListItemSpacing,
23 indent_level: usize,
24 indent_step_size: Pixels,
25 /// A slot for content that appears before the children, like an icon or avatar.
26 start_slot: Option<AnyElement>,
27 /// A slot for content that appears after the children, usually on the other side of the header.
28 /// This might be a button, a disclosure arrow, a face pile, etc.
29 end_slot: Option<AnyElement>,
30 /// A slot for content that appears on hover after the children
31 /// It will obscure the `end_slot` when visible.
32 end_hover_slot: Option<AnyElement>,
33 toggle: Option<bool>,
34 inset: bool,
35 on_click: Option<Box<dyn Fn(&ClickEvent, &mut Window, &mut App) + 'static>>,
36 on_toggle: Option<Arc<dyn Fn(&ClickEvent, &mut Window, &mut App) + 'static>>,
37 tooltip: Option<Box<dyn Fn(&mut Window, &mut App) -> AnyView + 'static>>,
38 on_secondary_mouse_down: Option<Box<dyn Fn(&MouseDownEvent, &mut Window, &mut App) + 'static>>,
39 children: SmallVec<[AnyElement; 2]>,
40 selectable: bool,
41 always_show_disclosure_icon: bool,
42 outlined: bool,
43 rounded: bool,
44 overflow_x: bool,
45 focused: Option<bool>,
46}
47
48impl ListItem {
49 pub fn new(id: impl Into<ElementId>) -> Self {
50 Self {
51 id: id.into(),
52 group_name: None,
53 disabled: false,
54 selected: false,
55 spacing: ListItemSpacing::Dense,
56 indent_level: 0,
57 indent_step_size: px(12.),
58 start_slot: None,
59 end_slot: None,
60 end_hover_slot: None,
61 toggle: None,
62 inset: false,
63 on_click: None,
64 on_secondary_mouse_down: None,
65 on_toggle: None,
66 tooltip: None,
67 children: SmallVec::new(),
68 selectable: true,
69 always_show_disclosure_icon: false,
70 outlined: false,
71 rounded: false,
72 overflow_x: false,
73 focused: None,
74 }
75 }
76
77 pub fn group_name(mut self, group_name: impl Into<SharedString>) -> Self {
78 self.group_name = Some(group_name.into());
79 self
80 }
81
82 pub fn spacing(mut self, spacing: ListItemSpacing) -> Self {
83 self.spacing = spacing;
84 self
85 }
86
87 pub fn selectable(mut self, has_hover: bool) -> Self {
88 self.selectable = has_hover;
89 self
90 }
91
92 pub fn always_show_disclosure_icon(mut self, show: bool) -> Self {
93 self.always_show_disclosure_icon = show;
94 self
95 }
96
97 pub fn on_click(
98 mut self,
99 handler: impl Fn(&ClickEvent, &mut Window, &mut App) + 'static,
100 ) -> Self {
101 self.on_click = Some(Box::new(handler));
102 self
103 }
104
105 pub fn on_secondary_mouse_down(
106 mut self,
107 handler: impl Fn(&MouseDownEvent, &mut Window, &mut App) + 'static,
108 ) -> Self {
109 self.on_secondary_mouse_down = Some(Box::new(handler));
110 self
111 }
112
113 pub fn tooltip(mut self, tooltip: impl Fn(&mut Window, &mut App) -> AnyView + 'static) -> Self {
114 self.tooltip = Some(Box::new(tooltip));
115 self
116 }
117
118 pub fn inset(mut self, inset: bool) -> Self {
119 self.inset = inset;
120 self
121 }
122
123 pub fn indent_level(mut self, indent_level: usize) -> Self {
124 self.indent_level = indent_level;
125 self
126 }
127
128 pub fn indent_step_size(mut self, indent_step_size: Pixels) -> Self {
129 self.indent_step_size = indent_step_size;
130 self
131 }
132
133 pub fn toggle(mut self, toggle: impl Into<Option<bool>>) -> Self {
134 self.toggle = toggle.into();
135 self
136 }
137
138 pub fn on_toggle(
139 mut self,
140 on_toggle: impl Fn(&ClickEvent, &mut Window, &mut App) + 'static,
141 ) -> Self {
142 self.on_toggle = Some(Arc::new(on_toggle));
143 self
144 }
145
146 pub fn start_slot<E: IntoElement>(mut self, start_slot: impl Into<Option<E>>) -> Self {
147 self.start_slot = start_slot.into().map(IntoElement::into_any_element);
148 self
149 }
150
151 pub fn end_slot<E: IntoElement>(mut self, end_slot: impl Into<Option<E>>) -> Self {
152 self.end_slot = end_slot.into().map(IntoElement::into_any_element);
153 self
154 }
155
156 pub fn end_hover_slot<E: IntoElement>(mut self, end_hover_slot: impl Into<Option<E>>) -> Self {
157 self.end_hover_slot = end_hover_slot.into().map(IntoElement::into_any_element);
158 self
159 }
160
161 pub fn outlined(mut self) -> Self {
162 self.outlined = true;
163 self
164 }
165
166 pub fn rounded(mut self) -> Self {
167 self.rounded = true;
168 self
169 }
170
171 pub fn overflow_x(mut self) -> Self {
172 self.overflow_x = true;
173 self
174 }
175
176 pub fn focused(mut self, focused: bool) -> Self {
177 self.focused = Some(focused);
178 self
179 }
180}
181
182impl Disableable for ListItem {
183 fn disabled(mut self, disabled: bool) -> Self {
184 self.disabled = disabled;
185 self
186 }
187}
188
189impl Toggleable for ListItem {
190 fn toggle_state(mut self, selected: bool) -> Self {
191 self.selected = selected;
192 self
193 }
194}
195
196impl ParentElement for ListItem {
197 fn extend(&mut self, elements: impl IntoIterator<Item = AnyElement>) {
198 self.children.extend(elements)
199 }
200}
201
202impl RenderOnce for ListItem {
203 fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
204 h_flex()
205 .id(self.id)
206 .when_some(self.group_name, |this, group| this.group(group))
207 .w_full()
208 .relative()
209 // When an item is inset draw the indent spacing outside of the item
210 .when(self.inset, |this| {
211 this.ml(self.indent_level as f32 * self.indent_step_size)
212 .px(DynamicSpacing::Base04.rems(cx))
213 })
214 .when(!self.inset && !self.disabled, |this| {
215 this
216 // TODO: Add focus state
217 // .when(self.state == InteractionState::Focused, |this| {
218 .when_some(self.focused, |this, focused| {
219 if focused {
220 this.border_1()
221 .border_color(cx.theme().colors().border_focused)
222 } else {
223 this.border_1()
224 }
225 })
226 .when(self.selectable, |this| {
227 this.hover(|style| style.bg(cx.theme().colors().ghost_element_hover))
228 .active(|style| style.bg(cx.theme().colors().ghost_element_active))
229 .when(self.outlined, |this| this.rounded_sm())
230 .when(self.selected, |this| {
231 this.bg(cx.theme().colors().ghost_element_selected)
232 })
233 })
234 })
235 .when(self.rounded, |this| this.rounded_sm())
236 .child(
237 h_flex()
238 .id("inner_list_item")
239 .group("list_item")
240 .w_full()
241 .relative()
242 .gap_1()
243 .px(DynamicSpacing::Base06.rems(cx))
244 .map(|this| match self.spacing {
245 ListItemSpacing::Dense => this,
246 ListItemSpacing::ExtraDense => this.py_neg_px(),
247 ListItemSpacing::Sparse => this.py_1(),
248 })
249 .when(self.inset && !self.disabled, |this| {
250 this
251 // TODO: Add focus state
252 //.when(self.state == InteractionState::Focused, |this| {
253 .when_some(self.focused, |this, focused| {
254 if focused {
255 this.border_1()
256 .border_color(cx.theme().colors().border_focused)
257 } else {
258 this.border_1()
259 }
260 })
261 .when(self.selectable, |this| {
262 this.hover(|style| {
263 style.bg(cx.theme().colors().ghost_element_hover)
264 })
265 .active(|style| style.bg(cx.theme().colors().ghost_element_active))
266 .when(self.selected, |this| {
267 this.bg(cx.theme().colors().ghost_element_selected)
268 })
269 })
270 })
271 .when_some(
272 self.on_click.filter(|_| !self.disabled),
273 |this, on_click| this.cursor_pointer().on_click(on_click),
274 )
275 .when(self.outlined, |this| {
276 this.border_1()
277 .border_color(cx.theme().colors().border)
278 .rounded_sm()
279 .overflow_hidden()
280 })
281 .when_some(self.on_secondary_mouse_down, |this, on_mouse_down| {
282 this.on_mouse_down(MouseButton::Right, move |event, window, cx| {
283 (on_mouse_down)(event, window, cx)
284 })
285 })
286 .when_some(self.tooltip, |this, tooltip| this.tooltip(tooltip))
287 .map(|this| {
288 if self.inset {
289 this.rounded_sm()
290 } else {
291 // When an item is not inset draw the indent spacing inside of the item
292 this.ml(self.indent_level as f32 * self.indent_step_size)
293 }
294 })
295 .children(self.toggle.map(|is_open| {
296 div()
297 .flex()
298 .absolute()
299 .left(rems(-1.))
300 .when(is_open && !self.always_show_disclosure_icon, |this| {
301 this.visible_on_hover("")
302 })
303 .child(Disclosure::new("toggle", is_open).on_toggle(self.on_toggle))
304 }))
305 .child(
306 h_flex()
307 .flex_grow()
308 .flex_shrink_0()
309 .flex_basis(relative(0.25))
310 .gap(DynamicSpacing::Base06.rems(cx))
311 .map(|list_content| {
312 if self.overflow_x {
313 list_content
314 } else {
315 list_content.overflow_hidden()
316 }
317 })
318 .children(self.start_slot)
319 .children(self.children),
320 )
321 .when_some(self.end_slot, |this, end_slot| {
322 this.justify_between().child(
323 h_flex()
324 .flex_shrink()
325 .overflow_hidden()
326 .when(self.end_hover_slot.is_some(), |this| {
327 this.visible()
328 .group_hover("list_item", |this| this.invisible())
329 })
330 .child(end_slot),
331 )
332 })
333 .when_some(self.end_hover_slot, |this, end_hover_slot| {
334 this.child(
335 h_flex()
336 .h_full()
337 .absolute()
338 .right(DynamicSpacing::Base06.rems(cx))
339 .top_0()
340 .visible_on_hover("list_item")
341 .child(end_hover_slot),
342 )
343 }),
344 )
345 }
346}