nova_forms/components/
checkbox.rs

1use crate::{Datatype, QueryStringPart, FieldWiring};
2use leptos::*;
3
4/// A component that renders a checkbox.
5#[component]
6pub fn Checkbox<T>(
7    /// The label of the input field.
8    #[prop(into)] label: TextProp,
9    /// The query string that binds the input field to the form data.
10    #[prop(into)] bind: QueryStringPart,
11    /// The initial value of the input field.
12    #[prop(optional, into)] value: MaybeProp<T>,
13    /// A write signal that is updated with the parsed value of the input field.
14    #[prop(optional, into)] change: Option<Callback<Result<T, T::Err>, ()>>,
15    /// Set a custom error message for the input field.
16    #[prop(optional, into)] error: MaybeProp<TextProp>,
17) -> impl IntoView
18where
19    T: Datatype<Inner = bool>
20{    
21    let FieldWiring {
22        qs,
23        value,
24        error,
25        set_raw_value,
26        render_mode,
27        ..
28    } = FieldWiring::<T>::wire(bind, value, change, error, label.clone());
29    
30    let input_elem = html::input()
31        .attr("type", "checkbox")
32        .attr("id", qs.to_string())
33        .attr("name", qs.to_string())
34        .attr("checked", move || value.get().unwrap_or_default().into())
35        .attr("value", true.to_string())
36        .on(ev::input, move |ev| {
37            set_raw_value.call(event_target_checked(&ev).to_string());
38        });
39
40
41    view! {
42        <div
43            class="field checkbox"
44            class:error=move || error.get().is_some()
45            class:ok=move || error.get().is_none()
46        >
47        {move || {
48            if render_mode.get() {
49                // TODO
50                view! {
51                    <label for=qs.to_string()>
52                        {input_elem.clone()}
53                        <span class="custom-checkbox"></span>
54                        <span class="custom-checkbox-label">{label.clone()}</span>
55                    </label>
56                    {move || {
57                        if let Some(error) = error.get() {
58                            view! { <span class="error-message">{error}</span> }
59                                .into_view()
60                        } else {
61                            View::default()
62                        }
63                    }}
64                }.into_view()
65            } else {
66                view! {
67                    <label for=qs.to_string()>
68                        {input_elem.clone()}
69                        <span class="custom-checkbox"></span>
70                        <span class="custom-checkbox-label">{label.clone()}</span>
71                    </label>
72                    {move || {
73                        if let Some(error) = error.get() {
74                            view! { <span class="error-message">{error}</span> }
75                                .into_view()
76                        } else {
77                            View::default()
78                        }
79                    }}
80                }.into_view()
81            }
82        }}
83           
84        </div>
85    }
86}