Fix wrong higher order wrapping

packages/react-bootstrap-table2/src/cell-edit/wrapper.js

@@ -1,9 +1,11 @@
 /* eslint arrow-body-style: 0 */
 /* eslint react/prop-types: 0 */
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import _ from '../utils';
 
+import { cellEditElement } from '../table-factory';
+
 class CellEditWrapper extends Component {
  constructor(props) {
  super(props);
@@ -88,7 +90,8 @@ class CellEditWrapper extends Component {
  }
 
  render() {
- return React.cloneElement(this.props.elem, {
+ return cellEditElement({
+ ...this.props,
  onCellUpdate: this.handleCellUpdate,
  onStartEditing: this.startEditing,
  onEscapeEditing: this.escapeEditing,
@@ -98,7 +101,6 @@ class CellEditWrapper extends Component {
 }
 
 CellEditWrapper.propTypes = {
- elem: PropTypes.element.isRequired,
  onUpdateCell: PropTypes.func.isRequired
 };
 

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

@@ -1,16 +1,18 @@
-/* eslint arrow-body-style: 0 */
-/* eslint react/jsx-no-bind: 0 */
 /* eslint no-return-assign: 0 */
 /* eslint react/prop-types: 0 */
 import React, { Component } from 'react';
 import Store from './store/base';
-import SortWrapper from './sort/wrapper';
-import CellEditWrapper from './cell-edit/wrapper';
-import RowSelectionWrapper from './row-selection/wrapper';
+
+import {
+ wrapWithCellEdit,
+ wrapWithSelection,
+ wrapWithSort
+} from './table-factory';
+
 import _ from './utils';
 
-const withDataStore = (Base) => {
- return class BootstrapTableContainer extends Component {
+const withDataStore = Base =>
+ class BootstrapTableContainer extends Component {
  constructor(props) {
  super(props);
  this.store = new Store(props);
@@ -46,61 +48,26 @@ const withDataStore = (Base) => {
  return false;
  }
 
- renderCellEdit(elem) {
- return (
- <CellEditWrapper
- keyField={ this.props.keyField }
- cellEdit={ this.props.cellEdit }
- ref={ node => this.cellEditWrapper = node }
- elem={ elem }
- onUpdateCell={ this.handleUpdateCell }
- />
- );
- }
-
- renderRowSelection(elem) {
- return (
- <RowSelectionWrapper
- keyField={ this.props.keyField }
- selectRow={ this.props.selectRow }
- store={ this.store }
- elem={ elem }
- />
- );
- }
-
- renderSort(elem) {
- return (
- <SortWrapper elem={ elem } store={ this.store } />
- );
- }
-
  render() {
  const baseProps = {
  ...this.props,
  store: this.store
  };
 
- let element = React.createElement(Base, baseProps);
-
- // @TODO
- // the logic of checking sort is enable or not should be placed in the props resolver..
- // but currently, I've no idea to refactoring this
- if (this.props.columns.filter(col => col.sort).length > 0) {
- element = this.renderSort(element);
- }
-
- if (this.props.selectRow) {
- element = this.renderRowSelection(element);
- }
-
  if (this.props.cellEdit) {
- element = this.renderCellEdit(element);
+ return wrapWithCellEdit({
+ ref: node => this.cellEditWrapper = node,
+ onUpdateCell: this.handleUpdateCell,
+ ...baseProps
+ });
+ } else if (this.props.selectRow) {
+ return wrapWithSelection(baseProps);
+ } else if (this.props.columns.filter(col => col.sort).length > 0) {
+ return wrapWithSort(baseProps);
  }
 
- return element;
+ return React.createElement(Base, baseProps);
  }
  };
-};
 
 export default withDataStore;

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

@@ -1,7 +1,8 @@
 /* eslint arrow-body-style: 0 */
 /* eslint react/prop-types: 0 */
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
+import { selectionElement } from '../table-factory';
 
 import Const from '../const';
 
@@ -65,15 +66,15 @@ class RowSelectionWrapper extends Component {
  }
 
  render() {
- return React.cloneElement(this.props.elem, {
+ return selectionElement({
+ ...this.props,
  onRowSelect: this.handleRowSelect,
  onAllRowsSelect: this.handleAllRowsSelect
  });
  }
 }
 
 RowSelectionWrapper.propTypes = {
- elem: PropTypes.element.isRequired,
  store: PropTypes.object.isRequired
 };
 

packages/react-bootstrap-table2/src/sort/wrapper.js

@@ -1,9 +1,11 @@
 /* eslint arrow-body-style: 0 */
 /* eslint react/prop-types: 0 */
 /* eslint no-return-assign: 0 */
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 
+import { sortableElement } from '../table-factory';
+
 class SortWrapper extends Component {
  constructor(props) {
  super(props);
@@ -20,15 +22,15 @@ class SortWrapper extends Component {
  }
 
  render() {
- return React.cloneElement(this.props.elem, {
+ return sortableElement({
+ ...this.props,
  ref: node => this.table = node,
  onSort: this.handleSort
  });
  }
 }
 
 SortWrapper.propTypes = {
- elem: PropTypes.element.isRequired,
  store: PropTypes.object.isRequired
 };
 

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

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import BootstrapTable from './bootstrap-table';
+
+import SortWrapper from './sort/wrapper';
+import RowSelectionWrapper from './row-selection/wrapper';
+import CellEditWrapper from './cell-edit/wrapper';
+
+
+export const wrapWithCellEdit = props =>
+ React.createElement(CellEditWrapper, { ...props });
+
+export const wrapWithSelection = props =>
+ React.createElement(RowSelectionWrapper, { ...props });
+
+export const wrapWithSort = props =>
+ React.createElement(SortWrapper, { ...props });
+
+export const pureTable = props =>
+ React.createElement(BootstrapTable, { ...props });
+
+
+export const sortableElement = props => pureTable(props);
+
+export const selectionElement = props => wrapWithSort(props);
+
+export const cellEditElement = props => wrapWithSelection(props);

packages/react-bootstrap-table2/test/cell-edit/wrapper.test.js

@@ -8,7 +8,6 @@ import CellEditWrapper from '../../src/cell-edit/wrapper';
 
 describe('CellEditWrapper', () => {
  let wrapper;
- let elem;
 
  const columns = [{
  dataField: 'id',
@@ -35,12 +34,13 @@ describe('CellEditWrapper', () => {
  const store = new Store({ data, keyField });
 
  beforeEach(() => {
- elem = React.createElement(BootstrapTable, { data, cellEdit, columns, keyField, store });
  wrapper = shallow(
  <CellEditWrapper
  keyField={ keyField }
+ data={ data }
+ columns={ columns }
  cellEdit={ cellEdit }
- elem={ elem }
+ store={ store }
  onUpdateCell={ sinon.stub() }
  />
  );
@@ -58,7 +58,7 @@ describe('CellEditWrapper', () => {
  expect(wrapper.state().editing).toBeFalsy();
  });
 
- it('should inject correct props to elem', () => {
+ it('should inject correct props to base component', () => {
  expect(wrapper.props().onCellUpdate).toBeDefined();
  expect(wrapper.props().onStartEditing).toBeDefined();
  expect(wrapper.props().onEscapeEditing).toBeDefined();
@@ -74,12 +74,13 @@ describe('CellEditWrapper', () => {
 
  describe('and cellEdit.editing is false', () => {
  beforeEach(() => {
- elem = React.createElement(BootstrapTable, { data, cellEdit, columns, keyField, store });
  wrapper = shallow(
  <CellEditWrapper
  keyField={ keyField }
+ data={ data }
+ columns={ columns }
  cellEdit={ cellEdit }
- elem={ elem }
+ store={ store }
  onUpdateCell={ sinon.stub() }
  />
  );
@@ -104,12 +105,13 @@ describe('CellEditWrapper', () => {
  const cidx = 2;
 
  beforeEach(() => {
- elem = React.createElement(BootstrapTable, { data, cellEdit, columns, keyField, store });
  wrapper = shallow(
  <CellEditWrapper
  keyField={ keyField }
+ data={ data }
+ columns={ columns }
  cellEdit={ cellEdit }
- elem={ elem }
+ store={ store }
  onUpdateCell={ sinon.stub() }
  />
  );
@@ -175,8 +177,10 @@ describe('CellEditWrapper', () => {
  wrapper = shallow(
  <CellEditWrapper
  keyField={ keyField }
+ data={ data }
+ columns={ columns }
  cellEdit={ cellEdit }
- elem={ elem }
+ store={ store }
  onUpdateCell={ onUpdateCellCallBack }
  />
  );
@@ -204,8 +208,10 @@ describe('CellEditWrapper', () => {
  wrapper = shallow(
  <CellEditWrapper
  keyField={ keyField }
+ data={ data }
+ columns={ columns }
  cellEdit={ cellEdit }
- elem={ elem }
+ store={ store }
  onUpdateCell={ onUpdateCellCallBack }
  />
  );
@@ -229,8 +235,10 @@ describe('CellEditWrapper', () => {
  wrapper = shallow(
  <CellEditWrapper
  keyField={ keyField }
+ data={ data }
+ columns={ columns }
  cellEdit={ cellEdit }
- elem={ elem }
+ store={ store }
  onUpdateCell={ onUpdateCellCallBack }
  />
  );
@@ -249,8 +257,10 @@ describe('CellEditWrapper', () => {
  wrapper = shallow(
  <CellEditWrapper
  keyField={ keyField }
+ data={ data }
+ columns={ columns }
  cellEdit={ cellEdit }
- elem={ elem }
+ store={ store }
  onUpdateCell={ onUpdateCellCallBack }
  />
  );