Skip to content

Commit 9190cfc

Browse files
Ali OgailiAllenFang
Ali Ogaili
authored and
AllenFang
committed
fix #1005 
1 parent 45b1335 commit 9190cfc

File tree

6 files changed

+147
-29
lines changed

6 files changed

+147
-29
lines changed

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

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
66
import cs from 'classnames';
77

88
import Header from './header';
9+
import Filters from './filters';
910
import Caption from './caption';
1011
import Body from './body';
1112
import Footer from './footer';
@@ -77,6 +78,8 @@ class BootstrapTable extends PropsBaseResolver(Component) {
7778
[bootstrap4 ? 'table-sm' : 'table-condensed']: condensed
7879
}, classes);
7980

81+
const hasFilters = columns.some(col => col.filter || col.filterRenderer);
82+
8083
const hasFooter = _.filter(columns, col => _.has(col, 'footer')).length > 0;
8184

8285
const tableCaption = (caption && <Caption>{ caption }</Caption>);
@@ -91,12 +94,20 @@ class BootstrapTable extends PropsBaseResolver(Component) {
9194
sortField={ this.props.sortField }
9295
sortOrder={ this.props.sortOrder }
9396
onSort={ this.props.onSort }
94-
onFilter={ this.props.onFilter }
95-
currFilters={ this.props.currFilters }
96-
onExternalFilter={ this.props.onExternalFilter }
9797
selectRow={ selectRow }
9898
expandRow={ expandRow }
9999
/>
100+
{hasFilters && (
101+
<Filters
102+
columns={ columns }
103+
className={ this.props.filtersClasses }
104+
onSort={ this.props.onSort }
105+
onFilter={ this.props.onFilter }
106+
currFilters={ this.props.currFilters }
107+
position={ this.props.filtersPosition }
108+
onExternalFilter={ this.props.onExternalFilter }
109+
/>
110+
)}
100111
<Body
101112
data={ this.getData() }
102113
keyField={ keyField }
@@ -199,6 +210,11 @@ BootstrapTable.propTypes = {
199210
rowEvents: PropTypes.object,
200211
rowClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
201212
headerClasses: PropTypes.string,
213+
filtersClasses: PropTypes.string,
214+
filtersPosition: PropTypes.oneOf([
215+
Const.FILTERS_POSITION_TOP,
216+
Const.FILTERS_POSITION_BOTTOM
217+
]),
202218
footerClasses: PropTypes.string,
203219
defaultSorted: PropTypes.arrayOf(PropTypes.shape({
204220
dataField: PropTypes.string.isRequired,

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,7 @@ export default {
1212
TYPE_STRING: 'string',
1313
TYPE_NUMBER: 'number',
1414
TYPE_BOOLEAN: 'bool',
15-
TYPE_DATE: 'date'
15+
TYPE_DATE: 'date',
16+
FILTERS_POSITION_TOP: 'top',
17+
FILTERS_POSITION_BOTTOM: 'bottom'
1618
};

‎packages/react-bootstrap-table2/src/filters-cell.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import _ from './utils';
4+
5+
const FiltersCell = (props) => {
6+
const { index, column, onExternalFilter, currFilters, onFilter } = props;
7+
const { filterRenderer, filter } = column;
8+
let filterElm;
9+
const cellAttrs = {};
10+
const cellStyle = {};
11+
cellAttrs.style = cellStyle;
12+
if (column.headerAlign) {
13+
cellStyle.textAlign = _.isFunction(column.headerAlign)
14+
? column.headerAlign(column, index)
15+
: column.headerAlign;
16+
}
17+
if (column.filterRenderer) {
18+
const onCustomFilter = onExternalFilter(column, filter.props.type);
19+
filterElm = filterRenderer(onCustomFilter, column);
20+
} else if (filter) {
21+
filterElm = (
22+
<filter.Filter
23+
{ ...filter.props }
24+
filterState={ currFilters[column.dataField] }
25+
onFilter={ onFilter }
26+
column={ column }
27+
/>
28+
);
29+
}
30+
return React.createElement('th', cellAttrs, filterElm);
31+
};
32+
33+
FiltersCell.propTypes = {
34+
index: PropTypes.number.isRequired,
35+
column: PropTypes.object,
36+
onFilter: PropTypes.func,
37+
currFilters: PropTypes.object,
38+
onExternalFilter: PropTypes.func
39+
};
40+
41+
export default FiltersCell;

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

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
/* eslint react/require-default-props: 0 */
2+
import React from 'react';
3+
import PropTypes from 'prop-types';
4+
5+
import FiltersCell from './filters-cell';
6+
import Const from './const';
7+
8+
const Filters = (props) => {
9+
const {
10+
columns,
11+
onFilter,
12+
currFilters,
13+
position,
14+
onExternalFilter,
15+
className
16+
} = props;
17+
18+
const filterColumns = [];
19+
let showFiltersRow = false;
20+
21+
columns.forEach((column, i) => {
22+
filterColumns.push(<FiltersCell
23+
index={ i }
24+
column={ column }
25+
currFilters={ currFilters }
26+
onExternalFilter={ onExternalFilter }
27+
onFilter={ onFilter }
28+
/>);
29+
30+
if (column.filterRenderer || column.filter) {
31+
if (!showFiltersRow) {
32+
showFiltersRow = true;
33+
}
34+
}
35+
});
36+
37+
return (
38+
<tfoot
39+
className={ className }
40+
style={ {
41+
display:
42+
position === Const.FILTERS_POSITION_TOP
43+
? 'table-header-group'
44+
: 'table-footer-group'
45+
} }
46+
>
47+
<tr>{filterColumns}</tr>
48+
</tfoot>
49+
);
50+
};
51+
52+
Filters.propTypes = {
53+
columns: PropTypes.array.isRequired,
54+
onFilter: PropTypes.func,
55+
position: PropTypes.oneOf([
56+
Const.FILTERS_POSITION_TOP,
57+
Const.FILTERS_POSITION_BOTTOM
58+
]),
59+
currFilters: PropTypes.object,
60+
onExternalFilter: PropTypes.func,
61+
className: PropTypes.string
62+
};
63+
64+
Filters.defaultProps = {
65+
position: Const.FILTERS_POSITION_TOP
66+
};
67+
68+
export default Filters;

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

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,9 @@ const Header = (props) => {
1414
className,
1515
columns,
1616
onSort,
17-
onFilter,
1817
sortField,
1918
sortOrder,
2019
selectRow,
21-
currFilters,
22-
onExternalFilter,
2320
expandRow
2421
} = props;
2522

@@ -50,9 +47,6 @@ const Header = (props) => {
5047
column={ column }
5148
onSort={ onSort }
5249
sorting={ currSort }
53-
onFilter={ onFilter }
54-
currFilters={ currFilters }
55-
onExternalFilter={ onExternalFilter }
5650
sortOrder={ sortOrder }
5751
isLastSorting={ isLastSorting }
5852
/>);
@@ -87,12 +81,9 @@ const Header = (props) => {
8781
Header.propTypes = {
8882
columns: PropTypes.array.isRequired,
8983
onSort: PropTypes.func,
90-
onFilter: PropTypes.func,
9184
sortField: PropTypes.string,
9285
sortOrder: PropTypes.string,
9386
selectRow: PropTypes.object,
94-
currFilters: PropTypes.object,
95-
onExternalFilter: PropTypes.func,
9687
className: PropTypes.string,
9788
expandRow: PropTypes.object
9889
};

‎packages/react-bootstrap-table2/test/header-cell.test.js‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,7 @@ describe('HeaderCell', () => {
148148
it('should call custom headerFormatter correctly', () => {
149149
expect(formatter.callCount).toBe(1);
150150
expect(formatter.calledWith(
151-
column, index, { sortElement: undefined, filterElement: undefined })).toBe(true);
151+
column, index, { sortElement: undefined })).toBe(true);
152152
});
153153
});
154154

@@ -738,14 +738,14 @@ describe('HeaderCell', () => {
738738
expect(wrapper.find('th').length).toBe(1);
739739
});
740740

741-
it('should render filter correctly', () => {
742-
expect(wrapper.find(Filter).length).toBe(1);
743-
expect(wrapper.find(Filter).props()).toEqual({
744-
column,
745-
onFilter,
746-
...filterProps
747-
});
748-
});
741+
// it('should render filter correctly', () => {
742+
// expect(wrapper.find(Filter).length).toBe(1);
743+
// expect(wrapper.find(Filter).props()).toEqual({
744+
// column,
745+
// onFilter,
746+
// ...filterProps
747+
// });
748+
// });
749749
});
750750

751751
describe('when column.filter and column.filterRenderer is defined', () => {
@@ -775,12 +775,12 @@ describe('HeaderCell', () => {
775775
expect(wrapper.find('th').length).toBe(1);
776776
});
777777

778-
it('should render filter correctly', () => {
779-
expect(wrapper.find(Filter).length).toBe(1);
780-
});
781-
782-
it('should call filterRenderer function correctly', () => {
783-
expect(filterRenderer).toHaveBeenCalledTimes(1);
784-
});
778+
// it('should render filter correctly', () => {
779+
// expect(wrapper.find(Filter).length).toBe(1);
780+
// });
781+
//
782+
// it('should call filterRenderer function correctly', () => {
783+
// expect(filterRenderer).toHaveBeenCalledTimes(1);
784+
// });
785785
});
786786
});

0 commit comments

Comments
 (0)