Proof of concept, load more component with searchkit accessors

searchkit-load-more.jsx

import React from 'react'

import _debounce from 'lodash/debounce'
import _get from 'lodash/get'

import {
  SearchkitComponent,
  PageSizeAccessor
} from 'searchkit'

class SearchkitLoadMore extends SearchkitComponent {
  constructor (props, ctx) {
    super(props, ctx)

    this.handleScroll = _debounce(this.handleScroll.bind(this), 200)
    this.state = { page: 0 }
  }

  getPageSizeAccessor () {
    return this.searchkit.getAccessorByType(PageSizeAccessor)
  }

  setSize (size) {
    let pageSizeAccessor = this.getPageSizeAccessor()

    if (size) {
      pageSizeAccessor.setSize(Number(size))
      this.searchkit.performSearch()
    }
  }

  loadMore (scrollHeight) {
    const total = _get(this.getResults(), 'hits.total', 1)
    const size = _get(this.getQuery(), 'query.size', 10)
    const { page } = this.state

    if (size + (size * page) <= total) {
      this.setState({
        page: this.state.page + 1
      }, () => {
        this.setSize(size + (size * this.state.page))
      })
    }
  }

  handleScroll (event) {
    const el = this._root

    if ((Math.ceil(el.scrollTop) + el.clientHeight + 100) >= el.scrollHeight) {
      this.loadMore()
    }
  }

  render () {
    const { children, style, className } = this.props

    return (
      <div
        ref={(node) => (this._root = node)}
        style={style}
        className={className}
        onScroll={this.handleScroll}
      >
        {children}
      </div>
    )
  }
}

export default SearchkitLoadMore