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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127

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> {
    /// Padding for the Button.
    #[props(default = "10 14".to_string(), into)]
    pub padding: String,
    /// Margin for the Button.
    #[props(default = "4".to_string(), into)]
    pub margin: String,
    /// Corner radius for the Button.
    #[props(default = "10".to_string(), into)]
    pub corner_radius: String,
    /// Width size for the Button.
    #[props(default = "auto".to_string(), into)]
    pub width: String,
    /// Inner children for the Button.
    #[props(default = "auto".to_string(), into)]
    pub height: String,
    /// 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;
    let border_fill = theme.button.border_fill;
    let ButtonProps {
        width,
        height,
        corner_radius,
        padding,
        margin,
        ..
    } = &cx.props;

    render!(
        rect {
            onclick: onclick,
            onmouseenter: onmouseenter,
            onmouseleave: onmouseleave,
            focus_id: focus_id,
            width: "{width}",
            height: "{height}",
            padding: "{padding}",
            margin: "{margin}",
            focusable: "true",
            overflow: "clip",
            role: "button",
            color: "{color}",
            shadow: "0 4 5 0 rgb(0, 0, 0, 30)",
            border: "1 solid {border_fill}",
            corner_radius: "{corner_radius}",
            background: "{background}",
            align: "center",
            main_align: "center",
            cross_align: "center",
            &cx.props.children
        }
    )
}