React-virtualized: InfiniteLoader + Grid documentation

[ellatrix]

Hi!

I ran into an issue while trying to use InfiniteLoader in combination with Grid. I know the documentation says that InfiniteLoader _can_ be used with Grid (although not best suited for it?), but it might be worth to either add some documentation on how to make it work or make them better compatible.

The documentation suggests that you should pass onRowsRendered to the List component, but Grid does not have this property. To make it work, a helper function should be created to convert onSectionRendered arguments to onRowsRendered arguments:

render () {
  <InfiniteLoader ...>
    {({ onRowsRendered, registerChild }) => (
      <Grid ... onSectionRendered={this._createOnSectionRendered(onRowsRendered)} />
    )}
  </InfiniteLoader>
}

_createOnSectionRendered (onRowsRendered) {
  const { columnCount } = this.state

  return function ({ columnStartIndex, columnStopIndex, rowStartIndex, rowStopIndex }) {
    const startIndex = rowStartIndex * columnCount + columnStartIndex
    const stopIndex = rowStopIndex * columnCount + columnStopIndex

    return onRowsRendered({ startIndex, stopIndex })
  }
}

Is this how it should be done? Any feedback would be much appreciated. 😊

To test, I created a branch, added a Grid example to the InfiniteLoader section (which doesn't work), and finally added a helper function to show how it could work.

[bvaughn]

That looks correct at a glance. I don't provide an example for some things like this because I don't think it's something people will use often and it takes time to create and maintain examples. If you'd like to submit a PR adding example documentation, I'd be happy to review it though. 😄

[bvaughn]

One tiny nit: You could avoid creating a new wrapper function on each render by instead attaching the onRowsRendered callback to this and referencing it in your onSectionRendered function like so:

render () {
  <InfiniteLoader {...infiniteLoaderProps}>
    {({ onRowsRendered, registerChild }) => {
      this._onRowsRendered = onRowsRendered

      return (
        <Grid
          {...gridProps}
          onSectionRendered={this._onSectionRendered}
          ref={registerChild}
        />
      )
    }}
  </InfiniteLoader>
}

_onSectionRendered ({ columnStartIndex, columnStopIndex, rowStartIndex, rowStopIndex }) {
  const startIndex = rowStartIndex * columnCount + columnStartIndex
  const stopIndex = rowStopIndex * columnCount + columnStopIndex

  this._onRowsRendered({ startIndex, stopIndex })
}

This probably has negligible performance impact but it's something to consider anyway. I should do a better job of not creating so many throw-away functions in my doc examples. It's just easier to illustrate a point using the inline fat arrow notation.

[fc]

Was wondering if I could get clarification on why it is const startIndex = rowStartIndex * columnCount + columnStartIndex instead of const startIndex = rowStartIndex ? maybe I am missing something? @iseulde @bvaughn