vertigo-forms 0.1.3

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

use vertigo::{AttrGroup, Value, bind, component, dom, transaction};

pub enum DisplayType {
    Button,
    CheckBox,
}

pub struct SwitchParams {
    pub display_type: DisplayType,
    pub on_symbol: String,
    pub off_symbol: String,
}

impl Default for SwitchParams {
    fn default() -> Self {
        Self {
            display_type: DisplayType::Button,
            on_symbol: "ON".to_string(),
            off_symbol: "OFF".to_string(),
        }
    }
}

impl SwitchParams {
    pub fn checkbox() -> Self {
        Self {
            display_type: DisplayType::CheckBox,
            on_symbol: "".to_string(),
            off_symbol: "".to_string(),
        }
    }
}

/// Simple toggle control connected to `Value<bool>`.
///
/// Example:
/// ```
/// use vertigo::{Value, dom};
/// use vertigo_forms::{Switch, SwitchParams};
///
/// let toggle_value = Value::new(false);
/// dom! {
///     <Switch
///         value={&toggle_value}
///         params={}
///     />
/// };
/// ```
#[component]
pub fn Switch(value: Value<bool>, params: SwitchParams, i: AttrGroup) {
    let toggle = bind!(value, |_| transaction(|ctx| value.set(!value.get(ctx))));

    match params.display_type {
        DisplayType::Button => {
            let symbol = value.map(move |value| {
                if value {
                    params.on_symbol.clone()
                } else {
                    params.off_symbol.clone()
                }
            });

            dom! {
                <button on_click={toggle} {..i}>{symbol}</button>
            }
        }
        DisplayType::CheckBox => {
            let value_clone = value.clone();
            value.render_value(move |value_inner| {
                let toggle = bind!(value_clone, |_| transaction(
                    |ctx| value_clone.set(!value_clone.get(ctx))
                ));
                let i = i.clone();
                if value_inner {
                    dom! {
                        <input type="checkbox" on_click={toggle} checked="checked" {..i} />
                    }
                } else {
                    dom! {
                        <input type="checkbox" on_click={toggle} {..i} />
                    }
                }
            })

            // Following doesn't work as browsers reads attribute 'checked' only on first render
            // let checked = value.map(move |value|
            //     if value { Some("checked".to_string()) } else { None }
            // );
            // dom! {
            //     <input type="checkbox" on_click={toggle} checked={checked} />
            // }
        }
    }
}