vertigo-forms 0.2.1

Building block for forms in vertigo
Documentation 
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

use std::ops::Not;

use vertigo::{Computed, DomNode, Value, bind, computed_tuple, dom, render::render_list};

/// Simple Select component based on vector of `T` values.
///
/// Example:
/// ```
/// use vertigo::{DomNode, dom, Value};
/// use vertigo_forms::Select;
///
/// let value = Value::new("foo".to_string());
/// let options = Value::new(
///     vec![
///         "foo".to_string(),
///         "bar".to_string(),
///         "baz".to_string(),
///     ]
/// );
///
/// dom! {
///     <Select
///         value={value.clone()}
///         options={options}
///     />
/// };
/// ```
pub struct Select<T: Clone + PartialEq + 'static> {
    pub value: Value<T>,
    pub options: Computed<Vec<T>>,
}

impl<T> Select<T>
where
    T: Clone + From<String> + PartialEq + ToString + 'static,
{
    pub fn into_component(self) -> Self {
        self
    }

    pub fn mount(&self) -> DomNode {
        let Self { value, options } = self;
        let on_change = bind!(value, |new_value: String| {
            value.set(new_value.into());
        });

        let empty = computed_tuple!(value, options).render_value_option(|(value, options)| {
            options
                .contains(&value)
                .not()
                .then(|| dom! { <option value="" selected="selected" /> })
        });

        let list = render_list(options, |item| item.to_string(), {
            let value = value.clone();
            move |item: &Computed<T>| {
                let item = item.clone();
                let text_item = item.map(|item| item.to_string());
                let selected = computed_tuple!(item, value)
                    .map(|(item, value)| (item == value).then(|| "selected".to_string()));
                dom! { <option value={&text_item} {selected}>{text_item}</option> }
            }
        });

        dom! {
            <select {on_change}>
                {empty}
                {list}
            </select>
        }
    }
}