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

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>
 );