vitalif
/
likeopera-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Begin to implement virtual scroll

master
Vitaliy Filippov 2016-06-24 00:37:16 +03:00
parent 4ea6f95ba8
commit 81629f0614
1 changed files with 36 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
mail.js
View File

@ -1023,11 +1023,38 @@ var MessageList = React.createClass({
mixins: [ ListWithSelection ],
getInitialState: function()
{
return { firstDayTop: 0, groups: this.props.groups /*FIXME*/ };
return { firstDayTop: 0, firstDay: this.props.groups[0].name, groups: this.props.groups /*FIXME*/ };
},
changeFirstDay: function(ev)
{
this.setState({ firstDayTop: ev.target.scrollTop });
var scrollTop = ev.target.scrollTop, scrollSize = ev.target.offsetHeight - this.getScrollPaddingTop();
var top = 0, p, firstVisibleGrp, firstVisible, lastVisibleGrp, lastVisible;
var itemH = (Store.layout == 'message-on-right' ? 60 : 30);
var i;
for (i = 0; i < this.state.groups.length; i++)
{
p = top;
top += (i > 0 ? 30 : 0) + itemH*this.state.groups[i].messageCount;
if (firstVisibleGrp === undefined && scrollTop < top)
{
firstVisibleGrp = i;
if (i > 0 && scrollTop < p+30)
firstVisible = 0;
else
firstVisible = Math.floor((scrollTop - (i > 0 ? 30 : 0))/itemH);
}
if (lastVisibleGrp === undefined && scrollTop+scrollSize < top)
{
lastVisibleGrp = i;
if (i > 0 && scrollTop < p+30)
lastVisible = 0;
else
lastVisible = Math.floor((scrollTop+scrollSize+itemH-1 - (i > 0 ? 30 : 0))/itemH);
}
if (firstVisibleGrp !== undefined && lastVisibleGrp !== undefined)
break;
}
this.setState({ firstDayTop: scrollTop, firstDay: this.state.groups[firstVisibleGrp].name });
},
deleteSelected: function()
{
@ -1039,7 +1066,7 @@ var MessageList = React.createClass({
for (var i = 0; i < this.state.groups.length; i++)
{
p = total;
total += (i > 0 ? 1 : 0)+this.state.groups[i].messages.length;
total += (i > 0 ? 1 : 0)+this.state.groups[i].messageCount;
if (index < total)
{
Store.set('msg', this.state.groups[i].messages[index-p-(i > 0 ? 1 : 0)]);
@ -1052,7 +1079,7 @@ var MessageList = React.createClass({
var total = -1; // do not count first-day as item
for (var i = 0; i < this.state.groups.length; i++)
{
total += 1+this.state.groups[i].messages.length;
total += 1+this.state.groups[i].messageCount;
}
return total;
},
@ -1072,14 +1099,14 @@ var MessageList = React.createClass({
for (var i = 0; i < this.state.groups.length; i++)
{
p = n;
n += (i > 0 ? 1 : 0)+this.state.groups[i].messages.length;
n += (i > 0 ? 1 : 0)+this.state.groups[i].messageCount;
if (index < n)
{
if (index > p)
top += (i > 0 ? 30 : 0) + (Store.layout == 'message-on-right' ? 60 : 30)*(index-p-1);
break;
}
top += (i > 0 ? 30 : 0) + (Store.layout == 'message-on-right' ? 60 : 30)*this.state.groups[i].messages.length;
top += (i > 0 ? 30 : 0) + (Store.layout == 'message-on-right' ? 60 : 30)*this.state.groups[i].messageCount;
}
return [ top, (Store.layout == 'message-on-right' && (index == 0 || index != p) ? 60 : 30) ];
},
@ -1107,7 +1134,7 @@ var MessageList = React.createClass({
<div className="clear"></div>
</div>
<div ref="scroll" className="listview" tabIndex="1" onScroll={this.changeFirstDay} onKeyDown={this.onListKeyDown}>
<div ref="title" className="day first-day" style={{ top: this.state.firstDayTop }}>{this.props.groups[0].name}</div>
<div ref="title" className="day first-day" style={{ top: this.state.firstDayTop }}>{this.state.firstDay}</div>
{this.props.groups.map(function(grp, i) {
if (i > 0)
total++;
@ -1300,6 +1327,7 @@ var composeAccounts = [
var listGroups = [ {
name: 'TODAY',
messageCount: 1,
messages: [ {
subject: 'The Glossary of Happiness By Emily Anthes , May 12, 2016',
from: 'Margarita Philippova',
@ -1315,6 +1343,7 @@ Best regards,<br />\
} ]
}, {
name: 'LAST WEEK',
messageCount: 1,
messages: [ {
subject: 'кошку хочешь?))',
sent: true,