implement sizePerPageOptionRenderer

This commit is contained in:
AllenFang 2018-12-02 13:32:01 +08:00
parent 424dbea270
commit a30a8fd96b
4 changed files with 45 additions and 10 deletions

View File

@ -111,6 +111,7 @@ class Pagination extends pageResolver(Component) {
pageListRenderer,
pageButtonRenderer,
paginationTotalRenderer,
sizePerPageOptionRenderer,
sizePerPageList,
currSizePerPage,
hideSizePerPage,
@ -132,6 +133,7 @@ class Pagination extends pageResolver(Component) {
<SizePerPageDropDown
currSizePerPage={ `${currSizePerPage}` }
options={ this.calculateSizePerPageStatus() }
optionRenderer={ sizePerPageOptionRenderer }
onSizePerPageChange={ this.handleChangeSizePerPage }
onClick={ this.toggleDropDown }
onBlur={ this.closeDropDown }
@ -181,6 +183,7 @@ Pagination.propTypes = {
pageListRenderer: PropTypes.func,
pageButtonRenderer: PropTypes.func,
paginationTotalRenderer: PropTypes.func,
sizePerPageOptionRenderer: PropTypes.func,
firstPageText: PropTypes.string,
prePageText: PropTypes.string,
nextPageText: PropTypes.string,
@ -204,6 +207,7 @@ Pagination.defaultProps = {
pageListRenderer: null,
pageButtonRenderer: null,
paginationTotalRenderer: Const.PAGINATION_TOTAL,
sizePerPageOptionRenderer: null,
firstPageText: Const.FIRST_PAGE_TEXT,
prePageText: Const.PRE_PAGE_TEXT,
nextPageText: Const.NEXT_PAGE_TEXT,

View File

@ -16,6 +16,7 @@ const SizePerPageDropDown = (props) => {
className,
variation,
btnContextual,
optionRenderer,
currSizePerPage,
onSizePerPageChange
} = props;
@ -61,14 +62,22 @@ const SizePerPageDropDown = (props) => {
aria-labelledby="pageDropDown"
>
{
options.map(option => (
<SizePerPageOption
{ ...option }
key={ option.text }
bootstrap4={ bootstrap4 }
onSizePerPageChange={ onSizePerPageChange }
/>
))
options.map((option) => {
if (optionRenderer) {
return optionRenderer({
...option,
onSizePerPageChange
});
}
return (
<SizePerPageOption
{ ...option }
key={ option.text }
bootstrap4={ bootstrap4 }
onSizePerPageChange={ onSizePerPageChange }
/>
);
})
}
</ul>
</span>
@ -88,14 +97,16 @@ SizePerPageDropDown.propTypes = {
hidden: PropTypes.bool,
btnContextual: PropTypes.string,
variation: PropTypes.oneOf(['dropdown', 'dropup']),
className: PropTypes.string
className: PropTypes.string,
optionRenderer: PropTypes.func
};
SizePerPageDropDown.defaultProps = {
open: false,
hidden: false,
btnContextual: 'btn-default btn-secondary',
variation: 'dropdown',
className: ''
className: '',
optionRenderer: null
};

View File

@ -79,6 +79,7 @@ class StateProvider extends React.Component {
pageListRenderer: options.pageListRenderer,
pageButtonRenderer: options.pageButtonRenderer,
paginationTotalRenderer: options.paginationTotalRenderer,
sizePerPageOptionRenderer: options.sizePerPageOptionRenderer,
firstPageText: options.firstPageText || Const.FIRST_PAGE_TEXT,
prePageText: options.prePageText || Const.PRE_PAGE_TEXT,
nextPageText: options.nextPageText || Const.NEXT_PAGE_TEXT,

View File

@ -178,4 +178,23 @@ describe('SizePerPageDropDown', () => {
expect(wrapper.hasClass(className)).toBeTruthy();
});
});
describe('when optionRenderer prop is defined', () => {
const optionRenderer = jest.fn();
beforeEach(() => {
optionRenderer.mockReset();
wrapper = shallowWithContext(
<SizePerPageDropDown { ...props } optionRenderer={ optionRenderer } />,
{ bootstrap4: false }
);
});
it('should not render SizePerPageOption', () => {
expect(wrapper.find(SizePerPageOption)).toHaveLength(0);
});
it('should call optionRenderer prop correctly', () => {
expect(optionRenderer).toHaveBeenCalledTimes(props.options.length);
});
});
});