zim-fuzzysearch
Version:
Client side fuzzy search combined with seperate configurable result highlighting.
52 lines (51 loc) • 2.63 kB
JavaScript
import React from "react";
import { usePagination } from "../../../hooks/usePagination";
import PageMark from "./PageMark";
/**
* Renders a bar for switching between different pages. Uses page-indices in form of tuples.
*
*/
var PageBar = function (_a) {
var _b = _a.curPageTuple, curPageTuple = _b === void 0 ? [0, 5] : _b, _c = _a.pageTuples, pageTuples = _c === void 0 ? [
[0, 5],
[5, 10],
[10, 15],
] : _c, onPageSelect = _a.onPageSelect, prevPage = _a.prevPage, nextPage = _a.nextPage;
var findSameTuple = usePagination().findSameTuple;
var renderPageNums = function () {
var curPageTupleInd = findSameTuple(pageTuples, curPageTuple);
return pageTuples.map(function (tuple, index) {
// when normal page marker should be rendered
var isTrue = false;
if (index < 5) {
isTrue = true;
}
else if (index > curPageTupleInd - 3 && index < curPageTupleInd + 3) {
isTrue = true;
}
else if (index > pageTuples.length - 1 - 2) {
isTrue = true;
}
return isTrue ? (React.createElement(PageMark, { key: tuple.toString() + index, curPageTuple: curPageTuple, index: index, linkedTuple: tuple, onSelect: onPageSelect })) : null;
});
};
return pageTuples.length > 1 ? (React.createElement("ul", { className: "pagination zim-fuzzy--result-pagination" },
React.createElement("li", { className: "page-item " + (curPageTuple[0] === 0 ? "disabled" : "") },
React.createElement("a", { className: "page-link", href: "#", "aria-label": "Previous", onClick: function (evt) {
evt.preventDefault();
prevPage();
} },
React.createElement("span", { "aria-hidden": "true" }, "\u00AB"),
React.createElement("span", { className: "sr-only" }, "Previous"))),
renderPageNums(),
React.createElement("li", { className: "page-item " + (curPageTuple[1] === pageTuples[pageTuples.length - 1][1]
? "disabled"
: "") },
React.createElement("a", { className: "page-link", href: "#", "aria-label": "Next", onClick: function (evt) {
evt.preventDefault();
nextPage();
} },
React.createElement("span", { "aria-hidden": "true" }, "\u00BB"),
React.createElement("span", { className: "sr-only" }, "Next"))))) : null;
};
export default PageBar;