Skip to content

Commit fa833fc

Browse files
author
Brian Vaughn
committed
Added no-click-resize variant of chat demo
1 parent 2479927 commit fa833fc

File tree

2 files changed

+331
-0
lines changed

2 files changed

+331
-0
lines changed

‎playground/chat-no-resize.html

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
6+
<title>foo</title>
7+
<style type="text/css">
8+
body, html, #mount {
9+
width: 100%;
10+
height: 100%;
11+
margin: 0;
12+
padding: 0;
13+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
14+
font-size: 12px;
15+
overflow: hidden
16+
}
17+
.container {
18+
width: 100%;
19+
height: 100%;
20+
}
21+
.chat {
22+
border: 1px solid #eee;
23+
border-radius: 0.5rem;
24+
}
25+
.item {
26+
border-bottom: 1px solid #eee;
27+
padding: 0.5rem;
28+
box-sizing: border-box;
29+
}
30+
.item:hover {
31+
background-color: #eee;
32+
}
33+
</style>
34+
</head>
35+
<body>
36+
<div id="mount"></div>
37+
38+
<script src="utils.js"></script>
39+
<script src="helper.js"></script>
40+
<script>
41+
loadReact();
42+
loadScriptsAndStyles('chat-no-resize.js');
43+
</script>
44+
</body>
45+
</html>

‎playground/chat-no-resize.js

