react-native-ultimate-paginator
Version:
A comprehensive pagination library supporting various pagination scenarios including server-side, client-side, infinite scroll, and load-more functionality
61 lines (60 loc) • 4.63 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Pagination = void 0;
var react_1 = __importDefault(require("react"));
var pagination_1 = require("../utils/pagination");
var useInfiniteScroll_1 = require("../hooks/useInfiniteScroll");
var usePagination_1 = require("../hooks/usePagination");
var LoadMoreButton = function (_a) {
var _b = _a.loading, loading = _b === void 0 ? false : _b, _c = _a.hasMore, hasMore = _c === void 0 ? true : _c, _d = _a.buttonText, buttonText = _d === void 0 ? 'Load More' : _d, _e = _a.loadingText, loadingText = _e === void 0 ? 'Loading...' : _e, onLoadMore = _a.onLoadMore;
return (react_1.default.createElement("button", { onClick: function () { return onLoadMore === null || onLoadMore === void 0 ? void 0 : onLoadMore(); }, disabled: loading || !hasMore || !onLoadMore, className: "pagination-load-more-button" }, loading ? loadingText : buttonText));
};
var Pagination = function (_a) {
var totalItems = _a.totalItems, currentPage = _a.currentPage, pageSize = _a.pageSize, _b = _a.maxPages, maxPages = _b === void 0 ? 5 : _b, _c = _a.displayMode, displayMode = _c === void 0 ? 'numbers' : _c, infiniteScrollOptions = _a.infiniteScrollOptions, loadMoreOptions = _a.loadMoreOptions, onPageChange = _a.onPageChange, _d = _a.className, className = _d === void 0 ? '' : _d, _e = _a.ariaLabel, ariaLabel = _e === void 0 ? 'Pagination' : _e;
var _f = (0, usePagination_1.usePagination)({
totalItems: totalItems,
currentPage: currentPage,
pageSize: pageSize,
maxPages: maxPages
}), page = _f.currentPage, totalPages = _f.totalPages, hasNextPage = _f.hasNextPage, hasPreviousPage = _f.hasPreviousPage, setPage = _f.setPage;
var _g = (0, useInfiniteScroll_1.useInfiniteScroll)(__assign(__assign({}, infiniteScrollOptions), { onLoadMore: function () {
if (hasNextPage && (infiniteScrollOptions === null || infiniteScrollOptions === void 0 ? void 0 : infiniteScrollOptions.onLoadMore)) {
infiniteScrollOptions.onLoadMore();
}
} })), scrollRef = _g.scrollRef, isLoading = _g.isLoading, hasMore = _g.hasMore;
if (displayMode === 'infinite-scroll') {
return (react_1.default.createElement("div", { ref: scrollRef, className: "pagination-infinite-scroll ".concat(className) }, isLoading && react_1.default.createElement("div", { className: "pagination-loading" }, "Loading...")));
}
if (displayMode === 'load-more') {
return (react_1.default.createElement("div", { className: "pagination-load-more ".concat(className) },
react_1.default.createElement(LoadMoreButton, __assign({}, loadMoreOptions))));
}
var pageNumbers = (0, pagination_1.generatePageNumbers)(page, totalPages, maxPages);
return (react_1.default.createElement("nav", { className: "pagination-container ".concat(className), "aria-label": ariaLabel },
react_1.default.createElement("ul", { className: "pagination-list" },
react_1.default.createElement("li", null,
react_1.default.createElement("button", { onClick: function () { return setPage(page - 1); }, disabled: !hasPreviousPage, "aria-label": "Previous page", className: "pagination-button" }, "Previous")),
pageNumbers.map(function (pageNum) { return (react_1.default.createElement("li", { key: pageNum },
react_1.default.createElement("button", { onClick: function () {
setPage(pageNum);
if (onPageChange)
onPageChange(pageNum);
}, className: "pagination-button ".concat(pageNum === page ? 'active' : ''), "aria-current": pageNum === page ? 'page' : undefined, "aria-label": "Page ".concat(pageNum) }, pageNum))); }),
react_1.default.createElement("li", null,
react_1.default.createElement("button", { onClick: function () { return setPage(page + 1); }, disabled: !hasNextPage, "aria-label": "Next page", className: "pagination-button" }, "Next")))));
};
exports.Pagination = Pagination;