65 regels
2.0 KiB
JavaScript
65 regels
2.0 KiB
JavaScript
|
import preact from "preact";
|
||
|
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>
|
||
|
);
|
||
|
}
|