From 81629f0614376560b64704d4ae9424e5f372854f Mon Sep 17 00:00:00 2001
From: Vitaliy Filippov <vitalif@yourcmc.ru>
Date: Fri, 24 Jun 2016 00:37:16 +0300
Subject: [PATCH] Begin to implement virtual scroll

---
 mail.js | 43 ++++++++++++++++++++++++++++++++++++-------
 1 file changed, 36 insertions(+), 7 deletions(-)

diff --git a/mail.js b/mail.js
index 4a7ad5f..11f6144 100644
--- a/mail.js
+++ b/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,