guise/
spoiler.rs

1//! `Spoiler` — clips tall content to a max height behind a "Show more" toggle.
2//!
3//! Controlled: the parent owns `expanded` and flips it in `on_toggle`, exactly
4//! like `Modal`'s `opened`/`on_close` pair.
5//!
6//! ```ignore
7//! Spoiler::new("bio-spoiler")
8//!     .max_height(60.0)
9//!     .expanded(self.bio_open)
10//!     .on_toggle(cx.listener(|this, _, _, cx| {
11//!         this.bio_open = !this.bio_open;
12//!         cx.notify();
13//!     }))
14//!     .child(Text::new(LONG_BIO).size(Size::Sm))
15//! ```
16
17use gpui::prelude::*;
18use gpui::{div, px, AnyElement, App, ClickEvent, ElementId, IntoElement, SharedString, Window};
19
20use crate::devtools::Probed;
21use crate::input::ClickHandler;
22use crate::theme::{theme, ColorName, Size};
23
24/// A collapsible content clip.
25///
26/// While collapsed the children render inside an `overflow-hidden` box capped
27/// at `max_height`; the toggle below is styled like an `Anchor` link.
28#[derive(IntoElement)]
29pub struct Spoiler {
30  id: ElementId,
31  children: Vec<AnyElement>,
32  max_height: f32,
33  expanded: bool,
34  show_label: SharedString,
35  hide_label: SharedString,
36  color: ColorName,
37  size: Size,
38  on_toggle: Option<ClickHandler>,
39}
40
41impl Spoiler {
42  pub fn new(id: impl Into<ElementId>) -> Self {
43    Spoiler {
44      id: id.into(),
45      children: Vec::new(),
46      max_height: 100.0,
47      expanded: false,
48      show_label: SharedString::new_static("Show more"),
49      hide_label: SharedString::new_static("Hide"),
50      color: ColorName::Blue,
51      size: Size::Sm,
52      on_toggle: None,
53    }
54  }
55
56  /// Visible height in px while collapsed (default 100).
57  pub fn max_height(mut self, max_height: f32) -> Self {
58    self.max_height = max_height;
59    self
60  }
61
62  /// Whether the full content is shown. The parent owns this flag.
63  pub fn expanded(mut self, expanded: bool) -> Self {
64    self.expanded = expanded;
65    self
66  }
67
68  /// Toggle label while collapsed (default "Show more").
69  pub fn show_label(mut self, label: impl Into<SharedString>) -> Self {
70    self.show_label = label.into();
71    self
72  }
73
74  /// Toggle label while expanded (default "Hide").
75  pub fn hide_label(mut self, label: impl Into<SharedString>) -> Self {
76    self.hide_label = label.into();
77    self
78  }
79
80  /// The toggle link color (default `Blue`).
81  pub fn color(mut self, color: ColorName) -> Self {
82    self.color = color;
83    self
84  }
85
86  /// The toggle label font size (default `Sm`).
87  pub fn size(mut self, size: Size) -> Self {
88    self.size = size;
89    self
90  }
91
92  /// Called when the toggle is clicked. Wire with `cx.listener(...)` to
93  /// flip the parent's `expanded` flag.
94  pub fn on_toggle(
95    mut self,
96    handler: impl Fn(&ClickEvent, &mut Window, &mut App) + 'static,
97  ) -> Self {
98    self.on_toggle = Some(Box::new(handler));
99    self
100  }
101}
102
103impl ParentElement for Spoiler {
104  fn extend(&mut self, elements: impl IntoIterator<Item = AnyElement>) {
105    self.children.extend(elements);
106  }
107}
108
109impl RenderOnce for Spoiler {
110  fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
111    let t = theme(cx);
112    let dark = t.scheme.is_dark();
113    let link = t.color(self.color, if dark { 4 } else { 6 }).hsla();
114    let link_hover = t.color(self.color, if dark { 3 } else { 7 }).hsla();
115    let font = t.font_size(self.size);
116    let gap = t.spacing(Size::Xs);
117
118    let mut content = div().w_full().children(self.children);
119    if !self.expanded {
120      content = content.max_h(px(self.max_height)).overflow_hidden();
121    }
122
123    let label = if self.expanded {
124      self.hide_label
125    } else {
126      self.show_label
127    };
128    let mut toggle = div()
129      .id(self.id)
130      .cursor_pointer()
131      .text_size(px(font))
132      .text_color(link)
133      .hover(move |s| s.text_color(link_hover))
134      .child(label);
135    if let Some(handler) = self.on_toggle {
136      toggle = toggle.on_click(handler);
137    }
138
139    div()
140      .flex()
141      .flex_col()
142      .items_start()
143      .gap(px(gap))
144      .child(content)
145      .child(toggle)
146      .probe("Spoiler")
147  }
148}
guise/spoiler.rs

guise/
spoiler.rs
