@pnp/spfx-controls-react/lib-commonjs/controls/pagination/Pagination.js

Reusable React controls for SharePoint Framework solutions

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Pagination = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var Button_1 = require("@fluentui/react/lib/Button");
var Pagination_module_scss_1 = tslib_1.__importDefault(require("./Pagination.module.scss"));
var isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
var telemetry = tslib_1.__importStar(require("../../common/telemetry"));
var Stack_1 = require("@fluentui/react/lib/Stack");
var Pagination = /** @class */ (function (_super) {
    tslib_1.__extends(Pagination, _super);
    function Pagination(props) {
        var _this = _super.call(this, props) || this;
        _this.preparePaginationElements = function (totalPages) {
            var paginationElementsArray = [];
            for (var i = 0; i < totalPages; i++) {
                paginationElementsArray.push(i + 1);
            }
            return paginationElementsArray;
        };
        _this.onClick = function (page) {
            _this.setState({ currentPage: page });
            _this.props.onChange(page);
        };
        telemetry.track('ReactPagination');
        var paginationElements = _this.preparePaginationElements(props.totalPages);
        _this.state = {
            currentPage: props.currentPage,
            paginationElements: paginationElements,
            limiter: props.limiter ? props.limiter : 3,
        };
        return _this;
    }
    Pagination.prototype.componentDidUpdate = function (prevProps) {
        var _a = this.state, currentPage = _a.currentPage, paginationElements = _a.paginationElements;
        if (prevProps.totalPages !== this.props.totalPages) {
            paginationElements = this.preparePaginationElements(this.props.totalPages);
            currentPage = this.state.currentPage > this.props.totalPages ? this.props.totalPages : this.state.currentPage;
        }
        if (this.props.currentPage !== prevProps.currentPage) {
            currentPage = this.props.currentPage > this.props.totalPages ? this.props.totalPages : this.props.currentPage;
        }
        if (!(0, isEqual_1.default)(this.state.currentPage, currentPage) || !(0, isEqual_1.default)(this.state.paginationElements, paginationElements)) {
            this.setState({
                paginationElements: paginationElements,
                currentPage: currentPage
            });
        }
    };
    Pagination.prototype.render = function () {
        var _this = this;
        return (React.createElement("div", { className: "".concat(Pagination_module_scss_1.default.pagination, " pagination-container") },
            React.createElement(Stack_1.Stack, { horizontal: true, horizontalAlign: "center", verticalAlign: "center", tokens: { childrenGap: 1 }, wrap: true },
                !this.props.hideFirstPageJump &&
                    React.createElement(Button_1.DefaultButton, { className: "".concat(Pagination_module_scss_1.default.buttonStyle, " pagination-button pagination-button_first"), onClick: function () { return _this.onClick(1); }, iconProps: { iconName: "DoubleChevronLeft" } }),
                this.state.paginationElements.map(function (pageNumber) { return _this.renderPageNumber(pageNumber); }),
                !this.props.hideLastPageJump &&
                    React.createElement(Button_1.DefaultButton, { className: "".concat(Pagination_module_scss_1.default.buttonStyle, " pagination-button pagination-button_last"), onClick: function () { return _this.onClick(_this.props.totalPages); }, iconProps: { iconName: "DoubleChevronRight" } }))));
    };
    Pagination.prototype.renderPageNumber = function (pageNumber) {
        var _this = this;
        var limiterIcon = this.props.limiterIcon;
        var _a = this.state, currentPage = _a.currentPage, limiter = _a.limiter;
        if (pageNumber === currentPage) {
            return (React.createElement(Button_1.PrimaryButton, { className: Pagination_module_scss_1.default.buttonStyle, onClick: function () { return _this.onClick(pageNumber); }, text: pageNumber.toString() }));
        }
        else {
            if (!(pageNumber < currentPage - limiter || pageNumber > currentPage + limiter)) {
                return (React.createElement(Button_1.DefaultButton, { className: Pagination_module_scss_1.default.buttonStyle, onClick: function () { return _this.onClick(pageNumber); }, text: pageNumber.toString() }));
            }
            else if (!(pageNumber < currentPage - limiter - 1 || pageNumber > currentPage + limiter + 1)) {
                if (limiterIcon) {
                    return (React.createElement(Button_1.DefaultButton, { className: Pagination_module_scss_1.default.buttonStyle, onClick: function () { return _this.onClick(pageNumber); }, iconProps: { iconName: limiterIcon ? limiterIcon : "More" } }));
                }
                else {
                    return (React.createElement(Button_1.DefaultButton, { className: Pagination_module_scss_1.default.buttonStyle, onClick: function () { return _this.onClick(pageNumber); }, iconProps: { iconName: limiterIcon ? limiterIcon : "More" } }));
                }
            }
            else {
                return;
            }
        }
    };
    return Pagination;
}(React.Component));
exports.Pagination = Pagination;
//# sourceMappingURL=Pagination.js.map