diff --git a/packages/react-bootstrap-table2-editor/src/editing-cell.js b/packages/react-bootstrap-table2-editor/src/editing-cell.js
index 39aa9a5..7c693b1 100644
--- a/packages/react-bootstrap-table2-editor/src/editing-cell.js
+++ b/packages/react-bootstrap-table2-editor/src/editing-cell.js
@@ -44,6 +44,8 @@ export default (_, onStartEdit) =>
this.handleClick = this.handleClick.bind(this);
this.handleKeyDown = this.handleKeyDown.bind(this);
this.beforeComplete = this.beforeComplete.bind(this);
+ this.asyncbeforeCompete = this.asyncbeforeCompete.bind(this);
+ this.displayErrorMessage = this.displayErrorMessage.bind(this);
this.state = {
invalidMessage: null
};
@@ -79,16 +81,41 @@ export default (_, onStartEdit) =>
}, timeToCloseMessage);
}
+ displayErrorMessage(message) {
+ this.setState(() => ({
+ invalidMessage: message
+ }));
+ this.createTimer();
+ }
+
+ asyncbeforeCompete(newValue) {
+ return (result = { valid: true }) => {
+ const { valid, message } = result;
+ const { onUpdate, row, column } = this.props;
+ if (!valid) {
+ this.displayErrorMessage(message);
+ return;
+ }
+ onUpdate(row, column, newValue);
+ };
+ }
+
beforeComplete(newValue) {
const { onUpdate, row, column } = this.props;
if (_.isFunction(column.validator)) {
- const validateForm = column.validator(newValue, row, column);
- if (_.isObject(validateForm) && !validateForm.valid) {
- this.setState(() => ({
- invalidMessage: validateForm.message
- }));
- this.createTimer();
- return;
+ const validateForm = column.validator(
+ newValue,
+ row,
+ column,
+ this.asyncbeforeCompete(newValue)
+ );
+ if (_.isObject(validateForm)) {
+ if (validateForm.async) {
+ return;
+ } else if (!validateForm.valid) {
+ this.displayErrorMessage(validateForm.message);
+ return;
+ }
}
}
onUpdate(row, column, newValue);
diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-async-validator-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-async-validator-table.js
new file mode 100644
index 0000000..cd3c934
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-async-validator-table.js
@@ -0,0 +1,101 @@
+/* eslint no-unused-vars: 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',
+ validator: (newValue, row, column, done) => {
+ setTimeout(() => {
+ if (isNaN(newValue)) {
+ return done({
+ valid: false,
+ message: 'Price should be numeric'
+ });
+ }
+ if (newValue < 2000) {
+ return done({
+ valid: false,
+ message: 'Price should bigger than 2000'
+ });
+ }
+ return done();
+ }, 2000);
+ return {
+ async: true
+ };
+ }
+}];
+
+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',
+ validator: (newValue, row, column, done) => {
+ setTimeout(() => {
+ if (isNaN(newValue)) {
+ return done({
+ valid: false,
+ message: 'Price should be numeric'
+ });
+ }
+ if (newValue < 2000) {
+ return done({
+ valid: false,
+ message: 'Price should bigger than 2000'
+ });
+ }
+ return done();
+ }, 2000);
+ return {
+ async: true
+ };
+ }
+}];
+
+
{ sourceCode }
+