fix #111

* implement selectRow.clickToSelect and selectRow.clickToEdit * add selectRow.clickToSelect and selectRow.clickToEdit stories * add clickToSelect to row selection examples for easier to select row * refine selectRow.nonSelectable * patch tests for selectRow.clickToSelect and selectRow.clickToEdit * patch docs for selectRow.clickToSelect and selectRow.clickToEdit

Author: AllenFang

docs/row-selection.md

@@ -13,6 +13,8 @@ The following are available properties in `selectRow`:
 * [classes)](#classes)
 * [bgColor](#bgColor)
 * [nonSelectable)](#nonSelectable)
+* [clickToSelect)](#clickToSelect)
+* [clickToEdit](#clickToEdit)
 
 #### Optional
 
@@ -118,4 +120,28 @@ const selectRow = {
  mode: 'checkbox',
  nonSelectable: [1, 3 ,5]
 };
+```
+
+## <a name='clickToSelect'>selectRow.clickToSelect - [Bool]</a>
+Able to select row when clicking on row.
+
+```js
+const selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true
+};
+```
+
+> Note: if you also enable [cellEdit](./cell-edit.md), the `selectRow.clickToSelect` will deactivate the functionality of cell editing 
+> If you want to click on row to select row and edit cell simultaneously, you are suppose to enable [`selectRow.clickToEdit`](#clickToEdit)
+
+## <a name='clickToEdit'>selectRow.clickToEdit - [Bool]</a>
+Able to click to edit cell and select row
+
+```js
+const selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true
+ clickToEdit: true
+};
 ```

packages/react-bootstrap-table2-example/examples/row-selection/click-to-select-with-cell-edit.js

@@ -0,0 +1,65 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table2';
+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,
+ clickToEdit: true
+};
+
+const cellEdit = {
+ mode: 'click'
+};
+
+const sourceCode = `\
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true,
+ clickToEdit: true // Click to edit cell also
+};
+
+const cellEdit = {
+ mode: 'click'
+};
+
+<BootstrapTable
+ keyField='id'
+ data={ products }
+ columns={ columns }
+ selectRow={ selectRow }
+/>
+`;
+
+export default () => (
+ <div>
+ <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow } cellEdit={ cellEdit } />
+ <Code>{ sourceCode }</Code>
+ </div>
+);

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

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table2';
+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
+};
+
+const sourceCode = `\
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true
+};
+
+<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/examples/row-selection/multiple-selection.js

@@ -17,8 +17,9 @@ const columns = [{
  text: 'Product Price'
 }];
 
-const selectRowProp = {
- mode: 'checkbox'
+const selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true
 };
 
 const sourceCode = `\
@@ -33,21 +34,22 @@ const columns = [{
  text: 'Product Price'
 }];
 
-const selectRowProp = {
- mode: 'checkbox'
+const selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true
 };
 
 <BootstrapTable
  keyField='id'
  data={ products }
  columns={ columns }
- selectRow={ selectRowProp }
+ selectRow={ selectRow }
 />
 `;
 
 export default () => (
  <div>
- <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRowProp } />
+ <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow } />
  <Code>{ sourceCode }</Code>
  </div>
 );

packages/react-bootstrap-table2-example/examples/row-selection/non-selectable-rows.js

