daux.io/src/js/search/Pagination.js

65 regels
2.0 KiB
JavaScript

import * as 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>
);
}