1use std::marker::PhantomData;
2use std::sync::Arc;
3
4use gpui3::{DefiniteLength, Hsla, Interactive, MouseButton, WindowContext};
5
6use crate::prelude::*;
7use crate::settings::user_settings;
8use crate::{h_stack, Icon, IconColor, IconElement, Label, LabelColor};
9
10#[derive(Default, PartialEq, Clone, Copy)]
11pub enum IconPosition {
12 #[default]
13 Left,
14 Right,
15}
16
17#[derive(Default, Copy, Clone, PartialEq)]
18pub enum ButtonVariant {
19 #[default]
20 Ghost,
21 Filled,
22}
23
24pub type ClickHandler<S> = Arc<dyn Fn(&mut S, &mut ViewContext<S>) + 'static + Send + Sync>;
25
26struct ButtonHandlers<S: 'static + Send + Sync> {
27 click: Option<ClickHandler<S>>,
28}
29
30impl<S: 'static + Send + Sync> Default for ButtonHandlers<S> {
31 fn default() -> Self {
32 Self { click: None }
33 }
34}
35
36#[derive(Element)]
37pub struct Button<S: 'static + Send + Sync + Clone> {
38 state_type: PhantomData<S>,
39 label: SharedString,
40 variant: ButtonVariant,
41 state: InteractionState,
42 icon: Option<Icon>,
43 icon_position: Option<IconPosition>,
44 width: Option<DefiniteLength>,
45 handlers: ButtonHandlers<S>,
46}
47
48impl<S: 'static + Send + Sync + Clone> Button<S> {
49 pub fn new(label: impl Into<SharedString>) -> Self {
50 Self {
51 state_type: PhantomData,
52 label: label.into(),
53 variant: Default::default(),
54 state: Default::default(),
55 icon: None,
56 icon_position: None,
57 width: Default::default(),
58 handlers: ButtonHandlers::default(),
59 }
60 }
61
62 pub fn ghost(label: impl Into<SharedString>) -> Self {
63 Self::new(label).variant(ButtonVariant::Ghost)
64 }
65
66 pub fn variant(mut self, variant: ButtonVariant) -> Self {
67 self.variant = variant;
68 self
69 }
70
71 pub fn state(mut self, state: InteractionState) -> Self {
72 self.state = state;
73 self
74 }
75
76 pub fn icon(mut self, icon: Icon) -> Self {
77 self.icon = Some(icon);
78 self
79 }
80
81 pub fn icon_position(mut self, icon_position: IconPosition) -> Self {
82 if self.icon.is_none() {
83 panic!("An icon must be present if an icon_position is provided.");
84 }
85 self.icon_position = Some(icon_position);
86 self
87 }
88
89 pub fn width(mut self, width: Option<DefiniteLength>) -> Self {
90 self.width = width;
91 self
92 }
93
94 pub fn on_click(mut self, handler: ClickHandler<S>) -> Self {
95 self.handlers.click = Some(handler);
96 self
97 }
98
99 fn background_color(&self, cx: &mut ViewContext<S>) -> Hsla {
100 let color = ThemeColor::new(cx);
101
102 match (self.variant, self.state) {
103 (ButtonVariant::Ghost, InteractionState::Enabled) => color.ghost_element,
104 (ButtonVariant::Ghost, InteractionState::Focused) => color.ghost_element,
105 (ButtonVariant::Ghost, InteractionState::Hovered) => color.ghost_element_hover,
106 (ButtonVariant::Ghost, InteractionState::Active) => color.ghost_element_active,
107 (ButtonVariant::Ghost, InteractionState::Disabled) => color.filled_element_disabled,
108 (ButtonVariant::Filled, InteractionState::Enabled) => color.filled_element,
109 (ButtonVariant::Filled, InteractionState::Focused) => color.filled_element,
110 (ButtonVariant::Filled, InteractionState::Hovered) => color.filled_element_hover,
111 (ButtonVariant::Filled, InteractionState::Active) => color.filled_element_active,
112 (ButtonVariant::Filled, InteractionState::Disabled) => color.filled_element_disabled,
113 }
114 }
115
116 fn label_color(&self) -> LabelColor {
117 match self.state {
118 InteractionState::Disabled => LabelColor::Disabled,
119 _ => Default::default(),
120 }
121 }
122
123 fn icon_color(&self) -> IconColor {
124 match self.state {
125 InteractionState::Disabled => IconColor::Disabled,
126 _ => Default::default(),
127 }
128 }
129
130 fn border_color(&self, cx: &WindowContext) -> Hsla {
131 let color = ThemeColor::new(cx);
132
133 match self.state {
134 InteractionState::Focused => color.border_focused,
135 _ => color.border_transparent,
136 }
137 }
138
139 fn render_label(&self) -> Label<S> {
140 Label::new(self.label.clone()).color(self.label_color())
141 }
142
143 fn render_icon(&self, icon_color: IconColor) -> Option<IconElement<S>> {
144 self.icon.map(|i| IconElement::new(i).color(icon_color))
145 }
146
147 fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
148 let icon_color = self.icon_color();
149 let border_color = self.border_color(cx);
150 let setting = user_settings();
151
152 let mut el = h_stack()
153 .p_1()
154 .text_size(ui_size(1.))
155 .rounded_md()
156 .border()
157 .border_color(border_color)
158 .bg(self.background_color(cx))
159 .hover(|style| {
160 let color = ThemeColor::new(cx);
161
162 style.bg(match self.variant {
163 ButtonVariant::Ghost => color.ghost_element_hover,
164 ButtonVariant::Filled => color.filled_element_hover,
165 })
166 });
167
168 match (self.icon, self.icon_position) {
169 (Some(_), Some(IconPosition::Left)) => {
170 el = el
171 .gap_1()
172 .child(self.render_label())
173 .children(self.render_icon(icon_color))
174 }
175 (Some(_), Some(IconPosition::Right)) => {
176 el = el
177 .gap_1()
178 .children(self.render_icon(icon_color))
179 .child(self.render_label())
180 }
181 (_, _) => el = el.child(self.render_label()),
182 }
183
184 if let Some(width) = self.width {
185 el = el.w(width).justify_center();
186 }
187
188 if let Some(click_handler) = self.handlers.click.clone() {
189 el = el.on_mouse_down(MouseButton::Left, move |state, event, cx| {
190 click_handler(state, cx);
191 });
192 }
193
194 el
195 }
196}
197
198#[cfg(feature = "stories")]
199pub use stories::*;
200
201#[cfg(feature = "stories")]
202mod stories {
203 use gpui3::rems;
204 use strum::IntoEnumIterator;
205
206 use crate::{h_stack, v_stack, LabelColor, Story};
207
208 use super::*;
209
210 #[derive(Element)]
211 pub struct ButtonStory<S: 'static + Send + Sync + Clone> {
212 state_type: PhantomData<S>,
213 }
214
215 impl<S: 'static + Send + Sync + Clone> ButtonStory<S> {
216 pub fn new() -> Self {
217 Self {
218 state_type: PhantomData,
219 }
220 }
221
222 fn render(
223 &mut self,
224 _view: &mut S,
225 cx: &mut ViewContext<S>,
226 ) -> impl Element<ViewState = S> {
227 let states = InteractionState::iter();
228
229 Story::container(cx)
230 .child(Story::title_for::<_, Button<S>>(cx))
231 .child(
232 div()
233 .flex()
234 .gap_8()
235 .child(
236 div()
237 .child(Story::label(cx, "Ghost (Default)"))
238 .child(h_stack().gap_2().children(states.clone().map(|state| {
239 v_stack()
240 .gap_1()
241 .child(
242 Label::new(state.to_string()).color(LabelColor::Muted),
243 )
244 .child(
245 Button::new("Label")
246 .variant(ButtonVariant::Ghost)
247 .state(state),
248 )
249 })))
250 .child(Story::label(cx, "Ghost – Left Icon"))
251 .child(h_stack().gap_2().children(states.clone().map(|state| {
252 v_stack()
253 .gap_1()
254 .child(
255 Label::new(state.to_string()).color(LabelColor::Muted),
256 )
257 .child(
258 Button::new("Label")
259 .variant(ButtonVariant::Ghost)
260 .icon(Icon::Plus)
261 .icon_position(IconPosition::Left)
262 .state(state),
263 )
264 })))
265 .child(Story::label(cx, "Ghost – Right Icon"))
266 .child(h_stack().gap_2().children(states.clone().map(|state| {
267 v_stack()
268 .gap_1()
269 .child(
270 Label::new(state.to_string()).color(LabelColor::Muted),
271 )
272 .child(
273 Button::new("Label")
274 .variant(ButtonVariant::Ghost)
275 .icon(Icon::Plus)
276 .icon_position(IconPosition::Right)
277 .state(state),
278 )
279 }))),
280 )
281 .child(
282 div()
283 .child(Story::label(cx, "Filled"))
284 .child(h_stack().gap_2().children(states.clone().map(|state| {
285 v_stack()
286 .gap_1()
287 .child(
288 Label::new(state.to_string()).color(LabelColor::Muted),
289 )
290 .child(
291 Button::new("Label")
292 .variant(ButtonVariant::Filled)
293 .state(state),
294 )
295 })))
296 .child(Story::label(cx, "Filled – Left Button"))
297 .child(h_stack().gap_2().children(states.clone().map(|state| {
298 v_stack()
299 .gap_1()
300 .child(
301 Label::new(state.to_string()).color(LabelColor::Muted),
302 )
303 .child(
304 Button::new("Label")
305 .variant(ButtonVariant::Filled)
306 .icon(Icon::Plus)
307 .icon_position(IconPosition::Left)
308 .state(state),
309 )
310 })))
311 .child(Story::label(cx, "Filled – Right Button"))
312 .child(h_stack().gap_2().children(states.clone().map(|state| {
313 v_stack()
314 .gap_1()
315 .child(
316 Label::new(state.to_string()).color(LabelColor::Muted),
317 )
318 .child(
319 Button::new("Label")
320 .variant(ButtonVariant::Filled)
321 .icon(Icon::Plus)
322 .icon_position(IconPosition::Right)
323 .state(state),
324 )
325 }))),
326 )
327 .child(
328 div()
329 .child(Story::label(cx, "Fixed With"))
330 .child(h_stack().gap_2().children(states.clone().map(|state| {
331 v_stack()
332 .gap_1()
333 .child(
334 Label::new(state.to_string()).color(LabelColor::Muted),
335 )
336 .child(
337 Button::new("Label")
338 .variant(ButtonVariant::Filled)
339 .state(state)
340 .width(Some(rems(6.).into())),
341 )
342 })))
343 .child(Story::label(cx, "Fixed With – Left Icon"))
344 .child(h_stack().gap_2().children(states.clone().map(|state| {
345 v_stack()
346 .gap_1()
347 .child(
348 Label::new(state.to_string()).color(LabelColor::Muted),
349 )
350 .child(
351 Button::new("Label")
352 .variant(ButtonVariant::Filled)
353 .state(state)
354 .icon(Icon::Plus)
355 .icon_position(IconPosition::Left)
356 .width(Some(rems(6.).into())),
357 )
358 })))
359 .child(Story::label(cx, "Fixed With – Right Icon"))
360 .child(h_stack().gap_2().children(states.clone().map(|state| {
361 v_stack()
362 .gap_1()
363 .child(
364 Label::new(state.to_string()).color(LabelColor::Muted),
365 )
366 .child(
367 Button::new("Label")
368 .variant(ButtonVariant::Filled)
369 .state(state)
370 .icon(Icon::Plus)
371 .icon_position(IconPosition::Right)
372 .width(Some(rems(6.).into())),
373 )
374 }))),
375 ),
376 )
377 .child(Story::label(cx, "Button with `on_click`"))
378 .child(
379 Button::new("Label")
380 .variant(ButtonVariant::Ghost)
381 .on_click(Arc::new(|_view, _cx| println!("Button clicked."))),
382 )
383 }
384 }
385}