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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

use dioxus::prelude::*;
use freya_elements::elements as dioxus_elements;
use freya_elements::events::MouseEvent;
use freya_hooks::{use_focus, use_get_theme};

/// [`Button`] component properties.
#[derive(Props)]
pub struct ButtonProps<'a> {
    /// Inner children for the Button.
    pub children: Element<'a>,
    /// Handler for the `onclick` event.
    #[props(optional)]
    pub onclick: Option<EventHandler<'a, MouseEvent>>,
}

/// Identifies the current status of the Button.
#[derive(Debug, Default, PartialEq, Clone, Copy)]
pub enum ButtonStatus {
    /// Default state.
    #[default]
    Idle,
    /// Mouse is hovering the button.
    Hovering,
}

/// `Button` component.
///
/// # Props
/// See [`ButtonProps`].
///
/// # Styling
/// Inherits the [`ButtonTheme`](freya_hooks::ButtonTheme) theme.
///
/// # Example
///
/// ```no_run
/// # use freya::prelude::*;
/// fn app(cx: Scope) -> Element {
///     render!(
///         Button {
///             onclick: |_| println!("clicked"),
///             label {
///                 "Click this"
///             }
///         }
///     )
/// }
/// ```
///
#[allow(non_snake_case)]
pub fn Button<'a>(cx: Scope<'a, ButtonProps<'a>>) -> Element {
    let focus = use_focus(cx);
    let theme = use_get_theme(cx);
    let status = use_state(cx, ButtonStatus::default);

    let focus_id = focus.attribute(cx);

    let onclick = move |ev| {
        focus.focus();
        if let Some(onclick) = &cx.props.onclick {
            onclick.call(ev)
        }
    };

    let onmouseenter = move |_| {
        status.set(ButtonStatus::Hovering);
    };

    let onmouseleave = move |_| {
        status.set(ButtonStatus::default());
    };

    let background = match *status.get() {
        ButtonStatus::Hovering => theme.button.hover_background,
        ButtonStatus::Idle => theme.button.background,
    };
    let color = theme.button.font_theme.color;

    render!(
        rect {
            overflow: "clip",
            margin: "2",
            onclick: onclick,
            onmouseenter: onmouseenter,
            onmouseleave: onmouseleave,
            focus_id: focus_id,
            focusable: "true",
            role: "button",
            width: "auto",
            height: "auto",
            direction: "both",
            color: "{color}",
            shadow: "0 5 20 0 rgb(0, 0, 0, 100)",
            corner_radius: "5",
            padding: "8",
            background: "{background}",
            &cx.props.children
        }
    )
}