forked from burrows/VirtualList
-
Notifications
You must be signed in to change notification settings - Fork 0
/
example.html
75 lines (70 loc) · 2.96 KB
/
example.html
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
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>VirtualList Example</title>
<style>
.container {
position: absolute;
top: 50px;
right: 50px;
bottom: 50px;
left: 50px;
border: 1px solid #eee;
overflow: auto;
}
.VirtualList-item {
border-bottom: 1px solid #eee;
padding: 10px;
}
</style>
</head>
<body>
<script src="node_modules/react/dist/react-with-addons.js"></script>
<script src="dist/VirtualList.js"></script>
<script type="text/javascript">
(function() {
var lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ante orci, tincidunt at malesuada sed, mollis vel nunc. Duis sed dolor a sem varius egestas vitae id nulla. Donec venenatis mollis tellus at sollicitudin. Vestibulum in enim dictum, tincidunt diam ut, posuere metus. Curabitur vel urna nisl. Etiam nisi orci, tincidunt et dignissim ac, auctor quis lorem. Curabitur condimentum nulla vel iaculis feugiat. Donec aliquam fermentum neque, sit amet venenatis est molestie non. Morbi pulvinar risus turpis, id pellentesque nibh malesuada ac. Vivamus lacinia tincidunt nibh sed porta. Donec porttitor mauris eu venenatis laoreet. Fusce augue orci, vehicula ut venenatis sit amet, laoreet vitae augue. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ornare vitae dui a accumsan. Nam tincidunt volutpat sem, quis venenatis nulla fermentum eget. Curabitur dictum commodo massa, ut facilisis lacus pharetra sed.".split(/\s+/);
var items = [];
for (var i = 0; i < 2000; i++) {
items.push({
id: i, name: lorem.slice(0, Math.round(Math.random() * lorem.length)).join(' ')
});
}
var ItemView = React.createClass({
displayName: "ItemView",
render: function() {
var item = this.props.item;
return (
React.createElement("div", null,
React.createElement("p", null, item.name, " (", item.id, ")")
)
);
}
});
var App = React.createClass({
displayName: "App",
getInitialState: function() {
return {first: null};
},
render: function() {
var _this = this, first = this.state.first;
return React.createElement('div', {}, [
React.createElement('div', {}, first && first.id),
React.createElement('div', {className: 'container'},
React.createElement(VirtualList, {
items: items,
onFirstVisibleChange: function(item) {
_this.setState({first: item});
}
}, React.createElement(ItemView, {}))
)
]);
}
});
React.render(React.createElement(App), document.body);
}());
</script>
</body>
</html>