@@ -19,6 +19,7 @@ const columns = [{
 
 const selectRow = {
  mode: 'checkbox',
+ clickToSelect: true,
  nonSelectable: [0, 2, 4]
 };
 
@@ -36,6 +37,7 @@ const columns = [{
 
 const selectRow = {
  mode: 'checkbox',
+ clickToSelect: true,
  nonSelectable: [0, 2, 4]
 };
 

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

@@ -20,11 +20,13 @@ const columns = [{
 
 const selectRow1 = {
  mode: 'checkbox',
+ clickToSelect: true,
  bgColor: '#00BFFF'
 };
 
 const selectRow2 = {
  mode: 'checkbox',
+ clickToSelect: true,
  bgColor: (row, rowIndex) => (rowIndex > 1 ? '#00BFFF' : '#00FFFF')
 };
 
@@ -42,6 +44,7 @@ const columns = [{
 
 const selectRow = {
  mode: 'checkbox',
+ clickToSelect: true,
  bgColor: '#00BFFF'
 };
 
@@ -67,6 +70,7 @@ const columns = [{
 
 const selectRow = {
  mode: 'checkbox',
+ clickToSelect: true,
  bgColor: (row, rowIndex) => (rowIndex > 1 ? '#00BFFF' : '#00FFFF')
 };
 

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

@@ -20,11 +20,13 @@ const columns = [{
 
 const selectRow1 = {
  mode: 'checkbox',
+ clickToSelect: true,
  classes: 'selection-row'
 };
 
 const selectRow2 = {
  mode: 'checkbox',
+ clickToSelect: true,
  classes: (row, rowIndex) =>
  (rowIndex > 1 ? 'row-index-bigger-than-2101' : 'row-index-small-than-2101')
 };
@@ -43,6 +45,7 @@ const columns = [{
 
 const selectRow = {
  mode: 'checkbox',
+ clickToSelect: true,
  classes: 'selection-row'
 };
 
@@ -68,6 +71,7 @@ const columns = [{
 
 const selectRow = {
  mode: 'checkbox',
+ clickToSelect: true,
  classes: (row, rowIndex) =>
  (rowIndex > 1 ? 'row-index-bigger-than-2101' : 'row-index-small-than-2101')
 };

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

@@ -20,11 +20,13 @@ const columns = [{
 
 const selectRow1 = {
  mode: 'checkbox',
+ clickToSelect: true,
  style: { backgroundColor: '#c8e6c9' }
 };
 
 const selectRow2 = {
  mode: 'checkbox',
+ clickToSelect: true,
  style: (row, rowIndex) => {
  const backgroundColor = rowIndex > 1 ? '#00BFFF' : '#00FFFF';
  return { backgroundColor };
@@ -45,6 +47,7 @@ const columns = [{
 
 const selectRow = {
  mode: 'checkbox',
+ clickToSelect: true,
  style: { backgroundColor: '#c8e6c9' }
 };
 
@@ -70,6 +73,7 @@ const columns = [{
 
 const selectRow = {
  mode: 'checkbox',
+ clickToSelect: true,
  style: (row, rowIndex) => {
  const backgroundColor = rowIndex > 1 ? '#00BFFF' : '#00FFFF';
  return { backgroundColor };

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

@@ -17,8 +17,9 @@ const columns = [{
  text: 'Product Price'
 }];
 
-const selectRowProp = {
- mode: 'radio'
+const selectRow = {
+ mode: 'radio',
+ clickToSelect: true
 };
 
 const sourceCode = `\
@@ -33,21 +34,22 @@ const columns = [{
  text: 'Product Price'
 }];
 
-const selectRowProp = {
- mode: 'radio'
+const selectRow = {
+ mode: 'radio',
+ clickToSelect: true
 };
 
 <BootstrapTable
  keyField='id'
  data={ products }
  columns={ columns }
- selectRow={ selectRowProp }
+ selectRow={ selectRow }
 />
 `;
 
 export default () => (
  <div>
- <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRowProp } />
+ <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow } />
  <Code>{ sourceCode }</Code>
  </div>
 );

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

@@ -53,6 +53,8 @@ import CellEditWithRedux from 'examples/cell-edit/cell-edit-with-redux-table';
 // work on row selection
 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 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';
 import NonSelectableRowsTable from 'examples/row-selection/non-selectable-rows';
@@ -119,6 +121,8 @@ storiesOf('Cell Editing', module)
 storiesOf('Row Selection', module)
  .add('Single Selection', () => <SingleSelectionTable />)
  .add('Multiple Selection', () => <MultipleSelectionTable />)
+ .add('Click to Select', () => <ClickToSelectTable />)
+ .add('Click to Select and Edit Cell', () => <ClickToSelectWithCellEditTable />)
  .add('Selection Style', () => <SelectionStyleTable />)
  .add('Selection Class', () => <SelectionClassTable />)
  .add('Selection Background Color', () => <SelectionBgColorTable />)