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 5a65347

Browse files
implement filter context
1 parent 22b2632 commit 5a65347

File tree

6 files changed

+119
-101
lines changed

6 files changed

+119
-101
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import TextFilter from './src/components/text';
22
import SelectFilter from './src/components/select';
33
import NumberFilter from './src/components/number';
4-
import wrapperFactory from './src/wrapper';
4+
import createContext from './src/context';
55
import * as Comparison from './src/comparison';
66

77
export default (options = {}) => ({
8-
wrapperFactory,
8+
createContext,
99
options
1010
});
1111

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
/* eslint react/prop-types: 0 */
2+
/* eslint react/require-default-props: 0 */
3+
import React from 'react';
4+
import PropTypes from 'prop-types';
5+
6+
import { filters } from './filter';
7+
import { LIKE, EQ } from './comparison';
8+
import { FILTER_TYPE } from './const';
9+
10+
export default (
11+
_,
12+
isRemoteFiltering,
13+
handleFilterChange
14+
) => {
15+
const FilterContext = React.createContext();
16+
17+
class FilterProvider extends React.Component {
18+
static propTypes = {
19+
data: PropTypes.array.isRequired,
20+
columns: PropTypes.array.isRequired
21+
}
22+
23+
constructor(props) {
24+
super(props);
25+
this.currFilters = {};
26+
this.onFilter = this.onFilter.bind(this);
27+
}
28+
29+
onFilter(column, filterType) {
30+
return (filterVal) => {
31+
// watch out here if migration to context API, #334
32+
const currFilters = Object.assign({}, this.currFilters);
33+
const { dataField, filter } = column;
34+
35+
if (!_.isDefined(filterVal) || filterVal === '') {
36+
delete currFilters[dataField];
37+
} else {
38+
// select default comparator is EQ, others are LIKE
39+
const {
40+
comparator = (filterType === FILTER_TYPE.SELECT ? EQ : LIKE),
41+
caseSensitive = false
42+
} = filter.props;
43+
currFilters[dataField] = { filterVal, filterType, comparator, caseSensitive };
44+
}
45+
46+
this.currFilters = currFilters;
47+
48+
if (isRemoteFiltering()) {
49+
handleFilterChange(currFilters);
50+
// when remote filtering is enable, dont set currFilters state
51+
// in the componentWillReceiveProps,
52+
// it's the key point that we can know the filter is changed
53+
return;
54+
}
55+
56+
this.forceUpdate();
57+
};
58+
}
59+
60+
render() {
61+
let { data } = this.props;
62+
if (!isRemoteFiltering()) {
63+
data = filters(data, this.props.columns, _)(this.currFilters);
64+
}
65+
return (
66+
<FilterContext.Provider value={ {
67+
data,
68+
onFilter: this.onFilter
69+
} }
70+
>
71+
{ this.props.children }
72+
</FilterContext.Provider>
73+
);
74+
}
75+
}
76+
77+
return {
78+
Provider: FilterProvider,
79+
Consumer: FilterContext.Consumer
80+
};
81+
};

‎packages/react-bootstrap-table2-filter/src/filter.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -107,9 +107,9 @@ export const filterFactory = _ => (filterType) => {
107107
return filterFn;
108108
};
109109

