Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 30d5b41

Browse files
implement celledit context
1 parent 636a3ff commit 30d5b41

File tree

5 files changed

+117
-73
lines changed

5 files changed

+117
-73
lines changed

‎packages/react-bootstrap-table2-editor/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import wrapperFactory from './src/wrapper';
1+
import createContext from './src/context';
22
import editingCellFactory from './src/editing-cell';
33
import {
44
EDITTYPE,
@@ -8,7 +8,7 @@ import {
88
} from './src/const';
99

1010
export default (options = {}) => ({
11-
wrapperFactory,
11+
createContext,
1212
editingCellFactory,
1313
CLICK_TO_CELL_EDIT,
1414
DBCLICK_TO_CELL_EDIT,
Lines changed: 30 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,21 @@
11
/* eslint react/prop-types: 0 */
2-
import React, { Component } from 'react';
2+
/* eslint react/require-default-props: 0 */
3+
import React from 'react';
34
import PropTypes from 'prop-types';
4-
55
import { CLICK_TO_CELL_EDIT, DBCLICK_TO_CELL_EDIT } from './const';
66

77
export default (
8-
Base,
9-
{ _, remoteResolver }
8+
_,
9+
dataOperator,
10+
isRemoteCellEdit,
11+
handleCellChange
1012
) => {
1113
let EditingCell;
12-
return class CellEditWrapper extends remoteResolver(Component) {
14+
const CellEditContext = React.createContext();
15+
16+
class CellEditProvider extends React.Component {
1317
static propTypes = {
18+
data: PropTypes.array.isRequired,
1419
options: PropTypes.shape({
1520
mode: PropTypes.oneOf([CLICK_TO_CELL_EDIT, DBCLICK_TO_CELL_EDIT]).isRequired,
1621
onErrorMessageDisappear: PropTypes.func,
@@ -19,7 +24,7 @@ export default (
1924
afterSaveCell: PropTypes.func,
2025
nonEditableRows: PropTypes.func,
2126
timeToCloseMessage: PropTypes.number,
22-
errorMessage: PropTypes.string
27+
errorMessage: PropTypes.any
2328
})
2429
}
2530

@@ -33,41 +38,32 @@ export default (
3338
this.state = {
3439
ridx: null,
3540
cidx: null,
36-
message: null,
37-
isDataChanged: false
41+
message: null
3842
};
3943
}
4044

4145
componentWillReceiveProps(nextProps) {
42-
if (nextProps.cellEdit && this.isRemoteCellEdit()) {
46+
if (nextProps.cellEdit && isRemoteCellEdit()) {
4347
if (nextProps.cellEdit.options.errorMessage) {
4448
this.setState(() => ({
45-
isDataChanged: false,
4649
message: nextProps.cellEdit.options.errorMessage
4750
}));
4851
} else {
49-
this.setState(() => ({
50-
isDataChanged: true
51-
}));
5252
this.escapeEditing();
5353
}
54-
} else {
55-
this.setState(() => ({
56-
isDataChanged: false
57-
}));
5854
}
5955
}
6056

6157
handleCellUpdate(row, column, newValue) {
62-
const { keyField, cellEdit, store } = this.props;
58+
const { keyField, cellEdit, data } = this.props;
6359
const { beforeSaveCell, afterSaveCell } = cellEdit.options;
6460
const oldValue = _.get(row, column.dataField);
6561
const rowId = _.get(row, keyField);
6662
if (_.isFunction(beforeSaveCell)) beforeSaveCell(oldValue, newValue, row, column);
67-
if (this.isRemoteCellEdit()) {
68-
this.handleCellChange(rowId, column.dataField, newValue);
63+
if (isRemoteCellEdit()) {
64+
handleCellChange(rowId, column.dataField, newValue);
6965
} else {
70-
store.edit(rowId, column.dataField, newValue);
66+
dataOperator.editCell(data,keyField,rowId, column.dataField, newValue);
7167
if (_.isFunction(afterSaveCell)) afterSaveCell(oldValue, newValue, row, column);
7268
this.completeEditing();
7369
}
@@ -77,17 +73,15 @@ export default (
7773
this.setState(() => ({
7874
ridx: null,
7975
cidx: null,
80-
message: null,
81-
isDataChanged: true
76+
message: null
8277
}));
8378
}
8479

8580
startEditing(ridx, cidx) {
8681
const editing = () => {
8782
this.setState(() => ({
8883
ridx,
89-
cidx,
90-
isDataChanged: false
84+
cidx
9185
}));
9286
};
9387

@@ -103,18 +97,18 @@ export default (
10397
}
10498

10599
render() {
106-
const { isDataChanged, ...stateRest } = this.state;
107100
const {
108101
cellEdit: {
109102
options: { nonEditableRows, errorMessage, ...optionsRest },
110103
editingCellFactory,
111104
...cellEditRest
112105
}
113106
} = this.props;
107+
114108
const newCellEdit = {
115109
...optionsRest,
116110
...cellEditRest,
117-
...stateRest,
111+
...this.state,
118112
EditingCell,
119113
nonEditableRows: _.isDefined(nonEditableRows) ? nonEditableRows() : [],
120114
onStart: this.startEditing,
@@ -123,13 +117,16 @@ export default (
123117
};
124118

125119
return (
126-
<Base
127-
{ ...this.props }
128-
data={ this.props.store.data }
129-
isDataChanged={ isDataChanged }
130-
cellEdit={ newCellEdit }
131-
/>
120+
<CellEditContext.Provider
121+
value={ { cellEdit: newCellEdit } }
122+
>
123+
{ this.props.children }
124+
</CellEditContext.Provider>
132125
);
133126
}
127+
}
128+
return {
129+
Provider: CellEditProvider,
130+
Consumer: CellEditContext.Consumer
134131
};
135132
};

‎packages/react-bootstrap-table2/src/contexts/index.js‎

Lines changed: 72 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,109 @@
11
/* eslint no-return-assign: 0 */
22
import React, { Component } from 'react';
3+
import _ from '../utils';
34
import createDataContext from './data-context';
45
import createSortContext from './sort-context';
56
import createSelectionContext from './selection-context';
67
import remoteResolver from '../props-resolver/remote-resolver';
8+
import dataOperator from '../store/operators';
79

810
const withContext = (Base) => {
911
let DataContext;
1012
let SelectionContext;
13+
let CellEditContext;
1114
let SortContext;
1215

1316
return class BootstrapTableContainer extends remoteResolver(Component) {
1417
constructor(props) {
1518
super(props);
16-
DataContext = createDataContext(this.props.data);
17-
SelectionContext = createSelectionContext();
18-
SortContext = createSortContext(this.isRemoteSort, this.handleSortChange);
19+
DataContext = createDataContext(props.data);
20+
SelectionContext = createSelectionContext(dataOperator);
21+
SortContext = createSortContext(dataOperator, this.isRemoteSort, this.handleSortChange);
22+
if (props.cellEdit && props.cellEdit.createContext) {
23+
CellEditContext = props.cellEdit.createContext(
24+
_, dataOperator, this.isRemoteCellEdit, this.handleCellChange);
25+
}
1926
}
2027

21-
render() {
22-
const { keyField, columns } = this.props;
23-
const baseProps = { keyField, columns };
28+
componentWillReceiveProps(nextProps) {
29+
if (!nextProps.cellEdit) {
30+
CellEditContext = null;
31+
}
32+
}
2433

25-
return (
26-
<DataContext.Provider
34+
renderBase(baseProps) {
35+
return (rootProps, cellEditProps) => (
36+
<SortContext.Provider
2737
{ ...baseProps }
28-
data={ this.props.data }
38+
ref={ n => this.sortContext = n }
39+
defaultSorted={ this.props.defaultSorted }
40+
defaultSortDirection={ this.props.defaultSortDirection }
41+
data={ rootProps.data }
2942
>
30-
<DataContext.Consumer>
43+
<SortContext.Consumer>
3144
{
32-
rootProps => (
45+
sortProps => (
3346
<SelectionContext.Provider
3447
{ ...baseProps }
3548
selectRow={ this.props.selectRow }
36-
data={ rootProps.data }
49+
data={ sortProps.data }
3750
>
3851
<SelectionContext.Consumer>
3952
{
4053
selectionProps => (
41-
<SortContext.Provider
42-
ref={ n => this.sortProvider = n }
43-
{ ...baseProps }
44-
defaultSorted={ this.props.defaultSorted }
45-
defaultSortDirection={ this.props.defaultSortDirection }
46-
data={ rootProps.data }
47-
>
48-
<SortContext.Consumer>
49-
{
50-
sortProps => (
51-
<Base
52-
{ ...this.props }
53-
{ ...selectionProps }
54-
{ ...sortProps }
55-
data={ sortProps.data }
56-
/>
57-
)
58-
}
59-
</SortContext.Consumer>
60-
</SortContext.Provider>
54+
<Base
55+
{ ...this.props }
56+
{ ...selectionProps }
57+
{ ...sortProps }
58+
{ ...cellEditProps }
59+
data={ sortProps.data }
60+
/>
6161
)
6262
}
6363
</SelectionContext.Consumer>
6464
</SelectionContext.Provider>
6565
)
6666
}
67+
</SortContext.Consumer>
68+
</SortContext.Provider>
69+
);
70+
}
71+
72+
renderWithCellEdit(base, baseProps) {
73+
return rootProps => (
74+
<CellEditContext.Provider
75+
{ ...baseProps }
76+
cellEdit={ this.props.cellEdit }
77+
data={ rootProps.data }
78+
>
79+
<CellEditContext.Consumer>
80+
{
81+
cellEditprops => base(rootProps, cellEditprops)
82+
}
83+
</CellEditContext.Consumer>
84+
</CellEditContext.Provider>
85+
);
86+
}
87+
88+
render() {
89+
const { keyField, columns } = this.props;
90+
const baseProps = { keyField, columns };
91+
92+
let base = this.renderBase(baseProps);
93+
94+
if (CellEditContext) {
95+
base = this.renderWithCellEdit(base, baseProps);
96+
}
97+
98+
return (
99+
<DataContext.Provider
100+
{ ...baseProps }
101+
data={ this.props.data }
102+
>
103+
<DataContext.Consumer>
104+
{
105+
base
106+
}
67107
</DataContext.Consumer>
68108
</DataContext.Provider>
69109
);

‎packages/react-bootstrap-table2/src/props-resolver/remote-resolver.js‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import _ from '../utils';
33
export default ExtendBase =>
44
class RemoteResolver extends ExtendBase {
55
/* eslint class-methods-use-this: 0 */
6-
getNewestState(state = {}) {
6+
getNewestState=(state = {})=> {
77
// const store = this.store || this.props.store;
88
// return {
99
// page: store.page,
@@ -14,7 +14,14 @@ export default ExtendBase =>
1414
// data: store.getAllData(),
1515
// ...state
1616
// };
17-
return { ...state, data: this.props.data };
17+
return {
18+
sortOrder: this.sortContext.state.sortOrder,
19+
sortField: this.sortContext.state.sortColumn ?
20+
this.sortContext.state.sortColumn.dataField :
21+
null,
22+
...state,
23+
data: this.props.data
24+
};
1825
}
1926

2027
isRemotePagination() {
@@ -32,7 +39,7 @@ export default ExtendBase =>
3239
return remote === true || (_.isObject(remote) && remote.sort) || this.isRemotePagination();
3340
}
3441

35-
isRemoteCellEdit() {
42+
isRemoteCellEdit=()=> {
3643
const { remote } = this.props;
3744
return remote === true || (_.isObject(remote) && remote.cellEdit);
3845
}
@@ -54,7 +61,7 @@ export default ExtendBase =>
5461
this.props.onTableChange('sort', this.getNewestState({ sortField, sortOrder }));
5562
}
5663

57-
handleCellChange(rowId, dataField, newValue) {
64+
handleCellChange=(rowId, dataField, newValue)=> {
5865
const cellEdit = { rowId, dataField, newValue };
5966
this.props.onTableChange('cellEdit', this.getNewestState({ cellEdit }));
6067
}
Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import _ from '../utils';
22
import { getRowByRowId } from './rows';
33

4-
export const editCell = (rowId, dataField, newValue) => {
5-
const row = getRowByRowId(this)(rowId);
4+
export const editCell = (data,keyField,rowId, dataField, newValue) => {
5+
const row = getRowByRowId(data,keyField,rowId);
66
if (row) _.set(row, dataField, newValue);
77
};

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /