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

// 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 position;

use yew::{classes, html, AttrValue, Children, Html, Properties};
use yew::{function_component, Classes};
use zu_util::prop::ToAttr;

use crate::stack::Stack;
use crate::styles::flex_direction::FlexDirection;
use crate::styles::position::Position;
use crate::typography::Typography;

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

    #[prop_or_default]
    pub classes: Classes,

    /// If true, the component appears selected.
    #[prop_or(false)]
    pub checked: bool,

    /// A control element.
    #[prop_or_default]
    pub control: Html,

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

    /// If true, the label is rendered as it is passed without an additional typography node.
    #[prop_or(false)]
    pub disable_typography: bool,

    // TODO(Shaohua): Add error state.
    #[prop_or(false)]
    pub error: bool,

    /// A text or an element to be used in an enclosing label element.
    #[prop_or_default]
    pub label: Html,

    #[prop_or(Position::End)]
    pub label_position: Position,

    /// If true, the label will indicate that the input is required.
    #[prop_or(false)]
    pub required: bool,

    #[prop_or_default]
    pub style: AttrValue,

    /// The value of the component.
    #[prop_or_default]
    pub value: AttrValue,
}

#[function_component(FormControlLabel)]
pub fn form_control_label(props: &Props) -> Html {
    let root_cls = classes!(
        "ZuFormControlLabel-root",
        if props.disabled {
            "ZuFormControlLabel-disabled"
        } else {
            ""
        },
        position::css_class(props.label_position),
        if props.error {
            "ZuFormControlLabel-error"
        } else {
            ""
        },
        if props.required {
            "ZuFormControlLabel-required"
        } else {
            ""
        },
        props.classes.clone(),
    );

    let label_cls = classes! {
        "ZuFormControlLabel-label",
        if props.disabled {
            "ZuFormControlLabel-disabled"
        } else {
            ""
        }
    };
    let asterisk_cls = classes! {
        "ZuFormControlLabel-asterisk",
        if props.error {
            "ZuFormControlLabel-error"
        } else {
            ""
        }
    };

    // TODO(Shaohua): Check label is null.
    // TODO(Shaohua): Pass disabled to props.control
    // TODO(Shaohua): Pass required to props.control
    let required = props.required;

    let label_elem = html! {
        <Typography classes={label_cls}>
            {props.label.clone()}
        </Typography>
    };

    html! {
        <label class={root_cls} style={props.style.to_attr()}>
            {props.control.clone()}

            if required {
                <Stack direction={FlexDirection::Row}>
                {label_elem.clone()}
                <span
                    aria-hidden="true"
                    class={asterisk_cls}>
                    {"\u{2009}*"}
                </span>
                </Stack>
            } else {
                {label_elem}
            }
        </label>
    }
}