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::web_sys::HtmlTextAreaElement;
use crate::*;

#[derive(Properties, PartialEq)]
pub struct InputMessageProps {
    #[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(InputMessage)]
pub fn input_message(props: &InputMessageProps) -> Html {
    let my_id = match &props.cache_id {
        Some(id) => id.to_string(),
        None => interop::get_uuid().to_owned(),
    };
    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| match ev.target() {
            Some(target) => {
                let value = target.unchecked_into::<HtmlTextAreaElement>().value();
                inputref.set(value);
            }
            None => (),
        })
    };
    let changeref = props.value.clone();
    let onchange_handler = props.onchange.clone().unwrap_or(Callback::from(|_| ()));
    let onchange = {
        Callback::from(move |ev: Event| match ev.target() {
            Some(target) => {
                let value = target.unchecked_into::<HtmlTextAreaElement>().value();
                changeref.set(value.to_string());
                onchange_handler.emit(ev.clone());
            }
            None => (),
        })
    };
    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">
                <pre><code>{props.value.to_string()}</code></pre>
                <textarea name={props.key.to_owned()}
                    id={my_id.to_owned()}
                    {oninput}
                    {onchange}
                    {placeholder}
                    >{props.value}</textarea>
            </div>
        </InputField>
    }
}