guise/input/
rating.rs

1//! `Rating` — a row of clickable stars (controlled).
2//!
3//! The parent owns the value (an `f32` rendered as whole stars) and passes a
4//! change handler, or two-way binds it with [`Rating::bind`]. Clicking star
5//! `i` sets the value to `i`; hovering an unfilled star previews it in the
6//! accent color. `readonly` renders a static display.
7//!
8//! ```ignore
9//! Rating::new("stars")
10//!     .value(self.stars)
11//!     .color(ColorName::Yellow)
12//!     .on_change(cx.listener(|this, value: &f32, _w, cx| {
13//!         this.stars = *value;
14//!         cx.notify();
15//!     }))
16//! ```
17
18use std::rc::Rc;
19
20use gpui::prelude::*;
21use gpui::{div, px, App, ElementId, IntoElement, SharedString, Window};
22
23use crate::devtools::Probed;
24use crate::reactive::Binding;
25use crate::style::ColorValue;
26use crate::theme::{theme, ColorName, Size};
27
28type ChangeHandler = Rc<dyn Fn(&f32, &mut Window, &mut App) + 'static>;
29
30/// A star rating. Controlled: pass `value` and an
31/// `on_change`, or two-way bind with [`Rating::bind`].
32#[derive(IntoElement)]
33pub struct Rating {
34  id: ElementId,
35  value: f32,
36  count: usize,
37  color: ColorValue,
38  size: Size,
39  readonly: bool,
40  binding: Option<Binding<f32>>,
41  on_change: Option<ChangeHandler>,
42}
43
44impl Rating {
45  pub fn new(id: impl Into<ElementId>) -> Self {
46    Rating {
47      id: id.into(),
48      value: 0.0,
49      count: 5,
50      color: ColorValue::Named(ColorName::Yellow),
51      size: Size::Md,
52      readonly: false,
53      binding: None,
54      on_change: None,
55    }
56  }
57
58  pub fn value(mut self, value: f32) -> Self {
59    self.value = value;
60    self
61  }
62
63  /// How many stars to draw (default 5).
64  pub fn count(mut self, count: usize) -> Self {
65    self.count = count.max(1);
66    self
67  }
68
69  pub fn color(mut self, color: impl Into<ColorValue>) -> Self {
70    self.color = color.into();
71    self
72  }
73
74  pub fn size(mut self, size: Size) -> Self {
75    self.size = size;
76    self
77  }
78
79  /// Display-only: no hover preview, no clicks.
80  pub fn readonly(mut self, readonly: bool) -> Self {
81    self.readonly = readonly;
82    self
83  }
84
85  /// Two-way bind the value. Overrides `value`; clicks write the new rating
86  /// back through the binding, then run any `on_change`.
87  pub fn bind(mut self, binding: Binding<f32>) -> Self {
88    self.binding = Some(binding);
89    self
90  }
91
92  pub fn on_change(mut self, handler: impl Fn(&f32, &mut Window, &mut App) + 'static) -> Self {
93    self.on_change = Some(Rc::new(handler));
94    self
95  }
96
97  fn glyph_px(&self) -> f32 {
98    match self.size {
99      Size::Xs => 14.0,
100      Size::Sm => 18.0,
101      Size::Md => 22.0,
102      Size::Lg => 28.0,
103      Size::Xl => 36.0,
104    }
105  }
106}
107
108/// How many leading stars read as filled for `value` (rounded, clamped).
109fn filled_stars(value: f32, count: usize) -> usize {
110  if value <= 0.0 {
111    0
112  } else {
113    (value.round() as usize).min(count)
114  }
115}
116
117impl RenderOnce for Rating {
118  fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
119    let t = theme(cx);
120    let accent = self.color.accent(t);
121    let empty = if t.scheme.is_dark() {
122      t.color(ColorName::Dark, 3)
123    } else {
124      t.color(ColorName::Gray, 4)
125    }
126    .hsla();
127    let glyph = self.glyph_px();
128
129    let value = self.binding.as_ref().map_or(self.value, |b| b.get(cx));
130    let filled = filled_stars(value, self.count);
131
132    let mut row = div()
133      .id(self.id)
134      .flex()
135      .flex_row()
136      .items_center()
137      .gap(px(2.0));
138
139    for i in 1..=self.count {
140      let is_filled = i <= filled;
141      let mut star = div()
142        .id(("guise-rating-star", i))
143        .text_size(px(glyph))
144        .text_color(if is_filled { accent } else { empty })
145        .child(SharedString::new_static(if is_filled {
146          "\u{2605}"
147        } else {
148          "\u{2606}"
149        }));
150      if !self.readonly {
151        star = star.cursor_pointer().hover(move |s| s.text_color(accent));
152        let binding = self.binding.clone();
153        let handler = self.on_change.clone();
154        let next = i as f32;
155        star = star.on_click(move |_ev, window, cx| {
156          if let Some(binding) = &binding {
157            binding.set(cx, next);
158          }
159          if let Some(handler) = &handler {
160            handler(&next, window, cx);
161          }
162        });
163      }
164      row = row.child(star);
165    }
166    row.probe("Rating")
167  }
168}
169
170#[cfg(test)]
171mod tests {
172  use super::filled_stars;
173
174  #[test]
175  fn rounds_to_the_nearest_star() {
176    assert_eq!(filled_stars(2.4, 5), 2);
177    assert_eq!(filled_stars(2.5, 5), 3);
178    assert_eq!(filled_stars(3.0, 5), 3);
179  }
180
181  #[test]
182  fn clamps_into_the_star_range() {
183    assert_eq!(filled_stars(0.0, 5), 0);
184    assert_eq!(filled_stars(-1.0, 5), 0);
185    assert_eq!(filled_stars(9.0, 5), 5);
186  }
187}
guise/input/rating.rs

guise/input/
rating.rs
