react-infinite es6 version

react-infinite-es6-version.js

import React, { Component } from 'react';
import Infinite from 'react-infinite';

class CoPropertyPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      elements: null,
      isInfiniteLoading: false,
    };
    this.elementInfiniteLoad = this.elementInfiniteLoad.bind(this);
    this.handleInfiniteLoad = this.handleInfiniteLoad.bind(this);
    this.buildElements = this.buildElements.bind(this);
  }

  componentDidMount() {
    const temp = this.buildElements(0, 20);
    this.setState({
      elements: temp,
    });
  }

  buildElements(start, end) {
    const elements = [];
    for (let i = start; i < end; i += 1) {
      elements.push(
        <div className="infinite-list-item">
          List Item {i}
        </div>
      )
    }
    return elements;
  }

  handleInfiniteLoad() {
    const that = this;
    this.setState({
      isInfiniteLoading: true
    });
    setTimeout(() => {
      const elemLength = that.state.elements.length,
      newElements = that.buildElements(elemLength, elemLength + 30);
      that.setState({
        isInfiniteLoading: false,
        elements: that.state.elements.concat(newElements)
      });
    }, 1500);
  }

  elementInfiniteLoad() {
    return (
      <div className="infinite-list-item">
        Loading...
      </div>
    )
  }

  render() {
    return (
      <Infinite
        elementHeight={40}
         containerHeight={250}
         infiniteLoadBeginEdgeOffset={200}
         onInfiniteLoad={this.handleInfiniteLoad}
         loadingSpinnerDelegate={this.elementInfiniteLoad()}
         isInfiniteLoading={this.state.isInfiniteLoading}
       >
          {this.state.elements}
      </Infinite>
    )
  }
}

export default CoPropertyPage;