1use gpui::{AnyView, ClickEvent};
2
3use crate::{ButtonLike, ButtonLikeRounding, ElevationIndex, prelude::*};
4
5/// The position of a [`ToggleButton`] within a group of buttons.
6#[derive(Debug, PartialEq, Eq, Clone, Copy)]
7pub enum ToggleButtonPosition {
8 /// The toggle button is first in the group.
9 First,
10
11 /// The toggle button is in the middle of the group (i.e., it is not the first or last toggle button).
12 Middle,
13
14 /// The toggle button is last in the group.
15 Last,
16}
17
18#[derive(IntoElement, IntoComponent)]
19#[component(scope = "Input")]
20pub struct ToggleButton {
21 base: ButtonLike,
22 position_in_group: Option<ToggleButtonPosition>,
23 label: SharedString,
24 label_color: Option<Color>,
25}
26
27impl ToggleButton {
28 pub fn new(id: impl Into<ElementId>, label: impl Into<SharedString>) -> Self {
29 Self {
30 base: ButtonLike::new(id),
31 position_in_group: None,
32 label: label.into(),
33 label_color: None,
34 }
35 }
36
37 pub fn color(mut self, label_color: impl Into<Option<Color>>) -> Self {
38 self.label_color = label_color.into();
39 self
40 }
41
42 pub fn position_in_group(mut self, position: ToggleButtonPosition) -> Self {
43 self.position_in_group = Some(position);
44 self
45 }
46
47 pub fn first(self) -> Self {
48 self.position_in_group(ToggleButtonPosition::First)
49 }
50
51 pub fn middle(self) -> Self {
52 self.position_in_group(ToggleButtonPosition::Middle)
53 }
54
55 pub fn last(self) -> Self {
56 self.position_in_group(ToggleButtonPosition::Last)
57 }
58}
59
60impl Toggleable for ToggleButton {
61 fn toggle_state(mut self, selected: bool) -> Self {
62 self.base = self.base.toggle_state(selected);
63 self
64 }
65}
66
67impl SelectableButton for ToggleButton {
68 fn selected_style(mut self, style: ButtonStyle) -> Self {
69 self.base.selected_style = Some(style);
70 self
71 }
72}
73
74impl FixedWidth for ToggleButton {
75 fn width(mut self, width: DefiniteLength) -> Self {
76 self.base.width = Some(width);
77 self
78 }
79
80 fn full_width(mut self) -> Self {
81 self.base.width = Some(relative(1.));
82 self
83 }
84}
85
86impl Disableable for ToggleButton {
87 fn disabled(mut self, disabled: bool) -> Self {
88 self.base = self.base.disabled(disabled);
89 self
90 }
91}
92
93impl Clickable for ToggleButton {
94 fn on_click(mut self, handler: impl Fn(&ClickEvent, &mut Window, &mut App) + 'static) -> Self {
95 self.base = self.base.on_click(handler);
96 self
97 }
98
99 fn cursor_style(mut self, cursor_style: gpui::CursorStyle) -> Self {
100 self.base = self.base.cursor_style(cursor_style);
101 self
102 }
103}
104
105impl ButtonCommon for ToggleButton {
106 fn id(&self) -> &ElementId {
107 self.base.id()
108 }
109
110 fn style(mut self, style: ButtonStyle) -> Self {
111 self.base = self.base.style(style);
112 self
113 }
114
115 fn size(mut self, size: ButtonSize) -> Self {
116 self.base = self.base.size(size);
117 self
118 }
119
120 fn tooltip(mut self, tooltip: impl Fn(&mut Window, &mut App) -> AnyView + 'static) -> Self {
121 self.base = self.base.tooltip(tooltip);
122 self
123 }
124
125 fn layer(mut self, elevation: ElevationIndex) -> Self {
126 self.base = self.base.layer(elevation);
127 self
128 }
129}
130
131impl RenderOnce for ToggleButton {
132 fn render(self, _window: &mut Window, _cx: &mut App) -> impl IntoElement {
133 let is_disabled = self.base.disabled;
134 let is_selected = self.base.selected;
135
136 let label_color = if is_disabled {
137 Color::Disabled
138 } else if is_selected {
139 Color::Selected
140 } else {
141 self.label_color.unwrap_or_default()
142 };
143
144 self.base
145 .when_some(self.position_in_group, |this, position| match position {
146 ToggleButtonPosition::First => this.rounding(ButtonLikeRounding::Left),
147 ToggleButtonPosition::Middle => this.rounding(None),
148 ToggleButtonPosition::Last => this.rounding(ButtonLikeRounding::Right),
149 })
150 .child(
151 Label::new(self.label)
152 .color(label_color)
153 .line_height_style(LineHeightStyle::UiLabel),
154 )
155 }
156}
157
158impl ComponentPreview for ToggleButton {
159 fn preview(_window: &mut Window, _cx: &mut App) -> AnyElement {
160 v_flex()
161 .gap_6()
162 .children(vec![
163 example_group_with_title(
164 "Button Styles",
165 vec![
166 single_example(
167 "Off",
168 ToggleButton::new("off", "Off")
169 .layer(ElevationIndex::Background)
170 .style(ButtonStyle::Filled)
171 .into_any_element(),
172 ),
173 single_example(
174 "On",
175 ToggleButton::new("on", "On")
176 .layer(ElevationIndex::Background)
177 .toggle_state(true)
178 .style(ButtonStyle::Filled)
179 .into_any_element(),
180 ),
181 single_example(
182 "Off – Disabled",
183 ToggleButton::new("disabled_off", "Disabled Off")
184 .layer(ElevationIndex::Background)
185 .disabled(true)
186 .style(ButtonStyle::Filled)
187 .into_any_element(),
188 ),
189 single_example(
190 "On – Disabled",
191 ToggleButton::new("disabled_on", "Disabled On")
192 .layer(ElevationIndex::Background)
193 .disabled(true)
194 .toggle_state(true)
195 .style(ButtonStyle::Filled)
196 .into_any_element(),
197 ),
198 ],
199 ),
200 example_group_with_title(
201 "Button Group",
202 vec![
203 single_example(
204 "Three Buttons",
205 h_flex()
206 .child(
207 ToggleButton::new("three_btn_first", "First")
208 .layer(ElevationIndex::Background)
209 .style(ButtonStyle::Filled)
210 .first()
211 .into_any_element(),
212 )
213 .child(
214 ToggleButton::new("three_btn_middle", "Middle")
215 .layer(ElevationIndex::Background)
216 .style(ButtonStyle::Filled)
217 .middle()
218 .toggle_state(true)
219 .into_any_element(),
220 )
221 .child(
222 ToggleButton::new("three_btn_last", "Last")
223 .layer(ElevationIndex::Background)
224 .style(ButtonStyle::Filled)
225 .last()
226 .into_any_element(),
227 )
228 .into_any_element(),
229 ),
230 single_example(
231 "Two Buttons",
232 h_flex()
233 .child(
234 ToggleButton::new("two_btn_first", "First")
235 .layer(ElevationIndex::Background)
236 .style(ButtonStyle::Filled)
237 .first()
238 .into_any_element(),
239 )
240 .child(
241 ToggleButton::new("two_btn_last", "Last")
242 .layer(ElevationIndex::Background)
243 .style(ButtonStyle::Filled)
244 .last()
245 .into_any_element(),
246 )
247 .into_any_element(),
248 ),
249 ],
250 ),
251 example_group_with_title(
252 "Alternate Sizes",
253 vec![
254 single_example(
255 "None",
256 ToggleButton::new("none", "None")
257 .layer(ElevationIndex::Background)
258 .style(ButtonStyle::Filled)
259 .size(ButtonSize::None)
260 .into_any_element(),
261 ),
262 single_example(
263 "Compact",
264 ToggleButton::new("compact", "Compact")
265 .layer(ElevationIndex::Background)
266 .style(ButtonStyle::Filled)
267 .size(ButtonSize::Compact)
268 .into_any_element(),
269 ),
270 single_example(
271 "Large",
272 ToggleButton::new("large", "Large")
273 .layer(ElevationIndex::Background)
274 .style(ButtonStyle::Filled)
275 .size(ButtonSize::Large)
276 .into_any_element(),
277 ),
278 ],
279 ),
280 ])
281 .into_any_element()
282 }
283}