Publish

- react-bootstrap-table2-example@1.0.19
 - react-bootstrap-table2-filter@1.1.5
 - react-bootstrap-table2-toolkit@1.3.1
 - react-bootstrap-table-next@3.0.0

packages/react-bootstrap-table2-example/examples/bootstrap4/toolkits.js

@@ -0,0 +1,90 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { Search, CSVExport } from 'react-bootstrap-table2-toolkit';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const { SearchBar, ClearSearchButton } = Search;
+const { ExportCSVButton } = CSVExport;
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { Search, CSVExport } from 'react-bootstrap-table2-toolkit';
+
+const { SearchBar, ClearSearchButton } = Search;
+const { ExportCSVButton } = CSVExport;
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  search
+>
+  {
+    props => (
+      <div>
+        <h3>Input something at below input field:</h3>
+        <SearchBar { ...props.searchProps } />
+        <ClearSearchButton { ...props.searchProps } />
+        <hr />
+        <BootstrapTable
+          { ...props.baseProps }
+        />
+        <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
+      </div>
+    )
+  }
+</ToolkitProvider>
+`;
+
+export default () => (
+  <div>
+    <ToolkitProvider
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      search
+    >
+      {
+        props => (
+          <div>
+            <h3>Input something at below input field:</h3>
+            <SearchBar { ...props.searchProps } />
+            <ClearSearchButton { ...props.searchProps } />
+            <hr />
+            <BootstrapTable
+              { ...props.baseProps }
+            />
+            <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
+          </div>
+        )
+      }
+    </ToolkitProvider>
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/cell-edit/custom-editor-table.js

@@ -18,6 +18,11 @@ class QualityRanger extends React.Component {
   static defaultProps = {
     value: 0
   }
+
+  componentDidMount() {
+    this.range.focus();
+  }
+
   getValue() {
     return parseInt(this.range.value, 10);
   }

packages/react-bootstrap-table2-example/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-example",
-  "version": "1.0.18",
+  "version": "1.0.19",
   "description": "",
   "main": "index.js",
   "private": true,

packages/react-bootstrap-table2-example/stories/index.js

@@ -21,6 +21,7 @@ import Bootstrap4DefaultSortTable from 'examples/bootstrap4/sort';
 import Bootstrap4RowSelectionTable from 'examples/bootstrap4/row-selection';
 import Bootstrap4PaginationTable from 'examples/bootstrap4/pagination';
 import Bootstrap4ColumnToggleTable from 'examples/bootstrap4/column-toggle';
+import ToolkitsTable from 'examples/bootstrap4/toolkits';
 
 // work on columns
 import NestedDataTable from 'examples/columns/nested-data-table';
@@ -249,7 +250,8 @@ storiesOf('Bootstrap 4', module)
   .add('Sort table with bootstrap 4', () => <Bootstrap4DefaultSortTable />)
   .add('Row selection table with bootstrap 4', () => <Bootstrap4RowSelectionTable />)
   .add('Pagination table with bootstrap 4', () => <Bootstrap4PaginationTable />)
-  .add('Column Toggle with bootstrap 4', () => <Bootstrap4ColumnToggleTable />);
+  .add('Column Toggle with bootstrap 4', () => <Bootstrap4ColumnToggleTable />)
+  .add('toolkits Table bootstrap 4', () => <ToolkitsTable />);
 
 storiesOf('Work on Columns', module)
   .addDecorator(bootstrapStyle())

packages/react-bootstrap-table2-filter/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-filter",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "it's a column filter addon for react-bootstrap-table2",
   "main": "./lib/index.js",
   "repository": {

packages/react-bootstrap-table2-filter/src/context.js

@@ -40,7 +40,7 @@ export default (
 
     componentWillReceiveProps(nextProps) {
       let nextData = nextProps.data;
-      if (!isRemoteFiltering() && !_.isEqual(nextProps.data, this.props.data)) {
+      if (!isRemoteFiltering() && !_.isEqual(nextProps.data, this.state.data)) {
         nextData = this.doFilter(nextProps);
       }
       this.setState({

packages/react-bootstrap-table2-toolkit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-toolkit",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "The toolkit for react-bootstrap-table2",
   "main": "./lib/index.js",
   "repository": {

packages/react-bootstrap-table2-toolkit/src/csv/button.js

@@ -5,12 +5,14 @@ const ExportCSVButton = (props) => {
   const {
     onExport,
     children,
+    className,
     ...rest
   } = props;
 
   return (
     <button
       type="button"
+      className={ `react-bs-table-csv-btn btn btn-default ${className}` }
       onClick={ () => onExport() }
       { ...rest }
     >
@@ -26,7 +28,7 @@ ExportCSVButton.propTypes = {
   style: PropTypes.object
 };
 ExportCSVButton.defaultProps = {
-  className: 'react-bs-table-csv-btn btn btn-default',
+  className: '',
   style: {}
 };
 

packages/react-bootstrap-table2-toolkit/src/search/clear-button.js

@@ -3,18 +3,21 @@ import PropTypes from 'prop-types';
 
 const ClearButton = ({
   onClear,
-  text
+  text,
+  className
 }) => (
-  <button className="btn btn-default" onClick={ onClear }>{ text }</button>
+  <button className={ `btn btn-default ${className}` } onClick={ onClear }>{ text }</button>
 );
 
 ClearButton.propTypes = {
   onClear: PropTypes.func.isRequired,
+  className: PropTypes.string,
   text: PropTypes.string
 };
 
 ClearButton.defaultProps = {
-  text: 'Clear'
+  text: 'Clear',
+  className: ''
 };
 
 export default ClearButton;

packages/react-bootstrap-table2/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table-next",
-  "version": "2.2.0",
+  "version": "3.0.0",
   "description": "Next generation of react-bootstrap-table",
   "main": "./lib/index.js",
   "repository": {

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

@@ -23,7 +23,10 @@ class Cell extends eventDelegater(Component) {
 
     if (shouldUpdate) return true;
 
+    // if (nextProps.formatter)
+
     shouldUpdate =
+      nextProps.column.formatter ? !_.isEqual(this.props.row, nextProps.row) : false ||
       this.props.column.hidden !== nextProps.column.hidden ||
       this.props.rowIndex !== nextProps.rowIndex ||
       this.props.columnIndex !== nextProps.columnIndex ||

packages/react-bootstrap-table2/src/contexts/index.js

@@ -294,6 +294,7 @@ const withContext = Base =>
       return rootProps => (
         <this.CellEditContext.Provider
           { ...baseProps }
+          ref={ n => this.cellEditContext = n }
           selectRow={ this.props.selectRow }
           cellEdit={ this.props.cellEdit }
           data={ rootProps.getData() }

packages/react-bootstrap-table2/src/contexts/selection-context.js

@@ -14,26 +14,27 @@ class SelectionProvider extends React.Component {
     keyField: PropTypes.string.isRequired
   }
 
-  state = { selected: this.props.selectRow.selected || [] };
+  constructor(props) {
+    super(props);
+    this.selected = props.selectRow.selected || [];
+  }
 
   componentWillReceiveProps(nextProps) {
     if (nextProps.selectRow) {
-      this.setState(() => ({
-        selected: nextProps.selectRow.selected || this.state.selected
-      }));
+      this.selected = nextProps.selectRow.selected || this.selected;
     }
   }
 
   // exposed API
   getSelected() {
-    return this.state.selected;
+    return this.selected;
   }
 
   handleRowSelect = (rowKey, checked, rowIndex, e) => {
     const { data, keyField, selectRow: { mode, onSelect } } = this.props;
     const { ROW_SELECT_SINGLE } = Const;
 
-    let currSelected = [...this.state.selected];
+    let currSelected = [...this.selected];
 
     let result = true;
     if (onSelect) {
@@ -41,18 +42,17 @@ class SelectionProvider extends React.Component {
       result = onSelect(row, checked, rowIndex, e);
     }
 
-    this.setState(() => {
-      if (result === true || result === undefined) {
-        if (mode === ROW_SELECT_SINGLE) { // when select mode is radio
-          currSelected = [rowKey];
-        } else if (checked) { // when select mode is checkbox
-          currSelected.push(rowKey);
-        } else {
-          currSelected = currSelected.filter(value => value !== rowKey);
-        }
+    if (result === true || result === undefined) {
+      if (mode === ROW_SELECT_SINGLE) { // when select mode is radio
+        currSelected = [rowKey];
+      } else if (checked) { // when select mode is checkbox
+        currSelected.push(rowKey);
+      } else {
+        currSelected = currSelected.filter(value => value !== rowKey);
       }
-      return { selected: currSelected };
-    });
+    }
+    this.selected = currSelected;
+    this.forceUpdate();
   }
 
   handleAllRowsSelect = (e, isUnSelect) => {
@@ -64,7 +64,7 @@ class SelectionProvider extends React.Component {
         nonSelectable
       }
     } = this.props;
-    const { selected } = this.state;
+    const { selected } = this;
 
     let currSelected;
 
@@ -81,7 +81,7 @@ class SelectionProvider extends React.Component {
         dataOperator.getSelectedRows(
           data,
           keyField,
-          isUnSelect ? this.state.selected : currSelected
+          isUnSelect ? selected : currSelected
         ),
         e
       );
@@ -89,7 +89,8 @@ class SelectionProvider extends React.Component {
         currSelected = result;
       }
     }
-    this.setState(() => ({ selected: currSelected }));
+    this.selected = currSelected;
+    this.forceUpdate();
   }
 
   render() {
@@ -99,7 +100,7 @@ class SelectionProvider extends React.Component {
     } = getSelectionSummary(
       this.props.data,
       this.props.keyField,
-      this.state.selected
+      this.selected
     );
 
     let checkedStatus;
@@ -113,7 +114,7 @@ class SelectionProvider extends React.Component {
       <SelectionContext.Provider
         value={ {
           ...this.props.selectRow,
-          selected: this.state.selected,
+          selected: this.selected,
           onRowSelect: this.handleRowSelect,
           onAllRowsSelect: this.handleAllRowsSelect,
           allRowsSelected,

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

@@ -218,6 +218,47 @@ describe('Cell', () => {
       });
     });
 
+    describe('when props.row is change', () => {
+      describe('and column.formatter is enable', () => {
+        const column = { dataField: 'name', text: 'Product Name', formatter: () => 123 };
+        beforeEach(() => {
+          props = {
+            row,
+            columnIndex: 1,
+            rowIndex: 1,
+            tabIndex: 5,
+            column
+          };
+          wrapper = shallow(
+            <Cell { ...props } />);
+        });
+
+        it('should return true', () => {
+          nextProps = { ...props, row: { ...row, alert: 'test' } };
+          expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true);
+        });
+      });
+      describe('but column.formatter is disable', () => {
+        const column = { dataField: 'name', text: 'Product Name' };
+        beforeEach(() => {
+          props = {
+            row,
+            columnIndex: 1,
+            rowIndex: 1,
+            tabIndex: 5,
+            column
+          };
+          wrapper = shallow(
+            <Cell { ...props } />);
+        });
+
+        it('should return true', () => {
+          nextProps = { ...props, row: { ...row, alert: 'test' } };
+          expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(false);
+        });
+      });
+    });
+
     describe('if column.isDummyField is true', () => {
       describe('when content is change', () => {
         const column = { dataField: '', text: 'Product Name', isDummyField: true };

packages/react-bootstrap-table2/test/contexts/selection-context.test.js

@@ -73,15 +73,15 @@ describe('DataContext', () => {
       expect(SelectionContext.Consumer).toBeDefined();
     });
 
-    it('should have correct state.data', () => {
-      expect(wrapper.state().selected).toEqual([]);
+    it('should have correct this.selected', () => {
+      expect(wrapper.instance().selected).toEqual([]);
     });
 
     it('should pass correct sort props to children element', () => {
       expect(wrapper.length).toBe(1);
       expect(mockBase).toHaveBeenCalledWith({
         ...defaultSelectRow,
-        selected: wrapper.state().selected,
+        selected: wrapper.instance().selected,
         onRowSelect: wrapper.instance().handleRowSelect,
         onAllRowsSelect: wrapper.instance().handleAllRowsSelect,
         allRowsNotSelected: true,
@@ -104,8 +104,8 @@ describe('DataContext', () => {
       });
     });
 
-    it('should have correct state.selected', () => {
-      expect(wrapper.state().selected).toEqual(newSelectRow.selected);
+    it('should have correct this.selected', () => {
+      expect(wrapper.instance().selected).toEqual(newSelectRow.selected);
     });
 
     describe('if nextProps.selectRow is not existing', () => {
@@ -120,8 +120,8 @@ describe('DataContext', () => {
         });
       });
 
-      it('should keep origin state.selected', () => {
-        expect(wrapper.state().selected).toEqual(defaultSelected);
+      it('should keep origin this.selected', () => {
+        expect(wrapper.instance().selected).toEqual(defaultSelected);
       });
     });
 
@@ -131,8 +131,8 @@ describe('DataContext', () => {
         wrapper.instance().componentWillReceiveProps({});
       });
 
-      it('should not set state.selected', () => {
-        expect(wrapper.state().selected).toEqual([]);
+      it('should not set this.selected', () => {
+        expect(wrapper.instance().selected).toEqual([]);
       });
     });
   });
@@ -148,8 +148,8 @@ describe('DataContext', () => {
       wrapper = shallow(shallowContext(selectRow));
     });
 
-    it('should have correct state.data', () => {
-      expect(wrapper.state().selected).toEqual(selectRow.selected);
+    it('should have correct this.selected', () => {
+      expect(wrapper.instance().selected).toEqual(selectRow.selected);
     });
   });
 
@@ -164,12 +164,12 @@ describe('DataContext', () => {
         wrapper = shallow(shallowContext(selectRow));
       });
 
-      it('should set state.selected correctly', () => {
+      it('should set this.selected correctly', () => {
         wrapper.instance().handleRowSelect(firstSelectedRow, true, rowIndex);
-        expect(wrapper.state('selected')).toEqual([firstSelectedRow]);
+        expect(wrapper.instance().selected).toEqual([firstSelectedRow]);
 
         wrapper.instance().handleRowSelect(secondSelectedRow, true, rowIndex);
-        expect(wrapper.state('selected')).toEqual([secondSelectedRow]);
+        expect(wrapper.instance().selected).toEqual([secondSelectedRow]);
       });
     });
 
@@ -178,18 +178,19 @@ describe('DataContext', () => {
         wrapper = shallow(shallowContext());
       });
 
-      it('should set state.selected correctly', () => {
+      it('should set this.selected correctly', () => {
         wrapper.instance().handleRowSelect(firstSelectedRow, true, rowIndex);
-        expect(wrapper.state('selected')).toEqual(expect.arrayContaining([firstSelectedRow]));
+        expect(wrapper.instance().selected).toEqual(expect.arrayContaining([firstSelectedRow]));
 
         wrapper.instance().handleRowSelect(secondSelectedRow, true, rowIndex);
-        expect(wrapper.state('selected')).toEqual(expect.arrayContaining([firstSelectedRow, secondSelectedRow]));
+        expect(wrapper.instance().selected)
+          .toEqual(expect.arrayContaining([firstSelectedRow, secondSelectedRow]));
 
         wrapper.instance().handleRowSelect(firstSelectedRow, false, rowIndex);
-        expect(wrapper.state('selected')).toEqual(expect.arrayContaining([secondSelectedRow]));
+        expect(wrapper.instance().selected).toEqual(expect.arrayContaining([secondSelectedRow]));
 
         wrapper.instance().handleRowSelect(secondSelectedRow, false, rowIndex);
-        expect(wrapper.state('selected')).toEqual([]);
+        expect(wrapper.instance().selected).toEqual([]);
       });
     });
 
@@ -220,8 +221,8 @@ describe('DataContext', () => {
         wrapper.instance().handleAllRowsSelect(e, false);
       });
 
-      it('should set state.selected correctly', () => {
-        expect(wrapper.state('selected')).toEqual(data.map(d => d[keyField]));
+      it('should set this.selected correctly', () => {
+        expect(wrapper.instance().selected).toEqual(data.map(d => d[keyField]));
       });
 
       describe('when selectRow.onSelectAll is defined', () => {
@@ -237,7 +238,7 @@ describe('DataContext', () => {
         it('should call selectRow.onSelectAll correctly', () => {
           expect(onSelectAll).toHaveBeenCalledWith(
             true,
-            dataOperator.getSelectedRows(data, keyField, wrapper.state('selected')),
+            dataOperator.getSelectedRows(data, keyField, wrapper.instance().selected),
             e
           );
         });
@@ -253,8 +254,8 @@ describe('DataContext', () => {
         wrapper.instance().handleAllRowsSelect(e, true);
       });
 
-      it('should set state.selected correctly', () => {
-        expect(wrapper.state('selected')).toEqual([]);
+      it('should set this.selected correctly', () => {
+        expect(wrapper.instance().selected).toEqual([]);
       });
 
       describe('when selectRow.onSelectAll is defined', () => {