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} />
// }
}
}
}