From d5f7ae5edb64906e9f247bbdb5a4ae605e112f25 Mon Sep 17 00:00:00 2001 From: AllenFang Date: Thu, 4 Jan 2018 23:34:17 +0800 Subject: [PATCH] refined docs for remote cell edit --- docs/README.md | 18 ++++++++++-- docs/cell-edit.md | 71 +---------------------------------------------- 2 files changed, 16 insertions(+), 73 deletions(-) diff --git a/docs/README.md b/docs/README.md index 5023f08..6ed4f43 100644 --- a/docs/README.md +++ b/docs/README.md @@ -40,7 +40,13 @@ This is a chance that you can connect to your remote server or database to manip For flexibility reason, you can control what functionality should be handled on remote via a object return: ```js -remote={ { filter: true } } +remote={ { + filter: true, + pagination: true, + filter: true, + sort: true, + cellEdit: true +} } ``` In above case, only column filter will be handled on remote. @@ -53,7 +59,7 @@ A special case for remote pagination: remote={ { pagination: true, filter: false, sort: false } } ``` -In pagination case, even you only specified the paignation need to handle as remote, `react-bootstrap-table2` will handle all the table changes(`filter`, `sort` etc) as remote mode, because `react-bootstrap-table` only know the data of current page, but filtering, searching or sort need to work on overall datas. +In pagination case, even you only specified the paignation need to handle as remote, `react-bootstrap-table2` will handle all the table changes(`filter`, `sort`) as remote mode, because `react-bootstrap-table` only know the data of current page, but filtering, searching or sort need to work on overall datas. ### loading - [Bool] Telling if table is loading or not, for example: waiting data loading, filtering etc. It's **only** valid when [`remote`](#remote) is enabled. @@ -250,6 +256,7 @@ There's only two arguments will be passed to `onTableChange`: `type` and `newSta * `filter` * `pagination` * `sort` +* `cellEdit` Following is a shape of `newState` @@ -260,6 +267,11 @@ Following is a shape of `newState` sortField, // newest sort field sortOrder, // newest sort order filters, // an object which have current filter status per column - data // when you enable remote sort, you may need to base on data to sort if data is filtered/searched + data, // when you enable remote sort, you may need to base on data to sort if data is filtered/searched + cellEdit: { // You can only see this prop when type is cellEdit + rowId, + dataField, + newValue + } } ``` \ No newline at end of file diff --git a/docs/cell-edit.md b/docs/cell-edit.md index 328a94e..051dde8 100644 --- a/docs/cell-edit.md +++ b/docs/cell-edit.md @@ -5,8 +5,6 @@ * [timeToCloseMessage](#timeToCloseMessage) * [beforeSaveCell](#beforeSaveCell) * [afterSaveCell](#afterSaveCell) -* [onUpdate](#onUpdate) -* [editing](#editing) * [errorMessage](#errorMessage) * [onErrorMessageDisappear](#onErrorMessageDisappear) @@ -21,9 +19,7 @@ Following is the shape of `cellEdit` object: mode: 'click', blurToSave: true, timeToCloseMessage: 2500, - editing: false|true, errorMessage: '', - onUpdate: (rowId, dataField, newValue) => { ... }, beforeSaveCell: (oldValue, newValue, row, column) => { ... }, afterSaveCell: (oldValue, newValue, row, column) => { ... }, onErrorMessageDisappear: () => { ... }, @@ -63,73 +59,8 @@ const cellEdit = { }; ``` -### cellEdit.onUpdate - [Function] -If you want to control the cell updating process by yourself, for example, connect with `Redux` or saving data to backend database, `cellEdit.onUpdate` is a great chance you can work on it. - -Firsylt, `react-bootstrap-table2` allow `cellEdit.onUpdate` to return a promise: - -```js -const cellEdit = { - // omit... - onUpdate: (rowId, dataField, newValue) => { - return apiCall().then(response => { - console.log('update cell to backend successfully'); - // Actually, you dont do any thing here, we will update the new value when resolve your promise - }) - .catch(err => throw new Error(err.message)); - } -}; -``` - -If your promise is resolved successfully, `react-bootstrap-table2` will default help you to update the new cell value. -If your promise is resolved failure, you can throw an `Error` instance, `react-bootstrap-table2` will show up the error message (Same behavior like [`column.validator`](./columns.md#validator)). - -In some case, backend will return a new value to client side and you want to apply this new value instead of the value that user input. In this situation, you can return an object which contain a `value` property: - -```js -const cellEdit = { - // omit... - onUpdate: (rowId, dataField, newValue) => { - return apiCall().then(response => { - return { value: response.value }; // response.value is from your backend api - }) - .catch(err => throw new Error(err.message)); - } -}; -``` - -If your application integgrate with `Redux`, you may need to dispatch an action in `cellEdit.onUpdate` callback. In this circumstances, you need to return `false` explicity which `react-bootstrap-table2` will stop any operation internally and wait rerender by your application. - -In a simple redux application, you probably need to handle those props by your application: - -* [`cellEdit.editing`](#editing): Is cell still on editing or not? This value should always be `true` when saving cell failure. -* [`cellEdit.errorMessage`](#errorMessage): Error message when save the cell failure. -* [`cellEdit.onErrorMessageDisappear`](#onErrorMessageDisappear): This callback will be called when error message alert closed automatically. -* `cellEdit.onUpdate` - -```js -const cellEdit = { - editing: this.props.editing, - errorMessage: this.props.errorMessage, - onErrorMessageDisappear: () => { - // cleanErrorMessage is an action creator - this.props.dispatch(cleanErrorMessage()); - }, - onUpdate: (rowId, dataField, newValue) => { - // updateCell is an action creator - this.props.dispatch(updateCell(rowId, dataField, newValue))); - return false; // Have to return false here - } -}; -``` - -Please check [this](https://github.com/react-bootstrap-table/react-bootstrap-table2/blob/develop/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-with-redux-table.js) exmaple to learn how use `cellEdit` with a redux application - -### cellEdit.editing - [Bool] -This only used when you want to control cell saving externally, `cellEdit.editing` will be a flag to tell `react-bootstrap-table2` whether currecnt editing cell is still editing or not. Because, it's possible that some error happen when you saving cell, in this situation, you need to configre this value as `false` to keep the cell as edtiable and show up an error message. - ### cellEdit.errorMessage - [String] -Same as [`cellEdit.editing`](#editing). This prop is not often used. Only used when you keep the error message in your application state. +This prop is not often used. Only used when you keep the error message in your application state and also handle the cell editing on remote mode. ### cellEdit.onErrorMessageDisappear - [Function] This callback function will be called when error message discard.