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

use crate::prelude::*;
use web_sys::HtmlInputElement;

#[derive(Properties, PartialEq)]
pub struct InputTextProps {
    #[prop_or_default]
    pub name: String,
    #[prop_or_default]
    pub key: String,
    pub value: UseStateHandle<String>,
    #[prop_or_default]
    pub class: String,
    #[prop_or_default]
    pub placeholder: String,
    #[prop_or_default]
    pub style: String,
    #[prop_or_default]
    pub cache_id: Option<String>,
    #[prop_or_default]
    pub onchange: Option<Callback<Event>>,
}

#[function_component(InputText)]
pub fn input_message(props: &InputTextProps) -> Html {
    let my_id = match &props.cache_id {
        Some(id) => id.to_string(),
        None => interop::get_uuid(),
    };
    let classes = &mut Classes::new();
    classes.push("input-message");
    if !props.class.is_empty() {
        classes.push(&props.class);
    }
    let inputref = props.value.clone();
    let oninput = {
        Callback::from(move |ev: InputEvent| {
            if let Some(target) = ev.target() {
                let value = target.unchecked_into::<HtmlInputElement>().value();
                inputref.set(value);
            }
        })
    };
    let changeref = props.value.clone();
    let onchange_handler = props.onchange.clone().unwrap_or(Callback::from(|_| ()));
    let onchange = {
        Callback::from(move |ev: Event| {
            if let Some(target) = ev.target() {
                let value = target.unchecked_into::<HtmlInputElement>().value();
                changeref.set(value);
                onchange_handler.emit(ev);
            }
        })
    };
    let placeholder = if props.placeholder.is_empty() {
        "Type text here".to_string()
    } else {
        props.placeholder.to_string()
    };
    html! {
        <InputField id={my_id.to_owned()}
            name={props.name.to_owned()}
            class={classes.to_string()}
            >
            <div class="auto_message_box single-line">
                <pre><code>{props.value.to_string()}</code></pre>
                <input type="text"
                    name={props.key.to_owned()}
                    id={my_id.to_owned()}
                    value={props.value.to_string()}
                    {oninput}
                    {onchange}
                    {placeholder}
                    />
            </div>
        </InputField>
    }
}