freya_components/
floating_tab.rs

1use freya_core::prelude::*;
2
3use crate::{
4    activable_route_context::use_activable_route,
5    get_theme,
6    theming::component_themes::{
7        FloatingTabTheme,
8        FloatingTabThemePartial,
9    },
10};
11
12/// Current status of the Tab.
13#[derive(Debug, Default, PartialEq, Clone, Copy)]
14pub enum TabStatus {
15    /// Default state.
16    #[default]
17    Idle,
18    /// Mouse is hovering the Tab.
19    Hovering,
20}
21
22#[derive(PartialEq)]
23pub struct FloatingTab {
24    pub(crate) theme: Option<FloatingTabThemePartial>,
25    children: Vec<Element>,
26    /// Optionally handle the `on_press` event in [FloatingTab].
27    on_press: Option<EventHandler<Event<PressEventData>>>,
28}
29
30impl Default for FloatingTab {
31    fn default() -> Self {
32        Self::new()
33    }
34}
35
36impl ChildrenExt for FloatingTab {
37    fn get_children(&mut self) -> &mut Vec<Element> {
38        &mut self.children
39    }
40}
41
42/// Floating Tab component.
43///
44/// # Example
45///
46/// ```rust
47/// # use freya::prelude::*;
48/// fn app() -> impl IntoElement {
49///     rect()
50///         .spacing(8.)
51///         .child(FloatingTab::new().child("Page 1"))
52///         .child(FloatingTab::new().child("Page 2"))
53/// }
54///
55/// # use freya_testing::prelude::*;
56/// # launch_doc(|| {
57/// #   rect().center().expanded().child(app())
58/// # }, "./images/gallery_floating_tab.png").with_hook(|t| { t.move_cursor((125., 115.)); t.sync_and_update(); }).with_scale_factor(1.).render();
59/// ```
60///
61/// # Preview
62/// ![FloatingTab Preview][floating_tab]
63#[cfg_attr(feature = "docs",
64    doc = embed_doc_image::embed_image!("floating_tab", "images/gallery_floating_tab.png")
65)]
66impl FloatingTab {
67    pub fn new() -> Self {
68        Self {
69            children: vec![],
70            theme: None,
71            on_press: None,
72        }
73    }
74}
75
76impl Component for FloatingTab {
77    fn render(&self) -> impl IntoElement {
78        let focus = use_focus();
79        let focus_status = use_focus_status(focus);
80        let mut status = use_state(TabStatus::default);
81        let is_active = use_activable_route();
82
83        let FloatingTabTheme {
84            background,
85            hover_background,
86            padding,
87            width,
88            height,
89            color,
90        } = get_theme!(&self.theme, floating_tab);
91
92        let on_pointer_enter = move |_| {
93            Cursor::set(CursorIcon::Pointer);
94            status.set(TabStatus::Hovering);
95        };
96
97        let on_pointer_leave = move |_| {
98            Cursor::set(CursorIcon::default());
99            status.set(TabStatus::default());
100        };
101
102        let background = match *status.read() {
103            _ if focus_status() == FocusStatus::Keyboard || is_active => hover_background,
104            TabStatus::Hovering => hover_background,
105            TabStatus::Idle => background,
106        };
107
108        rect()
109            .a11y_id(focus.a11y_id())
110            .a11y_focusable(Focusable::Enabled)
111            .a11y_role(AccessibilityRole::Tab)
112            .on_pointer_enter(on_pointer_enter)
113            .on_pointer_leave(on_pointer_leave)
114            .map(self.on_press.clone(), |el, on_press| el.on_press(on_press))
115            .width(width)
116            .height(height)
117            .center()
118            .overflow(Overflow::Clip)
119            .padding(padding)
120            .background(background)
121            .color(color)
122            .corner_radius(99.)
123            .children(self.children.clone())
124    }
125}
freya_components/floating_tab.rs

freya_components/
floating_tab.rs
