/
lib.rs
79 lines (69 loc) · 2.16 KB
/
lib.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
#![recursion_limit = "256"]
mod input;
use input::InputComponent;
use stdweb::web::html_element::InputElement;
use stdweb::web::IHtmlElement;
use yew::prelude::*;
pub struct Model {
link: ComponentLink<Self>,
refs: Vec<NodeRef>,
focus_index: usize,
}
pub enum Msg {
HoverIndex(usize),
}
impl Component for Model {
type Message = Msg;
type Properties = ();
fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
Model {
link,
focus_index: 0,
refs: vec![NodeRef::default(), NodeRef::default()],
}
}
fn mounted(&mut self) -> ShouldRender {
if let Some(input) = self.refs[self.focus_index].cast::<InputElement>() {
input.focus();
}
false
}
fn update(&mut self, msg: Self::Message) -> ShouldRender {
match msg {
Msg::HoverIndex(index) => self.focus_index = index,
}
if let Some(input) = self.refs[self.focus_index].cast::<InputElement>() {
input.focus();
}
true
}
fn change(&mut self, _: Self::Properties) -> ShouldRender {
false
}
fn view(&self) -> Html {
html! {
<div class="main">
<h1>{ "Node Refs Demo" }</h1>
<p>{ "Refs can be used to access and manipulate DOM elements directly" }</p>
<ul>
<li>{ "First input will focus on mount" }</li>
<li>{ "Each input will focus on hover" }</li>
</ul>
<div>
<label>{ "Using tag ref: " }</label>
<input
type="text"
ref=self.refs[0].clone()
class="input-element"
onmouseover=self.link.callback(|_| Msg::HoverIndex(0)) />
</div>
<div>
<label>{ "Using component ref: " }</label>
<InputComponent
ref=self.refs[1].clone()
on_hover=self.link.callback(|_| Msg::HoverIndex(1)) />
</div>
</div>
}
}
}