From 858ad9543ba8d63bab053690ff9c1c8133dd5ccd Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sun, 28 Oct 2018 16:51:13 +0800 Subject: [PATCH 1/3] fix #583 --- .../src/context.js | 32 +++++++++++++++++-- 1 file changed, 29 insertions(+), 3 deletions(-) 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 { From f7a06401aedfe52fa24aa9c8f4a2bb3bb304e2cd Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sun, 28 Oct 2018 16:51:36 +0800 Subject: [PATCH 2/3] patch docs and story for #583 --- docs/cell-edit.md | 18 ++++ .../cell-edit/cell-edit-async-hooks-table.js | 86 +++++++++++++++++++ .../stories/index.js | 2 + 3 files changed, 106 insertions(+) create mode 100644 packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-async-hooks-table.js 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-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 }; +} + + +`; + +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 }; +} + +export default () => ( +
+

You will get a confirm prompt when you try to save a cell

+ + { sourceCode } +
+); diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js index 18c2bc0..7ba6b1b 100644 --- a/packages/react-bootstrap-table2-example/stories/index.js +++ b/packages/react-bootstrap-table2-example/stories/index.js @@ -97,6 +97,7 @@ import RowLevelEditableTable from 'examples/cell-edit/row-level-editable-table'; import ColumnLevelEditableTable from 'examples/cell-edit/column-level-editable-table'; import CellLevelEditable from 'examples/cell-edit/cell-level-editable-table'; import CellEditHooks from 'examples/cell-edit/cell-edit-hooks-table'; +import AsyncCellEditHooks from 'examples/cell-edit/cell-edit-async-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'; @@ -289,6 +290,7 @@ storiesOf('Cell Editing', module) .add('Column Level Editable', () => ) .add('Cell Level Editable', () => ) .add('Rich Hook Functions', () => ) + .add('Async Hook Functions', () => ) .add('Validation', () => ) .add('Async Validation', () => ) .add('Auto Select Text Input', () => ) From 5fac4540a1bf65d577c89af44332c4d74b416999 Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sun, 28 Oct 2018 16:59:44 +0800 Subject: [PATCH 3/3] patch test for #583 --- packages/react-bootstrap-table2-editor/test/context.test.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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()); }); });