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