yewprint 0.5.0

Port of blueprintjs.com to Yew
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
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
128
129
130
131

use crate::{Button, Dialog, Icon, Intent};
use yew::prelude::*;

#[derive(Debug)]
pub struct Alert {
    cb: AlertMsgCallbacks<Self>,
}

#[derive(Debug, PartialEq, Properties)]
pub struct AlertProps {
    #[prop_or_default]
    pub dark: Option<bool>,
    #[prop_or_default]
    pub class: Classes,
    #[prop_or_default]
    pub style: Option<AttrValue>,
    #[prop_or_default]
    pub open: bool,
    #[prop_or_default]
    pub icon: Option<Icon>,
    #[prop_or_default]
    pub intent: Option<Intent>,
    #[prop_or_default]
    pub loading: bool,
    #[prop_or(html!("OK"))]
    pub confirm_button: Html,
    #[prop_or_default]
    pub cancel_button: Option<Html>,
    #[prop_or_default]
    pub onclose: Callback<bool>,
    #[prop_or_default]
    pub children: Children,
}

#[derive(yew_callbacks::Callbacks)]
pub enum AlertMsg {
    OnCancel,
    OnConfirmClick(MouseEvent),
    OnCancelClick(MouseEvent),
}

impl Component for Alert {
    type Properties = AlertProps;
    type Message = AlertMsg;

    fn create(ctx: &Context<Self>) -> Self {
        Self {
            cb: ctx.link().into(),
        }
    }

    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
        let Self::Properties { onclose, .. } = ctx.props();
        let Self::Properties { loading, .. } = ctx.props();

        match msg {
            AlertMsg::OnCancel => {
                if !loading {
                    onclose.emit(false);
                }
                false
            }
            AlertMsg::OnConfirmClick(_event) => {
                if !loading {
                    onclose.emit(true);
                }
                false
            }
            AlertMsg::OnCancelClick(_event) => {
                if !loading {
                    onclose.emit(false);
                }
                false
            }
        }
    }

    fn view(&self, ctx: &Context<Self>) -> Html {
        let Self::Properties {
            dark,
            class,
            style,
            open,
            icon,
            intent,
            loading,
            confirm_button,
            cancel_button,
            onclose: _,
            children,
        } = ctx.props();

        let cancel_button_html = cancel_button.clone().map(|x| {
            html! {
                <Button
                    disabled={loading}
                    onclick={self.cb.on_cancel_click()}
                >
                    {x}
                </Button>
            }
        });

        html! {
            <Dialog
                {dark}
                class={classes!("bp3-alert", class.clone())}
                {style}
                {open}
                onclose={self.cb.on_cancel()}
            >
                <div class={classes!("bp3-alert-body")}>
                    <Icon {icon} size={40} {intent} />
                    <div class={classes!("bp3-alert-contents")}>
                        {for children.iter()}
                    </div>
                </div>
                <div class={classes!("bp3-alert-footer")}>
                    <Button
                        {loading}
                        {intent}
                        onclick={self.cb.on_confirm_click()}
                    >
                        {confirm_button.clone()}
                    </Button>
                    {cancel_button_html}
                </div>
            </Dialog>
        }
    }
}