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