110-
export const filters = (store, columns, _) => (currFilters) => {
110+
export const filters = (data, columns, _) => (currFilters) => {
111111
const factory = filterFactory(_);
112-
let result = store.getAllData();
112+
let result = data;
113113
let filterFn;
114114
Object.keys(currFilters).forEach((dataField) => {
115115
const filterObj = currFilters[dataField];

‎packages/react-bootstrap-table2-filter/src/wrapper.js

Lines changed: 0 additions & 91 deletions
This file was deleted.

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

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
/* eslint no-return-assign: 0 */
2+
/* eslint class-methods-use-this: 0 */
23
import React, { Component } from 'react';
34
import _ from '../utils';
45
import createDataContext from './data-context';
@@ -12,6 +13,7 @@ const withContext = (Base) => {
1213
let SelectionContext;
1314
let CellEditContext;
1415
let SortContext;
16+
let FilterContext;
1517

1618
return class BootstrapTableContainer extends remoteResolver(Component) {
1719
constructor(props) {
@@ -23,6 +25,10 @@ const withContext = (Base) => {
2325
CellEditContext = props.cellEdit.createContext(
2426
_, dataOperator, this.isRemoteCellEdit, this.handleCellChange);
2527
}
28+
if (props.filter) {
29+
FilterContext = props.filter.createContext(
30+
_, this.isRemoteFiltering, this.handleRemoteFilterChange);
31+
}
2632
}
2733

2834
componentWillReceiveProps(nextProps) {
@@ -32,13 +38,13 @@ const withContext = (Base) => {
3238
}
3339

3440
renderBase(baseProps) {
35-
return (rootProps, cellEditProps) => (
41+
return (rootProps, cellEditProps,filterProps) => (
3642
<SortContext.Provider
3743
{ ...baseProps }
3844
ref={ n => this.sortContext = n }
3945
defaultSorted={ this.props.defaultSorted }
4046
defaultSortDirection={ this.props.defaultSortDirection }
41-
data={ rootProps.data }
47+
data={ filterProps ? filterProps.data : rootProps.data }
4248
>
4349
<SortContext.Consumer>
4450
{
@@ -56,6 +62,7 @@ const withContext = (Base) => {
5662
{ ...selectionProps }
5763
{ ...sortProps }
5864
{ ...cellEditProps }
65+
{ ...filterProps }
5966
data={ sortProps.data }
6067
/>
6168
)
@@ -69,6 +76,22 @@ const withContext = (Base) => {
6976
);
7077
}
7178

79+
renderWithFilter(base, baseProps) {
80+
return (rootProps, cellEditprops) => (
81+
<FilterContext.Provider
82+
{ ...baseProps }
83+
ref={ n => this.filterContext = n }
84+
data={ rootProps.data }
85+
>
86+
<FilterContext.Consumer>
87+
{
88+
filterProps => base(rootProps, cellEditprops, filterProps)
89+
}
90+
</FilterContext.Consumer>
91+
</FilterContext.Provider>
92+
);
93+
}
94+
7295
renderWithCellEdit(base, baseProps) {
7396
return rootProps => (
7497
<CellEditContext.Provider
@@ -91,6 +114,10 @@ const withContext = (Base) => {
91114

92115
let base = this.renderBase(baseProps);
93116

117+
if (FilterContext) {
118+
base = this.renderWithFilter(base, baseProps);
119+
}
120+
94121
if (CellEditContext) {
95122
base = this.renderWithCellEdit(base, baseProps);
96123
}

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export default ExtendBase =>
1919
sortField: this.sortContext.state.sortColumn ?
2020
this.sortContext.state.sortColumn.dataField :
2121
null,
22+
filters: this.filterContext ? this.filterContext.currFilters : {},
2223
...state,
2324
data: this.props.data
2425
};
@@ -29,9 +30,9 @@ export default ExtendBase =>
2930
return remote === true || (_.isObject(remote) && remote.pagination);
3031
}
3132

32-
isRemoteFiltering() {
33+
isRemoteFiltering=()=> {
3334
const { remote } = this.props;
34-
return remote === true || (_.isObject(remote) && remote.filter);
35+
return remote === true || (_.isObject(remote) && remote.filter)||this.isRemotePagination();
3536
}
3637

3738
isRemoteSort = () => {
@@ -48,8 +49,8 @@ export default ExtendBase =>
4849
this.props.onTableChange('pagination', this.getNewestState());
4950
}
5051

51-
handleRemoteFilterChange() {
52-
const newState = {};
52+
handleRemoteFilterChange=(filters)=> {
53+
const newState = { filters };
5354
if (this.isRemotePagination()) {
5455
const options = this.props.pagination.options || {};
5556
newState.page = _.isDefined(options.pageStartIndex) ? options.pageStartIndex : 1;

0 commit comments

Comments
(0)

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