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