freya_components/
tooltip.rs

1use std::borrow::Cow;
2
3use freya_animation::{
4    easing::Function,
5    hook::{
6        AnimatedValue,
7        Ease,
8        OnChange,
9        OnCreation,
10        ReadAnimatedValue,
11        use_animation,
12    },
13    prelude::AnimNum,
14};
15use freya_core::prelude::*;
16
17use crate::{
18    attached::{
19        Attached,
20        AttachedPosition,
21    },
22    context_menu::ContextMenu,
23    define_theme,
24    get_theme,
25};
26
27define_theme! {
28    %[component]
29    pub Tooltip {
30        %[fields]
31        color: Color,
32        background: Color,
33        border_fill: Color,
34        font_size: f32,
35    }
36}
37
38/// Tooltip component.
39///
40/// # Example
41///
42/// ```rust
43/// # use freya::prelude::*;
44/// fn app() -> impl IntoElement {
45///     Tooltip::new("Hello, World!")
46/// }
47///
48/// # use freya_testing::prelude::*;
49/// # launch_doc(|| {
50/// #   rect().center().expanded().child(app())
51/// # }, "./images/gallery_tooltip.png").render();
52/// ```
53///
54/// # Preview
55/// ![Tooltip Preview][tooltip]
56#[cfg_attr(feature = "docs",
57    doc = embed_doc_image::embed_image!("tooltip", "images/gallery_tooltip.png")
58)]
59#[derive(PartialEq, Clone)]
60pub struct Tooltip {
61    /// Theme override.
62    pub(crate) theme: Option<TooltipThemePartial>,
63    /// Text to show in the [Tooltip].
64    text: Cow<'static, str>,
65    key: DiffKey,
66}
67
68impl KeyExt for Tooltip {
69    fn write_key(&mut self) -> &mut DiffKey {
70        &mut self.key
71    }
72}
73
74impl Tooltip {
75    pub fn new(text: impl Into<Cow<'static, str>>) -> Self {
76        Self {
77            theme: None,
78            text: text.into(),
79            key: DiffKey::None,
80        }
81    }
82}
83
84impl Component for Tooltip {
85    fn render(&self) -> impl IntoElement {
86        let theme = get_theme!(&self.theme, TooltipThemePreference, "tooltip");
87        let TooltipTheme {
88            background,
89            color,
90            border_fill,
91            font_size,
92        } = theme;
93
94        rect()
95            .interactive(Interactive::No)
96            .padding((4., 10.))
97            .border(
98                Border::new()
99                    .width(1.)
100                    .alignment(BorderAlignment::Inner)
101                    .fill(border_fill),
102            )
103            .background(background)
104            .corner_radius(8.)
105            .child(
106                label()
107                    .max_lines(1)
108                    .font_size(font_size)
109                    .color(color)
110                    .text(self.text.clone()),
111            )
112    }
113
114    fn render_key(&self) -> DiffKey {
115        self.key.clone().or(self.default_key())
116    }
117}
118
119#[derive(PartialEq)]
120pub struct TooltipContainer {
121    tooltip: Tooltip,
122    children: Vec<Element>,
123    position: AttachedPosition,
124    key: DiffKey,
125}
126
127impl KeyExt for TooltipContainer {
128    fn write_key(&mut self) -> &mut DiffKey {
129        &mut self.key
130    }
131}
132
133impl ChildrenExt for TooltipContainer {
134    fn get_children(&mut self) -> &mut Vec<Element> {
135        &mut self.children
136    }
137}
138
139impl TooltipContainer {
140    pub fn new(tooltip: Tooltip) -> Self {
141        Self {
142            tooltip,
143            children: vec![],
144            position: AttachedPosition::Bottom,
145            key: DiffKey::None,
146        }
147    }
148
149    pub fn position(mut self, position: AttachedPosition) -> Self {
150        self.position = position;
151        self
152    }
153}
154
155impl Component for TooltipContainer {
156    fn render(&self) -> impl IntoElement {
157        let mut is_hovering = use_state(|| false);
158
159        let animation = use_animation(move |conf| {
160            conf.on_change(OnChange::Rerun);
161            conf.on_creation(OnCreation::Finish);
162
163            let scale = AnimNum::new(0.8, 1.)
164                .time(350)
165                .ease(Ease::Out)
166                .function(Function::Expo);
167            let opacity = AnimNum::new(0., 1.)
168                .time(350)
169                .ease(Ease::Out)
170                .function(Function::Expo);
171
172            if is_hovering() {
173                (scale, opacity)
174            } else {
175                (scale.into_reversed(), opacity.into_reversed())
176            }
177        });
178
179        let (scale, opacity) = animation.read().value();
180
181        let on_pointer_over = move |_| {
182            is_hovering.set(true);
183        };
184
185        let on_pointer_out = move |_| {
186            is_hovering.set(false);
187        };
188
189        let is_visible = opacity > 0. && !ContextMenu::is_open();
190
191        let padding = match self.position {
192            AttachedPosition::Top => (0., 0., 5., 0.),
193            AttachedPosition::Bottom => (5., 0., 0., 0.),
194            AttachedPosition::Left => (0., 5., 0., 0.),
195            AttachedPosition::Right => (0., 0., 0., 5.),
196        };
197
198        rect()
199            .a11y_focusable(false)
200            .a11y_role(AccessibilityRole::Tooltip)
201            .on_pointer_over(on_pointer_over)
202            .on_pointer_out(on_pointer_out)
203            .child(
204                Attached::new(rect().children(self.children.clone()))
205                    .position(self.position)
206                    .maybe_child(is_visible.then(|| {
207                        rect()
208                            .opacity(opacity)
209                            .scale(scale)
210                            .padding(padding)
211                            .child(self.tooltip.clone())
212                    })),
213            )
214    }
215
216    fn render_key(&self) -> DiffKey {
217        self.key.clone().or(self.default_key())
218    }
219}
freya_components/tooltip.rs

freya_components/
tooltip.rs
