add story for #604

Author: AllenFang

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
+ };
+ }
+}];
+
+<BootstrapTable
+ keyField="id"
+ data={ products }
+ columns={ columns }
+ cellEdit={ cellEditFactory({
+ mode: 'click',
+ blurToSave: true
+ }) }
+/>
+`;
+
+export default () => (
+ <div>
+ <h3>Product Price should bigger than $2000</h3>
+ <BootstrapTable
+ keyField="id"
+ data={ products }
+ columns={ columns }
+ cellEdit={ cellEditFactory({
+ mode: 'click',
+ blurToSave: true
+ }) }
+ />
+ <Code>{ sourceCode }</Code>
+ </div>
+);

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

@@ -98,6 +98,7 @@ import ColumnLevelEditableTable from 'examples/cell-edit/column-level-editable-t
 import CellLevelEditable from 'examples/cell-edit/cell-level-editable-table';
 import CellEditHooks from 'examples/cell-edit/cell-edit-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';
 import CellEditClassTable from 'examples/cell-edit/cell-edit-class-table';
 import AutoSelectTextInput from 'examples/cell-edit/auto-select-text-input-table';
@@ -289,6 +290,7 @@ storiesOf('Cell Editing', module)
  .add('Cell Level Editable', () => <CellLevelEditable />)
  .add('Rich Hook Functions', () => <CellEditHooks />)
  .add('Validation', () => <CellEditValidator />)
+ .add('Async Validation', () => <AsyncCellEditValidator />)
  .add('Auto Select Text Input', () => <AutoSelectTextInput />)
  .add('Custom Cell Style', () => <CellEditStyleTable />)
  .add('Custom Cell Classes', () => <CellEditClassTable />)