yew_styles/components/forms/
form_label.rs

1use stylist::{css, StyleSource};
2use wasm_bindgen_test::*;
3use yew::prelude::*;
4use yew::{utils, App};
5
6/// # Form Label
7///
8/// ## Features required
9///
10/// forms
11///
12/// ## Example
13///
14/// ```rust
15/// use yew::prelude::*;
16/// use yew_styles::forms::{
17///     form_label::FormLabel,
18///     form_group::{FormGroup, Orientation},
19///     form_textarea::FormTextArea,
20/// };
21/// use yew_styles::styles::{Palette, Size};
22///
23/// pub struct FormLabelExample {
24///     pub link: ComponentLink<Self>,
25///     pub value: String,
26/// }
27///
28/// pub enum Msg {
29///     Input(String),
30/// }
31///
32/// impl Component for FormLabelExample {
33///     type Message = Msg;
34///     type Properties = ();
35///     fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
36///         FormLabelExample {
37///             link,
38///             value: "".to_string(),
39///         }
40///     }
41///     fn update(&mut self, msg: Self::Message) -> ShouldRender {
42///         match msg {
43///             Msg::Input(value) => {
44///                 self.value = value;
45///             }
46///         }
47///         true
48///     }
49///     fn change(&mut self, _props: Self::Properties) -> ShouldRender {
50///         false
51///     }
52///
53///     fn view(&self) -> Html {
54///         html!{
55///             <FormGroup orientation=Orientation::Vertical>
56///                 <FormLabel
57///                 text="Info small textarea"
58///                 />
59///                 <FormTextArea placeholder="write here"
60///                     value=form_page.value.clone()
61///                     textarea_size=Size::Small
62///                     textarea_style=Palette::Info
63///                     oninput_signal=form_page.link.callback(|e: InputData| Msg::Input(e.value))
64///                 />
65///             </FormGroup>
66///         }
67///     }
68/// ```
69pub struct FormLabel {
70    props: Props,
71}
72
73#[derive(Clone, PartialEq, Properties)]
74pub struct Props {
75    /// text of the label. Required
76    pub text: String,
77    /// General property to get the ref of the component
78    #[prop_or_default]
79    pub code_ref: NodeRef,
80    /// General property to add keys
81    #[prop_or_default]
82    pub key: String,
83    /// General property to add custom class styles
84    #[prop_or_default]
85    pub class_name: String,
86    /// General property to add custom id
87    #[prop_or_default]
88    pub id: String,
89    /// The id of a labelable form-related element in the same document as the <label> element
90    #[prop_or_default]
91    pub label_for: String,
92    /// Set css styles directly in the component
93    #[prop_or(css!(""))]
94    pub styles: StyleSource<'static>,
95}
96
97impl Component for FormLabel {
98    type Message = ();
99    type Properties = Props;
100
101    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
102        Self { props }
103    }
104
105    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
106        false
107    }
108
109    fn change(&mut self, props: Self::Properties) -> ShouldRender {
110        if self.props != props {
111            self.props = props;
112            true
113        } else {
114            false
115        }
116    }
117
118    fn view(&self) -> Html {
119        html! {
120            <label
121                class=classes!("form-label", self.props.class_name.clone(), self.props.styles.clone())
122                id=self.props.id.clone()
123                key=self.props.key.clone()
124                ref=self.props.code_ref.clone()
125                for=self.props.label_for.clone()
126            >{self.props.text.clone()}</label>
127        }
128    }
129}
130
131#[wasm_bindgen_test]
132fn should_create_form_label() {
133    let props = Props {
134        key: "".to_string(),
135        code_ref: NodeRef::default(),
136        class_name: "form-label-class-test".to_string(),
137        id: "form-label-id-test".to_string(),
138        label_for: "label-form".to_string(),
139        styles: css!("background-color: #918d94;"),
140        text: "label text".to_string(),
141    };
142
143    let form_label: App<FormLabel> = App::new();
144
145    form_label.mount_with_props(
146        utils::document().get_element_by_id("output").unwrap(),
147        props,
148    );
149
150    let form_label_element = utils::document()
151        .get_element_by_id("form-label-id-test")
152        .unwrap();
153
154    assert_eq!(
155        form_label_element.text_content().unwrap(),
156        "label text".to_string()
157    )
158}
yew_styles/components/forms/form_label.rs

yew_styles/components/forms/
form_label.rs
