zu 0.3.3

Yew web components, implementing Material Design
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

// Copyright (c) 2024 Xu Shaohua <shaohua@biofan.org>. All rights reserved.
// Use of this source is governed by Lesser General Public License
// that can be found in the LICENSE file.

mod color;
mod size;
mod variant;

use std::f64::consts::PI;
use yew::{classes, function_component, html, AttrValue, Html, Properties};

use crate::styles::color::Color;
use crate::styles::CssClass;

// Re-export
pub use size::Size;
pub use variant::Variant;

const SIZE: i32 = 44;
const SIZE_STR: &str = "44";

#[derive(Debug, Clone, PartialEq, Properties)]
pub struct Props {
    #[prop_or_default]
    pub color: Color,

    /// The size of the component. Default is 40px.
    #[prop_or(Size::Num(40))]
    pub size: Size,

    /// The thickness of the circle.
    #[prop_or(3.6)]
    pub thickness: f64,

    /// The value of the progress indicator for the determinate variant.
    ///
    /// Value between 0 and 100.
    #[prop_or(0)]
    pub value: i32,

    /// Use indeterminate when there is no progress value.
    #[prop_or_default]
    pub variant: Variant,

    /// If true, the shrink animation is disabled.
    ///
    /// This only works if variant is indeterminate.
    #[prop_or(false)]
    pub disable_shrink: bool,

    /// Override root style.
    #[prop_or_default]
    pub style: AttrValue,

    /// Show label or not.
    ///
    /// This only works if variant is determinate.
    #[prop_or(false)]
    pub with_label: bool,
}

#[function_component(CircularProgress)]
pub fn circular_progress(props: &Props) -> Html {
    let cls = classes!(
        "ZuCircularProgress-root",
        props.variant.css_class(),
        color::css_class(props.color),
    );

    let size_style = props.size.css_value();
    let svg_style = [props.style.as_str(), &props.color.text_color(), &size_style].join(";");

    let radius: f64 = (f64::from(SIZE) - props.thickness) / 2.0;
    let mut circle_styles = vec![];
    if props.variant == Variant::Determinate && props.value >= 0 {
        let circumference = 2.0 * radius * PI;
        let stroke_dasharray = circumference;
        let stroke_dashoffset = (f64::from(100 - props.value) / 100.0) * circumference;

        circle_styles.push(format!("stroke-dasharray: {stroke_dasharray}px",));
        circle_styles.push(format!("stroke-dashoffset: {stroke_dashoffset}px",));
    };
    let circle_style = circle_styles.join(";");

    // TODO(Shaohua): Convert type to Option<String>
    let label = if props.with_label {
        format!("{}%", props.value)
    } else {
        String::new()
    };

    let progress = html! {
        <span class={cls} style={svg_style}>
            <svg class="ZuCircularProgress-svg"
                viewBox={format!("{} {} {SIZE} {SIZE}", SIZE / 2, SIZE / 2)}>
                <circle class="ZuCircularProgress-circle"
                    style={circle_style}
                    cx={SIZE_STR}
                    cy={SIZE_STR}
                    r={radius.to_string()}
                    fill="none"
                    stroke-width={props.thickness.to_string()}></circle>
            </svg>
        </span>
    };

    if !props.with_label {
        return progress;
    }

    // TODO(Shaohua): Replace with <Caption>
    html! {
        <div class="ZuCircularProgress-labelContainer"
            style={size_style}>
            {progress}
            <span class="ZuCircularProgress-label" title={label.clone()}>{label}</span>
        </div>
    }
}