+286
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,286 @@
1+
var cache = new ReactVirtualized.CellMeasurerCache({
2+
fixedWidth: true
3+
})
4+
5+
var list
6+
var mostRecentWidth
7+
8+
function rowRenderer (params) {
9+
var datum = chatHistory[params.index]
10+
11+
return React.createElement(
12+
ReactVirtualized.CellMeasurer,
13+
{
14+
cache: cache,
15+
columnIndex: 0,
16+
key: params.key,
17+
parent: params.parent,
18+
rowIndex: params.index,
19+
width: mostRecentWidth
20+
},
21+
React.createElement(
22+
'div',
23+
{
24+
className: 'item',
25+
key: params.key,
26+
style: params.style
27+
},
28+
React.createElement(
29+
'strong',
30+
null,
31+
datum.name
32+
),
33+
':',
34+
datum.text
35+
)
36+
)
37+
}
38+
39+
function cellRenderer (params) {
40+
params.index = params.rowIndex
41+
42+
return rowRenderer(params)
43+
}
44+
45+
var App = React.createClass({
46+
render: function () {
47+
return React.createElement(
48+
'div',
49+
{
50+
className: 'container'
51+
},
52+
React.createElement(
53+
ReactVirtualized.AutoSizer,
54+
{},
55+
function (autoSizerParams) {
56+
if (mostRecentWidth && mostRecentWidth !== autoSizerParams.width) {
57+
cache.clearAll()
58+
list.recomputeRowHeights()
59+
}
60+
61+
mostRecentWidth = autoSizerParams.width
62+
63+
return React.createElement(
64+
ReactVirtualized.List,
65+
{
66+
className: 'chat',
67+
deferredMeasurementCache: cache,
68+
height: autoSizerParams.height,
69+
ref: function (ref) {
70+
list = ref
71+
},
72+
rowCount: chatHistory.length,
73+
rowHeight: cache.rowHeight,
74+
rowRenderer: rowRenderer,
75+
width: autoSizerParams.width
76+
}
77+
)
78+
}
79+
)
80+
)
81+
}
82+
})
83+
84+
var NAMES = [
85+
'Peter Brimer',
86+
'Tera Gaona',
87+
'Kandy Liston',
88+
'Lonna Wrede',
89+
'Kristie Yard',
90+
'Raul Host',
91+
'Yukiko Binger',
92+
'Velvet Natera',
93+
'Donette Ponton',
94+
'Loraine Grim',
95+
'Shyla Mable',
96+
'Marhta Sing',
97+
'Alene Munden',
98+
'Holley Pagel',
99+
'Randell Tolman',
100+
'Wilfred Juneau',
101+
'Naida Madson',
102+
'Marine Amison',
103+
'Glinda Palazzo',
104+
'Lupe Island',
105+
'Cordelia Trotta',
106+
'Samara Berrier',
107+
'Era Stepp',
108+
'Malka Spradlin',
109+
'Edward Haner',
110+
'Clemencia Feather',
111+
'Loretta Rasnake',
112+
'Dana Hasbrouck',
113+
'Sanda Nery',
114+
'Soo Reiling',
115+
'Apolonia Volk',
116+
'Liliana Cacho',
117+
'Angel Couchman',
118+
'Yvonne Adam',
119+
'Jonas Curci',
120+
'Tran Cesar',
121+
'Buddy Panos',
122+
'Rosita Ells',
123+
'Rosalind Tavares',
124+
'Renae Keehn',
125+
'Deandrea Bester',
126+
'Kelvin Lemmon',
127+
'Guadalupe Mccullar',
128+
'Zelma Mayers',
129+
'Laurel Stcyr',
130+
'Edyth Everette',
131+
'Marylin Shevlin',
132+
'Hsiu Blackwelder',
133+
'Mark Ferguson',
134+
'Winford Noggle',
135+
'Shizuko Gilchrist',
136+
'Roslyn Cress',
137+
'Nilsa Lesniak',
138+
'Agustin Grant',
139+
'Earlie Jester',
140+
'Libby Daigle',
141+
'Shanna Maloy',
142+
'Brendan Wilken',
143+
'Windy Knittel',
144+
'Alice Curren',
145+
'Eden Lumsden',
146+
'Klara Morfin',
147+
'Sherryl Noack',
148+
'Gala Munsey',
149+
'Stephani Frew',
150+
'Twana Anthony',
151+
'Mauro Matlock',
152+
'Claudie Meisner',
153+
'Adrienne Petrarca',
154+
'Pearlene Shurtleff',
155+
'Rachelle Piro',
156+
'Louis Cocco',
157+
'Susann Mcsweeney',
158+
'Mandi Kempker',
159+
'Ola Moller',
160+
'Leif Mcgahan',
161+
'Tisha Wurster',
162+
'Hector Pinkett',
163+
'Benita Jemison',
164+
'Kaley Findley',
165+
'Jim Torkelson',
166+
'Freda Okafor',
167+
'Rafaela Markert',
168+
'Stasia Carwile',
169+
'Evia Kahler',
170+
'Rocky Almon',
171+
'Sonja Beals',
172+
'Dee Fomby',
173+
'Damon Eatman',
174+
'Alma Grieve',
175+
'Linsey Bollig',
176+
'Stefan Cloninger',
177+
'Giovanna Blind',
178+
'Myrtis Remy',
179+
'Marguerita Dostal',
180+
'Junior Baranowski',
181+
'Allene Seto',
182+
'Margery Caves',
183+
'Nelly Moudy',
184+
'Felix Sailer'
185+
]
186+
var SENTENCES = [
187+
'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
188+
'Phasellus vulputate odio commodo tortor sodales, et vehicula ipsum viverra.',
189+
'In et mollis velit, accumsan volutpat libero.',
190+
'Nulla rutrum tellus ipsum, eget fermentum sem dictum quis.',
191+
'Suspendisse eget vehicula elit.',
192+
'Proin ut lacus lacus.',
193+
'Aliquam erat volutpat.',
194+
'Vivamus ac suscipit est, et elementum lectus.',
195+
'Cras tincidunt nisi in urna molestie varius.',
196+
'Integer in magna eu nibh imperdiet tristique.',
197+
'Curabitur eu pellentesque nisl.',
198+
'Etiam non consequat est.',
199+
'Duis mi massa, feugiat nec molestie sit amet, suscipit et metus.',
200+
'Curabitur ac enim dictum arcu varius fermentum vel sodales dui.',
201+
'Ut tristique augue at congue molestie.',
202+
'Integer semper sem lorem, scelerisque suscipit lacus consequat nec.',
203+
'Etiam euismod efficitur magna nec dignissim.',
204+
'Morbi vel neque lectus.',
205+
'Etiam ac accumsan elit, et pharetra ex.',
206+
'Suspendisse vitae gravida mauris.',
207+
'Pellentesque sed laoreet erat.',
208+
'Nam aliquet purus quis massa eleifend, et efficitur felis aliquam.',
209+
'Fusce faucibus diam erat, sed consectetur urna auctor at.',
210+
'Praesent et nulla velit.',
211+
'Cras eget enim nec odio feugiat tristique eu quis ante.',
212+
'Morbi blandit diam vitae odio sollicitudin finibus.',
213+
'Integer ac ante fermentum, placerat orci vel, fermentum lacus.',
214+
'Maecenas est elit, semper ut posuere et, congue ut orci.',
215+
'Phasellus eget enim vitae nunc luctus sodales a eu erat.',
216+
'Curabitur dapibus nisi sed nisi dictum, in imperdiet urna posuere.',
217+
'Vivamus commodo odio metus, tincidunt facilisis augue dictum quis.',
218+
'Curabitur sagittis a lectus ac sodales.',
219+
'Nam eget eros purus.',
220+
'Nam scelerisque et ante in porta.',
221+
'Proin vitae augue tristique, malesuada nisl ut, fermentum nisl.',
222+
'Nulla bibendum quam id velit blandit dictum.',
223+
'Cras tempus ac dolor ut convallis.',
224+
'Sed vel ipsum est.',
225+
'Nulla ut leo vestibulum, ultricies sapien ac, pellentesque dolor.',
226+
'Etiam ultricies maximus tempus.',
227+
'Donec dignissim mi ac libero feugiat, vitae lacinia odio viverra.',
228+
'Curabitur condimentum tellus sit amet neque posuere, condimentum tempus purus eleifend.',
229+
'Donec tempus, augue id hendrerit pretium, mauris leo congue nulla, ac iaculis erat nunc in dolor.',
230+
'Praesent vel lectus venenatis, elementum mauris vitae, ullamcorper nulla.',
231+
'Maecenas non diam cursus, imperdiet massa eget, pellentesque ex.',
232+
'Vestibulum luctus risus vel augue auctor blandit.',
233+
'Nullam augue diam, pulvinar sed sapien et, hendrerit venenatis risus.',
234+
'Quisque sollicitudin nulla nec tellus feugiat hendrerit.',
235+
'Vestibulum a eros accumsan, lacinia eros non, pretium diam.',
236+
'Aenean iaculis augue sit amet scelerisque aliquam.',
237+
'Donec ornare felis et dui hendrerit, eget bibendum nibh interdum.',
238+
'Maecenas tellus magna, tristique vitae orci vel, auctor tincidunt nisi.',
239+
'Fusce non libero quis velit porttitor maximus at eget enim.',
240+
'Sed in aliquet tellus.',
241+
'Etiam a tortor erat.',
242+
'Donec nec diam vel tellus egestas lobortis.',
243+
'Vivamus dictum erat nulla, sit amet accumsan dolor scelerisque eu.',
244+
'In nec eleifend ex, pellentesque dapibus sapien.',
245+
'Duis a mollis nisi.',
246+
'Sed ornare nisl sit amet dolor pellentesque, eu fermentum leo interdum.',
247+
'Sed eget mauris condimentum, molestie justo eu, feugiat felis.',
248+
'Nunc suscipit leo non dui blandit, ac malesuada ex consequat.',
249+
'Morbi varius placerat congue.',
250+
'Praesent id velit in nunc elementum aliquet.',
251+
'Sed luctus justo vitae nibh bibendum blandit.',
252+
'Sed et sapien turpis.',
253+
'Nulla ac eros vestibulum, mollis ante eu, rutrum nulla.',
254+
'Sed cursus magna ut vehicula rutrum.',
255+
'Ut consectetur feugiat consectetur.',
256+
'Nulla nec ligula posuere neque sollicitudin rutrum a a dui.',
257+
'Nulla ut quam odio.',
258+
'Integer dignissim sapien et orci sodales volutpat.',
259+
'Nullam a sapien leo.',
260+
'Praesent cursus semper purus, vitae gravida risus dapibus mattis.',
261+
'Sed pellentesque nulla lorem, in commodo arcu feugiat sed.',
262+
'Phasellus blandit arcu non diam varius ornare.'
263+
]
264+
var chatHistory = []
265+
266+
for (var i = 0; i < 1000; i++) {
267+
var name = NAMES[Math.floor(Math.random() * NAMES.length)]
268+
var sentences = Math.ceil(Math.random() * 5)
269+
var texts = []
270+
271+
for (var x = 0; x < sentences; x++) {
272+
texts.push(SENTENCES[Math.floor(Math.random() * SENTENCES.length)])
273+
}
274+
275+
chatHistory.push({
276+
name,
277+
text: texts.join(' ')
278+
})
279+
}
280+
281+
const container = document.getElementById('mount')
282+
283+
ReactDOM.render(
284+
React.createElement(App),
285+
container
286+
)

0 commit comments

Comments
 (0)