2019-09-19 22:00:34 +02:00
|
|
|
import * as preact from "preact";
|
2019-09-18 23:16:35 +02:00
|
|
|
import { textLinkPrevious, textLinkNext } from "./translation";
|
|
|
|
/** @jsx preact.h */
|
|
|
|
|
|
|
|
export default function Pagination({ counter, start, settings, onPageSelect }) {
|
|
|
|
const pages = Math.ceil(counter / settings.show);
|
|
|
|
const page = start / settings.show;
|
|
|
|
|
|
|
|
let displayedPages;
|
|
|
|
if (page <= 2) {
|
|
|
|
// Display max three pages
|
|
|
|
displayedPages = Math.min(pages, 3);
|
|
|
|
} else {
|
|
|
|
// Display two more pages, but don't overflow
|
|
|
|
displayedPages = Math.min(pages, page + 2);
|
|
|
|
}
|
|
|
|
|
|
|
|
const items = [];
|
|
|
|
|
|
|
|
for (let f = 0; f < displayedPages; f++) {
|
|
|
|
if (f === page) {
|
|
|
|
items.push(<li className="current">{f + 1}</li>);
|
|
|
|
} else {
|
|
|
|
items.push(
|
|
|
|
<li>
|
|
|
|
<a
|
|
|
|
className="SearchResults__footer__link"
|
|
|
|
onClick={() => onPageSelect(f * settings.show)}
|
|
|
|
>
|
|
|
|
{f + 1}
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="SearchResults__footer">
|
|
|
|
<ul className="SearchResults__footer__links Pager">
|
|
|
|
{start > 0 && (
|
|
|
|
<li className="Pager--prev">
|
|
|
|
<a
|
|
|
|
className="SearchResults__footer__link"
|
|
|
|
onClick={() => onPageSelect(start - settings.show)}
|
|
|
|
>
|
|
|
|
{textLinkPrevious}
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
)}
|
|
|
|
{items}
|
|
|
|
{page + 1 !== pages && (
|
|
|
|
<li className="Pager--next">
|
|
|
|
<a
|
|
|
|
className="SearchResults__footer__link"
|
|
|
|
onClick={() => onPageSelect(start + settings.show)}
|
|
|
|
>
|
|
|
|
{textLinkNext}
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
)}
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|