refine cellEdit.onUpdate and cellEdit.editing

packages/react-bootstrap-table2/src/bootstrap-table.js

@@ -31,22 +31,27 @@ class BootstrapTable extends PropsBaseResolver(Component) {
  currEditCell: {
  ridx: null,
  cidx: null,
- message: null
+ message: null,
+ editing: false
  }
  };
  }
 
  componentWillReceiveProps({ cellEdit }) {
- if (_.isDefined(cellEdit) && _.isDefined(cellEdit.errorMessage)) {
- const { currEditCell } = this.state;
- this.setState(() => {
- return {
- currEditCell: {
- ...currEditCell,
- message: cellEdit.errorMessage
- }
- };
- });
+ if (_.isDefined(cellEdit)) {
+ if (cellEdit.editing) {
+ const { currEditCell } = this.state;
+ this.setState(() => {
+ return {
+ currEditCell: {
+ ...currEditCell,
+ message: cellEdit.errorMessage
+ }
+ };
+ });
+ } else {
+ this.escapeEditing();
+ }
  }
  }
 
@@ -182,23 +187,23 @@ class BootstrapTable extends PropsBaseResolver(Component) {
  this.setState(() => {
  return {
  data: this.store.get(),
- currEditCell: { ridx: null, cidx: null }
+ currEditCell: { ridx: null, cidx: null, editing: true }
  };
  });
  }
 
  startEditing(ridx, cidx) {
  this.setState(() => {
  return {
- currEditCell: { ridx, cidx }
+ currEditCell: { ridx, cidx, editing: true }
  };
  });
  }
 
  escapeEditing() {
  this.setState(() => {
  return {
- currEditCell: { ridx: null, cidx: null }
+ currEditCell: { ridx: null, cidx: null, editing: false }
  };
  });
  }
@@ -229,11 +234,13 @@ BootstrapTable.propTypes = {
  ]),
  cellEdit: PropTypes.shape({
  mode: PropTypes.oneOf([Const.CLICK_TO_CELL_EDIT, Const.DBCLICK_TO_CELL_EDIT]).isRequired,
- onEditing: PropTypes.func,
+ onUpdate: PropTypes.func,
+ onErrorMessageDisappear: PropTypes.func,
  blurToSave: PropTypes.bool,
  beforeSaveCell: PropTypes.func,
  afterSaveCell: PropTypes.func,
  nonEditableRows: PropTypes.func,
+ editing: PropTypes.bool,
  timeToCloseMessage: PropTypes.number,
  errorMessage: PropTypes.string
  }),

packages/react-bootstrap-table2/src/editing-cell.js

@@ -25,7 +25,6 @@ class EditingCell extends Component {
 
  componentWillReceiveProps({ message }) {
  if (_.isDefined(message)) {
- this.clearTimer();
  this.createTimer();
  this.setState(() => {
  return { invalidMessage: message };
@@ -44,16 +43,17 @@ class EditingCell extends Component {
  }
 
  createTimer() {
- const { timeToCloseMessage } = this.props;
+ this.clearTimer();
+ const { timeToCloseMessage, onErrorMessageDisappear } = this.props;
  this.indicatorTimer = _.sleep(() => {
  this.setState(() => {
  return { invalidMessage: null };
  });
+ if (_.isFunction(onErrorMessageDisappear)) onErrorMessageDisappear();
  }, timeToCloseMessage);
  }
 
  beforeComplete(row, column, newValue) {
- this.clearTimer();
  const { onUpdate } = this.props;
  if (_.isFunction(column.validator)) {
  const validateForm = column.validator(newValue, row, column);

packages/react-bootstrap-table2/src/stateful-layer.js

@@ -17,17 +17,19 @@ const withStateful = (Base) => {
  handleUpdateCell(rowId, dataField, newValue) {
  const { cellEdit } = this.props;
  // handle cell editing internal
- if (!cellEdit.onEditing) {
+ if (!cellEdit.onUpdate) {
  this.store.edit(rowId, dataField, newValue);
  return true;
  }
 
  // handle cell editing external
- const result = cellEdit.onEditing(rowId, dataField, newValue);
- if (_.isDefined(result)) { // TODO: should be a promise here
- result.then((response) => {
- if (response.forceUpdate) {
- this.updateCell(rowId, dataField, response.value || newValue);
+ const aPromise = cellEdit.onUpdate(rowId, dataField, newValue);
+ if (_.isDefined(aPromise) && aPromise !== false) { // TODO: should be a promise here
+ aPromise.then((result) => {
+ const response = result === true ? {} : result;
+ if (_.isObject(response)) {
+ const { value } = response;
+ this.store.edit(rowId, dataField, value || newValue);
  this.table.completeEditing();
  }
  }).catch((e) => {