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