jinya_ui/widgets/
button.rs

1use yew::prelude::*;
2use yew::{Component, ComponentLink, Html};
3
4pub fn get_css<'a>() -> &'a str {
5    // language=CSS
6    "
7.jinya-button {
8    padding: 0.25rem 0.5rem;
9    background: var(--color-two);
10    border: 2px solid var(--color-one);
11    box-sizing: border-box;
12    border-radius: 5px;
13    transition: background 0.3s;
14    color: var(--color-one);
15    font-size: 1rem;
16    font-family: var(--font-family);
17    cursor: pointer;
18    outline: none;
19}
20
21.jinya-button:hover {
22    background: var(--color-one);
23    color: var(--color-two);
24}
25
26.jinya-button--small {
27    font-size: 12px;
28}
29
30.jinya-button--primary {
31    --color-one: var(--primary-color);
32    --color-two: var(--white);
33}
34
35.jinya-button--secondary {
36    --color-one: var(--secondary-color);
37    --color-two: var(--white);
38}
39
40.jinya-button--negative {
41    --color-one: var(--negative-color);
42    --color-two: var(--white);
43}
44
45.jinya-button--positive {
46    --color-one: var(--positive-color);
47    --color-two: var(--white);
48}
49
50.jinya-button--information {
51    --color-one: var(--information-color);
52    --color-two: var(--white);
53}
54
55.jinya-button:disabled {
56    --color-one: var(--disabled-border-color);
57    --color-two: var(--white);
58    cursor: not-allowed;
59}
60
61.jinya-button:disabled:hover {
62    background: var(--color-two);
63    color: var(--color-one);
64}
65"
66}
67
68#[derive(Clone, PartialEq)]
69pub enum ButtonType {
70    Primary,
71    Secondary,
72    Negative,
73    Positive,
74    Information,
75}
76
77pub struct Button {
78    link: ComponentLink<Self>,
79    label: String,
80    button_type: ButtonType,
81    on_click: Callback<()>,
82    small: bool,
83    disabled: bool,
84}
85
86#[derive(Clone, PartialEq, Properties)]
87pub struct ButtonProps {
88    #[prop_or_default]
89    pub button_type: ButtonType,
90    pub label: String,
91    pub on_click: Callback<()>,
92    #[prop_or(false)]
93    pub small: bool,
94    #[prop_or(false)]
95    pub disabled: bool,
96}
97
98pub enum Msg {
99    Click,
100}
101
102impl Default for ButtonType {
103    fn default() -> Self {
104        ButtonType::Primary
105    }
106}
107
108impl Button {
109    fn get_button_type_class(&self) -> String {
110        let button_class = match self.button_type {
111            ButtonType::Primary => "jinya-button jinya-button--primary",
112            ButtonType::Secondary => "jinya-button jinya-button--secondary",
113            ButtonType::Negative => "jinya-button jinya-button--negative",
114            ButtonType::Positive => "jinya-button jinya-button--positive",
115            ButtonType::Information => "jinya-button jinya-button--information",
116        };
117
118        if self.small {
119            format!("{} jinya-button--small", button_class)
120        } else {
121            button_class.to_string()
122        }
123    }
124}
125
126impl Component for Button {
127    type Message = Msg;
128    type Properties = ButtonProps;
129
130    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
131        Button {
132            link,
133            label: props.label,
134            on_click: props.on_click,
135            button_type: props.button_type,
136            small: props.small,
137            disabled: props.disabled,
138        }
139    }
140
141    fn update(&mut self, msg: Self::Message) -> bool {
142        match msg {
143            Msg::Click => {
144                self.on_click.emit(());
145            }
146        }
147
148        false
149    }
150
151    fn change(&mut self, _props: Self::Properties) -> bool {
152        self.label = _props.label;
153        self.on_click = _props.on_click;
154        self.button_type = _props.button_type;
155        self.small = _props.small;
156        self.disabled = _props.disabled;
157
158        true
159    }
160
161    fn view(&self) -> Html {
162        html! {
163            <button disabled=self.disabled onclick=self.link.callback(|_| Msg::Click) class=self.get_button_type_class()>
164                {&self.label}
165            </button>
166        }
167    }
168}
jinya_ui/widgets/button.rs

jinya_ui/widgets/
button.rs
