react-awesome-paginate/dist/index.cjs.js

React awesome paginate is a modern, typescript based pagination component. You can use it in your project.

'use strict';

var React = require('react');

var Pagination = function (_a) {
    var _b = _a.currentPage, currentPage = _b === void 0 ? 1 : _b, _c = _a.totalPages, totalPages = _c === void 0 ? 1 : _c, _d = _a.previousLabel, previousLabel = _d === void 0 ? "Previous" : _d, _e = _a.nextLabel, nextLabel = _e === void 0 ? "Next" : _e, _f = _a.activeClassName, activeClassName = _f === void 0 ? "active" : _f, _g = _a.paginationTheme, paginationTheme = _g === void 0 ? "default" : _g, _h = _a.morePagesLabel, morePagesLabel = _h === void 0 ? "..." : _h, _j = _a.containerClassName, containerClassName = _j === void 0 ? "" : _j, _k = _a.prevClassName, prevClassName = _k === void 0 ? "" : _k, _l = _a.nextClassName, nextClassName = _l === void 0 ? "" : _l, onPageChange = _a.onPageChange;
    var getPageNumbers = function () {
        var pages = [];
        if (totalPages <= 7) {
            for (var i = 1; i <= totalPages; i++) {
                pages.push(i);
            }
        }
        else {
            pages.push(1);
            if (currentPage >= 4) {
                pages.push("...");
            }
            var start = Math.max(2, currentPage - 1);
            var end = Math.min(totalPages - 1, currentPage + 1);
            for (var i = start; i <= end; i++) {
                pages.push(i);
            }
            if (currentPage <= totalPages - 3) {
                pages.push("...");
            }
            pages.push(totalPages);
        }
        return pages;
    };
    var pageNumbers = getPageNumbers();
    return (React.createElement("div", { className: "react-awesome-paginate__container react-awesome-paginate__".concat(paginationTheme, "__container ").concat(containerClassName) },
        React.createElement("button", { onClick: function () { return onPageChange(currentPage - 1); }, disabled: (currentPage === (1) || currentPage < 0), className: "react-awesome-paginate__button react-awesome-paginate__".concat(paginationTheme, "__button ").concat(prevClassName) }, paginationTheme == 'circular' && previousLabel === "Previous" ? "←" : previousLabel),
        React.createElement("div", { className: "react-awesome-paginate__pages react-awesome-paginate__".concat(paginationTheme, "__pages") }, pageNumbers.map(function (page, idx) {
            return page === "..." ? (React.createElement("button", { key: "more__button-".concat(idx), className: "react-awesome-paginate__more__button react-awesome-paginate__".concat(paginationTheme, "__more__button") }, morePagesLabel)) : (React.createElement("button", { key: "page-".concat(page), onClick: function () { return onPageChange(page); }, className: "react-awesome-paginate__button react-awesome-paginate__".concat(paginationTheme, "__button ").concat(currentPage === page ? activeClassName : "") }, page));
        })),
        React.createElement("button", { onClick: function () { return onPageChange(currentPage + 1); }, disabled: (currentPage === totalPages) || (totalPages === 0) || (totalPages <= currentPage), className: "react-awesome-paginate__button react-awesome-paginate__".concat(paginationTheme, "__button ").concat(nextClassName) }, paginationTheme == 'circular' && nextLabel === "Next" ? "→" : nextLabel)));
};

module.exports = Pagination;
//# sourceMappingURL=index.cjs.js.map