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_hook(|| {
57/// #   rect().center().expanded().child(app())
58/// # }, (250., 250.).into(), "./images/gallery_floating_tab.png", |t| {
59/// #   t.move_cursor((125., 115.));
60/// #   t.sync_and_update();
61/// # });
62/// ```
63///
64/// # Preview
65/// ![FloatingTab Preview][floating_tab]
66#[cfg_attr(feature = "docs",
67    doc = embed_doc_image::embed_image!("floating_tab", "images/gallery_floating_tab.png")
68)]
69impl FloatingTab {
70    pub fn new() -> Self {
71        Self {
72            children: vec![],
73            theme: None,
74            on_press: None,
75        }
76    }
77}
78
79impl Render for FloatingTab {
80    fn render(&self) -> impl IntoElement {
81        let focus = use_focus();
82        let focus_status = use_focus_status(focus);
83        let mut status = use_state(TabStatus::default);
84        let is_active = use_activable_route();
85
86        let FloatingTabTheme {
87            background,
88            hover_background,
89            padding,
90            width,
91            height,
92            color,
93        } = get_theme!(&self.theme, floating_tab);
94
95        let on_pointer_enter = move |_| {
96            Cursor::set(CursorIcon::Pointer);
97            status.set(TabStatus::Hovering);
98        };
99
100        let on_pointer_leave = move |_| {
101            Cursor::set(CursorIcon::default());
102            status.set(TabStatus::default());
103        };
104
105        let background = match *status.read() {
106            _ if focus_status() == FocusStatus::Keyboard || is_active => hover_background,
107            TabStatus::Hovering => hover_background,
108            TabStatus::Idle => background,
109        };
110
111        rect()
112            .a11y_id(focus.a11y_id())
113            .a11y_focusable(Focusable::Enabled)
114            .a11y_role(AccessibilityRole::Tab)
115            .on_pointer_enter(on_pointer_enter)
116            .on_pointer_leave(on_pointer_leave)
117            .map(self.on_press.clone(), |el, on_press| el.on_press(on_press))
118            .width(width)
119            .height(height)
120            .center()
121            .overflow(Overflow::Clip)
122            .padding(padding)
123            .background(background)
124            .color(color)
125            .corner_radius(99.)
126            .children(self.children.clone())
127    }
128}
freya_components/floating_tab.rs

freya_components/
floating_tab.rs
