mirror of
https://github.com/gosticks/react-bootstrap-table2.git
synced 2026-06-28 21:20:04 +00:00
patch tests for refining remote cell edit
This commit is contained in:
AllenFang
@@ -1,75 +0,0 @@
|
||||
/* eslint no-unused-vars: 0 */
|
||||
/* eslint arrow-body-style: 0 */
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import BootstrapTable from 'react-bootstrap-table2';
|
||||
import Code from 'components/common/code-block';
|
||||
import { productsGenerator, sleep } 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 = `\
|
||||
class CellEditWithPromise extends Component {
|
||||
handleCellEditing = (rowId, dataField, newValue) => {
|
||||
return sleep(1000).then(() => {
|
||||
if (dataField === 'price' && (newValue < 2000 || isNaN(newValue))) {
|
||||
throw new Error('Product Price should bigger than $2000');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const cellEdit = {
|
||||
mode: 'click',
|
||||
blurToSave: true,
|
||||
onUpdate: this.handleCellEditing
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<BootstrapTable keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
|
||||
<Code>{ sourceCode }</Code>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
class CellEditWithPromise extends Component {
|
||||
handleCellEditing = (rowId, dataField, newValue) => {
|
||||
return sleep(1000).then(() => {
|
||||
if (dataField === 'price' && (newValue < 2000 || isNaN(newValue))) {
|
||||
throw new Error('Product Price should bigger than $2000');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const cellEdit = {
|
||||
mode: 'click',
|
||||
blurToSave: true,
|
||||
onUpdate: this.handleCellEditing
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<BootstrapTable keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
|
||||
<Code>{ sourceCode }</Code>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default CellEditWithPromise;
|
||||
|
||||
@@ -1,212 +0,0 @@
|
||||
/* eslint no-unused-vars: 0 */
|
||||
/* eslint react/prop-types: 0 */
|
||||
/* eslint arrow-body-style: 0 */
|
||||
/* eslint consistent-return: 0 */
|
||||
/* eslint no-class-assign: 0 */
|
||||
import React, { Component } from 'react';
|
||||
import thunk from 'redux-thunk';
|
||||
import { Provider, connect } from 'react-redux';
|
||||
import { createStore, applyMiddleware } from 'redux';
|
||||
import BootstrapTable from 'react-bootstrap-table2';
|
||||
import Code from 'components/common/code-block';
|
||||
import { productsGenerator } from 'utils/common';
|
||||
|
||||
const columns = [{
|
||||
dataField: 'id',
|
||||
text: 'Product ID'
|
||||
}, {
|
||||
dataField: 'name',
|
||||
text: 'Product Name'
|
||||
}, {
|
||||
dataField: 'price',
|
||||
text: 'Product Price'
|
||||
}];
|
||||
|
||||
const sourceCode = `\
|
||||
/////////////////////// Action Creator ///////////////////////
|
||||
const setErrorMessage = (errorMessage = null) => {
|
||||
return { type: 'SET_ERR_MESSAGE', errorMessage };
|
||||
};
|
||||
|
||||
// Async Action, using redux-thunk
|
||||
const cellEditingAsync = (rowId, dataField, newValue) => {
|
||||
return (dispatch) => {
|
||||
setTimeout(() => {
|
||||
if (dataField === 'price' && (newValue < 2000 || isNaN(newValue))) {
|
||||
dispatch(setErrorMessage('Product Price should bigger than $2000'));
|
||||
} else {
|
||||
dispatch({ type: 'ADD_SUCCESS', rowId, dataField, newValue });
|
||||
}
|
||||
}, 1200);
|
||||
};
|
||||
};
|
||||
|
||||
/////////////////////// Component ///////////////////////
|
||||
class CellEditWithRedux extends Component {
|
||||
// dispatch a async action
|
||||
handleCellEditing = (rowId, dataField, newValue) => {
|
||||
this.props.dispatch(cellEditingAsync(rowId, dataField, newValue));
|
||||
return false;
|
||||
}
|
||||
|
||||
handleErrorMsgDisappear = () => {
|
||||
this.props.dispatch(setErrorMessage());
|
||||
}
|
||||
|
||||
render() {
|
||||
const cellEdit = {
|
||||
mode: 'click',
|
||||
editing: this.props.cellEditing,
|
||||
errorMessage: this.props.errorMessage,
|
||||
onUpdate: this.handleCellEditing,
|
||||
onErrorMessageDisappear: this.handleErrorMsgDisappear
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<BootstrapTable keyField="id" data={ this.props.data } columns={ columns } cellEdit={ cellEdit } />
|
||||
<Code>{ sourceCode }</Code>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
// connect
|
||||
CellEditWithRedux = connect(state => state)(CellEditWithRedux);
|
||||
|
||||
/////////////////////// Reducer ///////////////////////
|
||||
// initial state object and simple reducers
|
||||
const initialState = {
|
||||
data: productsGenerator(),
|
||||
cellEditing: false,
|
||||
errorMessage: null
|
||||
};
|
||||
|
||||
const reducers = (state, action) => {
|
||||
switch (action.type) {
|
||||
case 'ADD_SUCCESS': {
|
||||
const { rowId, dataField, newValue } = action;
|
||||
const data = [...state.data];
|
||||
const rowIndex = data.findIndex(r => r.id === rowId);
|
||||
data[rowIndex][dataField] = newValue;
|
||||
return {
|
||||
data,
|
||||
cellEditing: false,
|
||||
errorMessage: null
|
||||
};
|
||||
}
|
||||
case 'SET_ERR_MESSAGE': {
|
||||
const { errorMessage } = action;
|
||||
return {
|
||||
...state,
|
||||
cellEditing: true,
|
||||
errorMessage
|
||||
};
|
||||
}
|
||||
default: {
|
||||
return { ...state };
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/////////////////////// Index ///////////////////////
|
||||
const store = createStore(reducers, initialState, applyMiddleware(thunk));
|
||||
|
||||
const Index = () => (
|
||||
<Provider store={store}>
|
||||
<CellEditWithRedux />
|
||||
</Provider>
|
||||
);
|
||||
`;
|
||||
|
||||
const setErrorMessage = (errorMessage = null) => {
|
||||
return { type: 'SET_ERR_MESSAGE', errorMessage };
|
||||
};
|
||||
|
||||
// Async Action, using redux-thunk
|
||||
const cellEditingAsync = (rowId, dataField, newValue) => {
|
||||
return (dispatch) => {
|
||||
setTimeout(() => {
|
||||
if (dataField === 'price' && (newValue < 2000 || isNaN(newValue))) {
|
||||
dispatch(setErrorMessage('Product Price should bigger than $2000'));
|
||||
} else {
|
||||
dispatch({ type: 'ADD_SUCCESS', rowId, dataField, newValue });
|
||||
}
|
||||
}, 1200);
|
||||
};
|
||||
};
|
||||
|
||||
class CellEditWithRedux extends Component {
|
||||
// dispatch a async action
|
||||
handleCellEditing = (rowId, dataField, newValue) => {
|
||||
this.props.dispatch(cellEditingAsync(rowId, dataField, newValue));
|
||||
return false;
|
||||
}
|
||||
|
||||
handleErrorMsgDisappear = () => {
|
||||
this.props.dispatch(setErrorMessage());
|
||||
}
|
||||
|
||||
render() {
|
||||
const cellEdit = {
|
||||
mode: 'click',
|
||||
editing: this.props.cellEditing,
|
||||
errorMessage: this.props.errorMessage,
|
||||
onUpdate: this.handleCellEditing,
|
||||
onErrorMessageDisappear: this.handleErrorMsgDisappear
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<BootstrapTable keyField="id" data={ this.props.data } columns={ columns } cellEdit={ cellEdit } />
|
||||
<Code>{ sourceCode }</Code>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
// connect
|
||||
CellEditWithRedux = connect(state => state)(CellEditWithRedux);
|
||||
|
||||
// initial state object and simple reducers
|
||||
const initialState = {
|
||||
data: productsGenerator(),
|
||||
cellEditing: false,
|
||||
errorMessage: null
|
||||
};
|
||||
|
||||
const reducers = (state, action) => {
|
||||
switch (action.type) {
|
||||
case 'ADD_SUCCESS': {
|
||||
const { rowId, dataField, newValue } = action;
|
||||
const data = JSON.parse(JSON.stringify(state.data));
|
||||
const rowIndex = data.findIndex(r => r.id === rowId);
|
||||
data[rowIndex][dataField] = newValue;
|
||||
return {
|
||||
data,
|
||||
cellEditing: false,
|
||||
errorMessage: null
|
||||
};
|
||||
}
|
||||
case 'SET_ERR_MESSAGE': {
|
||||
const { errorMessage } = action;
|
||||
return {
|
||||
...state,
|
||||
cellEditing: true,
|
||||
errorMessage
|
||||
};
|
||||
}
|
||||
default: {
|
||||
return { ...state };
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const store = createStore(reducers, initialState, applyMiddleware(thunk));
|
||||
|
||||
const Index = () => (
|
||||
<Provider store={ store }>
|
||||
<CellEditWithRedux />
|
||||
</Provider>
|
||||
);
|
||||
|
||||
export default Index;
|
||||
|
||||
165
packages/react-bootstrap-table2-example/examples/remote/remote-celledit.js
vendored
Normal file
165
packages/react-bootstrap-table2-example/examples/remote/remote-celledit.js
vendored
Normal file
@@ -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;
|
||||
Reference in New Issue
Block a user