Skip to content

Commit 1feb6f1

Browse files
bvaughnbvaughn
committed
Beefed up Grid playground
1 parent 1796877 commit 1feb6f1

2 files changed

Lines changed: 72 additions & 28 deletions

File tree

‎playground/grid.html‎

Lines changed: 42 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
<head>
44
<meta charset="utf-8">
55
<title>foo</title>
6-
<link rel="stylesheet" type="text/css" href="../styles.css" />
76
<style type="text/css">
87
body, html, #mount {
98
width: 100%;
@@ -15,6 +14,12 @@
1514
display: flex;
1615
flex-direction: row;
1716
}
17+
.button,
18+
.input,
19+
.image {
20+
width: 100%;
21+
height: 100%;
22+
}
1823
.button {
1924
appearance: none;
2025
border: none;
@@ -24,21 +29,51 @@
2429
align-content: center;
2530
}
2631
.input {
27-
width: 50px;
28-
height: 100%;
2932
box-sizing: border-box;
3033
}
3134
.image {
32-
height: 20px;
33-
width: auto;
35+
height: auto;
36+
width: 100%;
3437
}
3538
</style>
3639
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
3740
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
38-
<script src="../dist/umd/react-virtualized.js"></script>
3941
</head>
4042
<body>
4143
<div id="mount"></div>
42-
<script src="grid.js"></script>
44+
45+
<script>
46+
var matches = window.location.search.match('source=(.+)');
47+
var baseDir = '../';
48+
49+
if (matches) {
50+
baseDir = matches[1] === 'remote'
51+
? 'https://rawgit.com/bvaughn/react-virtualized/master/'
52+
: matches[1]
53+
}
54+
55+
function loadStyle (source, callback) {
56+
var link = document.createElement('link');
57+
link.setAttribute('rel', 'stylesheet');
58+
link.setAttribute('href', source);
59+
link.onload = callback
60+
document.head.appendChild(link);
61+
}
62+
63+
function loadScript (source) {
64+
var script = document.createElement('script');
65+
script.setAttribute('src', source);
66+
script.async = false;
67+
document.head.appendChild(script);
68+
}
69+
70+
var styleSource = baseDir + 'styles.css';
71+
var scriptSource = baseDir + 'dist/umd/react-virtualized.js';
72+
73+
loadStyle(styleSource, function() {
74+
loadScript(scriptSource);
75+
loadScript('grid.js');
76+
});
77+
</script>
4378
</body>
4479
</html>

‎playground/grid.js‎

Lines changed: 30 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,35 @@
11
var REACT_VIRTUALIZED_BANNER = 'https://cloud.githubusercontent.com/assets/29597/11737732/0ca1e55e-9f91-11e5-97f3-098f2f8ed866.png'
22

3+
function getColumnWidth (columnIndex) {
4+
switch (columnIndex % 3) {
5+
case 0:
6+
return 65
7+
case 1:
8+
return 65
9+
case 2:
10+
return 100
11+
}
12+
}
13+
314
function renderCell (params) {
415
var key = `c:${params.columnIndex}, r:${params.rowIndex}`
5-
var input = React.DOM.input({
6-
className: 'input',
7-
defaultValue: key,
8-
key: 'input',
9-
onChange: function () {}
10-
})
11-
var button = React.DOM.button({
12-
className: 'button',
13-
key: 'button'
14-
}, key)
15-
var image = React.DOM.img({
16-
className: 'image',
17-
key: 'image',
18-
src: REACT_VIRTUALIZED_BANNER
19-
})
20-
21-
return React.DOM.div({
22-
className: 'cell'
23-
}, [input, button, image])
16+
switch (params.columnIndex % 3) {
17+
case 0:
18+
return React.DOM.input({
19+
className: 'input',
20+
defaultValue: key,
21+
onChange: function () {}
22+
})
23+
case 1:
24+
return React.DOM.button({
25+
className: 'button'
26+
}, key)
27+
case 2:
28+
return React.DOM.img({
29+
className: 'image',
30+
src: REACT_VIRTUALIZED_BANNER
31+
})
32+
}
2433
}
2534

2635
var App = React.createClass({
@@ -33,11 +42,11 @@ var App = React.createClass({
3342
ReactVirtualized.Grid,
3443
{
3544
columnsCount: 1000,
36-
columnWidth: 200,
45+
columnWidth: getColumnWidth,
3746
height: params.height,
3847
overscanRowsCount: 0,
3948
renderCell: renderCell,
40-
rowHeight: 40,
49+
rowHeight: 30,
4150
rowsCount: 1000,
4251
width: params.width
4352
}

0 commit comments

Comments
 (0)