vhad/react-bootstrap-table2
1
0
Fork 0
mirror of https://github.com/gosticks/react-bootstrap-table2.git synced 2025-10-16 11:55:39 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #1186 from react-bootstrap-table/develop

Browse Source 
20191202 release
This commit is contained in:
Allen 2019-12-02 19:50:39 +08:00 committed by GitHub
commit f4f6649b91
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 136 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/react-bootstrap-table2-example/examples/column-filter/filter-position.js vendored
View File

@ -71,6 +71,23 @@ const columns = [{
/>
`;
const selectRow = {
mode: 'checkbox',
clickToSelect: true
};
const expandRow = {
renderer: row => (
<div>
<p>{ `This Expand row is belong to rowKey ${row.id}` }</p>
<p>You can render anything here, also you can add additional data on every row object</p>
<p>expandRow.renderer callback will pass the origin row object to you</p>
</div>
),
showExpandColumn: true,
expandColumnPosition: 'right'
};
export default () => (
<div>
<BootstrapTable
@ -79,6 +96,8 @@ export default () => (
columns={ columns }
filter={ filterFactory() }
filterPosition="top"
expandRow={ expandRow }
selectRow={ selectRow }
/>
<Code>{ sourceCode1 }</Code>
<BootstrapTable
@ -87,6 +106,8 @@ export default () => (
columns={ columns }
filter={ filterFactory() }
filterPosition="bottom"
expandRow={ expandRow }
selectRow={ selectRow }
/>
<Code>{ sourceCode2 }</Code>
</div>

2
packages/react-bootstrap-table2/src/bootstrap-table.js vendored
View File

@ -111,6 +111,8 @@ class BootstrapTable extends PropsBaseResolver(Component) {
currFilters={ this.props.currFilters }
filterPosition={ this.props.filterPosition }
onExternalFilter={ this.props.onExternalFilter }
selectRow={ selectRow }
expandRow={ expandRow }
/>
)}
<Body

51
packages/react-bootstrap-table2/src/filters.js vendored
View File

@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
import FiltersCell from './filters-cell';
import Const from './const';
import RowTemplate from './row/row-template';
const Filters = (props) => {
const {
@ -12,28 +13,33 @@ const Filters = (props) => {
currFilters,
filterPosition,
onExternalFilter,
className
className,
selectRow,
expandRow
} = props;
const filterColumns = [];
let showFiltersRow = false;
function renderContent() {
const filterColumns = [];
let showFiltersRow = false;
columns.forEach((column, i) => {
filterColumns.push(<FiltersCell
index={ i }
key={ column.dataField }
column={ column }
currFilters={ currFilters }
onExternalFilter={ onExternalFilter }
onFilter={ onFilter }
/>);
columns.forEach((column, i) => {
filterColumns.push(<FiltersCell
index={ i }
key={ column.dataField }
column={ column }
currFilters={ currFilters }
onExternalFilter={ onExternalFilter }
onFilter={ onFilter }
/>);
if (column.filterRenderer || column.filter) {
if (!showFiltersRow) {
showFiltersRow = true;
if (column.filterRenderer || column.filter) {
if (!showFiltersRow) {
showFiltersRow = true;
}
}
}
});
});
return filterColumns;
}
return (
<tbody
@ -45,7 +51,12 @@ const Filters = (props) => {
: 'table-footer-group'
} }
>
<tr>{filterColumns}</tr>
<RowTemplate
renderContent={ renderContent }
selectRow={ selectRow }
expandRow={ expandRow }
cellEl="td"
/>
</tbody>
);
};
@ -60,7 +71,9 @@ Filters.propTypes = {
]),
currFilters: PropTypes.object,
onExternalFilter: PropTypes.func,
className: PropTypes.string
className: PropTypes.string,
selectRow: PropTypes.object,
expandRow: PropTypes.object
};
Filters.defaultProps = {

62
packages/react-bootstrap-table2/src/footer.js vendored
View File

@ -2,57 +2,41 @@
import React from 'react';
import PropTypes from 'prop-types';
import Const from './const';
import RowTemplate from './row/row-template';
import FooterCell from './footer-cell';
import _ from './utils';
const Footer = (props) => {
const { data, className, columns, selectRow, expandRow } = props;
const SelectionFooterCellComp = () => <th />;
const ExpansionFooterCellComp = () => <th />;
const isRenderFunctionColumnInLeft = (
position = Const.INDICATOR_POSITION_LEFT
) => position === Const.INDICATOR_POSITION_LEFT;
function renderContent() {
return columns.map((column, i) => {
if (column.footer === undefined || column.footer === null) {
return false;
}
const childrens = columns.map((column, i) => {
if (column.footer === undefined || column.footer === null) {
return false;
}
const columnData = _.pluck(data, column.dataField);
const columnData = _.pluck(data, column.dataField);
return (
<FooterCell
index={ i }
key={ column.dataField }
column={ column }
columnData={ columnData }
/>
);
});
if (selectRow && selectRow.hideSelectColumn !== true) {
if (isRenderFunctionColumnInLeft(selectRow.selectColumnPosition)) {
childrens.unshift(<SelectionFooterCellComp key="selection" />);
} else {
childrens.push(<SelectionFooterCellComp key="selection" />);
}
}
if (expandRow.showExpandColumn) {
if (isRenderFunctionColumnInLeft(expandRow.expandColumnPosition)) {
childrens.unshift(<ExpansionFooterCellComp key="expansion" />);
} else {
childrens.push(<ExpansionFooterCellComp key="expansion" />);
}
return (
<FooterCell
index={ i }
key={ column.dataField }
column={ column }
columnData={ columnData }
/>
);
});
}
return (
<tfoot>
<tr className={ className }>
{ childrens }
</tr>
<RowTemplate
renderContent={ renderContent }
selectRow={ selectRow }
expandRow={ expandRow }
className={ className }
cellEl="th"
/>
</tfoot>
);
};

8
packages/react-bootstrap-table2/src/props-resolver/column-resolver.js vendored
View File

@ -1,7 +1,13 @@
export default ExtendBase =>
class ColumnResolver extends ExtendBase {
visibleColumnSize(includeSelectColumn = true) {
let columnLen = this.props.columns.filter(c => !c.hidden).length;
let columnLen;
if (this.props.columnToggle && this.props.columnToggle.toggles) {
const columns = this.props.columnToggle.toggles;
columnLen = Object.keys(columns).filter(name => columns[name]).length;
} else {
columnLen = this.props.columns.filter(c => !c.hidden).length;
}
if (!includeSelectColumn) return columnLen;
if (this.props.selectRow && !this.props.selectRow.hideSelectColumn) {
columnLen += 1;

48
packages/react-bootstrap-table2/src/row/row-template.js vendored Normal file
View File

@ -0,0 +1,48 @@
/* eslint react/require-default-props: 0 */
import React from 'react';
import PropTypes from 'prop-types';
import Const from '../const';
const RowTemplate = (props) => {
const {
renderContent,
selectRow,
expandRow,
cellEl,
...rest
} = props;
const isRenderFunctionColumnInLeft = (
position = Const.INDICATOR_POSITION_LEFT
) => position === Const.INDICATOR_POSITION_LEFT;
const childrens = renderContent() || [];
if (selectRow && selectRow.hideSelectColumn !== true) {
if (isRenderFunctionColumnInLeft(selectRow.selectColumnPosition)) {
childrens.unshift(React.createElement(cellEl, { key: 'selection' }));
} else {
childrens.push(React.createElement(cellEl, { key: 'selection' }));
}
}
if (expandRow.showExpandColumn) {
if (isRenderFunctionColumnInLeft(expandRow.expandColumnPosition)) {
childrens.unshift(React.createElement(cellEl, { key: 'expansion' }));
} else {
childrens.push(React.createElement(cellEl, { key: 'expansion' }));
}
}
return <tr { ...rest }>{ childrens }</tr>;
};
RowTemplate.propTypes = {
renderContent: PropTypes.func.isRequired,
cellEl: PropTypes.string.isRequired,
selectRow: PropTypes.object,
expandRow: PropTypes.object
};
export default RowTemplate;

6
packages/react-bootstrap-table2/test/footer.test.js
View File

@ -48,7 +48,7 @@ describe('Footer', () => {
describe('simplest footer', () => {
beforeEach(() => {
wrapper = shallow(
wrapper = render(
<Footer
data={ data }
columns={ columns }
@ -61,7 +61,7 @@ describe('Footer', () => {
it('should render successfully', () => {
expect(wrapper.length).toBe(1);
expect(wrapper.find('tr').length).toBe(1);
expect(wrapper.find(FooterCell).length).toBe(columns.length);
expect(wrapper.find('th').length).toBe(columns.length);
});
});
@ -86,7 +86,7 @@ describe('Footer', () => {
});
});
describe('when selecrRow prop is enable', () => {
describe('when selectRow prop is enable', () => {
beforeEach(() => {
wrapper = render(
<Footer