freya-components 0.4.0-rc.18

Components for Freya apps
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

use freya_core::prelude::*;
use torin::size::Size;

use crate::{
    get_theme,
    scrollviews::{
        ScrollBarThemePartial,
        ScrollBarThemePreference,
        shared::Axis,
    },
};

enum ScrollThumbState {
    Idle,
    Hovering,
}

#[derive(Clone, PartialEq)]
pub struct ScrollThumb {
    pub(crate) theme: Option<ScrollBarThemePartial>,
    pub clicking_scrollbar: State<Option<(Axis, f64)>>,
    pub axis: Axis,
    pub size: f32,
}

impl ComponentOwned for ScrollThumb {
    fn render(mut self) -> impl IntoElement {
        let scrollbar_theme = get_theme!(&self.theme, ScrollBarThemePreference, "scrollbar");
        let mut state = use_state(|| ScrollThumbState::Idle);

        let (width, height) = match self.axis {
            Axis::X => (Size::px(self.size), Size::fill()),
            Axis::Y => (Size::fill(), Size::px(self.size)),
        };
        let thumb_background = match *state.read() {
            _ if self.clicking_scrollbar.read().is_some() => {
                scrollbar_theme.active_thumb_background
            }
            ScrollThumbState::Idle => scrollbar_theme.thumb_background,
            ScrollThumbState::Hovering => scrollbar_theme.hover_thumb_background,
        };

        let on_pointer_over = move |_| state.set(ScrollThumbState::Hovering);
        let on_pointer_out = move |_| state.set(ScrollThumbState::Idle);

        rect()
            .width(width)
            .height(height)
            .padding(4.)
            .on_pointer_over(on_pointer_over)
            .on_pointer_out(on_pointer_out)
            .on_pointer_down(move |e: Event<PointerEventData>| {
                if self.axis == Axis::X {
                    self.clicking_scrollbar
                        .set(Some((self.axis, e.element_location().x)));
                } else {
                    self.clicking_scrollbar
                        .set(Some((self.axis, e.element_location().y)));
                }
            })
            .on_pointer_press(move |e: Event<PointerEventData>| {
                e.prevent_default();
                e.stop_propagation();
                self.clicking_scrollbar.set(None);
            })
            .child(
                rect()
                    .width(Size::fill())
                    .height(Size::fill())
                    .background(thumb_background)
                    .corner_radius(8.),
            )
    }
}