Merge pull request #122 from keithjgrant/fix-pagination-text

fix pagination text
This commit is contained in:
Keith Grant 2019-03-06 14:42:52 -05:00 committed by GitHub
commit a3bea6d4a8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 64 additions and 2 deletions

View File

@ -119,6 +119,63 @@ describe('<Pagination />', () => {
pageSizeDropdownItems.at(1).simulate('click');
});
test('itemCount displays correctly', () => {
const onSetPage = jest.fn();
pagination = mount(
<I18nProvider>
<Pagination
count={7}
page={1}
pageCount={2}
page_size={5}
pageSizeOptions={[5, 10, 25, 50]}
onSetPage={onSetPage}
/>
</I18nProvider>
);
const itemCount = pagination.find('.awx-pagination__item-count');
expect(itemCount.text()).toEqual('Items 1 5 of 7');
});
test('itemCount matching pageSize displays correctly', () => {
const onSetPage = jest.fn();
pagination = mount(
<I18nProvider>
<Pagination
count={5}
page={1}
pageCount={1}
page_size={5}
pageSizeOptions={[5, 10, 25, 50]}
onSetPage={onSetPage}
/>
</I18nProvider>
);
const itemCount = pagination.find('.awx-pagination__item-count');
expect(itemCount.text()).toEqual('Items 1 5 of 5');
});
test('itemCount less than pageSize displays correctly', () => {
const onSetPage = jest.fn();
pagination = mount(
<I18nProvider>
<Pagination
count={3}
page={1}
pageCount={1}
page_size={5}
pageSizeOptions={[5, 10, 25, 50]}
onSetPage={onSetPage}
/>
</I18nProvider>
);
const itemCount = pagination.find('.awx-pagination__item-count');
expect(itemCount.text()).toEqual('Items 1 3 of 3');
});
test('submit a new page by typing in input works', () => {
const textInputSelector = '.awx-pagination__page-input.pf-c-form-control';
const submitFormSelector = '.awx-pagination__page-input-form';

View File

@ -116,7 +116,12 @@ class Pagination extends Component {
const isOnFirst = page === 1;
const isOnLast = page === pageCount;
const itemCount = isOnLast ? count % page_size : page_size;
let itemCount;
if (!isOnLast || count === page_size) {
itemCount = page_size;
} else {
itemCount = count % page_size;
}
const itemMin = ((page - 1) * page_size) + 1;
const itemMax = itemMin + itemCount - 1;
@ -154,7 +159,7 @@ class Pagination extends Component {
)}
<div className="awx-pagination__counts">
<div className="awx-pagination__item-count">
<Trans>{`Items ${itemMin} - ${itemMax} of ${count}`}</Trans>
<Trans>{`Items ${itemMin} ${itemMax} of ${count}`}</Trans>
</div>
{pageCount !== 1 && (
<div className="awx-pagination__page-count">