guise/
chip.rs

1//! `Chip` — a selectable pill (controlled).
2
3use gpui::prelude::*;
4use gpui::{div, px, App, ClickEvent, ElementId, FontWeight, IntoElement, SharedString, Window};
5
6use crate::devtools::Probed;
7use crate::input::ClickHandler;
8use crate::reactive::Binding;
9use crate::style::ColorValue;
10use crate::theme::{theme, Size};
11
12/// A selectable chip. Controlled: pass `checked` and a
13/// change handler via `cx.listener`, or two-way bind with [`Chip::bind`].
14#[derive(IntoElement)]
15pub struct Chip {
16  id: ElementId,
17  label: SharedString,
18  checked: bool,
19  color: ColorValue,
20  size: Size,
21  binding: Option<Binding<bool>>,
22  on_change: Option<ClickHandler>,
23}
24
25impl Chip {
26  pub fn new(id: impl Into<ElementId>, label: impl Into<SharedString>) -> Self {
27    Chip {
28      id: id.into(),
29      label: label.into(),
30      checked: false,
31      color: ColorValue::default(),
32      size: Size::Md,
33      binding: None,
34      on_change: None,
35    }
36  }
37
38  pub fn checked(mut self, checked: bool) -> Self {
39    self.checked = checked;
40    self
41  }
42
43  pub fn color(mut self, color: impl Into<ColorValue>) -> Self {
44    self.color = color.into();
45    self
46  }
47
48  pub fn size(mut self, size: Size) -> Self {
49    self.size = size;
50    self
51  }
52
53  /// Two-way bind the checked state. Overrides `checked`; clicks write the
54  /// toggled value back through the binding, then run any `on_change`.
55  pub fn bind(mut self, binding: Binding<bool>) -> Self {
56    self.binding = Some(binding);
57    self
58  }
59
60  pub fn on_change(
61    mut self,
62    handler: impl Fn(&ClickEvent, &mut Window, &mut App) + 'static,
63  ) -> Self {
64    self.on_change = Some(Box::new(handler));
65    self
66  }
67
68  fn metrics(&self) -> (f32, f32, f32) {
69    match self.size {
70      Size::Xs => (24.0, 10.0, 11.0),
71      Size::Sm => (28.0, 12.0, 12.0),
72      Size::Md => (32.0, 16.0, 14.0),
73      Size::Lg => (38.0, 20.0, 16.0),
74      Size::Xl => (44.0, 24.0, 18.0),
75    }
76  }
77}
78
79impl RenderOnce for Chip {
80  fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
81    let t = theme(cx);
82    let (height, pad_x, font) = self.metrics();
83    let accent = self.color.accent(t);
84    let checked = self.binding.as_ref().map_or(self.checked, |b| b.get(cx));
85
86    let (bg, fg, border) = if checked {
87      (self.color.soft(t), accent, accent)
88    } else {
89      (t.surface().hsla(), t.text().hsla(), t.border().hsla())
90    };
91    let hover_bg = t.surface_hover().hsla();
92
93    let mut el = div()
94      .id(self.id)
95      .flex()
96      .items_center()
97      .gap(px(6.0))
98      .h(px(height))
99      .px(px(pad_x))
100      .rounded(px(height))
101      .border_1()
102      .border_color(border)
103      .bg(bg)
104      .text_color(fg)
105      .text_size(px(font))
106      .font_weight(FontWeight::MEDIUM);
107    if checked {
108      el = el.child(SharedString::new_static("\u{2713}"));
109    } else {
110      el = el.hover(move |s| s.bg(hover_bg));
111    }
112    el = el.child(self.label);
113    if self.binding.is_some() || self.on_change.is_some() {
114      let binding = self.binding;
115      let handler = self.on_change;
116      let next = !checked;
117      el = el.on_click(move |ev, window, cx| {
118        if let Some(binding) = &binding {
119          binding.set(cx, next);
120        }
121        if let Some(handler) = &handler {
122          handler(ev, window, cx);
123        }
124      });
125    }
126    el.probe("Chip")
127      .attr("size", self.size.label())
128      .attr_if("checked", self.checked)
129  }
130}
guise/chip.rs

guise/
chip.rs
