Reactor vlist nviagetTo fix

c-smile · c-smile · commit 17d8f745cffd · 2020-04-28T08:13:31.000-07:00
diff --git a/samples/+reactor/components/vlist/vlist.htm b/samples/+reactor/components/vlist/vlist.htm
@@ -29,18 +29,32 @@
      :checked={this.isSelected(record)}>This is an item # {index}.</li>;
 }
 
+var vlist;
+
 $(main).content(
   <VList
     multiselect
     recordset={records}
-    recordview={renderRecord} />);
+    recordview={renderRecord}
+    @{vlist} />);
+
+event click $(#go) {
+  var rn = $(#record-number).value;
+  vlist.navigateTo(records[rn]);
+  
+}
 
         </script>
     </head>
     <body>
       <p>Demo of simple virtual list component &lt;VList>.</p>
       <p>The caller shall suply record view producer function.</p>
       <p>The list supports multiselection (CTRL+CLICK).</p>
+
+      <form>
+        Record <input|integer #record-number min=0 max=1000 novalue="#" step="10" /> <button#go>Go</button> 
+      </form>
+
       <main></main>
     </body>
 </html>
diff --git a/samples/+reactor/components/vlist/vlist.tis b/samples/+reactor/components/vlist/vlist.tis
@@ -112,9 +112,18 @@ class VList : Reactor.Component
 
 
   function resetPaddings() {
-    // set paddings so scrollbar will reflect the reality 
-    this.style[#padding-top] = px(this.swIndex * this.itemHeight);
-    this.style[#padding-bottom] = px(Integer.max(0,this.recordset.length - this.swIndex - this.swLength) * this.itemHeight);
+    var top = this.swIndex * this.itemHeight;
+    const middle = this.swLength * this.itemHeight;
+    const total = this.recordset.length * this.itemHeight;
+    var bottom = total - middle - top;
+    if( bottom < 0 ) {
+      bottom = 0; 
+      top = Integer.max(0,total - middle);
+    } else if(bottom + top + middle < total)
+      bottom = top = 0;
+    this.style[#padding-top] = px(top);
+    this.style[#padding-bottom] = px(bottom);
+    Element.update.call(this); // use original Element.update method.
   }
 
   function isSelected(record) {
@@ -198,7 +207,7 @@ class VList : Reactor.Component
   function navigateTo(record) {
     this.currentRecord = record;
     if(record) { 
-      var recordNo = this.recordset.indexOf(v);
+      var recordNo = this.recordset.indexOf(record);
       if( recordNo < 0 ) return;
       this.scrollToRecord(recordNo);
     }
@@ -225,10 +234,15 @@ class VTableBody : VList
   function render() {
     var items = [];
     var {recordview, recordset, swIndex, swLength} = this;
+
+    if((swIndex + swLength) > recordset.length ) 
+      swIndex = this.swIndex = Integer.max(0,recordset.length - swLength);
+
     var end = Integer.min(recordset.length,swIndex + swLength);
     for( var i = swIndex; i < end; ++i )
       items.push( recordview.call(this,recordset[i],i) );
     //debug log: swIndex, swLength, end, items.length;
+    //debug stacktrace;
     return <tbody>{items}</tbody>;
   }
 }
@@ -256,12 +270,12 @@ class VTable: Reactor.Component
     assert typeof this.recordview == #function;
 
     this.recordsForView();
-
   }
 
   function update(state = null) {
     super.update(state);
     this.recordsForView();
+    this.vtbody.post(this.vtbody.resetPaddings);
   }
 
   function render() {
@@ -315,6 +329,7 @@ class VTable: Reactor.Component
          return rs2view;
     }
     rs2view.sort(comparator);
+
     return rs2view;
   }
 
