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

use crate::Intent;
use yew::html::IntoPropValue;
use yew::prelude::*;

#[derive(Debug, Clone, PartialEq, Properties)]
pub struct ProgressBarProps {
    #[prop_or_default]
    pub animate: bool,
    #[prop_or_default]
    pub stripes: bool,
    #[prop_or(RatioOrPercentage(1.0))]
    pub value: RatioOrPercentage,
    #[prop_or_default]
    pub intent: Option<Intent>,
    #[prop_or_default]
    pub class: Classes,
}

#[derive(Debug, Clone, Copy, PartialEq)]
pub struct RatioOrPercentage(f64);

impl IntoPropValue<RatioOrPercentage> for f64 {
    fn into_prop_value(self) -> RatioOrPercentage {
        RatioOrPercentage(self)
    }
}

impl IntoPropValue<RatioOrPercentage> for f32 {
    fn into_prop_value(self) -> RatioOrPercentage {
        RatioOrPercentage(self.into())
    }
}

macro_rules! generate_into_prop_value_integers {
    ($($ty:ty,)*) => {
        $(
        impl IntoPropValue<RatioOrPercentage> for $ty {
            fn into_prop_value(self) -> RatioOrPercentage {
                RatioOrPercentage(self as f64 / 100.0)
            }
        }
        )*
    };
}

#[rustfmt::skip]
generate_into_prop_value_integers!(
    u8, u16, u32,
    i8, i16, i32,
);

#[function_component(ProgressBar)]
pub fn progress_bar(
    ProgressBarProps {
        animate,
        stripes,
        value,
        intent,
        class,
    }: &ProgressBarProps,
) -> Html {
    let percent = (value.0 * 100.0).clamp(0.0, 100.0);
    let style = format!("width: {}%", percent);

    html! {
        <div
            class={classes!(
                "bp3-progress-bar",
                intent,
                (!animate).then_some("bp3-no-animation"),
                (!stripes).then_some("bp3-no-stripes"),
                class.clone(),
            )}
        >
            <div class={classes!("bp3-progress-meter")} {style} />
        </div>
    }
}