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