make Row a React.PureComponent to prevent unncessary re-renders, part…

…ially addresses #392

packages/react-bootstrap-table2/src/body.js

@@ -10,6 +10,12 @@ import Row from './row';
 import RowSection from './row-section';
 import Const from './const';
 
+const empty = {
+ cellEdit: [],
+ attrs: {},
+ style: {}
+};
+
 const Body = (props) => {
  const {
  columns,
@@ -40,7 +46,7 @@ const Body = (props) => {
  }
  content = <RowSection content={ indication } colSpan={ visibleColumnSize } />;
  } else {
- const nonEditableRows = cellEdit.nonEditableRows || [];
+ const nonEditableRows = cellEdit.nonEditableRows || empty.cellEdit;
  content = data.map((row, index) => {
  const key = _.get(row, keyField);
  const editable = !(nonEditableRows.length > 0 && nonEditableRows.indexOf(key) > -1);
@@ -49,7 +55,7 @@ const Body = (props) => {
  ? selectedRowKeys.includes(key)
  : null;
 
- const attrs = rowEvents || {};
+ const attrs = rowEvents || empty.attrs;
  let style = _.isFunction(rowStyle) ? rowStyle(row, index) : rowStyle;
  let classes = (_.isFunction(rowClasses) ? rowClasses(row, index) : rowClasses);
  if (selected) {
@@ -68,7 +74,7 @@ const Body = (props) => {
  classes = cs(classes, selectedClasses);
 
  if (bgColor) {
- style = style || {};
+ style = style || empty.style;
  style.backgroundColor = _.isFunction(bgColor) ? bgColor(row, index) : bgColor;
  }
  }

packages/react-bootstrap-table2/src/bootstrap-table.js

@@ -12,18 +12,46 @@ import Const from './const';
 import { isSelectedAll } from './store/selection';
 
 class BootstrapTable extends PropsBaseResolver(Component) {
+ empty = {
+ cellEdit: {}
+ };
+
  constructor(props) {
  super(props);
  this.validateProps();
 
+ const cellSelectionInfo = this.getCellSelectionInfo(null, {}, props);
+
  this.state = {
- data: props.data
+ data: props.data,
+ cellSelectionInfo
  };
  }
 
+ getCellSelectionInfo(old, props, nextProps) {
+ let cellSelectionInfo = old;
+ if (props.selectRow !== nextProps.selectRow
+ || props.onRowSelect !== nextProps.onRowSelect
+ || old === null
+ ) {
+ cellSelectionInfo = this.constructor.resolveSelectRowProps(nextProps.selectRow, {
+ onRowSelect: nextProps.onRowSelect
+ });
+ }
+
+ return cellSelectionInfo;
+ }
+
  componentWillReceiveProps(nextProps) {
+ const cellSelectionInfo = this.getCellSelectionInfo(
+ this.state.cellSelectionInfo,
+ this.props,
+ nextProps
+ );
+
  this.setState({
- data: nextProps.data
+ data: nextProps.data,
+ cellSelectionInfo
  });
  }
 
@@ -68,10 +96,6 @@ class BootstrapTable extends PropsBaseResolver(Component) {
  'table-condensed': condensed
  }, classes);
 
- const cellSelectionInfo = this.resolveSelectRowProps({
- onRowSelect: this.props.onRowSelect
- });
-
  const headerCellSelectionInfo = this.resolveSelectRowPropsForHeader({
  onAllRowsSelect: this.props.onAllRowsSelect,
  selected: store.selected,
@@ -100,8 +124,8 @@ class BootstrapTable extends PropsBaseResolver(Component) {
  isEmpty={ this.isEmpty() }
  visibleColumnSize={ this.visibleColumnSize() }
  noDataIndication={ noDataIndication }
- cellEdit={ this.props.cellEdit || {} }
- selectRow={ cellSelectionInfo }
+ cellEdit={ this.props.cellEdit || this.empty.cellEdit }
+ selectRow={ this.state.cellSelectionInfo }
  selectedRowKeys={ store.selected }
  rowStyle={ rowStyle }
  rowClasses={ rowClasses }

packages/react-bootstrap-table2/src/props-resolver/index.js

@@ -20,13 +20,13 @@ export default ExtendBase =>
 
  /**
  * props resolver for cell selection
+ * @param {Object} selectRow
  * @param {Object} options - addtional options like callback which are about to merge into props
  *
  * @returns {Object} result - props for cell selections
  * @returns {String} result.mode - input type of row selection or disabled.
  */
- resolveSelectRowProps(options) {
- const { selectRow } = this.props;
+ static resolveSelectRowProps(selectRow, options) {
  const { ROW_SELECT_DISABLED } = Const;
 
  if (_.isDefined(selectRow)) {

packages/react-bootstrap-table2/src/row.js

@@ -1,6 +1,6 @@
 /* eslint react/prop-types: 0 */
 /* eslint react/no-array-index-key: 0 */
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 
 import _ from './utils';
@@ -9,7 +9,7 @@ import SelectionCell from './row-selection/selection-cell';
 import eventDelegater from './row-event-delegater';
 import Const from './const';
 
-class Row extends eventDelegater(Component) {
+class Row extends eventDelegater(PureComponent) {
  render() {
  const {
  row,

packages/react-bootstrap-table2/test/props-resolver/index.test.js

@@ -82,7 +82,8 @@ describe('TableResolver', () => {
  data, keyField, columns
  }, null);
  wrapper = shallow(mockElement);
- cellSelectionInfo = wrapper.instance().resolveSelectRowProps();
+ const instance = wrapper.instance();
+ cellSelectionInfo = instance.constructor.resolveSelectRowProps(instance.props.selectRow);
  });
 
  it('should return object', () => {
@@ -103,7 +104,8 @@ describe('TableResolver', () => {
  data, keyField, columns, selectRow
  }, null);
  wrapper = shallow(mockElement);
- cellSelectionInfo = wrapper.instance().resolveSelectRowProps();
+ const instance = wrapper.instance();
+ cellSelectionInfo = instance.constructor.resolveSelectRowProps(instance.props.selectRow);
 
  expect(cellSelectionInfo).toBeDefined();
  expect(cellSelectionInfo.constructor).toEqual(Object);
@@ -116,7 +118,8 @@ describe('TableResolver', () => {
  data, keyField, columns, selectRow
  }, null);
  wrapper = shallow(mockElement);
- cellSelectionInfo = wrapper.instance().resolveSelectRowProps();
+ const instance = wrapper.instance();
+ cellSelectionInfo = instance.constructor.resolveSelectRowProps(instance.props.selectRow);
 
  expect(cellSelectionInfo).toBeDefined();
  expect(cellSelectionInfo.constructor).toEqual(Object);
@@ -135,7 +138,11 @@ describe('TableResolver', () => {
  data, keyField, columns, selectRow
  }, null);
  wrapper = shallow(mockElement);
- cellSelectionInfo = wrapper.instance().resolveSelectRowProps(mockOptions);
+ const instance = wrapper.instance();
+ cellSelectionInfo = instance.constructor.resolveSelectRowProps(
+ instance.props.selectRow,
+ mockOptions
+ );
  });
 
  it('should return object which contain options', () => {