Infinite coconut scroller.

Scrolling.hx

package ;

import js.Browser.*;
import vdom.VDom.*;
import coconut.Ui.hxx;
import coconut.ui.*;
import coconut.data.*;
using Scrolling;

class Scrolling {
  static function main() {

    document.body.appendChild(
      hxx('
        <InfiniteScroller data={[for (i in 0...10000) { id: i, name: "user"+i}]}>
          <renderItem>
            <div key={id}>
              {name}
            </div>
          </renderItem>
        </InfiniteScroller>
      ').toElement()
    );
  }
}

class InfiniteScroller<T> extends View<{ data:List<T>, renderItem:T->RenderResult }> {
  @:state var limit:Int = 200;
  function render() '
    <div class="scroller">
      <for {item in data.limit(limit)}>
        {renderItem(item)}
      </for>
      <if {limit < data.length}>
        <button onclick={limit+=200}>Show More</button>
      </if>
    </div>
  ';
         
}

class ListTools {
  static public function limit<T>(l:List<T>, count:Int) {
    var pos = 0;
    return l.filter(function (_) return if (pos++ >= count) IncludeAndStop else Include);
  }
}