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