@coreui/react-pro/dist/esm/components/smart-pagination/CSmartPagination.js

UI Components Library for React.js

import { __rest, __assign } from '../../node_modules/tslib/tslib.es6.js';
import React, { forwardRef } from 'react';
import classNames from '../../node_modules/classnames/index.js';
import PropTypes from 'prop-types';
import { CPagination } from '../pagination/CPagination.js';
import { CPaginationItem } from '../pagination/CPaginationItem.js';

var CSmartPagination = forwardRef(function (_a, ref) {
    var className = _a.className, _b = _a.activePage, activePage = _b === void 0 ? 1 : _b, _c = _a.align, align = _c === void 0 ? 'start' : _c, _d = _a.arrows, arrows = _d === void 0 ? true : _d, _e = _a.dots, dots = _e === void 0 ? true : _e, _f = _a.doubleArrows, doubleArrows = _f === void 0 ? true : _f, _g = _a.firstButton, firstButton = _g === void 0 ? React.createElement(React.Fragment, null, "\u00AB") : _g, _h = _a.lastButton, lastButton = _h === void 0 ? React.createElement(React.Fragment, null, "\u00BB") : _h, _j = _a.limit, limit = _j === void 0 ? 5 : _j, _k = _a.nextButton, nextButton = _k === void 0 ? React.createElement(React.Fragment, null, "\u203A") : _k, onActivePageChange = _a.onActivePageChange, pages = _a.pages, _l = _a.previousButton, previousButton = _l === void 0 ? React.createElement(React.Fragment, null, "\u2039") : _l, size = _a.size, rest = __rest(_a, ["className", "activePage", "align", "arrows", "dots", "doubleArrows", "firstButton", "lastButton", "limit", "nextButton", "onActivePageChange", "pages", "previousButton", "size"]);
    var showDots = (function () {
        return dots && limit > 4 && limit < pages;
    })();
    var maxPrevItems = (function () {
        return Math.floor((limit - 1) / 2);
    })();
    var maxNextItems = (function () {
        return Math.ceil((limit - 1) / 2);
    })();
    var beforeDots = (function () {
        return showDots && activePage > maxPrevItems + 1;
    })();
    var afterDots = (function () {
        return showDots && activePage < pages - maxNextItems;
    })();
    var computedLimit = (function () {
        return limit - (afterDots ? 1 : 0) - (beforeDots ? 1 : 0);
    })();
    var range = (function () {
        return activePage + maxNextItems;
    })();
    var lastItem = (function () {
        return range >= pages ? pages : range - (afterDots ? 1 : 0);
    })();
    var itemsAmount = (function () {
        return pages < computedLimit ? pages : computedLimit;
    })();
    var items = (function () {
        return activePage - maxPrevItems <= 1
            ? Array.from({
                length: itemsAmount,
            }, function (_v, i) { return i + 1; })
            : Array.from({
                length: itemsAmount,
            }, function (_v, i) {
                return lastItem - i;
            }).reverse();
    })();
    var setPage = function (number) {
        if (number !== activePage) {
            onActivePageChange && onActivePageChange(number);
        }
    };
    return (React.createElement(CPagination, __assign({ className: classNames("justify-content-".concat(align), className), "aria-label": "pagination", size: size }, rest, { ref: ref }),
        doubleArrows && (React.createElement(CPaginationItem, { onClick: function () { return setPage(1); }, "aria-label": "Go to first page", "aria-disabled": activePage === 1, disabled: activePage === 1 }, firstButton)),
        arrows && (React.createElement(CPaginationItem, { onClick: function () { return setPage(activePage - 1); }, "aria-label": "Go to previous page", "aria-disabled": activePage === 1, disabled: activePage === 1 }, previousButton)),
        beforeDots && (React.createElement(CPaginationItem, { role: "separator", disabled: true }, "\u2026")),
        items.map(function (i) {
            return (React.createElement(CPaginationItem, { onClick: function () { return setPage(i); }, "aria-label": activePage === i ? "Current page ".concat(i) : "Go to page ".concat(i), active: activePage === i, key: i }, i));
        }),
        afterDots && (React.createElement(CPaginationItem, { role: "separator", disabled: true }, "\u2026")),
        arrows && (React.createElement(CPaginationItem, { onClick: function () { return setPage(activePage + 1); }, "aria-label": "Go to next page", "aria-disabled": activePage === pages, disabled: activePage === pages }, nextButton)),
        doubleArrows && (React.createElement(CPaginationItem, { onClick: function () { return setPage(pages); }, "aria-label": "Go to last page", "aria-disabled": activePage === pages, disabled: activePage === pages }, lastButton))));
});
CSmartPagination.propTypes = {
    className: PropTypes.oneOfType([PropTypes.string]),
    activePage: PropTypes.number,
    dots: PropTypes.bool,
    arrows: PropTypes.bool,
    doubleArrows: PropTypes.bool,
    firstButton: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
    previousButton: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
    nextButton: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
    lastButton: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
    size: PropTypes.oneOf(['sm', 'lg']),
    align: PropTypes.oneOf(['start', 'center', 'end']),
    limit: PropTypes.number,
    pages: PropTypes.number.isRequired,
    onActivePageChange: PropTypes.func,
};
CSmartPagination.displayName = 'CSmartPagination';

export { CSmartPagination };
//# sourceMappingURL=CSmartPagination.js.map