@teamsnap/teamsnap-ui
Version:
a CSS component library for TeamSnap
80 lines (79 loc) • 4.24 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
var Button_1 = require("../Button");
var ButtonGroup_1 = require("../ButtonGroup");
var helpers_1 = require("../Table/Paginated/helpers");
var PropTypes = __importStar(require("prop-types"));
var React = __importStar(require("react"));
var helpers_2 = require("../../utils/helpers");
var propTypes = {
totalItems: PropTypes.number.isRequired,
itemsPerPage: PropTypes.number.isRequired,
currentPage: PropTypes.number.isRequired,
setCurrentPage: PropTypes.func.isRequired,
style: PropTypes.object,
mods: PropTypes.string,
};
var PaginationButtons = function (_a) {
var totalItems = _a.totalItems, itemsPerPage = _a.itemsPerPage, currentPage = _a.currentPage, setCurrentPage = _a.setCurrentPage, style = _a.style, mods = _a.mods;
var lastPageIndex = (0, helpers_1.getLastPageIndex)(totalItems, itemsPerPage);
var buttonLength = totalItems >= 0 ? lastPageIndex : 0;
var MAX_MIDDLE_BUTTONS = 5;
var defaultStartOfMiddleButtons = currentPage - (Math.round(MAX_MIDDLE_BUTTONS / 2) - 1);
var startOfMiddleButtons = Math.max(2, Math.min(defaultStartOfMiddleButtons, buttonLength - MAX_MIDDLE_BUTTONS));
var buttonMapper = Array(buttonLength > MAX_MIDDLE_BUTTONS ? MAX_MIDDLE_BUTTONS : buttonLength).fill(startOfMiddleButtons);
var renderPaginateButton = function (key, text, isCurrentPage, isDisabled, pageForClick) {
var linkClassName = "PaginateItem";
var onclick = !isDisabled ? function () { return setCurrentPage(pageForClick); } : null;
if (isCurrentPage) {
linkClassName = "PaginateItemIsActive";
}
else if (isDisabled) {
linkClassName = "PaginateItemIsDisabled";
}
return (React.createElement(Button_1.Button, { key: key, className: "Button " + linkClassName, onClick: onclick, type: "button" }, text));
};
if (buttonLength < 2)
return null;
var buttonGroupClasses = (0, helpers_2.getClassName)("ButtonGroup", mods);
return (React.createElement(ButtonGroup_1.ButtonGroup, { className: buttonGroupClasses, style: Object.assign({}, style, { overflow: "scroll" }) },
renderPaginateButton("P", "Previous", false, currentPage === 1, currentPage - 1),
renderPaginateButton(1, "1", currentPage === 1, currentPage === 1, 1),
buttonMapper.map(function (page, index) {
if (page + index <= 1)
return null;
if (page + index >= buttonLength)
return null;
if (index === 0 && page + index > 2) {
return renderPaginateButton("EF", "...", false, true, 0);
}
if (index === buttonMapper.length - 1 &&
page + index < buttonLength - 1) {
return renderPaginateButton("EL", "...", false, true, 0);
}
return renderPaginateButton(index + page, index + page, index + page === currentPage, index + page === currentPage, page + index);
}),
renderPaginateButton(buttonLength, buttonLength, currentPage === buttonLength, currentPage === buttonLength, buttonLength),
renderPaginateButton("N", "Next", false, currentPage === lastPageIndex || lastPageIndex === 0, currentPage + 1)));
};
PaginationButtons.propTypes = propTypes;
exports.default = PaginationButtons;