diff --git a/docs/cell-edit.md b/docs/cell-edit.md
index 6c46151..cc56f6c 100644
--- a/docs/cell-edit.md
+++ b/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 };
+ }
+};
+```
+
### cellEdit.afterSaveCell - [Function]
This callback function will be called after updating cell.
diff --git a/packages/react-bootstrap-table2-editor/src/context.js b/packages/react-bootstrap-table2-editor/src/context.js
index c3f37c5..e9317e2 100644
--- a/packages/react-bootstrap-table2-editor/src/context.js
+++ b/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 {
diff --git a/packages/react-bootstrap-table2-editor/test/context.test.js b/packages/react-bootstrap-table2-editor/test/context.test.js
index 03cfd74..57b56bf 100644
--- a/packages/react-bootstrap-table2-editor/test/context.test.js
+++ b/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());
});
});
diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-async-hooks-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-async-hooks-table.js
new file mode 100644
index 0000000..9839437
--- /dev/null
+++ b/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 };
+}
+
+
{ sourceCode }
+