internal-example.js

class TestPage extends React.PureComponent {
  //
  // Instance methods

  fillTable = () => {
    const {
      tableValues,
    } = this.state;

    return (
      <TableComponent>
        {tableValues.map((row, rowIdx) => TestPage.getRowComponent(row, rowIdx))}
      </TableComponent>
    );
  };

  handleRandomizeValues = () => {
    const {
      numCols,
      numRows,
    } = this.props;

    this.handleSetTableValues({ numCols, numRows });
  };

  handleSetNumCols = (value) => {
    const {
      numCols,
      numRows,
      setNumCols,
    } = this.props;

    if (value !== numCols) {
      this.handleSetTableValues({ numCols: value, numRows });
      setNumCols(value);
    }
  };

  handleSetNumRows = (value) => {
    const {
      numCols,
      numRows,
      setNumRows,
    } = this.props;

    if (value !== numRows) {
      this.handleSetTableValues({ numCols, numRows: value });
      setNumRows(value);
    }
  };

  handleSetTableValues = ({ numCols, numRows }) => {
    this.setState({
      tableValues: TestPage.getTableValues({ numCols, numRows }),
    });
  };

  updateTableValuesIfNeeded = (prevNumCols, prevNumRows) => {
    const {
      numCols,
      numRows,
    } = this.props;

    if (prevNumCols !== numCols || prevNumRows !== numRows) {
      this.handleSetTableValues({ numCols, numRows });
    }
  };

  //
  // Lifecycle methods

  constructor(props) {
    super(props);
    this.state = {
      tableValues: TestPage.getTableValues(props),
    };
  }

  componentDidUpdate(prevProps) {
    this.updateTableValuesIfNeeded(prevProps.numCols, prevProps.numRows);
  }

  render() {
    const {
      numCols,
      numRows,
    } = this.props;

    const {
      tableValues,
    } = this.state;

    return (
      <div id="test-page">
        {
          !TestPage.isArrayEmpty(tableValues)
          && this.fillTable()
        }
        <ButtonComponent
          label="Randomize"
          onClick={this.handleRandomizeValues}
        />
        <NumericInputComponent
          buttonLabel="Set columns"
          defaultValue={numCols}
          onClick={this.handleSetNumCols}
        />
        <NumericInputComponent
          buttonLabel="Set rows"
          defaultValue={numRows}
          onClick={this.handleSetNumRows}
        />
      </div>
    );
  }
}

//
// Static properties

TestPage.propTypes = {
  numCols: PropTypes.number, // from withDatastore
  numRows: PropTypes.number, // from withDatastore
  setNumCols: PropTypes.func, // from withDatastore
  setNumRows: PropTypes.func, // from withDatastore
};

TestPage.defaultProps = {
  numCols: 0,
  numRows: 0,
  setNumCols: () => null,
  setNumRows: () => null,
};

//
// Static methods

TestPage.isArrayEmpty = (arr) => !(arr.length > 0 && arr[0].length > 0);

TestPage.getCellComponent = (data, rowIdx, colIdx) => {
  const rowEven = rowIdx % 2 === 0;
  const colEven = colIdx % 2 === 0;
  const isBold = (rowEven && !colEven) || (!rowEven && colEven);

  return (
    <TableCellComponent key={colIdx} data={data} isBold={isBold} />
  );
};

TestPage.getRowComponent = (row, rowIdx) => (
  <TableRowComponent key={rowIdx}>
    {row.map((data, colIdx) => TestPage.getCellComponent(data, rowIdx, colIdx))}
  </TableRowComponent>
);

TestPage.getTableValues = ({ numCols, numRows }) => Array.from({ length: numRows }, () => (
  Array.from({ length: numCols }, () => (
    randomHelper(0, 10)
  ))
));