Skip to content

Commit 8ecdbf6

Browse files
AllenFangAllenFang
committed
fix #1169 
1 parent 4a340c7 commit 8ecdbf6

File tree

6 files changed

+131
-63
lines changed

6 files changed

+131
-63
lines changed

‎packages/react-bootstrap-table2-example/examples/column-filter/filter-position.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,23 @@ const columns = [{
7171
/>
7272
`;
7373

74+
const selectRow = {
75+
mode: 'checkbox',
76+
clickToSelect: true
77+
};
78+
79+
const expandRow = {
80+
renderer: row => (
81+
<div>
82+
<p>{ `This Expand row is belong to rowKey ${row.id}` }</p>
83+
<p>You can render anything here, also you can add additional data on every row object</p>
84+
<p>expandRow.renderer callback will pass the origin row object to you</p>
85+
</div>
86+
),
87+
showExpandColumn: true,
88+
expandColumnPosition: 'right'
89+
};
90+
7491
export default () => (
7592
<div>
7693
<BootstrapTable
@@ -79,6 +96,8 @@ export default () => (
7996
columns={ columns }
8097
filter={ filterFactory() }
8198
filterPosition="top"
99+
expandRow={ expandRow }
100+
selectRow={ selectRow }
82101
/>
83102
<Code>{ sourceCode1 }</Code>
84103
<BootstrapTable
@@ -87,6 +106,8 @@ export default () => (
87106
columns={ columns }
88107
filter={ filterFactory() }
89108
filterPosition="bottom"
109+
expandRow={ expandRow }
110+
selectRow={ selectRow }
90111
/>
91112
<Code>{ sourceCode2 }</Code>
92113
</div>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,8 @@ class BootstrapTable extends PropsBaseResolver(Component) {
111111
currFilters={ this.props.currFilters }
112112
filterPosition={ this.props.filterPosition }
113113
onExternalFilter={ this.props.onExternalFilter }
114+
selectRow={ selectRow }
115+
expandRow={ expandRow }
114116
/>
115117
)}
116118
<Body

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

Lines changed: 32 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
44

55
import FiltersCell from './filters-cell';
66
import Const from './const';
7+
import RowTemplate from './row/row-template';
78

89
const Filters = (props) => {
910
const {
@@ -12,28 +13,33 @@ const Filters = (props) => {
1213
currFilters,
1314
filterPosition,
1415
onExternalFilter,
15-
className
16+
className,
17+
selectRow,
18+
expandRow
1619
} = props;
1720

18-
const filterColumns = [];
19-
let showFiltersRow = false;
21+
function renderContent() {
22+
const filterColumns = [];
23+
let showFiltersRow = false;
2024

21-
columns.forEach((column, i) => {
22-
filterColumns.push(<FiltersCell
23-
index={ i }
24-
key={ column.dataField }
25-
column={ column }
26-
currFilters={ currFilters }
27-
onExternalFilter={ onExternalFilter }
28-
onFilter={ onFilter }
29-
/>);
25+
columns.forEach((column, i) => {
26+
filterColumns.push(<FiltersCell
27+
index={ i }
28+
key={ column.dataField }
29+
column={ column }
30+
currFilters={ currFilters }
31+
onExternalFilter={ onExternalFilter }
32+
onFilter={ onFilter }
33+
/>);
3034

31-
if (column.filterRenderer || column.filter) {
32-
if (!showFiltersRow) {
33-
showFiltersRow = true;
35+
if (column.filterRenderer || column.filter) {
36+
if (!showFiltersRow) {
37+
showFiltersRow = true;
38+
}
3439
}
35-
}
36-
});
40+
});
41+
return filterColumns;
42+
}
3743

3844
return (
3945
<tbody
@@ -45,7 +51,12 @@ const Filters = (props) => {
4551
: 'table-footer-group'
4652
} }
4753
>
48-
<tr>{filterColumns}</tr>
54+
<RowTemplate
55+
renderContent={ renderContent }
56+
selectRow={ selectRow }
57+
expandRow={ expandRow }
58+
cellEl="td"
59+
/>
4960
</tbody>
5061
);
5162
};
@@ -60,7 +71,9 @@ Filters.propTypes = {
6071
]),
6172
currFilters: PropTypes.object,
6273
onExternalFilter: PropTypes.func,
63-
className: PropTypes.string
74+
className: PropTypes.string,
75+
selectRow: PropTypes.object,
76+
expandRow: PropTypes.object
6477
};
6578

6679
Filters.defaultProps = {

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

Lines changed: 25 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -2,57 +2,41 @@
22
import React from 'react';
33
import PropTypes from 'prop-types';
44

5-
import Const from './const';
5+
import RowTemplate from './row/row-template';
66
import FooterCell from './footer-cell';
77
import _ from './utils';
88

99
const Footer = (props) => {
1010
const { data, className, columns, selectRow, expandRow } = props;
11-
const SelectionFooterCellComp = () => <th />;
12-
const ExpansionFooterCellComp = () => <th />;
1311

14-
const isRenderFunctionColumnInLeft = (
15-
position = Const.INDICATOR_POSITION_LEFT
16-
) => position === Const.INDICATOR_POSITION_LEFT;
17-
18-
const childrens = columns.map((column, i) => {
19-
if (column.footer === undefined || column.footer === null) {
20-
return false;
21-
}
22-
23-
const columnData = _.pluck(data, column.dataField);
24-
25-
return (
26-
<FooterCell
27-
index={ i }
28-
key={ column.dataField }
29-
column={ column }
30-
columnData={ columnData }
31-
/>
32-
);
33-
});
34-
35-
if (selectRow && selectRow.hideSelectColumn !== true) {
36-
if (isRenderFunctionColumnInLeft(selectRow.selectColumnPosition)) {
37-
childrens.unshift(<SelectionFooterCellComp key="selection" />);
38-
} else {
39-
childrens.push(<SelectionFooterCellComp key="selection" />);
40-
}
41-
}
42-
43-
if (expandRow.showExpandColumn) {
44-
if (isRenderFunctionColumnInLeft(expandRow.expandColumnPosition)) {
45-
childrens.unshift(<ExpansionFooterCellComp key="expansion" />);
46-
} else {
47-
childrens.push(<ExpansionFooterCellComp key="expansion" />);
48-
}
12+
function renderContent() {
13+
return columns.map((column, i) => {
14+
if (column.footer === undefined || column.footer === null) {
15+
return false;
16+
}
17+
18+
const columnData = _.pluck(data, column.dataField);
19+
20+
return (
21+
<FooterCell
22+
index={ i }
23+
key={ column.dataField }
24+
column={ column }
25+
columnData={ columnData }
26+
/>
27+
);
28+
});
4929
}
5030

5131
return (
5232
<tfoot>
53-
<tr className={ className }>
54-
{ childrens }
55-
</tr>
33+
<RowTemplate
34+
renderContent={ renderContent }
35+
selectRow={ selectRow }
36+
expandRow={ expandRow }
37+
className={ className }
38+
cellEl="th"
39+
/>
5640
</tfoot>
5741
);
5842
};

‎packages/react-bootstrap-table2/src/row/row-template.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/* eslint react/require-default-props: 0 */
2+
import React from 'react';
3+
import PropTypes from 'prop-types';
4+
5+
import Const from '../const';
6+
7+
const RowTemplate = (props) => {
8+
const {
9+
renderContent,
10+
selectRow,
11+
expandRow,
12+
cellEl,
13+
...rest
14+
} = props;
15+
16+
const isRenderFunctionColumnInLeft = (
17+
position = Const.INDICATOR_POSITION_LEFT
18+
) => position === Const.INDICATOR_POSITION_LEFT;
19+
20+
const childrens = renderContent() || [];
21+
22+
if (selectRow && selectRow.hideSelectColumn !== true) {
23+
if (isRenderFunctionColumnInLeft(selectRow.selectColumnPosition)) {
24+
childrens.unshift(React.createElement(cellEl, { key: 'selection' }));
25+
} else {
26+
childrens.push(React.createElement(cellEl, { key: 'selection' }));
27+
}
28+
}
29+
30+
if (expandRow.showExpandColumn) {
31+
if (isRenderFunctionColumnInLeft(expandRow.expandColumnPosition)) {
32+
childrens.unshift(React.createElement(cellEl, { key: 'expansion' }));
33+
} else {
34+
childrens.push(React.createElement(cellEl, { key: 'expansion' }));
35+
}
36+
}
37+
38+
return <tr { ...rest }>{ childrens }</tr>;
39+
};
40+
41+
RowTemplate.propTypes = {
42+
renderContent: PropTypes.func.isRequired,
43+
cellEl: PropTypes.string.isRequired,
44+
selectRow: PropTypes.object,
45+
expandRow: PropTypes.object
46+
};
47+
48+
export default RowTemplate;

‎packages/react-bootstrap-table2/test/footer.test.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ describe('Footer', () => {
4848

4949
describe('simplest footer', () => {
5050
beforeEach(() => {
51-
wrapper = shallow(
51+
wrapper = render(
5252
<Footer
5353
data={ data }
5454
columns={ columns }
@@ -61,7 +61,7 @@ describe('Footer', () => {
6161
it('should render successfully', () => {
6262
expect(wrapper.length).toBe(1);
6363
expect(wrapper.find('tr').length).toBe(1);
64-
expect(wrapper.find(FooterCell).length).toBe(columns.length);
64+
expect(wrapper.find('th').length).toBe(columns.length);
6565
});
6666
});
6767

@@ -86,7 +86,7 @@ describe('Footer', () => {
8686
});
8787
});
8888

89-
describe('when selecrRow prop is enable', () => {
89+
describe('when selectRow prop is enable', () => {
9090
beforeEach(() => {
9191
wrapper = render(
9292
<Footer

0 commit comments

Comments
 (0)