156 lines
6.0 KiB
JavaScript
156 lines
6.0 KiB
JavaScript
import Link from "next/link";
|
|
import { useRouter } from "next/router";
|
|
import useTranslation from "next-translate/useTranslation";
|
|
|
|
const PaginationControl = (props) => {
|
|
const {
|
|
searchString,
|
|
searchResultsObj,
|
|
currentPage,
|
|
spinnerState,
|
|
getSearchPageResults,
|
|
} = props;
|
|
let { t } = useTranslation();
|
|
|
|
const router = useRouter();
|
|
const { locale } = router;
|
|
|
|
const pagesCount = Math.ceil(searchResultsObj["@odata.count"] / 10);
|
|
|
|
const getRange = (start, end) => {
|
|
//console.log(start, end);
|
|
return Array(end - start + 1)
|
|
.fill()
|
|
.map((v, i) => i + start);
|
|
};
|
|
|
|
const paginationNumbers = (currentPage, pageCount) => {
|
|
//console.log(currentPage);
|
|
let delta;
|
|
if (pageCount <= 10) {
|
|
// delta === 7: [1 2 3 4 5 6 7]
|
|
delta = 10;
|
|
} else {
|
|
// delta === 2: [1 ... 4 5 6 ... 10]
|
|
// delta === 4: [1 2 3 4 5 ... 10]
|
|
delta = currentPage > 4 && currentPage < pageCount - 3 ? 4 : 6;
|
|
}
|
|
|
|
const range = {
|
|
start: Math.round(currentPage - delta / 2),
|
|
end: Math.round(currentPage + delta / 2),
|
|
};
|
|
|
|
if (range.start - 1 === 1 || range.end + 1 === pageCount) {
|
|
range.start += 1;
|
|
range.end += 1;
|
|
}
|
|
|
|
let pages =
|
|
currentPage > delta
|
|
? getRange(
|
|
Math.min(range.start, pageCount - delta),
|
|
Math.min(range.end, pageCount)
|
|
)
|
|
: getRange(1, Math.min(pageCount, delta + 1));
|
|
|
|
const withDots = (value, pair) =>
|
|
pages.length + 1 !== pageCount ? pair : [value];
|
|
|
|
if (pages[0] !== 1) {
|
|
pages = withDots(1, [1, "..."]).concat(pages);
|
|
}
|
|
|
|
if (pages[pages.length - 1] < pageCount) {
|
|
pages = pages.concat(withDots(pageCount, ["...", pageCount]));
|
|
}
|
|
|
|
//console.log(pages);
|
|
return pages;
|
|
};
|
|
|
|
const paginationArray = paginationNumbers(currentPage, pagesCount);
|
|
|
|
return (
|
|
<>
|
|
{" "}
|
|
<div className="govuk-!-margin-bottom-7 ">
|
|
<div className="govuk-grid-row paginationWrapper">
|
|
<div className="govuk-grid-column-one-quarter paginationPrevious">
|
|
{currentPage != 1 ? (
|
|
<span
|
|
className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem leftTextButton"
|
|
onClick={() => {
|
|
spinnerState(),
|
|
getSearchPageResults(currentPage - 1);
|
|
}}
|
|
>
|
|
{t("common:previous-link-button")}
|
|
</span>
|
|
) : (
|
|
<span className="govuk-body leftTextButton govuk-!-font-weight-bold">
|
|
{t("common:previous-link-button")}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="govuk-grid-column-one-half paginationContainer">
|
|
{paginationArray.map((e, i) =>
|
|
currentPage == i + 1 ? (
|
|
<span
|
|
key={i}
|
|
className=" govuk-body govuk-!-padding-2 govuk-!-font-weight-bold "
|
|
>
|
|
{e}
|
|
</span>
|
|
) : e == "..." ? (
|
|
<span
|
|
key={i}
|
|
className=" govuk-body govuk-!-padding-2 govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem"
|
|
>
|
|
{e}
|
|
</span>
|
|
) : (
|
|
<span
|
|
className="govuk-body govuk-link govuk-!-padding-2 govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem"
|
|
key={i}
|
|
onClick={() => {
|
|
spinnerState();
|
|
console.log(i + 1);
|
|
getSearchPageResults(i + 1);
|
|
}}
|
|
>
|
|
{e}
|
|
</span>
|
|
)
|
|
)}
|
|
</div>
|
|
<div className="govuk-grid-column-one-quarter paginationNext">
|
|
{currentPage != pagesCount ? (
|
|
<span
|
|
className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem rightTextButton"
|
|
onClick={() => {
|
|
spinnerState(),
|
|
getSearchPageResults(currentPage + 1);
|
|
}}
|
|
>
|
|
{t("common:next-link-button")}
|
|
</span>
|
|
) : (
|
|
<span className="govuk-body rightTextButton govuk-!-font-weight-bold">
|
|
{" "}
|
|
{t("common:next-link-button")}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="govuk-body-s mobilePageCount">
|
|
{t("common:pages-label")} {currentPage}{" "}
|
|
{t("common:of-label")} {pagesCount}
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default PaginationControl;
|