event log: virtual scrolling

1 files changed, 26 insertions, 4 deletions

diff --git a/web/src/js/components/virtualscroll.jsx.js b/web/src/js/components/virtualscroll.jsx.js
index ec3daa41..ebbf13f3 100644
--- a/web/src/js/components/virtualscroll.jsx.js
+++ b/web/src/js/components/virtualscroll.jsx.js
@@ -5,35 +5,57 @@ var VirtualScrollMixin = {
             stop: 0
         }
     },
+    componentWillMount: function(){
+        if(!this.props.rowHeight){
+            console.warn("VirtualScrollMixin: No rowHeight specified", this);
+        }
+    },
     getPlaceholderTop: function () {
+        var Tag = this.props.placeholderTagName || "tr";
         var style = {
             height: this.state.start * this.props.rowHeight
         };
-        var spacer = <tr key="placeholder-top" style={style}></tr>;
+        var spacer = <Tag key="placeholder-top" style={style}></Tag>;
 
         if (this.state.start % 2 === 1) {
             // fix even/odd rows
-            return [spacer, <tr key="placeholder-top-2"></tr>];
+            return [spacer, <Tag key="placeholder-top-2"></Tag>];
         } else {
             return spacer;
         }
     },
     getPlaceholderBottom: function (total) {
+        var Tag = this.props.placeholderTagName || "tr";
         var style = {
             height: Math.max(0, total - this.state.stop) * this.props.rowHeight
         };
-        return <tr key="placeholder-bottom" style={style}></tr>;
+        return <Tag key="placeholder-bottom" style={style}></Tag>;
+    },
+    componentDidMount: function () {
+        this.onScroll();
     },
     onScroll: function () {
         var viewport = this.getDOMNode();
         var top = viewport.scrollTop;
         var height = viewport.offsetHeight;
         var start = Math.floor(top / this.props.rowHeight);
-        var stop = start + Math.ceil(height / this.props.rowHeight);
+        var stop = start + Math.ceil(height / (this.props.rowHeightMin || this.props.rowHeight));
+
         this.setState({
             start: start,
             stop: stop
         });
+        console.log(start, stop);
+    },
+    renderRows: function(elems){
+        var rows = [];
+        var max = Math.min(elems.length, this.state.stop);
+
+        for (var i = this.state.start; i < max; i++) {
+            var elem = elems[i];
+            rows.push(this.renderRow(elem));
+        }
+        return rows;
     },
     scrollRowIntoView: function(index, head_height){