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 Disableable for ToggleButton {
75 fn disabled(mut self, disabled: bool) -> Self {
76 self.base = self.base.disabled(disabled);
77 self
78 }
79}
80
81impl Clickable for ToggleButton {
82 fn on_click(mut self, handler: impl Fn(&ClickEvent, &mut Window, &mut App) + 'static) -> Self {
83 self.base = self.base.on_click(handler);
84 self
85 }
86
87 fn cursor_style(mut self, cursor_style: gpui::CursorStyle) -> Self {
88 self.base = self.base.cursor_style(cursor_style);
89 self
90 }
91}
92
93impl ButtonCommon for ToggleButton {
94 fn id(&self) -> &ElementId {
95 self.base.id()
96 }
97
98 fn style(mut self, style: ButtonStyle) -> Self {
99 self.base = self.base.style(style);
100 self
101 }
102
103 fn size(mut self, size: ButtonSize) -> Self {
104 self.base = self.base.size(size);
105 self
106 }
107
108 fn tooltip(mut self, tooltip: impl Fn(&mut Window, &mut App) -> AnyView + 'static) -> Self {
109 self.base = self.base.tooltip(tooltip);
110 self
111 }
112
113 fn layer(mut self, elevation: ElevationIndex) -> Self {
114 self.base = self.base.layer(elevation);
115 self
116 }
117}
118
119impl RenderOnce for ToggleButton {
120 fn render(self, _window: &mut Window, _cx: &mut App) -> impl IntoElement {
121 let is_disabled = self.base.disabled;
122 let is_selected = self.base.selected;
123
124 let label_color = if is_disabled {
125 Color::Disabled
126 } else if is_selected {
127 Color::Selected
128 } else {
129 self.label_color.unwrap_or_default()
130 };
131
132 self.base
133 .when_some(self.position_in_group, |this, position| match position {
134 ToggleButtonPosition::First => this.rounding(ButtonLikeRounding::Left),
135 ToggleButtonPosition::Middle => this.rounding(None),
136 ToggleButtonPosition::Last => this.rounding(ButtonLikeRounding::Right),
137 })
138 .child(
139 Label::new(self.label)
140 .color(label_color)
141 .line_height_style(LineHeightStyle::UiLabel),
142 )
143 }
144}
145
146impl ComponentPreview for ToggleButton {
147 fn preview(_window: &mut Window, _cx: &mut App) -> AnyElement {
148 v_flex()
149 .gap_6()
150 .children(vec![
151 example_group_with_title(
152 "Button Styles",
153 vec![
154 single_example(
155 "Off",
156 ToggleButton::new("off", "Off")
157 .layer(ElevationIndex::Background)
158 .style(ButtonStyle::Filled)
159 .into_any_element(),
160 ),
161 single_example(
162 "On",
163 ToggleButton::new("on", "On")
164 .layer(ElevationIndex::Background)
165 .toggle_state(true)
166 .style(ButtonStyle::Filled)
167 .into_any_element(),
168 ),
169 single_example(
170 "Off – Disabled",
171 ToggleButton::new("disabled_off", "Disabled Off")
172 .layer(ElevationIndex::Background)
173 .disabled(true)
174 .style(ButtonStyle::Filled)
175 .into_any_element(),
176 ),
177 single_example(
178 "On – Disabled",
179 ToggleButton::new("disabled_on", "Disabled On")
180 .layer(ElevationIndex::Background)
181 .disabled(true)
182 .toggle_state(true)
183 .style(ButtonStyle::Filled)
184 .into_any_element(),
185 ),
186 ],
187 ),
188 example_group_with_title(
189 "Button Group",
190 vec![
191 single_example(
192 "Three Buttons",
193 h_flex()
194 .child(
195 ToggleButton::new("three_btn_first", "First")
196 .layer(ElevationIndex::Background)
197 .style(ButtonStyle::Filled)
198 .first()
199 .into_any_element(),
200 )
201 .child(
202 ToggleButton::new("three_btn_middle", "Middle")
203 .layer(ElevationIndex::Background)
204 .style(ButtonStyle::Filled)
205 .middle()
206 .toggle_state(true)
207 .into_any_element(),
208 )
209 .child(
210 ToggleButton::new("three_btn_last", "Last")
211 .layer(ElevationIndex::Background)
212 .style(ButtonStyle::Filled)
213 .last()
214 .into_any_element(),
215 )
216 .into_any_element(),
217 ),
218 single_example(
219 "Two Buttons",
220 h_flex()
221 .child(
222 ToggleButton::new("two_btn_first", "First")
223 .layer(ElevationIndex::Background)
224 .style(ButtonStyle::Filled)
225 .first()
226 .into_any_element(),
227 )
228 .child(
229 ToggleButton::new("two_btn_last", "Last")
230 .layer(ElevationIndex::Background)
231 .style(ButtonStyle::Filled)
232 .last()
233 .into_any_element(),
234 )
235 .into_any_element(),
236 ),
237 ],
238 ),
239 example_group_with_title(
240 "Alternate Sizes",
241 vec![
242 single_example(
243 "None",
244 ToggleButton::new("none", "None")
245 .layer(ElevationIndex::Background)
246 .style(ButtonStyle::Filled)
247 .size(ButtonSize::None)
248 .into_any_element(),
249 ),
250 single_example(
251 "Compact",
252 ToggleButton::new("compact", "Compact")
253 .layer(ElevationIndex::Background)
254 .style(ButtonStyle::Filled)
255 .size(ButtonSize::Compact)
256 .into_any_element(),
257 ),
258 single_example(
259 "Large",
260 ToggleButton::new("large", "Large")
261 .layer(ElevationIndex::Background)
262 .style(ButtonStyle::Filled)
263 .size(ButtonSize::Large)
264 .into_any_element(),
265 ),
266 ],
267 ),
268 ])
269 .into_any_element()
270 }
271}