BottomLoader.js

// @flow
import { AutoSizer, WindowScroller } from 'react-virtualized'
import React, { Component } from 'react'
import ReactDOM from 'react-dom'

type Props = {
  children?: (args: {
    height: number,
    isScrolling: boolean,
    onChildScroll: Function,
    scrollTop: number,
    width: number
  }) => any,
  loadMoreRows: Function,
  rowSize: number,
  threshold: number
}

type State = {
  beforeRowSize: number
}

export default class BottomLoader extends Component<Props, State> {
  props: Props
  state: State = {
    beforeRowSize: 0
  }

  get rowHeight(): number {
    const node = ReactDOM.findDOMNode(this)
    return node ? Math.ceil(node.offsetHeight / this.props.rowSize) : 0
  }

  get thresholdHeight(): number {
    const { threshold } = this.props
    return this.rowHeight * threshold
  }

  handleScroll({ scrollTop }: { scrollTop: number }) {
    const { rowSize } = this.props
    const height = this.rowHeight * this.props.rowSize
    const margin = height - scrollTop

    if (this.state.beforeRowSize < rowSize && margin < this.thresholdHeight) {
      this.props.loadMoreRows()
      this.setState({ beforeRowSize: rowSize })
    }
  }

  render() {
    const { children } = this.props

    return (
      <WindowScroller onScroll={this.handleScroll.bind(this)}>
        {({ height, isScrolling, onChildScroll, scrollTop }) => (
          <AutoSizer disableHeight>
            {({ width }) => {
              return children
                ? children({ height, isScrolling, onChildScroll, scrollTop, width })
                : null
            }}
          </AutoSizer>
        )}
      </WindowScroller>
    )
  }
}