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