Begin to implement virtual scroll
parent
4ea6f95ba8
commit
81629f0614
43
mail.js
43
mail.js
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue