diff options
| author | Tomi Virkki <virkki@vaadin.com> | 2016-01-12 16:59:26 +0200 |
|---|---|---|
| committer | Tomi Virkki <virkki@vaadin.com> | 2016-01-12 21:41:11 +0200 |
| commit | d8b0a67cbfe0bce683ee4005797e0bd84ba7a54d (patch) | |
| tree | aad9b3be4ae4719a9700570ac70e77deee066c3e /demo/react.html | |
| parent | 22b6379602dff09bf1b3a662a6e59f5d852be1ae (diff) | |
| download | vaadin-core-d8b0a67cbfe0bce683ee4005797e0bd84ba7a54d.tar.gz vaadin-core-d8b0a67cbfe0bce683ee4005797e0bd84ba7a54d.zip | |
Moved and updated integration examples from vaadin-grid to vaadin-core-elements
Diffstat (limited to 'demo/react.html')
| -rw-r--r-- | demo/react.html | 150 |
1 files changed, 150 insertions, 0 deletions
diff --git a/demo/react.html b/demo/react.html new file mode 100644 index 0000000..28e7deb --- /dev/null +++ b/demo/react.html @@ -0,0 +1,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> |