Merge pull request #634 from react-bootstrap-table/feat/583

Feat/583

docs/cell-edit.md

@@ -62,6 +62,24 @@ const cellEdit = {
 }
 ```
 
+If you want to perform a async `beforeSaveCell`, you can do it like that:
+
+```js
+const cellEdit: {
+  // omit...
+  beforeSaveCell(oldValue, newValue, row, column, done) {
+    setTimeout(() => {
+      if (confirm('Do you want to accep this change?')) {
+        done(); // contine to save the changes
+      } else {
+        done(false); // reject the changes
+      }
+    }, 0);
+    return { async: true };
+  }
+};
+```
+
 ### <a name='afterSaveCell'>cellEdit.afterSaveCell - [Function]</a>
 This callback function will be called after updating cell.
 

packages/react-bootstrap-table2-editor/src/context.js

@@ -31,6 +31,7 @@ export default (
 
     constructor(props) {
       super(props);
+      this.doUpdate = this.doUpdate.bind(this);
       this.startEditing = this.startEditing.bind(this);
       this.escapeEditing = this.escapeEditing.bind(this);
       this.completeEditing = this.completeEditing.bind(this);
@@ -55,11 +56,36 @@ export default (
     }
 
     handleCellUpdate(row, column, newValue) {
-      const { keyField, cellEdit, data } = this.props;
-      const { beforeSaveCell, afterSaveCell } = cellEdit.options;
+      const { cellEdit } = this.props;
+      const { beforeSaveCell } = cellEdit.options;
       const oldValue = _.get(row, column.dataField);
+      const beforeSaveCellDone = (result = true) => {
+        if (result) {
+          this.doUpdate(row, column, newValue);
+        } else {
+          this.escapeEditing();
+        }
+      };
+      if (_.isFunction(beforeSaveCell)) {
+        const result = beforeSaveCell(
+          oldValue,
+          newValue,
+          row,
+          column,
+          beforeSaveCellDone
+        );
+        if (_.isObject(result) && result.async) {
+          return;
+        }
+      }
+      this.doUpdate(row, column, newValue);
+    }
+
+    doUpdate(row, column, newValue) {
+      const { keyField, cellEdit, data } = this.props;
+      const { afterSaveCell } = cellEdit.options;
       const rowId = _.get(row, keyField);
-      if (_.isFunction(beforeSaveCell)) beforeSaveCell(oldValue, newValue, row, column);
+      const oldValue = _.get(row, column.dataField);
       if (isRemoteCellEdit()) {
         handleCellChange(rowId, column.dataField, newValue);
       } else {

packages/react-bootstrap-table2-editor/test/context.test.js

@@ -235,7 +235,8 @@ describe('CellEditContext', () => {
 
       it('should call cellEdit.beforeSaveCell correctly', () => {
         expect(beforeSaveCell).toHaveBeenCalledTimes(1);
-        expect(beforeSaveCell).toHaveBeenCalledWith(oldValue, newValue, row, column);
+        expect(beforeSaveCell)
+          .toHaveBeenCalledWith(oldValue, newValue, row, column, expect.anything());
       });
     });
 

packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-async-hooks-table.js

@@ -0,0 +1,86 @@
+/* eslint no-unused-vars: 0 */
+/* eslint no-console: 0 */
+/* eslint no-alert: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
+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';
+import cellEditFactory from 'react-bootstrap-table2-editor';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+function beforeSaveCell(oldValue, newValue, row, column, done) {
+  setTimeout(() => {
+    if (confirm('Do you want to accep this change?')) {
+      done(true);
+    } else {
+      done(false);
+    }
+  }, 0);
+  return { async: true };
+}
+
+<BootstrapTable
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  cellEdit={ cellEditFactory({
+    mode: 'click',
+    beforeSaveCell
+  }) }
+/>
+`;
+
+function beforeSaveCell(oldValue, newValue, row, column, done) {
+  setTimeout(() => {
+    if (confirm('Do you want to accep this change?')) {
+      done(true);
+    } else {
+      done(false);
+    }
+  }, 0);
+  return { async: true };
+}
+
+export default () => (
+  <div>
+    <h2>You will get a confirm prompt when you try to save a cell</h2>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      cellEdit={ cellEditFactory({
+        mode: 'click',
+        beforeSaveCell
+      }) }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -97,6 +97,7 @@ import RowLevelEditableTable from 'examples/cell-edit/row-level-editable-table';
 import ColumnLevelEditableTable from 'examples/cell-edit/column-level-editable-table';
 import CellLevelEditable from 'examples/cell-edit/cell-level-editable-table';
 import CellEditHooks from 'examples/cell-edit/cell-edit-hooks-table';
+import AsyncCellEditHooks from 'examples/cell-edit/cell-edit-async-hooks-table';
 import CellEditValidator from 'examples/cell-edit/cell-edit-validator-table';
 import AsyncCellEditValidator from 'examples/cell-edit/cell-edit-async-validator-table';
 import CellEditStyleTable from 'examples/cell-edit/cell-edit-style-table';
@@ -289,6 +290,7 @@ storiesOf('Cell Editing', module)
   .add('Column Level Editable', () => <ColumnLevelEditableTable />)
   .add('Cell Level Editable', () => <CellLevelEditable />)
   .add('Rich Hook Functions', () => <CellEditHooks />)
+  .add('Async Hook Functions', () => <AsyncCellEditHooks />)
   .add('Validation', () => <CellEditValidator />)
   .add('Async Validation', () => <AsyncCellEditValidator />)
   .add('Auto Select Text Input', () => <AutoSelectTextInput />)