diff --git a/docs/row-selection.md b/docs/row-selection.md index 6143295..9726ce2 100644 --- a/docs/row-selection.md +++ b/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 = { }; ``` +## selectRow.bgColor - [String | Function] +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 + } +}; +``` + ## selectRow.nonSelectable - [Array] This prop allow you to restrict some rows which can not be selected by user. `selectRow.nonSelectable` accept an rowkeys array. diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/selection-bgcolor.js b/packages/react-bootstrap-table2-example/examples/row-selection/selection-bgcolor.js new file mode 100644 index 0000000..a1dc2db --- /dev/null +++ b/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' +}; + + +`; + +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') +}; + + +`; + +export default () => ( +
+ + { sourceCode1 } + + { sourceCode2 } +
+); diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js index 95192e0..7be418f 100644 --- a/packages/react-bootstrap-table2-example/stories/index.js +++ b/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', () => ) .add('Selection Style', () => ) .add('Selection Class', () => ) + .add('Selection Background Color', () => ) .add('Not Selectabled Rows', () => ); diff --git a/packages/react-bootstrap-table2/src/body.js b/packages/react-bootstrap-table2/src/body.js index fe0bcaa..18ccef8 100644 --- a/packages/react-bootstrap-table2/src/body.js +++ b/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 ( diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js index f336f04..c90823a 100644 --- a/packages/react-bootstrap-table2/src/bootstrap-table.js +++ b/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 diff --git a/packages/react-bootstrap-table2/test/body.test.js b/packages/react-bootstrap-table2/test/body.test.js index 9a670a8..fc30b0b 100644 --- a/packages/react-bootstrap-table2/test/body.test.js +++ b/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( + + ); + }); + + 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( + + ); + }); + + 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( + + ); + }); + + 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)', () => {