implement default selection (#234)

docs/row-selection.md

@@ -6,6 +6,7 @@
 * [mode (**required**)](#mode)
 
 ## Optional
+* [selected](#selected)
 * [style](#style)
 * [classes)](#classes)
 * [bgColor](#bgColor)
@@ -52,6 +53,16 @@ const selectRow = {
 />
 ```
 
+### <a name='selected'>selectRow.selected - [Array]</a>
+`selectRow.selected` allow you have default selections on table.
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  selected: [1, 3] // should be a row keys array
+};
+```
+
 ### <a name='style'>selectRow.style - [Object | Function]</a>
 `selectRow.style` allow you to have custom style on selected rows:
 

packages/react-bootstrap-table2-example/examples/row-selection/default-select.js

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  selected: [1, 3]
+};
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  selected: [1, 3]
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  selectRow={ selectRow }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -77,6 +77,7 @@ import CellEditClassTable from 'examples/cell-edit/cell-edit-class-table';
 import SingleSelectionTable from 'examples/row-selection/single-selection';
 import MultipleSelectionTable from 'examples/row-selection/multiple-selection';
 import ClickToSelectTable from 'examples/row-selection/click-to-select';
+import DefaultSelectTable from 'examples/row-selection/default-select';
 import ClickToSelectWithCellEditTable from 'examples/row-selection/click-to-select-with-cell-edit';
 import SelectionStyleTable from 'examples/row-selection/selection-style';
 import SelectionClassTable from 'examples/row-selection/selection-class';
@@ -189,6 +190,7 @@ storiesOf('Row Selection', module)
   .add('Single Selection', () => <SingleSelectionTable />)
   .add('Multiple Selection', () => <MultipleSelectionTable />)
   .add('Click to Select', () => <ClickToSelectTable />)
+  .add('Default Select', () => <DefaultSelectTable />)
   .add('Click to Select and Edit Cell', () => <ClickToSelectWithCellEditTable />)
   .add('Selection Style', () => <SelectionStyleTable />)
   .add('Selection Class', () => <SelectionClassTable />)

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

@@ -1,3 +1,4 @@
+/* eslint no-param-reassign: 0 */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
@@ -21,11 +22,21 @@ export default Base =>
       super(props);
       this.handleRowSelect = this.handleRowSelect.bind(this);
       this.handleAllRowsSelect = this.handleAllRowsSelect.bind(this);
+      props.store.selected = this.props.selectRow.selected || [];
       this.state = {
         selectedRowKeys: props.store.selected
       };
     }
 
+    componentWillReceiveProps(nextProps) {
+      if (nextProps.selectRow) {
+        this.store.selected = nextProps.selectRow.selected || [];
+        this.setState(() => ({
+          selectedRowKeys: this.store.selected
+        }));
+      }
+    }
+
     /**
      * row selection handler
      * @param {String} rowKey - row key of what was selected.

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

@@ -8,6 +8,7 @@ import wrapperFactory from '../../src/row-selection/wrapper';
 
 describe('RowSelectionWrapper', () => {
   let wrapper;
+  let selectRow;
 
   const columns = [{
     dataField: 'id',
@@ -25,10 +26,6 @@ describe('RowSelectionWrapper', () => {
     name: 'B'
   }];
 
-  const selectRow = {
-    mode: 'radio'
-  };
-
   const rowIndex = 1;
 
   const keyField = 'id';
@@ -38,6 +35,9 @@ describe('RowSelectionWrapper', () => {
   const RowSelectionWrapper = wrapperFactory(BootstrapTable);
 
   beforeEach(() => {
+    selectRow = {
+      mode: 'radio'
+    };
     wrapper = shallow(
       <RowSelectionWrapper
         keyField={ keyField }
@@ -54,6 +54,10 @@ describe('RowSelectionWrapper', () => {
     expect(wrapper.find(BootstrapTable)).toBeDefined();
   });
 
+  it('should have correct store.selected value', () => {
+    expect(store.selected).toEqual([]);
+  });
+
   it('should have correct state', () => {
     expect(wrapper.state().selectedRowKeys).toBeDefined();
     expect(wrapper.state().selectedRowKeys.length).toEqual(0);
@@ -64,6 +68,30 @@ describe('RowSelectionWrapper', () => {
     expect(wrapper.props().onAllRowsSelect).toBeDefined();
   });
 
+  describe('when selectRow.selected is defiend', () => {
+    beforeEach(() => {
+      selectRow.mode = 'checkbox';
+      selectRow.selected = [1, 3];
+      wrapper = shallow(
+        <RowSelectionWrapper
+          keyField={ keyField }
+          data={ data }
+          columns={ columns }
+          selectRow={ selectRow }
+          store={ store }
+        />
+      );
+    });
+
+    it('should have correct store.selected value', () => {
+      expect(store.selected).toEqual(selectRow.selected);
+    });
+
+    it('should have correct state', () => {
+      expect(wrapper.state().selectedRowKeys).toEqual(selectRow.selected);
+    });
+  });
+
   describe('when selectRow.mode is \'radio\'', () => {
     const firstSelectedRow = data[0][keyField];
     const secondSelectedRow = data[1][keyField];