diff --git a/components/Pagination.js b/components/Pagination.js
index ad16850606..f96f9fff3b 100644
--- a/components/Pagination.js
+++ b/components/Pagination.js
@@ -21,6 +21,7 @@ class Pagination extends Component {
totalItems: PropTypes.number.isRequired,
disabled: PropTypes.bool,
page: PropTypes.number,
+ pageSize: PropTypes.number,
};
static defaultProps = {
backwardText: 'Backward',
@@ -36,14 +37,22 @@ class Pagination extends Component {
static uuid = 0;
state = {
page: this.props.page,
- pageSize: this.props.pageSizes[0],
+ pageSize: this.props.pageSize &&
+ this.props.pageSizes.includes(this.props.pageSize)
+ ? this.props.pageSize
+ : this.props.pageSizes[0],
};
- componentWillReceiveProps({ pageSizes, page }) {
+ componentWillReceiveProps({ pageSizes, page, pageSize }) {
if (!equals(pageSizes, this.props.pageSizes)) {
this.setState({ pageSize: pageSizes[0], page: 1 });
}
- if (!equals(page, this.props.page)) {
- this.setState({ page });
+ if (page !== this.props.page) {
+ this.setState({
+ page,
+ });
+ }
+ if (pageSize !== this.props.pageSize) {
+ this.setState({ pageSize });
}
}
id = Pagination.uuid++;
@@ -101,9 +110,9 @@ class Pagination extends Component {
onChange={this.handleSizeChange}
value={pageSize}
>
- {pageSizes.map(size => (
+ {pageSizes.map(size =>
- ))}
+ )}
{itemsPerPageText} |
diff --git a/components/__tests__/Pagination-test.js b/components/__tests__/Pagination-test.js
index a9a5443520..4fc8aa307e 100644
--- a/components/__tests__/Pagination-test.js
+++ b/components/__tests__/Pagination-test.js
@@ -63,7 +63,11 @@ describe('Pagination', () => {
actualPageSize = pageSize;
};
const pager = mount(
-
+
);
expect(pager.state().pageSize).toBe(5);
pager.find('select').simulate('change', { target: { value: 10 } });
@@ -81,7 +85,11 @@ describe('Pagination', () => {
actualPage = page;
};
const pager = mount(
-
+
);
pager.setState({ page: 2 });
expect(pager.state().page).toBe(2);
@@ -97,6 +105,19 @@ describe('Pagination', () => {
pager.setProps({ pageSizes: [3, 6] });
expect(pager.state().page).toEqual(1);
});
+ it('should default to pageSize if pageSize is provided', () => {
+ const pager = mount(
+
+ );
+ expect(pager.state().pageSize).toEqual(10);
+ });
+ it('should default to pageSize if on change to pageSize', () => {
+ const pager = mount(
+
+ );
+ pager.setProps({ pageSize: 10 });
+ expect(pager.state().pageSize).toEqual(10);
+ });
});
});
@@ -112,8 +133,12 @@ describe('Pagination', () => {
it('should have two buttons for navigation', () => {
const buttons = right.find('.bx--pagination__button');
expect(buttons.length).toBe(2);
- expect(buttons.at(0).hasClass('bx--pagination__button--backward')).toBe(true);
- expect(buttons.at(1).hasClass('bx--pagination__button--forward')).toBe(true);
+ expect(buttons.at(0).hasClass('bx--pagination__button--backward')).toBe(
+ true
+ );
+ expect(buttons.at(1).hasClass('bx--pagination__button--forward')).toBe(
+ true
+ );
});
it('should disable backward navigation for the first page', () => {
const buttons = right.find('.bx--pagination__button');
@@ -122,7 +147,11 @@ describe('Pagination', () => {
});
it('should disable forward navigation for the last page', () => {
const smallPage = shallow(
-
+
);
const buttons = smallPage.find('.bx--pagination__button');
expect(buttons.at(0).props().disabled).toBe(true);
@@ -136,7 +165,11 @@ describe('Pagination', () => {
actualPage = page;
};
const pager = mount(
-
+
);
expect(pager.state().page).toBe(1);
pager.find('.bx--pagination__button--forward').simulate('click');
@@ -149,7 +182,11 @@ describe('Pagination', () => {
actualPage = page;
};
const pager = mount(
-
+
);
pager.setState({ page: 2 });
expect(pager.state().page).toBe(2);
@@ -163,10 +200,16 @@ describe('Pagination', () => {
actualPage = page;
};
const pager = mount(
-
+
);
expect(pager.state().page).toBe(1);
- pager.find('.bx--text__input').simulate('change', { target: { value: 2 } });
+ pager
+ .find('.bx--text__input')
+ .simulate('change', { target: { value: 2 } });
expect(actualPage).toBe(2);
expect(pager.state().page).toBe(2);
});