diff --git a/docs/row-expand.md b/docs/row-expand.md index 1aa958a..5f6b47a 100644 --- a/docs/row-expand.md +++ b/docs/row-expand.md @@ -13,6 +13,7 @@ * [onExpand](#onExpand) * [onExpandAll](#onExpandAll) * [showExpandColumn](#showExpandColumn) +* [onlyOneExpanding](#onlyOneExpanding) * [expandColumnRenderer](#expandColumnRenderer) * [expandHeaderColumnRenderer](#expandHeaderColumnRenderer) @@ -127,3 +128,13 @@ const expandRow = { showExpandColumn: true }; ``` + +### expandRow.onlyOneExpanding - [Bool] +Default is `false`. Enable this will only allow one row get expand at the same time. + +```js +const expandRow = { + renderer: (row) => ... + onlyOneExpanding: true +}; +``` diff --git a/packages/react-bootstrap-table2-example/examples/row-expand/expand-only-one.js b/packages/react-bootstrap-table2-example/examples/row-expand/expand-only-one.js new file mode 100644 index 0000000..4ef5bc4 --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/row-expand/expand-only-one.js @@ -0,0 +1,73 @@ +import React from 'react'; + +import BootstrapTable from 'react-bootstrap-table-next'; +import Code from 'components/common/code-block'; +import { productsExpandRowsGenerator } from 'utils/common'; + +const products = productsExpandRowsGenerator(); + +const columns = [{ + dataField: 'id', + text: 'Product ID' +}, { + dataField: 'name', + text: 'Product Name' +}, { + dataField: 'price', + text: 'Product Price' +}]; + +const expandRow = { + onlyOneExpanding: true, + renderer: row => ( +
+

{ `This Expand row is belong to rowKey ${row.id}` }

+

You can render anything here, also you can add additional data on every row object

+

expandRow.renderer callback will pass the origin row object to you

+
+ ) +}; + +const sourceCode = `\ +import BootstrapTable from 'react-bootstrap-table-next'; + +const columns = [{ + dataField: 'id', + text: 'Product ID' +}, { + dataField: 'name', + text: 'Product Name' +}, { + dataField: 'price', + text: 'Product Price' +}]; + +const expandRow = { + renderer: row => ( +
+

{ \`This Expand row is belong to rowKey $\{row.id}\` }

+

You can render anything here, also you can add additional data on every row object

+

expandRow.renderer callback will pass the origin row object to you

+
+ ) +}; + + +`; + +export default () => ( +
+ + { sourceCode } +
+); diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js index dbfdf48..771655f 100644 --- a/packages/react-bootstrap-table2-example/stories/index.js +++ b/packages/react-bootstrap-table2-example/stories/index.js @@ -128,6 +128,7 @@ import BasicRowExpand from 'examples/row-expand'; import RowExpandManagement from 'examples/row-expand/expand-management'; import NonExpandableRows from 'examples/row-expand/non-expandable-rows'; import ExpandColumn from 'examples/row-expand/expand-column'; +import ExpandOnlyOne from 'examples/row-expand/expand-only-one'; import CustomExpandColumn from 'examples/row-expand/custom-expand-column'; import ExpandHooks from 'examples/row-expand/expand-hooks'; @@ -314,6 +315,7 @@ storiesOf('Row Expand', module) .add('Expand Management', () => ) .add('Non Expandabled Rows', () => ) .add('Expand Indicator', () => ) + .add('Expand Only One Row at The Same Time', () => ) .add('Custom Expand Indicator', () => ) .add('Expand Hooks', () => ); diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js index 75b7e4f..b0d4779 100644 --- a/packages/react-bootstrap-table2/src/bootstrap-table.js +++ b/packages/react-bootstrap-table2/src/bootstrap-table.js @@ -166,6 +166,7 @@ BootstrapTable.propTypes = { onExpandAll: PropTypes.func, nonExpandable: PropTypes.array, showExpandColumn: PropTypes.bool, + onlyOneExpanding: PropTypes.bool, expandColumnRenderer: PropTypes.func, expandHeaderColumnRenderer: PropTypes.func }), diff --git a/packages/react-bootstrap-table2/src/contexts/row-expand-context.js b/packages/react-bootstrap-table2/src/contexts/row-expand-context.js index d6b1702..3e882c6 100644 --- a/packages/react-bootstrap-table2/src/contexts/row-expand-context.js +++ b/packages/react-bootstrap-table2/src/contexts/row-expand-context.js @@ -25,12 +25,13 @@ export default ( } handleRowExpand = (rowKey, expanded, rowIndex, e) => { - const { data, keyField, expandRow: { onExpand } } = this.props; + const { data, keyField, expandRow: { onExpand, onlyOneExpanding } } = this.props; let currExpanded = [...this.state.expanded]; if (expanded) { - currExpanded.push(rowKey); + if (onlyOneExpanding) currExpanded = [rowKey]; + else currExpanded.push(rowKey); } else { currExpanded = currExpanded.filter(value => value !== rowKey); }