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

use crate::icon::IconSize;
use crate::{Icon, Intent};
use yew::prelude::*;
use yew::virtual_dom::AttrValue;

#[derive(Clone, PartialEq, Properties)]
pub struct CalloutProps {
    #[prop_or_default]
    pub class: Classes,
    #[prop_or(false)]
    pub without_icon: bool,
    #[prop_or_default]
    pub icon: Option<Icon>,
    #[prop_or_default]
    pub intent: Option<Intent>,
    #[prop_or_default]
    pub title: Option<AttrValue>,
    pub children: Children,
}

#[function_component(Callout)]
pub fn callout(
    CalloutProps {
        class,
        without_icon,
        icon,
        intent,
        title,
        children,
    }: &CalloutProps,
) -> Html {
    let icon = if *without_icon {
        None
    } else if let Some(icon) = icon.clone() {
        Some(icon)
    } else {
        intent.map(|intent| match intent {
            Intent::Primary => Icon::InfoSign,
            Intent::Success => Icon::Tick,
            Intent::Warning => Icon::WarningSign,
            Intent::Danger => Icon::Error,
        })
    };

    html! {
        <div
            class={classes!(
                "bp3-callout",
                icon.is_some().then_some("bp3-callout-icon"),
                intent,
                class.clone(),
            )}
        >
            <Icon {icon} size={IconSize::LARGE} />
            {
                title.iter()
                    .map(|title| html!{<h4 class={"bp3-heading"}>{title}</h4>})
                    .collect::<Html>()
            }
            {children.clone()}
        </div>
    }
}