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