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