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

render filter in bootstrap table

Browse Source
This commit is contained in:
AllenFang 2017-12-13 21:45:02 +08:00
parent da907d46f0
commit 861809d10c
5 changed files with 37 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -86,6 +86,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
sortField={ store.sortField } sortField={ store.sortField }
sortOrder={ store.sortOrder } sortOrder={ store.sortOrder }
onSort={ this.props.onSort } onSort={ this.props.onSort }
onFilter={ this.props.onFilter }
selectRow={ headerCellSelectionInfo } selectRow={ headerCellSelectionInfo }
/> />
<Body <Body
@ -126,7 +127,7 @@ BootstrapTable.propTypes = {
PropTypes.string PropTypes.string
]), ]),
pagination: PropTypes.object, pagination: PropTypes.object,
onSort: PropTypes.func, filter: PropTypes.object,
cellEdit: PropTypes.shape({ cellEdit: PropTypes.shape({
mode: PropTypes.oneOf([Const.CLICK_TO_CELL_EDIT, Const.DBCLICK_TO_CELL_EDIT]).isRequired, mode: PropTypes.oneOf([Const.CLICK_TO_CELL_EDIT, Const.DBCLICK_TO_CELL_EDIT]).isRequired,
onUpdate: PropTypes.func, onUpdate: PropTypes.func,
@ -169,8 +170,10 @@ BootstrapTable.propTypes = {
dataField: PropTypes.string.isRequired, dataField: PropTypes.string.isRequired,
order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]).isRequired order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]).isRequired
})), })),
overlay: PropTypes.func,
onTableChange: PropTypes.func, onTableChange: PropTypes.func,
overlay: PropTypes.func onSort: PropTypes.func,
onFilter: PropTypes.func
}; };
BootstrapTable.defaultProps = { BootstrapTable.defaultProps = {

3
packages/react-bootstrap-table2/src/container.js vendored
View File

@ -6,6 +6,7 @@ import Store from './store';
import { import {
wrapWithCellEdit, wrapWithCellEdit,
wrapWithSelection, wrapWithSelection,
wrapWithFilter,
wrapWithSort, wrapWithSort,
wrapWithPagination wrapWithPagination
} from './table-factory'; } from './table-factory';
@ -70,6 +71,8 @@ const withDataStore = Base =>
}); });
} else if (this.props.selectRow) { } else if (this.props.selectRow) {
return wrapWithSelection(baseProps); return wrapWithSelection(baseProps);
} else if (this.props.filter) {
return wrapWithFilter(baseProps);
} else if (this.props.columns.filter(col => col.sort).length > 0) { } else if (this.props.columns.filter(col => col.sort).length > 0) {
return wrapWithSort(baseProps); return wrapWithSort(baseProps);
} else if (this.props.pagination) { } else if (this.props.pagination) {

21
packages/react-bootstrap-table2/src/header-cell.js vendored
View File

@ -16,12 +16,14 @@ const HeaderCell = (props) => {
onSort, onSort,
sorting, sorting,
sortOrder, sortOrder,
isLastSorting isLastSorting,
onFilter
} = props; } = props;
const { const {
text, text,
sort, sort,
filter,
hidden, hidden,
headerTitle, headerTitle,
headerAlign, headerAlign,
@ -38,10 +40,13 @@ const HeaderCell = (props) => {
..._.isFunction(headerAttrs) ? headerAttrs(column, index) : headerAttrs, ..._.isFunction(headerAttrs) ? headerAttrs(column, index) : headerAttrs,
...headerEvents ...headerEvents
}; };
// we are suppose to pass sortSymbol and filerElm
// the headerFormatter is not only header text but also the all of header cell customization
const children = headerFormatter ? headerFormatter(column, index) : text; const children = headerFormatter ? headerFormatter(column, index) : text;
let cellStyle = {};
let sortSymbol; let sortSymbol;
let filterElm;
let cellStyle = {};
let cellClasses = _.isFunction(headerClasses) ? headerClasses(column, index) : headerClasses; let cellClasses = _.isFunction(headerClasses) ? headerClasses(column, index) : headerClasses;
if (headerStyle) { if (headerStyle) {
@ -91,12 +96,14 @@ const HeaderCell = (props) => {
} }
if (cellClasses) cellAttrs.className = cs(cellAttrs.className, cellClasses); if (cellClasses) cellAttrs.className = cs(cellAttrs.className, cellClasses);
if (!_.isEmptyObject(cellStyle)) cellAttrs.style = cellStyle; if (!_.isEmptyObject(cellStyle)) cellAttrs.style = cellStyle;
if (filter) {
filterElm = <filter.Filter { ...filter.props } onFilter={ onFilter } column={ column } />;
}
return ( return (
<th { ...cellAttrs }> <th { ...cellAttrs }>
{ children }{ sortSymbol } { children }{ sortSymbol }{ filterElm }
</th> </th>
); );
}; };
@ -126,13 +133,15 @@ HeaderCell.propTypes = {
editable: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]), editable: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
editCellStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), editCellStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
editCellClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), editCellClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
validator: PropTypes.func validator: PropTypes.func,
filter: PropTypes.object
}).isRequired, }).isRequired,
index: PropTypes.number.isRequired, index: PropTypes.number.isRequired,
onSort: PropTypes.func, onSort: PropTypes.func,
sorting: PropTypes.bool, sorting: PropTypes.bool,
sortOrder: PropTypes.oneOf([Const.SORT_ASC, Const.SORT_DESC]), sortOrder: PropTypes.oneOf([Const.SORT_ASC, Const.SORT_DESC]),
isLastSorting: PropTypes.bool isLastSorting: PropTypes.bool,
onFilter: PropTypes.func
}; };
export default HeaderCell; export default HeaderCell;

