vertigo_forms/form/render/
field.rs

1use vertigo::{DomElement, Value, bind, component, css, dom, dom_element};
2
3use crate::{DictSelect, DropImageFile, Select, SelectSearch, Switch, SwitchParams, input::Input};
4
5use super::super::{DataField, DataFieldValue};
6
7#[component]
8pub fn Field<'a>(field: &'a DataField) {
9    match &field.value {
10        DataFieldValue::String(val) => {
11            dom! { <Input input:name={&&field.key} value={val.value.clone()} /> }
12        }
13        DataFieldValue::TextArea(val) => {
14            let on_input = bind!(val.value, |new_value: String| {
15                value.set(new_value);
16            });
17            let el =
18                dom_element! { <textarea name={&&field.key} {on_input}>{&val.value}</textarea> };
19            if let Some(rows) = val.rows {
20                el.add_attr("rows", rows);
21            }
22            if let Some(cols) = val.cols {
23                el.add_attr("cols", cols);
24            }
25            el.into()
26        }
27        DataFieldValue::List(val) => {
28            dom! { <Select value={val.value.clone()} options={&val.options} /> }
29        }
30        DataFieldValue::Bool(val) => {
31            dom! {
32                <Switch i:name={&&field.key} value={&val.value} params={SwitchParams::checkbox()} />
33            }
34        }
35        DataFieldValue::Dict(val) => {
36            dom! { <DictSelect value={val.value.clone()} options={&val.options} /> }
37        }
38        DataFieldValue::Multi(val) => {
39            bind!(val.value, val.options, val.add_label,
40                val.value.render_value(move |vals| {
41                    let selects = DomElement::new("div");
42                    let row_css = css! {"
43                        display: flex;
44                    "};
45
46                    for (idx, tag_id) in vals.iter().enumerate() {
47                        let on_click = bind!(value, |_| value.change(|list| {
48                            list.remove(idx);
49                        }));
50                        selects.add_child(dom! {
51                        <div css={&row_css}>
52                            <SelectSearch value={tag_id.clone()} options={options.clone()} params={} />
53                            <button {on_click}>"x"</button>
54                        </div>
55                    });
56                    }
57
58                    selects.add_child({
59                        let on_click = bind!(value, |_| value
60                            .change(|list| list.push(Value::new(0))));
61                        dom! {
62                            <button {on_click}>{&add_label}</button>
63                        }
64                    });
65
66                    selects.into()
67                })
68            )
69        }
70        DataFieldValue::Image(val) => {
71            let params = val.component_params.clone().unwrap_or_default();
72            dom! { <DropImageFile
73                item={val.value.clone()}
74                original_link={val.original_link.clone()}
75                {params}
76            /> }
77        }
78        DataFieldValue::Custom(val) => (val.render)(),
79        DataFieldValue::StaticCustom(render) => render(),
80    }
81}