diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/selection-advance-management.js b/packages/react-bootstrap-table2-example/examples/row-selection/selection-advance-management.js new file mode 100644 index 0000000..22af899 --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/row-selection/selection-advance-management.js @@ -0,0 +1,88 @@ +/* eslint no-alert: 0 */ +/* eslint consistent-return: 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(); + +const columns = [{ + dataField: 'id', + text: 'Product ID' +}, { + dataField: 'name', + text: 'Product Name' +}, { + dataField: 'price', + text: 'Product Price' +}]; + +const sourceCode = `\ +import BootstrapTable from 'react-bootstrap-table-next'; + +class AdvSelectionManagment extends React.Component { + handleOnSelect = (row, isSelect) => { + if (isSelect && row.id < 3) { + alert('Oops, You can not select Product ID which less than 3'); + return false; // return false to deny current select action + } + return true; // return true or dont return to approve current select action + } + + handleOnSelectAll = (isSelect, rows) => { + if (isSelect) { + return rows.filter(r => r.id >= 3).map(r => r.id); + } + } + + render() { + const selectRow = { + mode: 'checkbox', + clickToSelect: true, + onSelect: this.handleOnSelect, + onSelectAll: this.handleOnSelectAll + }; + return ( +
+

You can not select Product ID less than 3

+ + { sourceCode } +
+ ); + } +} +`; + +export default class AdvSelectionManagment extends React.Component { + handleOnSelect = (row, isSelect) => { + if (isSelect && row.id < 3) { + alert('Oops, You can not select Product ID which less than 3'); + return false; // return false to deny current select action + } + return true; // return true or dont return to approve current select action + } + + handleOnSelectAll = (isSelect, rows) => { + if (isSelect) { + return rows.filter(r => r.id >= 3).map(r => r.id); + } + } + + render() { + const selectRow = { + mode: 'checkbox', + clickToSelect: true, + onSelect: this.handleOnSelect, + onSelectAll: this.handleOnSelectAll + }; + return ( +
+

You can not select Product ID less than 3

+ + { sourceCode } +
+ ); + } +} diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js index 7ba6b1b..fd04751 100644 --- a/packages/react-bootstrap-table2-example/stories/index.js +++ b/packages/react-bootstrap-table2-example/stories/index.js @@ -118,6 +118,7 @@ import MultipleSelectionTable from 'examples/row-selection/multiple-selection'; import ClickToSelectTable from 'examples/row-selection/click-to-select'; import DefaultSelectTable from 'examples/row-selection/default-select'; import SelectionManagement from 'examples/row-selection/selection-management'; +import AdvanceSelectionManagement from 'examples/row-selection/selection-advance-management'; import ClickToSelectWithCellEditTable from 'examples/row-selection/click-to-select-with-cell-edit'; import SelectionWithExpansionTable from 'examples/row-selection/selection-with-expansion'; import SelectionNoDataTable from 'examples/row-selection/selection-no-data'; @@ -312,6 +313,7 @@ storiesOf('Row Selection', module) .add('Click to Select', () => ) .add('Default Select', () => ) .add('Selection Management', () => ) + .add('Advance Selection Management', () => ) .add('Click to Select and Edit Cell', () => ) .add('Row Select and Expand', () => ) .add('Selection without Data', () => )