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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
|
<!doctype html>
<!--
title: React
order: 3
layout: page
-->
<html>
<head>
<title>vaadin-core-elements Code Examples - React Integration</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="common.html">
</head>
<body unresolved>
<h1>vaadin-core-elements</h1>
<section>
<h3>React Integration</h3>
<p>This example demonstrates using vaadin-grid with React framework.
As React doesn't support custom attributes for elements,
vaadin-grid DOM API can't be fully utilized in the initialization.</p>
<p>Fortunately vaadin-grid also provides corresponding JavaScript APIs.</p>
<p><strong>Note:</strong> vaadin-grid is not a React component. Instead, it must be
used with React like any JavaScript class. Please see the code example below or the
<a href='https://facebook.github.io/react/docs/component-specs.html'>React documentation</a>
for more information.</p>
<code-example>
<div demo>
<div id="reactdemo">
</div>
<script type="text/jsx">
// Create the UserGrid class
var UserGrid = React.createClass({
render: function(){
return (
<vaadin-grid></vaadin-grid>
)
},
componentDidMount: function() {
var _this = this;
var vGrid = _this.getDOMNode();
// Let the mounted <vaadin-grid> upgrade
(function wait() {
if (vGrid.selection) {
// Assign the data source
vGrid.items = _this.items;
vGrid.size = 1000;
// Bind selection listener
vGrid.addEventListener("selected-items-changed", _this.onRowSelect);
var pictureRenderer = function(cell) {
cell.element.innerHTML = "<img style='width: 30px' src='" + cell.data + "'></img>";
};
// Define columns
vGrid.columns = [
{name: "user.picture.thumbnail", width: 100, renderer: pictureRenderer},
{name: "user.name.first"},
{name: "user.name.last"},
{name: "user.email"},
];
} else {
setTimeout( wait, 50 );
}
})();
},
items: function(params, callback) {
var url = 'https://randomuser.me/api?index=' + params.index + '&results=' + params.count;
getJSON(url, function(data) {
callback(data.results);
});
},
onRowSelect: function(e) {
var onUserSelect = this.props.onUserSelect;
var index = e.target.selection.selected()[0];
e.target.getItem(index, function(err, data) {
onUserSelect(err ? undefined : data.user);
});
}
});
var UserApp = React.createClass({
render: function() {
var userImage;
if (this.state.selected) {
userImage = <img className="user-image" src={this.state.selected.picture.large} ></img>;
}
return (
<div>
<UserGrid onUserSelect={this.userSelect}></UserGrid>
{userImage}
</div>
);
},
getInitialState: function() {
return {};
},
userSelect: function(user) {
this.setState({selected: user});
}
});
HTMLImports.whenReady(function(){
React.render(<UserApp></UserApp>, document.getElementById('reactdemo'));
});
</script>
</div>
<code hidden>
document.body.removeAttribute('unresolved');
</code>
</code-example>
<iframe id='react-embed' src='react-demo-embed.html' style='width: 100%; height: 550px; border: none; display: none;'></iframe>
<script>
var codeExample = document.querySelector("code-example");
(function wait() {
if (codeExample.async) {
codeExample.async(function() {
var demo = document.querySelector("div[demo]");
var embed = document.getElementById("react-embed");
demo.innerHTML = "";
demo.appendChild(embed);
embed.style.display = "block";
});
} else {
setTimeout( wait, 50 );
}
})();
</script>
</section>
</body>
</html>
|
