nes_yew/components/
text_input.rs

1use std::borrow::Cow;
2use web_sys::HtmlInputElement;
3use yew::prelude::*;
4
5#[derive(Properties, PartialEq)]
6pub struct TextInputProps {
7    pub label: Option<AttrValue>,
8    pub placeholder: Option<AttrValue>,
9    #[prop_or(AttrValue::from(""))]
10    pub value: AttrValue,
11    pub on_change: Option<Callback<HtmlInputElement>>,
12    #[prop_or_default]
13    pub success: bool,
14    #[prop_or_default]
15    pub warning: bool,
16    #[prop_or_default]
17    pub error: bool,
18    #[prop_or_default]
19    pub label_inline: bool,
20    pub class: Option<Cow<'static, str>>,
21    pub style: Option<AttrValue>,
22}
23
24#[function_component(TextInput)]
25pub fn text_input(
26    TextInputProps {
27        label,
28        placeholder,
29        success,
30        warning,
31        error,
32        value,
33        on_change,
34        label_inline,
35        class,
36        style,
37    }: &TextInputProps,
38) -> Html {
39    let on_change = on_change.clone();
40    html! {
41        <div class={classes!("nes-field", if *label_inline { Some("is-inline") } else { None })}>
42            {label.as_ref().map(|l| html!{<label for="name">{l}</label>})}
43            <input
44                type="text"
45                value={value.clone()}
46                onchange={Callback::from(move |e: Event| if let Some(on_change) = on_change.clone() { on_change.emit(e.target_dyn_into::<HtmlInputElement>().unwrap()) })}
47                placeholder={placeholder.clone()}
48                class={classes!(
49                    class,
50                    "nes-input",
51                    if *success { Some("is-success") } else { None },
52                    if *warning { Some("is-warning") } else { None },
53                    if *error { Some("is-error") } else { None },
54                )}
55                style={style.clone()}
56            />
57        </div>
58    }
59}