sascha_10_post_message_input/
MessageInput.rs

1use web_sys::{InputEvent, MouseEvent};
2use yew::{function_component, html, use_state, Callback, Properties};
3
4#[derive(Clone, PartialEq, Properties)]
5pub struct MessageInputProps {
6    #[prop_or_default(Callback::from(|_| ()))]
7    pub on_post_message: Callback<String>,
8}
9
10#[function_component(MessageInput)]
11pub fn message_input(props: &MessageInputProps) -> Html {
12    let text = use_state(|| String::from(""));
13    let oninput = {
14        let text = text.clone();
15        Callback::from(move |input: InputEvent| {
16            match input.data() {
17                Some(value) => text.set((*text).clone() + &value),
18                None => text.set(String::from("")) // TODO: <BACKSPACE> <ENTF> <ENTER> needs to be handled
19            };
20        })
21    };
22
23    let onclick = {
24        let on_post_message = props.on_post_message.clone();
25        let text = text.clone();
26        Callback::from(move |e: MouseEvent| {
27            on_post_message.emit(String::from((*text).clone()));
28            text.set(String::from(""));
29        }) 
30    };
31
32    html! {
33        <div class="message-input">
34            <textarea maxlength="200" rows="7" value={(*text).clone()} {oninput}></textarea>
35            <button {onclick}>{"Post"}</button>
36        </div>
37    }
38}
sascha_10_post_message_input/MessageInput.rs

sascha_10_post_message_input/
MessageInput.rs
