From 0d0d1a891326abb2b6cb19e4d2fba4f1f76e146d Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sat, 8 Jun 2019 17:19:39 +0800 Subject: [PATCH] fix #947 --- docs/row-selection.md | 37 ++++++ .../row-selection/select-column-style.js | 110 ++++++++++++++++++ .../stories/index.js | 2 + .../src/bootstrap-table.js | 1 + .../src/row-selection/selection-cell.js | 20 +++- 5 files changed, 167 insertions(+), 3 deletions(-) create mode 100644 packages/react-bootstrap-table2-example/examples/row-selection/select-column-style.js diff --git a/docs/row-selection.md b/docs/row-selection.md index b885d04..af2d16a 100644 --- a/docs/row-selection.md +++ b/docs/row-selection.md @@ -22,6 +22,7 @@ * [selectionRenderer](#selectionRenderer) * [selectionHeaderRenderer](#selectionHeaderRenderer) * [headerColumnStyle](#headerColumnStyle) +* [selectColumnStyle](#selectColumnStyle) ### selectRow.mode - [String] @@ -225,6 +226,42 @@ const selectRow = { }; ``` +### selectRow.selectColumnStyle - [Object | Function] +A way to custome the selection cell. `selectColumnStyle` not only accept a simple style object but also a callback function for more flexible customization: + +### Style Object + +```js +const selectRow = { + mode: 'checkbox', + selectColumnStyle: { backgroundColor: 'blue' } +}; +``` + +### Callback Function +If a callback function present, you can get below information to custom the selection cell: + +* `checked`: Whether current row is seleccted or not +* `disabled`: Whether current row is disabled or not +* `rowIndex`: Current row index +* `rowKey`: Current row key + + +```js +const selectRow = { + mode: 'checkbox', + selectColumnStyle: ({ + checked, + disabled, + rowIndex, + rowKey + }) => ( + // .... + return { backgroundColor: 'blue' }; + ) +}; +``` + ### selectRow.onSelect - [Function] This callback function will be called when a row is select/unselect and pass following three arguments: `row`, `isSelect`, `rowIndex` and `e`. diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/select-column-style.js b/packages/react-bootstrap-table2-example/examples/row-selection/select-column-style.js new file mode 100644 index 0000000..fd1e237 --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/row-selection/select-column-style.js @@ -0,0 +1,110 @@ +/* eslint no-unused-vars: 0 */ +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(2); + +const columns = [{ + dataField: 'id', + text: 'Product ID' +}, { + dataField: 'name', + text: 'Product Name' +}, { + dataField: 'price', + text: 'Product Price' +}]; + +const selectRow1 = { + mode: 'checkbox', + clickToSelect: true, + selectColumnStyle: { + backgroundColor: 'grey' + } +}; + +const sourceCode1 = `\ +import BootstrapTable from 'react-bootstrap-table-next'; + +const columns = ... + +const selectRow = { + mode: 'checkbox', + clickToSelect: true, + selectColumnStyle: { + backgroundColor: 'grey' + } +}; + + +`; + +const selectRow2 = { + mode: 'checkbox', + clickToSelect: true, + selectColumnStyle: ({ + checked, + disabled, + rowIndex, + rowKey + }) => { + if (checked) { + return { + backgroundColor: 'yellow' + }; + } + return { + backgroundColor: 'pink' + }; + } +}; + +const sourceCode2 = `\ +import BootstrapTable from 'react-bootstrap-table-next'; + +const columns = ... + +const selectRow = { + mode: 'checkbox', + clickToSelect: true, + selectColumnStyle: ({ + checked, + disabled, + rowIndex, + rowKey + }) => { + if (checked) { + return { + backgroundColor: 'yellow' + }; + } + return { + backgroundColor: 'pink' + }; + } +}; + + +`; + +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 d297cf9..2c71fac 100644 --- a/packages/react-bootstrap-table2-example/stories/index.js +++ b/packages/react-bootstrap-table2-example/stories/index.js @@ -150,6 +150,7 @@ import NonSelectableRowsTable from 'examples/row-selection/non-selectable-rows'; import SelectionBgColorTable from 'examples/row-selection/selection-bgcolor'; import SelectionHooks from 'examples/row-selection/selection-hooks'; import HideSelectionColumnTable from 'examples/row-selection/hide-selection-column'; +import SelectionColumnStyleTable from 'examples/row-selection/select-column-style'; import SelectionColumnPositionTable from 'examples/row-selection/selection-column-position'; // work on row expand @@ -396,6 +397,7 @@ storiesOf('Row Selection', module) .add('Not Selectabled Rows', () => ) .add('Selection Hooks', () => ) .add('Hide Selection Column', () => ) + .add('Custom Selection Column Style', () => ) .add('Selection Column Position', () => ); storiesOf('Row Expand', module) diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js index 32dfb86..b708874 100644 --- a/packages/react-bootstrap-table2/src/bootstrap-table.js +++ b/packages/react-bootstrap-table2/src/bootstrap-table.js @@ -169,6 +169,7 @@ BootstrapTable.propTypes = { selectionRenderer: PropTypes.func, selectionHeaderRenderer: PropTypes.func, headerColumnStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), + selectColumnStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), selectColumnPosition: PropTypes.oneOf([ Const.INDICATOR_POSITION_LEFT, Const.INDICATOR_POSITION_RIGHT diff --git a/packages/react-bootstrap-table2/src/row-selection/selection-cell.js b/packages/react-bootstrap-table2/src/row-selection/selection-cell.js index 5e8b27c..d7f8ec8 100644 --- a/packages/react-bootstrap-table2/src/row-selection/selection-cell.js +++ b/packages/react-bootstrap-table2/src/row-selection/selection-cell.js @@ -5,6 +5,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import Const from '../const'; +import _ from '../utils'; import { BootstrapContext } from '../contexts/bootstrap'; export default class SelectionCell extends Component { @@ -17,7 +18,8 @@ export default class SelectionCell extends Component { rowIndex: PropTypes.number, tabIndex: PropTypes.number, clickToSelect: PropTypes.bool, - selectionRenderer: PropTypes.func + selectionRenderer: PropTypes.func, + selectColumnStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.func]) } constructor() { @@ -31,7 +33,8 @@ export default class SelectionCell extends Component { this.props.selected !== nextProps.selected || this.props.disabled !== nextProps.disabled || this.props.rowKey !== nextProps.rowKey || - this.props.tabIndex !== nextProps.tabIndex; + this.props.tabIndex !== nextProps.tabIndex || + this.props.selectColumnStyle !== nextProps.selectColumnStyle; return shouldUpdate; } @@ -57,17 +60,28 @@ export default class SelectionCell extends Component { render() { const { + rowKey, mode: inputType, selected, disabled, tabIndex, rowIndex, - selectionRenderer + selectionRenderer, + selectColumnStyle } = this.props; const attrs = {}; if (tabIndex !== -1) attrs.tabIndex = tabIndex; + attrs.style = _.isFunction(selectColumnStyle) ? + selectColumnStyle({ + checked: selected, + disabled, + rowIndex, + rowKey + }) : + selectColumnStyle; + return ( {