MultiGrid crashes when decreasing rowCount or columnCount

[mcordova47]

The MultiGrid component has no default value for rowCount or columnCount. MultiGrid has no default value for scrollToRow, and it sets its bottom right grid's scrollToRow to props.scrollToRow - props.fixedRowCount (or undefined - props.fixedRowCount), causing it to be NaN when it ordinarily would default to -1. This causes an error in _getCalculatedScrollTop, for example, causing targetIndex to be NaN.

Issue shown below:

It's a little hard to see, but I'm just hitting backspace, setting the rowCount from 20 to 2.

Example code was made by replacing MultiGrid.example.js with the following:

/** @flow */
import Immutable from "immutable";
import PropTypes from "prop-types";
import React, { PureComponent } from "react";
import {
  ContentBox,
  ContentBoxHeader,
  ContentBoxParagraph
} from "../demo/ContentBox";
import { LabeledInput, InputRow } from "../demo/LabeledInput";
import AutoSizer from "../AutoSizer";
import MultiGrid from "./MultiGrid";
import styles from "./MultiGrid.example.css";

const STYLE = {
  border: "1px solid #ddd"
};
const STYLE_BOTTOM_LEFT_GRID = {
  borderRight: "2px solid #aaa",
  backgroundColor: "#f7f7f7"
};
const STYLE_TOP_LEFT_GRID = {
  borderBottom: "2px solid #aaa",
  borderRight: "2px solid #aaa",
  fontWeight: "bold"
};
const STYLE_TOP_RIGHT_GRID = {
  borderBottom: "2px solid #aaa",
  fontWeight: "bold"
};

export default class MultiGridExample extends PureComponent {
  static contextTypes = {
    list: PropTypes.instanceOf(Immutable.List).isRequired
  };

  constructor(props, context) {
    super(props, context);

    this.state = {
      rowCount: 20,
      columnCount: 100
    };

    this._cellRenderer = this._cellRenderer.bind(this);
    this._onRowCountChange = this._createEventHandler("rowCount");
    this._onColumnCountChange = this._createEventHandler("columnCount");
  }

  render() {
    return (
      <ContentBox>

        <InputRow>
          {this._createLabeledInput(
            "rowCount",
            this._onRowCountChange
          )}
          {this._createLabeledInput(
            "columnCount",
            this._onColumnCountChange
          )}
        </InputRow>

        <AutoSizer disableHeight>
          {({ width }) =>
            <MultiGrid
              {...this.state}
              fixedRowCount={1}
              fixedColumnCount={1}
              cellRenderer={this._cellRenderer}
              columnWidth={75}
              enableFixedColumnScroll
              enableFixedRowScroll
              height={300}
              rowHeight={40}
              style={STYLE}
              styleBottomLeftGrid={STYLE_BOTTOM_LEFT_GRID}
              styleTopLeftGrid={STYLE_TOP_LEFT_GRID}
              styleTopRightGrid={STYLE_TOP_RIGHT_GRID}
              width={width}
            />}
        </AutoSizer>
      </ContentBox>
    );
  }

  _cellRenderer({ columnIndex, key, rowIndex, style }) {
    return (
      <div className={styles.Cell} key={key} style={style}>
        {columnIndex}, {rowIndex}
      </div>
    );
  }

  _createEventHandler(property) {
    return event => {
      const value = parseInt(event.target.value, 10) || 0;

      this.setState({
        [property]: value
      });
    };
  }

  _createLabeledInput(property, eventHandler) {
    const value = this.state[property];

    return (
      <LabeledInput
        label={property}
        name={property}
        onChange={eventHandler}
        value={value}
      />
    );
  }
}

[bvaughn]

Thank you 😄