fix #108

* implement selectRow.bgColor

* add story for selectRow.bgColor

* add testing for selectRow.bgColor

* patch docs for selectRow.bgColor

docs/row-selection.md

@@ -11,6 +11,7 @@ The following are available properties in `selectRow`:
 * [mode (**required**)](#mode)
 * [style](#style)
 * [classes)](#classes)
+* [bgColor](#bgColor)
 * [nonSelectable)](#nonSelectable)
 
 #### Optional
@@ -88,6 +89,27 @@ const selectRow = {
 };
 ```
 
+## <a name='bgColor'>selectRow.bgColor - [String | Function]</a>
+The backgroud color when row is selected
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  bgColor: 'red'
+};
+```
+
+There's also a more good way to custom it:
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  bgColor: (row, rowIndex) => {
+    return ....;  // return a color code
+  }
+};
+```
+
 ## <a name='nonSelectable'>selectRow.nonSelectable - [Array]</a>
 This prop allow you to restrict some rows which can not be selected by user. `selectRow.nonSelectable` accept an rowkeys array.
 

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

@@ -0,0 +1,88 @@
+/* eslint no-unused-vars: 0 */
+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 selectRow1 = {
+  mode: 'checkbox',
+  bgColor: '#00BFFF'
+};
+
+const selectRow2 = {
+  mode: 'checkbox',
+  bgColor: (row, rowIndex) => (rowIndex > 1 ? '#00BFFF' : '#00FFFF')
+};
+
+const sourceCode1 = `\
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const selectRow = {
+  mode: 'checkbox',
+  bgColor: '#00BFFF'
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  selectRow={ selectRow }
+/>
+`;
+
+const sourceCode2 = `\
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const selectRow = {
+  mode: 'checkbox',
+  bgColor: (row, rowIndex) => (rowIndex > 1 ? '#00BFFF' : '#00FFFF')
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  selectRow={ selectRow }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow1 } />
+    <Code>{ sourceCode1 }</Code>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow2 } />
+    <Code>{ sourceCode2 }</Code>
+  </div>
+);

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

@@ -56,6 +56,7 @@ import MultipleSelectionTable from 'examples/row-selection/multiple-selection';
 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';
+import SelectionBgColorTable from 'examples/row-selection/selection-bgcolor';
 
 // css style
 import 'bootstrap/dist/css/bootstrap.min.css';
@@ -120,4 +121,5 @@ storiesOf('Row Selection', module)
   .add('Multiple Selection', () => <MultipleSelectionTable />)
   .add('Selection Style', () => <SelectionStyleTable />)
   .add('Selection Class', () => <SelectionClassTable />)
+  .add('Selection Background Color', () => <SelectionBgColorTable />)
   .add('Not Selectabled Rows', () => <NonSelectableRowsTable />);

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

@@ -24,7 +24,8 @@ const Body = (props) => {
 
   const {
     style: selectedStyle,
-    classes: selectedClasses
+    classes: selectedClasses,
+    bgColor
   } = selectRow;
 
   let content;
@@ -42,11 +43,16 @@ const Body = (props) => {
         ? selectedRowKeys.includes(key)
         : null;
 
-      let style = {};
-      let classes = '';
+      let style;
+      let classes;
       if (selected) {
         style = _.isFunction(selectedStyle) ? selectedStyle(row, index) : selectedStyle;
         classes = _.isFunction(selectedClasses) ? selectedClasses(row, index) : selectedClasses;
+
+        if (bgColor) {
+          style = style || {};
+          style.backgroundColor = _.isFunction(bgColor) ? bgColor(row, index) : bgColor;
+        }
       }
 
       return (

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

@@ -130,7 +130,8 @@ BootstrapTable.propTypes = {
     mode: PropTypes.oneOf([Const.ROW_SELECT_SINGLE, Const.ROW_SELECT_MULTIPLE]).isRequired,
     style: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
     classes: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-    nonSelectable: PropTypes.array
+    nonSelectable: PropTypes.array,
+    bgColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
   }),
   onRowSelect: PropTypes.func,
   onAllRowsSelect: PropTypes.func

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

@@ -275,6 +275,80 @@ describe('Body', () => {
         expect(wrapper.find(Row).get(0).props.className).toEqual(className);
       });
     });
+
+    describe('if selectRow.bgColor is defined as a string', () => {
+      const bgColor = 'red';
+
+      beforeEach(() => {
+        selectRow.bgColor = bgColor;
+        wrapper = shallow(
+          <Body
+            { ...mockBodyResolvedProps }
+            data={ data }
+            columns={ columns }
+            keyField={ keyField }
+            selectedRowKeys={ selectedRowKeys }
+            selectRow={ selectRow }
+          />
+        );
+      });
+
+      it('should render Row component with correct style.backgroundColor prop', () => {
+        expect(wrapper.find(Row).get(0).props.style).toEqual({ backgroundColor: bgColor });
+      });
+    });
+
+    describe('if selectRow.bgColor is defined as a string', () => {
+      const bgColor = 'red';
+      const bgColorCallBack = sinon.stub().returns(bgColor);
+
+      beforeEach(() => {
+        selectRow.bgColor = bgColorCallBack;
+        wrapper = shallow(
+          <Body
+            { ...mockBodyResolvedProps }
+            data={ data }
+            columns={ columns }
+            keyField={ keyField }
+            selectedRowKeys={ selectedRowKeys }
+            selectRow={ selectRow }
+          />
+        );
+      });
+
+      it('should calling selectRow.bgColor callback correctly', () => {
+        expect(bgColorCallBack.calledOnce).toBeTruthy();
+        expect(bgColorCallBack.calledWith(data[0]), 1);
+      });
+
+      it('should render Row component with correct style.backgroundColor prop', () => {
+        expect(wrapper.find(Row).get(0).props.style).toEqual({ backgroundColor: bgColor });
+      });
+    });
+
+    describe('if selectRow.bgColor defined and selectRow.style.backgroundColor defined', () => {
+      const bgColor = 'yellow';
+      const style = { backgroundColor: 'red' };
+
+      beforeEach(() => {
+        selectRow.style = style;
+        selectRow.bgColor = bgColor;
+        wrapper = shallow(
+          <Body
+            { ...mockBodyResolvedProps }
+            data={ data }
+            columns={ columns }
+            keyField={ keyField }
+            selectedRowKeys={ selectedRowKeys }
+            selectRow={ selectRow }
+          />
+        );
+      });
+
+      it('should take selectRow.bgColor as higher priority', () => {
+        expect(wrapper.find(Row).get(0).props.style.backgroundColor).toBe(bgColor);
+      });
+    });
   });
 
   describe('when selectRow.mode is ROW_SELECT_DISABLED (row was un-selectable)', () => {