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 f4f6649

Browse files
Merge pull request #1186 from react-bootstrap-table/develop
20191202 release
2 parents 4daa5ef + 8ecdbf6 commit f4f6649

File tree

7 files changed

+138
-64
lines changed

7 files changed

+138
-64
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/props-resolver/column-resolver.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
export default ExtendBase =>
22
class ColumnResolver extends ExtendBase {
33
visibleColumnSize(includeSelectColumn = true) {
4-
let columnLen = this.props.columns.filter(c => !c.hidden).length;
4+
let columnLen;
5+
if (this.props.columnToggle && this.props.columnToggle.toggles) {
6+
const columns = this.props.columnToggle.toggles;
7+
columnLen = Object.keys(columns).filter(name => columns[name]).length;
8+
} else {
9+
columnLen = this.props.columns.filter(c => !c.hidden).length;
10+
}
511
if (!includeSelectColumn) return columnLen;
612
if (this.props.selectRow && !this.props.selectRow.hideSelectColumn) {
713
columnLen += 1;
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)

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