mirror of https://gitlab.com/ecentrics/concordia
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
24 lines
914 B
24 lines
914 B
4 years ago
|
import React, { useMemo } from 'react';
|
||
|
|
import { Icon, Pagination } from 'semantic-ui-react';
|
||
|
|
|
||
|
|
export const ITEMS_PER_PAGE = 10;
|
||
|
|
|
||
|
|
const PaginationComponent = (props) => {
|
||
|
|
const { numberOfItems, onPageChange } = props;
|
||
|
|
return useMemo(() => (
|
||
|
|
<Pagination
|
||
|
|
defaultActivePage={1}
|
||
|
|
ellipsisItem={{ content: <Icon name="ellipsis horizontal" />, icon: true }}
|
||
|
|
firstItem={{ content: <Icon name="angle double left" />, icon: true }}
|
||
|
|
lastItem={{ content: <Icon name="angle double right" />, icon: true }}
|
||
|
|
prevItem={{ content: <Icon name="angle left" />, icon: true }}
|
||
|
|
nextItem={{ content: <Icon name="angle right" />, icon: true }}
|
||
|
|
totalPages={Math.ceil(numberOfItems / ITEMS_PER_PAGE)}
|
||
|
|
disabled={numberOfItems <= ITEMS_PER_PAGE}
|
||
|
|
onPageChange={onPageChange}
|
||
|
|
/>
|
||
|
|
), [numberOfItems, onPageChange]);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default PaginationComponent;
|