jinya_ui/widgets/
alert.rs

1use yew::prelude::*;
2
3pub fn get_css<'a>() -> &'a str {
4    // language=CSS
5    "
6.jinya-alert {
7    border: 2px solid var(--state-color);
8    border-top: 0.5rem solid var(--state-color);
9    padding: 0.5rem 1rem;
10    border-radius: 5px;
11    flex: 0 0 100%;
12    box-sizing: border-box;
13}
14
15.jinya-alert--primary {
16    --state-color: var(--primary-color);
17}
18
19.jinya-alert--negative {
20    --state-color: var(--negative-color);
21}
22
23.jinya-alert--positive {
24    --state-color: var(--positive-color);
25}
26
27.jinya-alert--information {
28    --state-color: var(--information-color);
29}
30
31.jinya-alert__message {
32    color: var(--state-color);
33}
34
35.jinya-alert__message--one-line {
36    font-size: var(--font-size-16);
37}
38
39.jinya-alert__message--multi-line {
40    font-size: var(--font-size-12);
41}
42
43.jinya-alert__title {
44    font-size: var(--font-size-16);
45    display: block;
46    width: 100%;
47    border-bottom: 2px solid var(--state-color);
48}
49"
50}
51
52#[derive(Clone, PartialEq)]
53pub enum AlertType {
54    Negative,
55    Positive,
56    Primary,
57    Information,
58}
59
60pub struct Alert {
61    title: String,
62    message: String,
63    alert_type: AlertType,
64}
65
66#[derive(Clone, PartialEq, Properties)]
67pub struct Props {
68    #[prop_or("".to_string())]
69    pub title: String,
70    pub message: String,
71    pub alert_type: AlertType,
72}
73
74impl Component for Alert {
75    type Message = ();
76    type Properties = Props;
77
78    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
79        Alert {
80            title: props.title,
81            message: props.message,
82            alert_type: props.alert_type,
83        }
84    }
85
86    fn update(&mut self, _msg: Self::Message) -> bool {
87        false
88    }
89
90    fn change(&mut self, _props: Self::Properties) -> bool {
91        self.title = _props.title;
92        self.message = _props.message;
93        self.alert_type = _props.alert_type;
94
95        true
96    }
97
98    fn view(&self) -> Html {
99        html! {
100            <div class=self.get_alert_class()>
101                {if self.title.is_empty() {
102                    html! {
103                        <span class="jinya-alert__message jinya-alert__message--one-line">{&self.message}</span>
104                    }
105                } else {
106                    html! {
107                        <>
108                            <span class="jinya-alert__title">{&self.title}</span>
109                            <span class="jinya-alert__message jinya-alert__message--multi-line">{&self.message}</span>
110                        </>
111                    }
112                }}
113            </div>
114        }
115    }
116}
117
118impl Alert {
119    fn get_alert_class(&self) -> String {
120        match self.alert_type {
121            AlertType::Primary => "jinya-alert jinya-alert--primary",
122            AlertType::Negative => "jinya-alert jinya-alert--negative",
123            AlertType::Positive => "jinya-alert jinya-alert--positive",
124            AlertType::Information => "jinya-alert jinya-alert--information",
125        }.to_string()
126    }
127}
jinya_ui/widgets/alert.rs

jinya_ui/widgets/
alert.rs
