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
120
121
122
123
124
125
126
127
128
129
130
131
132
133

// 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 radio_button_icon;
mod size;

use yew::{classes, function_component, html, AttrValue, Callback, Classes, Html, Properties};

use crate::styles::color::Color;
use crate::styles::size::Size;
use crate::switch_base::{SwitchBase, Variant};
use radio_button_icon::RadioButtonIcon;

#[derive(Debug, Clone, PartialEq, Properties)]
pub struct Props {
    /// If `true`, the component is checked.
    #[prop_or(false)]
    pub checked: bool,

    /// The icon to display when the component is checked.
    ///
    /// Default is `<RadioButtonChecked />`
    #[prop_or_default]
    pub checked_icon: Option<Html>,

    /// Override or extend the styles applied to the component.
    #[prop_or_default]
    pub classes: Classes,

    /// The color of the component.
    #[prop_or_default]
    pub color: Color,

    /// If `true`, the component is checked by default.
    #[prop_or(false)]
    pub default_checked: bool,

    /// If `true`, the component is disabled.
    #[prop_or(false)]
    pub disabled: bool,

    /// If `true`, the ripple effect is disabled.
    #[prop_or(false)]
    pub disable_ripple: bool,

    /// The icon to display when the component is unchecked.
    ///
    /// Default is `<RadioButtonUnchecked />`.
    #[prop_or_default]
    pub icon: Option<Html>,

    /// The id of the `input` element.
    #[prop_or_default]
    pub id: AttrValue,

    #[prop_or_default]
    pub input_aria_label: AttrValue,

    /// Name attribute of the `input` element.
    #[prop_or_default]
    pub name: AttrValue,

    /// Callback fired when the state is changed.
    #[prop_or_default]
    pub on_change: Option<Callback<String>>,

    /// If `true`, the `input` element is required.
    #[prop_or(false)]
    pub required: bool,

    /// The size of the component.
    ///
    /// `Size::Small` is equivalent to the dense radio styling.
    #[prop_or_default]
    pub size: Size,

    #[prop_or_default]
    pub style: AttrValue,

    /// The value of the component. The DOM API casts this to a string.
    #[prop_or_default]
    pub value: AttrValue,
}

#[function_component(Radio)]
pub fn radio(props: &Props) -> Html {
    let root_cls = classes!(
        "ZuRadio-root",
        color::css_class(props.color),
        size::css_class(props.size),
        if props.disable_ripple {
            ""
        } else {
            "ZuRadio-enableRipple"
        },
        props.classes.clone(),
    );

    // TODO(Shaohua): Sync check state to checked_icon.

    let font_size = props.size.to_font_size();
    let checked_icon = props.checked_icon.as_ref().map_or_else(
        || html! {<RadioButtonIcon checked={true} {font_size} />},
        Clone::clone,
    );
    let icon = props
        .icon
        .as_ref()
        .map_or_else(|| html! {<RadioButtonIcon {font_size} />}, Clone::clone);

    html! {
        <SwitchBase
            aria_label={&props.input_aria_label}
            classes={root_cls}
            checked={props.checked}
            checked_icon={checked_icon}
            default_checked={props.default_checked}
            disabled={props.disabled}
            disable_focus_ripple={props.disable_ripple}
            icon={icon}
            id={&props.id}
            name={&props.name}
            required={props.required}
            size={props.size}
            style={&props.style}
            value={&props.value}
            variant={Variant::Radio}
        >
        </SwitchBase>
    }
}