stackpress/cjs/view/element/Pagination.js

Incept is a content management framework.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = Pagination;
const jsx_runtime_1 = require("react/jsx-runtime");
function Pagination(props) {
    const { total = 0, skip = 0, take = 50, radius = 2, paginate = () => { } } = props;
    const current = Math.floor(skip / take) + 1;
    const max = Math.ceil(total / take);
    const previous = current > 1;
    const next = current < max;
    const refresh = (page) => paginate(Math.max(page - 1, 0) * take);
    const pages = [];
    for (let i = current - 1 - radius; i < max; i++) {
        if (i >= 0 && i < current + radius) {
            pages.push(i + 1);
        }
    }
    if (total <= take)
        return null;
    return ((0, jsx_runtime_1.jsxs)("div", { className: "pagination", children: [previous && ((0, jsx_runtime_1.jsx)("button", { className: "prev", onClick: () => refresh(current - 1), children: (0, jsx_runtime_1.jsx)("i", { className: "fas fa-chevron-left" }) })), pages.map((page, i) => ((0, jsx_runtime_1.jsx)("button", { onClick: () => refresh(page), className: `page ${page === current ? 'active' : ''}`, children: page }, i))), next && ((0, jsx_runtime_1.jsx)("button", { className: "next", onClick: () => refresh(current + 1), children: (0, jsx_runtime_1.jsx)("i", { className: "fas fa-chevron-right" }) }))] }));
}
;