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