patch tests for refining remote cell edit

packages/react-bootstrap-table2-example/examples/remote/remote-celledit.js

@@ -0,0 +1,165 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import BootstrapTable from 'react-bootstrap-table2';
+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 = `\
+const RemoteCellEdit = (props) => {
+  const cellEdit = {
+    mode: 'click',
+    errorMessage: props.errorMessage
+  };
+
+  return (
+    <div>
+      <BootstrapTable
+        remote={ { cellEdit: true } }
+        keyField="id"
+        data={ props.data }
+        columns={ columns }
+        cellEdit={ cellEdit }
+        onTableChange={ props.onTableChange }
+      />
+      <Code>{ sourceCode }</Code>
+    </div>
+  );
+};
+
+RemoteCellEdit.propTypes = {
+  data: PropTypes.array.isRequired,
+  onTableChange: PropTypes.func.isRequired,
+  errorMessage: PropTypes.string.isRequired
+};
+
+class Container extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: products,
+      errorMessage: null
+    };
+  }
+
+  handleTableChange = (type, { data, cellEdit: { rowId, dataField, newValue } }) => {
+    setTimeout(() => {
+      if (newValue === 'test' && dataField === 'name') {
+        this.setState(() => ({
+          data,
+          errorMessage: 'Oops, product name shouldn't be "test"'
+        }));
+      } else {
+        const result = data.map((row) => {
+          if (row.id === rowId) {
+            const newRow = { ...row };
+            newRow[dataField] = newValue;
+            return newRow;
+          }
+          return row;
+        });
+        this.setState(() => ({
+          data: result,
+          errorMessage: null
+        }));
+      }
+    }, 2000);
+  }
+
+  render() {
+    return (
+      <RemoteCellEdit
+        data={ this.state.data }
+        errorMessage={ this.state.errorMessage }
+        onTableChange={ this.handleTableChange }
+      />
+    );
+  }
+}
+`;
+
+
+const RemoteCellEdit = (props) => {
+  const cellEdit = {
+    mode: 'click',
+    errorMessage: props.errorMessage
+  };
+
+  return (
+    <div>
+      <BootstrapTable
+        remote={ { cellEdit: true } }
+        keyField="id"
+        data={ props.data }
+        columns={ columns }
+        cellEdit={ cellEdit }
+        onTableChange={ props.onTableChange }
+      />
+      <Code>{ sourceCode }</Code>
+    </div>
+  );
+};
+
+RemoteCellEdit.propTypes = {
+  data: PropTypes.array.isRequired,
+  onTableChange: PropTypes.func.isRequired,
+  errorMessage: PropTypes.string.isRequired
+};
+
+class Container extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: products,
+      errorMessage: null
+    };
+  }
+
+  handleTableChange = (type, { data, cellEdit: { rowId, dataField, newValue } }) => {
+    setTimeout(() => {
+      if (newValue === 'test' && dataField === 'name') {
+        this.setState(() => ({
+          data,
+          errorMessage: 'Oops, product name shouldn\'t be "test"'
+        }));
+      } else {
+        const result = data.map((row) => {
+          if (row.id === rowId) {
+            const newRow = { ...row };
+            newRow[dataField] = newValue;
+            return newRow;
+          }
+          return row;
+        });
+        this.setState(() => ({
+          data: result,
+          errorMessage: null
+        }));
+      }
+    }, 2000);
+  }
+
+  render() {
+    return (
+      <RemoteCellEdit
+        data={ this.state.data }
+        errorMessage={ this.state.errorMessage }
+        onTableChange={ this.handleTableChange }
+      />
+    );
+  }
+}
+
+export default Container;