yew-bulma 0.0.1

Yew components compatible with the Bulma CSS framework
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
75
76
77
78
79
80
81
82
83
84
85
86
87

use crate::{forms::button::Button, modal::Modal, title::Title};
use yew::prelude::*;

pub struct Alert {
    props: Props,
}

#[derive(Clone, Properties)]
pub struct Props {
    pub visible: bool,
    pub title: String,
    pub message: String,
    pub primary_button_label: String,
    #[prop_or("is-danger".to_owned())]
    pub primary_button_class: String,
    pub primary_button_action: Callback<MouseEvent>,
    #[prop_or_default]
    pub cancel_button_label: String,
    #[prop_or_default]
    pub cancel_button_action: Callback<MouseEvent>,
    #[prop_or_default]
    pub cancel_button_class: String,
}

impl Component for Alert {
    type Message = ();
    type Properties = Props;

    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
        Self { props }
    }

    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
        false
    }
    fn change(&mut self, props: Self::Properties) -> ShouldRender {
        self.props = props;
        true
    }

    fn view(&self) -> Html {
        html! {
            <Modal visible=self.props.visible>
                <div class="box">
                    <Title>{ &self.props.title }</Title>
                    <p>{ &self.props.message }</p>
                    { self.buttons() }
                </div>
            </Modal>
        }
    }
}

impl Alert {
    fn buttons(&self) -> Html {
        let cancel_button = if self.props.cancel_button_label.is_empty() {
            Html::default()
        } else {
            html! {
                <Button
                    label=&self.props.cancel_button_label
                    css_class=&self.props.cancel_button_class
                    action=self.props.cancel_button_action.clone()
                />
            }
        };

        html! {
            <div class="level">
                <div class="level-left">
                    <div class="level-item">
                        {cancel_button}
                    </div>
                </div>
                <div class="level-right">
                    <div class="level-item">
                        <Button
                            label=&self.props.primary_button_label
                            css_class=&self.props.primary_button_class
                            action=self.props.primary_button_action.clone()
                        />
                    </div>
                </div>
            </div>
        }
    }
}