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 0a9c9cb

Browse files
refactoring remote sort
1 parent d5fc36b commit 0a9c9cb

File tree

3 files changed

+45
-42
lines changed

3 files changed

+45
-42
lines changed

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

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,10 @@
11
/* eslint no-return-assign: 0 */
2-
/* eslint react/prop-types: 0 */
32
import React, { Component } from 'react';
4-
// import Store from './store';
5-
// import withSort from './sort/wrapper';
6-
// import withSelection from './row-selection/wrapper';
73
import createDataContext from './data-context';
84
import createSortContext from './sort-context';
95
import createSelectionContext from './selection-context';
10-
116
import remoteResolver from '../props-resolver/remote-resolver';
127

13-
148
const withContext = (Base) => {
159
let DataContext;
1610
let SelectionContext;
@@ -21,40 +15,44 @@ const withContext = (Base) => {
2115
super(props);
2216
DataContext = createDataContext(this.props.data);
2317
SelectionContext = createSelectionContext();
24-
SortContext = createSortContext();
18+
SortContext = createSortContext(this.isRemoteSort,this.handleSortChange);
2519
}
2620

2721
render() {
28-
const { keyField, columns, remote } = this.props;
29-
const baseProps = { keyField, columns, remote };
22+
const { keyField, columns } = this.props;
23+
const baseProps = { keyField, columns };
3024

3125
return (
32-
<DataContext.Provider data={ this.props.data }>
26+
<DataContext.Provider
27+
{ ...baseProps }
28+
data={ this.props.data }
29+
>
3330
<DataContext.Consumer>
3431
{
35-
dataProps => (
32+
rootProps => (
3633
<SelectionContext.Provider
3734
{ ...baseProps }
3835
selectRow={ this.props.selectRow }
39-
data={ dataProps }
36+
data={ rootProps.data }
4037
>
4138
<SelectionContext.Consumer>
4239
{
4340
selectionProps => (
4441
<SortContext.Provider
42+
ref={ n => this.sortProvider = n }
4543
{ ...baseProps }
4644
defaultSorted={ this.props.defaultSorted }
4745
defaultSortDirection={ this.props.defaultSortDirection }
48-
data={ dataProps }
46+
data={ rootProps.data }
4947
>
5048
<SortContext.Consumer>
5149
{
5250
sortProps => (
5351
<Base
5452
{ ...this.props }
55-
{ ...dataProps }
5653
{ ...selectionProps }
5754
{ ...sortProps }
55+
data={ sortProps.data }
5856
/>
5957
)
6058
}

‎packages/react-bootstrap-table2/src/contexts/sort-context.js‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
1-
1+
/* eslint react/require-default-props: 0 */
22
import React from 'react';
33
import PropTypes from 'prop-types';
44
import Const from '../const';
55
import { sort, nextOrder } from '../store/sort';
6-
import remoteResolver from '../props-resolver/remote-resolver';
76

8-
export default () => {
7+
export default (
8+
isRemoteSort,
9+
handleSortChange
10+
) => {
911
const SortContext = React.createContext();
1012

11-
class SortProvider extends remoteResolver(React.Component) {
13+
class SortProvider extends React.Component {
1214
static propTypes = {
15+
data: PropTypes.array.isRequired,
1316
columns: PropTypes.array.isRequired,
17+
children: PropTypes.node.isRequired,
1418
defaultSorted: PropTypes.arrayOf(PropTypes.shape({
1519
dataField: PropTypes.string.isRequired,
1620
order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]).isRequired
@@ -35,8 +39,8 @@ export default () => {
3539
sortColumn.onSort(sortField, sortOrder);
3640
}
3741

38-
if (this.isRemoteSort()||this.isRemotePagination()) {
39-
this.handleSortChange();
42+
if (isRemoteSort()) {
43+
handleSortChange(sortField,sortOrder);
4044
}
4145
}
4246
}
@@ -50,20 +54,19 @@ export default () => {
5054
column.onSort(column.dataField, sortOrder);
5155
}
5256

53-
if (this.isRemoteSort() || this.isRemotePagination()) {
54-
this.handleSortChange();
55-
} else {
56-
this.setState(() => ({
57-
sortOrder,
58-
sortColumn: column
59-
}));
57+
if (isRemoteSort()) {
58+
handleSortChange(column.dataField, sortOrder);
6059
}
60+
this.setState(() => ({
61+
sortOrder,
62+
sortColumn: column
63+
}));
6164
}
6265

6366
render() {
6467
let { data } = this.props;
6568
const { sortOrder, sortColumn } = this.state;
66-
if (!this.isRemoteSort()&&!this.isRemotePagination() && sortColumn) {
69+
if (!isRemoteSort() && sortColumn) {
6770
data = sort(data, sortOrder, sortColumn);
6871
}
6972

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

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,19 @@ import _ from '../utils';
22

33
export default ExtendBase =>
44
class RemoteResolver extends ExtendBase {
5+
/* eslint class-methods-use-this: 0 */
56
getNewestState(state = {}) {
6-
const store = this.store || this.props.store;
7-
return {
8-
page: store.page,
9-
sizePerPage: store.sizePerPage,
10-
filters: store.filters,
11-
sortField: store.sortField,
12-
sortOrder: store.sortOrder,
13-
data: store.getAllData(),
14-
...state
15-
};
7+
// const store = this.store || this.props.store;
8+
// return {
9+
// page: store.page,
10+
// sizePerPage: store.sizePerPage,
11+
// filters: store.filters,
12+
// sortField: store.sortField,
13+
// sortOrder: store.sortOrder,
14+
// data: store.getAllData(),
15+
// ...state
16+
// };
17+
return { ...state, data: this.props.data };
1618
}
1719

1820
isRemotePagination() {
@@ -25,9 +27,9 @@ export default ExtendBase =>
2527
return remote === true || (_.isObject(remote) && remote.filter);
2628
}
2729

28-
isRemoteSort() {
30+
isRemoteSort=()=> {
2931
const { remote } = this.props;
30-
return remote === true || (_.isObject(remote) && remote.sort);
32+
return remote === true || (_.isObject(remote) && remote.sort)||this.isRemotePagination();
3133
}
3234

3335
isRemoteCellEdit() {
@@ -48,8 +50,8 @@ export default ExtendBase =>
4850
this.props.onTableChange('filter', this.getNewestState(newState));
4951
}
5052

51-
handleSortChange() {
52-
this.props.onTableChange('sort', this.getNewestState());
53+
handleSortChange=(sortField,sortOrder)=> {
54+
this.props.onTableChange('sort', this.getNewestState({ sortField, sortOrder }));
5355
}
5456

5557
handleCellChange(rowId, dataField, newValue) {

0 commit comments

Comments
(0)

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