Skip to content
This repository has been archived by the owner on Oct 19, 2021. It is now read-only.

Commit

Permalink
fix(pageSize): add pageSize prop back in (#70)
Browse files Browse the repository at this point in the history
  • Loading branch information
@chrisdhanaraj
chrisdhanaraj authored Jul 5, 2017
1 parent 5e0f2b6 commit 55d46f4
Show file tree
Hide file tree
Showing 2 changed files with 67 additions and 15 deletions.
21 changes: 15 additions & 6 deletions components/Pagination.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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++;
Expand Down Expand Up @@ -101,9 +110,9 @@ class Pagination extends Component {
onChange={this.handleSizeChange}
value={pageSize}
>
{pageSizes.map(size => (
{pageSizes.map(size =>
<SelectItem key={size} value={size} text={String(size)} />
))}
)}
</Select>
<span className="bx--pagination__text">
{itemsPerPageText}&nbsp;&nbsp;|&nbsp;&nbsp;
Expand Down
61 changes: 52 additions & 9 deletions components/__tests__/Pagination-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,11 @@ describe('Pagination', () => {
actualPageSize = pageSize;
};
const pager = mount(
<Pagination pageSizes={[5, 10]} totalItems={50} onChange={handler} />
<Pagination
pageSizes={[5, 10]}
totalItems={50}
onChange={handler}
/>
);
expect(pager.state().pageSize).toBe(5);
pager.find('select').simulate('change', { target: { value: 10 } });
Expand All @@ -81,7 +85,11 @@ describe('Pagination', () => {
actualPage = page;
};
const pager = mount(
<Pagination pageSizes={[5, 10]} totalItems={50} onChange={handler} />
<Pagination
pageSizes={[5, 10]}
totalItems={50}
onChange={handler}
/>
);
pager.setState({ page: 2 });
expect(pager.state().page).toBe(2);
Expand All @@ -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(
<Pagination pageSizes={[5, 10]} pageSize={10} totalItems={50} />
);
expect(pager.state().pageSize).toEqual(10);
});
it('should default to pageSize if on change to pageSize', () => {
const pager = mount(
<Pagination pageSizes={[5, 10]} totalItems={50} />
);
pager.setProps({ pageSize: 10 });
expect(pager.state().pageSize).toEqual(10);
});
});
});

Expand All @@ -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');
Expand All @@ -122,7 +147,11 @@ describe('Pagination', () => {
});
it('should disable forward navigation for the last page', () => {
const smallPage = shallow(
<Pagination className="extra-class" pageSizes={[100]} totalItems={50} />
<Pagination
className="extra-class"
pageSizes={[100]}
totalItems={50}
/>
);
const buttons = smallPage.find('.bx--pagination__button');
expect(buttons.at(0).props().disabled).toBe(true);
Expand All @@ -136,7 +165,11 @@ describe('Pagination', () => {
actualPage = page;
};
const pager = mount(
<Pagination pageSizes={[5, 10]} totalItems={50} onChange={handler} />
<Pagination
pageSizes={[5, 10]}
totalItems={50}
onChange={handler}
/>
);
expect(pager.state().page).toBe(1);
pager.find('.bx--pagination__button--forward').simulate('click');
Expand All @@ -149,7 +182,11 @@ describe('Pagination', () => {
actualPage = page;
};
const pager = mount(
<Pagination pageSizes={[5, 10]} totalItems={50} onChange={handler} />
<Pagination
pageSizes={[5, 10]}
totalItems={50}
onChange={handler}
/>
);
pager.setState({ page: 2 });
expect(pager.state().page).toBe(2);
Expand All @@ -163,10 +200,16 @@ describe('Pagination', () => {
actualPage = page;
};
const pager = mount(
<Pagination pageSizes={[5, 10]} totalItems={50} onChange={handler} />
<Pagination
pageSizes={[5, 10]}
totalItems={50}
onChange={handler}
/>
);
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);
});
Expand Down

0 comments on commit 55d46f4

Please sign in to comment.