3
packages/react-bootstrap-table2/src/header.js vendored
View File

@ -12,6 +12,7 @@ const Header = (props) => {
const { const {
columns, columns,
onSort, onSort,
onFilter,
sortField, sortField,
sortOrder, sortOrder,
selectRow selectRow
@ -36,6 +37,7 @@ const Header = (props) => {
column={ column } column={ column }
onSort={ onSort } onSort={ onSort }
sorting={ currSort } sorting={ currSort }
onFilter={ onFilter }
sortOrder={ sortOrder } sortOrder={ sortOrder }
isLastSorting={ isLastSorting } isLastSorting={ isLastSorting }
/>); />);
@ -49,6 +51,7 @@ const Header = (props) => {
Header.propTypes = { Header.propTypes = {
columns: PropTypes.array.isRequired, columns: PropTypes.array.isRequired,
onSort: PropTypes.func, onSort: PropTypes.func,
onFilter: PropTypes.func,
sortField: PropTypes.string, sortField: PropTypes.string,
sortOrder: PropTypes.string, sortOrder: PropTypes.string,
selectRow: PropTypes.object selectRow: PropTypes.object

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

@ -1,6 +1,7 @@
/* eslint react/prop-types: 0 */ /* eslint react/prop-types: 0 */
import React from 'react'; import React from 'react';
import _ from './utils';
import BootstrapTable from './bootstrap-table'; import BootstrapTable from './bootstrap-table';
import SortWrapper from './sort/wrapper'; import SortWrapper from './sort/wrapper';
import RowSelectionWrapper from './row-selection/wrapper'; import RowSelectionWrapper from './row-selection/wrapper';
@ -19,6 +20,15 @@ export const wrapWithSort = props =>
export const pureTable = props => export const pureTable = props =>
React.createElement(BootstrapTable, { ...props }); React.createElement(BootstrapTable, { ...props });
export const wrapWithFilter = (props) => {
if (props.filter) {
const { wrapper } = props.filter;
const FilterBase = wrapper(wrapWithSort, _);
return React.createElement(FilterBase, { ...props });
}
return wrapWithSort(props);
};
export const wrapWithPagination = (props) => { export const wrapWithPagination = (props) => {
if (props.pagination) { if (props.pagination) {
const { PaginationWrapper } = props.pagination; const { PaginationWrapper } = props.pagination;
@ -29,6 +39,6 @@ export const wrapWithPagination = (props) => {
export const sortableElement = props => wrapWithPagination(props); export const sortableElement = props => wrapWithPagination(props);
export const selectionElement = props => wrapWithSort(props); export const selectionElement = props => wrapWithFilter(props);
export const cellEditElement = props => wrapWithSelection(props); export const cellEditElement = props => wrapWithSelection(props);