/
macro_style.rs
99 lines (97 loc) · 3.91 KB
/
macro_style.rs
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
95
96
97
98
99
use rtml::{button, form, input, label, option, p, select, IntoReactive, Reactive};
use wasm_bindgen::JsValue;
use web_sys::{Event, HtmlInputElement};
pub fn macro_form() -> rtml::tags::Form {
let errors: Reactive<Vec<String>> = vec![].reactive();
let name = String::new().reactive();
let age = 0u8.reactive();
form! {
#{id="app"}
|| (
p! {|errors| errors.val().iter().map(rtml::tags::li).collect::<Vec<_>>()},
p! {|| (
label! {#{for="name"} || "Name"},
input!(
# {id="name" type="text" name="name"}
:name => |ele| {
let input: HtmlInputElement = JsValue::from(ele).into();
input.set_value(&name.val());
};
@blur = name, errors => |evt: Event| {
let mut update = false;
if let Some(target) = evt.target() {
let input: HtmlInputElement = JsValue::from(target).into();
let val = input.value();
if val.len() > 10 {
update = true;
errors.val_mut().push("name is too long".into());
}
*name.val_mut() = val;
}
update
};
)
)},
p! {|| (
label! {#{for="age"} || "Age"},
input!(
# {id="age" type="number" name="age" min="0" value="0"}
: age => |ele| {
let input: HtmlInputElement = JsValue::from(ele).into();
input.set_value(&age.val().to_string());
};
@blur = age, errors => |evt: Event| {
let mut update = false;
if let Some(target) = evt.target() {
let input: HtmlInputElement = JsValue::from(target).into();
match input.value().parse::<u8>() {
Ok(val) => {
*age.val_mut() = val;
}
Err(e) => {
errors.val_mut().push(e.to_string());
update = true;
}
}
}
update
};
)
)},
p!{|| (
label!{#{for="movie"} || "Favorite Movie"},
select!(#{id="movie" name="movie"} || (
option!(|| "Star Wars"),
option!(|| "Vanilla Sky"),
option!(|| "Atomic Blonde"),
))
)},
p! {|| (
input! {
#{type="submit" value="submit"}
@click = name, age, errors => |evt: Event| {
errors.val_mut().clear();
if name.val().is_empty() {
errors.val_mut().push("Name is required".into());
}
if *age.val() == 0 {
errors.val_mut().push("age should > 0".into());
}
evt.prevent_default();
true
};
},
button! {
#{type="button"}
@click = name, age, errors => |_| {
name.val_mut().clear();
*age.val_mut() = 0;
errors.val_mut().clear();
true
};
|| "Reset"
}
)},
)
}
}