Merge pull request #647 from react-bootstrap-table/develop

20181104 release

docs/row-selection.md

@@ -211,18 +211,44 @@ const selectRow = {
 };
 ```
 
+> If you want to reject current select action, just return `false`:
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  onSelect: (row, isSelect, rowIndex, e) => {
+    if (SOME_CONDITION) {
+      return false;
+    }
+  }
+};
+```
+
 ### <a name='onSelectAll'>selectRow.onSelectAll - [Function]</a>
 This callback function will be called when select/unselect all and it only work when you configure [`selectRow.mode`](#mode) as `checkbox`.
 
 ```js
 const selectRow = {
   mode: 'checkbox',
-  onSelectAll: (isSelect, results, e) => {
+  onSelectAll: (isSelect, rows, e) => {
     // ...
   }
 };
 ```
 
+> If you want to control the final selection result, just return a row key array:
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  onSelectAll: (isSelect, rows, e) => {
+    if (isSelect && SOME_CONDITION) {
+      return [1, 3, 4];  // finally, key 1, 3, 4 will being selected 
+    }
+  }
+};
+```
+
 ### <a name='hideSelectColumn'>selectRow.hideSelectColumn - [Bool]</a>
 Default is `false`, if you don't want to have a selection column, give this prop as `true`
 

packages/react-bootstrap-table2-example/examples/column-filter/select-filter-preserve-option-order.js

@@ -0,0 +1,70 @@
+/* eslint max-len: 0 */
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsQualityGenerator } from 'utils/common';
+
+const products = productsQualityGenerator(6);
+
+const selectOptions = [
+  { label: 0, value: 'good' },
+  { label: 1, value: 'Bad' },
+  { label: 2, value: 'unknown' }
+];
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions.find(opt => opt.label === cell).value,
+  filter: selectFilter({
+    options: selectOptions
+  })
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
+
+const selectOptions = [
+  { label: 0, value: 'good' },
+  { label: 1, value: 'Bad' },
+  { label: 2, value: 'unknown' }
+];
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions.find(opt => opt.label === cell).value,
+  filter: selectFilter({
+    options: selectOptions
+  })
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+`;
+
+export default () => (
+  <div>
+    <h3><code>selectFilter.options</code> accept an Array and we keep that order when rendering the options</h3>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      filter={ filterFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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 (
+      <div>
+        <h3>You can not select Product ID less than 3</h3>
+        <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow } />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}
+`;
+
+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 (
+      <div>
+        <h3>You can not select Product ID less than 3</h3>
+        <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow } />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}

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

@@ -55,6 +55,7 @@ import CustomFilterValue from 'examples/column-filter/custom-filter-value';
 import SelectFilter from 'examples/column-filter/select-filter';
 import SelectFilterWithDefaultValue from 'examples/column-filter/select-filter-default-value';
 import SelectFilterComparator from 'examples/column-filter/select-filter-like-comparator';
+import SelectFilterWithPreservedOptionsOrder from 'examples/column-filter/select-filter-preserve-option-order';
 import CustomSelectFilter from 'examples/column-filter/custom-select-filter';
 import MultiSelectFilter from 'examples/column-filter/multi-select-filter';
 import MultiSelectFilterDefaultValue from 'examples/column-filter/multi-select-filter-default-value';
@@ -118,6 +119,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';
@@ -262,6 +264,7 @@ storiesOf('Column Filter', module)
   .add('Programmatically Multi Select Filter', () => <ProgrammaticallyMultiSelectFilter />)
   .add('Custom Filter', () => <CustomFilter />)
   .add('Advance Custom Filter', () => <AdvanceCustomFilter />)
+  .add('Preserved Option Order on Select Filter', () => <SelectFilterWithPreservedOptionsOrder />)
   .add('Clear All Filters', () => <ClearAllFilters />);
 
 storiesOf('Work on Rows', module)
@@ -312,6 +315,7 @@ storiesOf('Row Selection', module)
   .add('Click to Select', () => <ClickToSelectTable />)
   .add('Default Select', () => <DefaultSelectTable />)
   .add('Selection Management', () => <SelectionManagement />)
+  .add('Advance Selection Management', () => <AdvanceSelectionManagement />)
   .add('Click to Select and Edit Cell', () => <ClickToSelectWithCellEditTable />)
   .add('Row Select and Expand', () => <SelectionWithExpansionTable />)
   .add('Selection without Data', () => <SelectionNoDataTable />)

packages/react-bootstrap-table2-filter/README.md

@@ -115,6 +115,27 @@ const qualityFilter = selectFilter({
 // omit...
 ```
 
+> Note, the selectOptions can be an array also: 
+
+```js
+const selectOptions = [
+  { label: 0, value: 'good' },
+  { label: 1, value: 'Bad' },
+  { label: 2, value: 'unknown' }
+];
+const columns = [
+  ..., {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions.find(opt => opt.label === cell).value,
+  filter: selectFilter({
+    options: selectOptions
+  })
+}];
+```
+
+The benifit is `react-bootstrap-table2` will render the select options by the order of array.
+
 ## MultiSelect Filter
 
 A quick example: 

packages/react-bootstrap-table2-filter/src/components/select.js

@@ -7,6 +7,14 @@ import { LIKE, EQ } from '../comparison';
 import { FILTER_TYPE } from '../const';
 
 function optionsEquals(currOpts, prevOpts) {
+  if (Array.isArray(currOpts)) {
+    for (let i = 0; i < currOpts.length; i += 1) {
+      if (currOpts[i].label !== prevOpts[i].label) {
+        return false;
+      }
+    }
+    return currOpts.length === prevOpts.length;
+  }
   const keys = Object.keys(currOpts);
   for (let i = 0; i < keys.length; i += 1) {
     if (currOpts[keys[i]] !== prevOpts[keys[i]]) {
@@ -16,11 +24,21 @@ function optionsEquals(currOpts, prevOpts) {
   return Object.keys(currOpts).length === Object.keys(prevOpts).length;
 }
 
+function getOptionValue(options, key) {
+  if (Array.isArray(options)) {
+    const result = options
+      .filter(({ label }) => label === key)
+      .map(({ value }) => value);
+    return result[0];
+  }
+  return options[key];
+}
+
 class SelectFilter extends Component {
   constructor(props) {
     super(props);
     this.filter = this.filter.bind(this);
-    const isSelected = props.options[props.defaultValue] !== undefined;
+    const isSelected = getOptionValue(props.options, props.defaultValue) !== undefined;
     this.state = { isSelected };
   }
 
@@ -66,9 +84,14 @@ class SelectFilter extends Component {
         <option key="-1" value="">{ placeholder || `Select ${column.text}...` }</option>
       ));
     }
-    Object.keys(options).forEach(key =>
-      optionTags.push(<option key={ key } value={ key }>{ options[key] }</option>)
-    );
+    if (Array.isArray(options)) {
+      options.forEach(({ value, label }) =>
+        optionTags.push(<option key={ label } value={ label }>{ value }</option>));
+    } else {
+      Object.keys(options).forEach(key =>
+        optionTags.push(<option key={ key } value={ key }>{ options[key] }</option>)
+      );
+    }
     return optionTags;
   }
 
@@ -128,7 +151,7 @@ class SelectFilter extends Component {
 SelectFilter.propTypes = {
   onFilter: PropTypes.func.isRequired,
   column: PropTypes.object.isRequired,
-  options: PropTypes.object.isRequired,
+  options: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
   comparator: PropTypes.oneOf([LIKE, EQ]),
   placeholder: PropTypes.string,
   style: PropTypes.object,

packages/react-bootstrap-table2/src/contexts/selection-context.js

@@ -43,20 +43,23 @@ class SelectionProvider extends React.Component {
 
     let currSelected = [...this.state.selected];
 
-    if (mode === ROW_SELECT_SINGLE) { // when select mode is radio
-      currSelected = [rowKey];
-    } else if (checked) { // when select mode is checkbox
-      currSelected.push(rowKey);
-    } else {
-      currSelected = currSelected.filter(value => value !== rowKey);
-    }
-
-    if (onSelect) {
-      const row = dataOperator.getRowByRowId(data, keyField, rowKey);
-      onSelect(row, checked, rowIndex, e);
-    }
-
-    this.setState(() => ({ selected: currSelected }));
+    this.setState(() => {
+      let result = true;
+      if (onSelect) {
+        const row = dataOperator.getRowByRowId(data, keyField, rowKey);
+        result = onSelect(row, checked, rowIndex, e);
+      }
+      if (result === true || result === undefined) {
+        if (mode === ROW_SELECT_SINGLE) { // when select mode is radio
+          currSelected = [rowKey];
+        } else if (checked) { // when select mode is checkbox
+          currSelected.push(rowKey);
+        } else {
+          currSelected = currSelected.filter(value => value !== rowKey);
+        }
+      }
+      return { selected: currSelected };
+    });
   }
 
   handleAllRowsSelect = (e, isUnSelect) => {
@@ -78,19 +81,24 @@ class SelectionProvider extends React.Component {
       currSelected = selected.filter(s => typeof data.find(d => d[keyField] === s) === 'undefined');
     }
 
-    if (onSelectAll) {
-      onSelectAll(
-        !isUnSelect,
-        dataOperator.getSelectedRows(
-          data,
-          keyField,
-          isUnSelect ? this.state.selected : currSelected
-        ),
-        e
-      );
-    }
-
-    this.setState(() => ({ selected: currSelected }));
+    this.setState(() => {
+      let result;
+      if (onSelectAll) {
+        result = onSelectAll(
+          !isUnSelect,
+          dataOperator.getSelectedRows(
+            data,
+            keyField,
+            isUnSelect ? this.state.selected : currSelected
+          ),
+          e
+        );
+        if (Array.isArray(result)) {
+          currSelected = result;
+        }
+      }
+      return { selected: currSelected };
+    });
   }
 
   render() {