From 861809d10caeaaf3a58f5485a525f0ba3bc48b2c Mon Sep 17 00:00:00 2001 From: AllenFang Date: Wed, 13 Dec 2017 21:45:02 +0800 Subject: [PATCH] render filter in bootstrap table --- .../src/bootstrap-table.js | 7 +++++-- .../react-bootstrap-table2/src/container.js | 3 +++ .../react-bootstrap-table2/src/header-cell.js | 21 +++++++++++++------ packages/react-bootstrap-table2/src/header.js | 3 +++ .../src/table-factory.js | 12 ++++++++++- 5 files changed, 37 insertions(+), 9 deletions(-) diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js index ca7000c..19e7afa 100644 --- a/packages/react-bootstrap-table2/src/bootstrap-table.js +++ b/packages/react-bootstrap-table2/src/bootstrap-table.js @@ -86,6 +86,7 @@ class BootstrapTable extends PropsBaseResolver(Component) { sortField={ store.sortField } sortOrder={ store.sortOrder } onSort={ this.props.onSort } + onFilter={ this.props.onFilter } selectRow={ headerCellSelectionInfo } /> }); } else if (this.props.selectRow) { return wrapWithSelection(baseProps); + } else if (this.props.filter) { + return wrapWithFilter(baseProps); } else if (this.props.columns.filter(col => col.sort).length > 0) { return wrapWithSort(baseProps); } else if (this.props.pagination) { diff --git a/packages/react-bootstrap-table2/src/header-cell.js b/packages/react-bootstrap-table2/src/header-cell.js index fb57ade..d72f35b 100644 --- a/packages/react-bootstrap-table2/src/header-cell.js +++ b/packages/react-bootstrap-table2/src/header-cell.js @@ -16,12 +16,14 @@ const HeaderCell = (props) => { onSort, sorting, sortOrder, - isLastSorting + isLastSorting, + onFilter } = props; const { text, sort, + filter, hidden, headerTitle, headerAlign, @@ -38,10 +40,13 @@ const HeaderCell = (props) => { ..._.isFunction(headerAttrs) ? headerAttrs(column, index) : headerAttrs, ...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; - let cellStyle = {}; let sortSymbol; + let filterElm; + let cellStyle = {}; let cellClasses = _.isFunction(headerClasses) ? headerClasses(column, index) : headerClasses; if (headerStyle) { @@ -91,12 +96,14 @@ const HeaderCell = (props) => { } if (cellClasses) cellAttrs.className = cs(cellAttrs.className, cellClasses); - if (!_.isEmptyObject(cellStyle)) cellAttrs.style = cellStyle; + if (filter) { + filterElm = ; + } return ( - { children }{ sortSymbol } + { children }{ sortSymbol }{ filterElm } ); }; @@ -126,13 +133,15 @@ HeaderCell.propTypes = { editable: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]), editCellStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), editCellClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), - validator: PropTypes.func + validator: PropTypes.func, + filter: PropTypes.object }).isRequired, index: PropTypes.number.isRequired, onSort: PropTypes.func, sorting: PropTypes.bool, sortOrder: PropTypes.oneOf([Const.SORT_ASC, Const.SORT_DESC]), - isLastSorting: PropTypes.bool + isLastSorting: PropTypes.bool, + onFilter: PropTypes.func }; export default HeaderCell; diff --git a/packages/react-bootstrap-table2/src/header.js b/packages/react-bootstrap-table2/src/header.js index da77cb9..ddbc7bf 100644 --- a/packages/react-bootstrap-table2/src/header.js +++ b/packages/react-bootstrap-table2/src/header.js @@ -12,6 +12,7 @@ const Header = (props) => { const { columns, onSort, + onFilter, sortField, sortOrder, selectRow @@ -36,6 +37,7 @@ const Header = (props) => { column={ column } onSort={ onSort } sorting={ currSort } + onFilter={ onFilter } sortOrder={ sortOrder } isLastSorting={ isLastSorting } />); @@ -49,6 +51,7 @@ const Header = (props) => { Header.propTypes = { columns: PropTypes.array.isRequired, onSort: PropTypes.func, + onFilter: PropTypes.func, sortField: PropTypes.string, sortOrder: PropTypes.string, selectRow: PropTypes.object diff --git a/packages/react-bootstrap-table2/src/table-factory.js b/packages/react-bootstrap-table2/src/table-factory.js index d90453d..90bcf24 100644 --- a/packages/react-bootstrap-table2/src/table-factory.js +++ b/packages/react-bootstrap-table2/src/table-factory.js @@ -1,6 +1,7 @@ /* eslint react/prop-types: 0 */ import React from 'react'; +import _ from './utils'; import BootstrapTable from './bootstrap-table'; import SortWrapper from './sort/wrapper'; import RowSelectionWrapper from './row-selection/wrapper'; @@ -19,6 +20,15 @@ export const wrapWithSort = props => export const pureTable = 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) => { if (props.pagination) { const { PaginationWrapper } = props.pagination; @@ -29,6 +39,6 @@ export const 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);