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