Allow ratio or percentage in <ProgressBar/> (#162)

src/progress_bar.rs

@@ -1,20 +1,54 @@
 use crate::Intent;
+use yew::html::IntoPropValue;
 use yew::prelude::*;
 
-#[derive(Clone, PartialEq, Properties)]
+#[derive(Debug, Clone, PartialEq, Properties)]
 pub struct ProgressBarProps {
     #[prop_or_default]
     pub animate: bool,
     #[prop_or_default]
     pub stripes: bool,
-    #[prop_or_default]
-    pub value: Option<f32>,
+    #[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 {
@@ -25,12 +59,8 @@ pub fn progress_bar(
         class,
     }: &ProgressBarProps,
 ) -> Html {
-    let style = if let Some(value) = value {
-        let percent = value * 100.0;
-        AttrValue::from(format!("width: {}%;", percent))
-    } else {
-        "".into()
-    };
+    let percent = (value.0 * 100.0).clamp(0.0, 100.0);
+    let style = format!("width: {}%", percent);
 
     html! {
         <div
@@ -42,7 +72,7 @@ pub fn progress_bar(
                 class.clone(),
             )}
         >
-            <div class={classes!("bp3-progress-meter")} {style}/>
+            <div class={classes!("bp3-progress-meter")} {style} />
         </div>
     }
 }

yewprint-doc/src/lib.rs

@@ -86,9 +86,10 @@ macro_rules! build_source_code_component {
                     .to_str()
                     .unwrap();
 
-                if let (Some(actor), Some(branch)) =
-                    (option_env!("GITHUB_ACTOR"), option_env!("GITHUB_HEAD_REF"))
-                {
+                if let (Some(actor), Some(branch)) = (
+                    option_env!("GITHUB_ACTOR").filter(|x| !x.is_empty()),
+                    option_env!("GITHUB_HEAD_REF").filter(|x| !x.is_empty()),
+                ) {
                     format!("https://github.com/{actor}/yewprint/blob/{branch}/src/{component}.rs")
                 } else {
                     format!("https://github.com/yewprint/yewprint/blob/HEAD/src/{component}.rs")

yewprint-doc/src/progress_bar/example.rs

@@ -15,7 +15,7 @@ pub fn example(props: &ExampleProps) -> Html {
             animate={props.animate}
             stripes={props.stripes}
             intent={props.intent}
-            value=0.3
+            value=30_u8
         />
     }
 }