Skip to main content

orbital_base_components/form/textarea/
base.rs

1use leptos::{ev, html, prelude::*};
2
3use crate::form::bind::FormBind;
4use crate::form::field_injection::FieldInjection;
5use crate::form::types::{TextareaResize, TextareaSize};
6use crate::ComponentRef;
7
8use super::r#ref::TextareaRef;
9
10/// Headless native `<textarea>`.
11#[component(transparent)]
12pub fn BaseTextarea(
13    #[prop(optional, into)] class: MaybeProp<String>,
14    #[prop(optional, into)] size: MaybeProp<String>,
15    #[prop(optional, into)] resize: MaybeProp<String>,
16    #[prop(optional, into)] id: MaybeProp<String>,
17    #[prop(optional, into)] name: MaybeProp<String>,
18    #[prop(optional, into)] value: FormBind<String>,
19    #[prop(optional, into)] placeholder: MaybeProp<String>,
20    #[prop(optional, into)] disabled: Signal<bool>,
21    #[prop(optional, into)] textarea_size: Signal<TextareaSize>,
22    #[prop(optional, into)] textarea_resize: Signal<TextareaResize>,
23    #[prop(optional)] comp_ref: ComponentRef<TextareaRef>,
24) -> impl IntoView {
25    let _ = (textarea_size, textarea_resize);
26    let (id, name) = FieldInjection::use_id_and_name(id, name);
27    let textarea_ref = NodeRef::<html::Textarea>::new();
28    comp_ref.load(TextareaRef::new(textarea_ref));
29
30    let value_bind = value.clone();
31    let on_input = move |ev: ev::Event| {
32        value_bind.set(event_target_value(&ev));
33    };
34
35    view! {
36        <textarea
37            class=move || {
38                let mut parts = Vec::new();
39                if let Some(c) = class.get() {
40                    if !c.is_empty() {
41                        parts.push(c);
42                    }
43                }
44                if let Some(c) = size.get() {
45                    if !c.is_empty() {
46                        parts.push(c);
47                    }
48                }
49                if let Some(c) = resize.get() {
50                    if !c.is_empty() {
51                        parts.push(c);
52                    }
53                }
54                parts.join(" ")
55            }
56            id=id
57            name=name
58            placeholder=move || placeholder.get()
59            disabled=move || disabled.get().then_some("")
60            prop:value=move || value.get()
61            on:input=on_input
62            node_ref=textarea_ref
63        />
64    }
65}