@kbfront/kb-ui
Version:
KB React UI Library
159 lines • 8.08 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.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.EPaginationSize = void 0;
var react_1 = __importStar(require("react"));
var history_1 = require("history");
var Icon_1 = __importDefault(require("components/Icon"));
var params_1 = require("utils/params");
var enum_1 = require("enum");
require("./index.scss");
var EPaginationSize;
(function (EPaginationSize) {
EPaginationSize["XS"] = "xs";
EPaginationSize["S"] = "s";
EPaginationSize["M"] = "m";
EPaginationSize["L"] = "l";
EPaginationSize["XL"] = "xl";
})(EPaginationSize = exports.EPaginationSize || (exports.EPaginationSize = {}));
var PaginationView = function (_a) {
var _b;
var _c = _a.pageCount, pageCount = _c === void 0 ? 10 : _c, _d = _a.postCount, postCount = _d === void 0 ? 10 : _d, _e = _a.className, className = _e === void 0 ? "" : _e, _f = _a.color, color = _f === void 0 ? enum_1.EColor.SECONDARY : _f, _g = _a.queryString, queryString = _g === void 0 ? "page" : _g, _h = _a.size, size = _h === void 0 ? EPaginationSize.S : _h;
var initialTotalPages = Math.ceil(postCount / pageCount);
var _j = history_1.createBrowserHistory(), location = _j.location, push = _j.push;
var query = params_1.URLParams.getParams(queryString, location).query;
var _k = react_1.useState(function () {
var stickyValue;
try {
stickyValue = location === null || location === void 0 ? void 0 : location.state;
}
catch (err) {
console.error(err);
}
return stickyValue
? stickyValue
: {
totalPages: initialTotalPages,
};
}), pager = _k[0], setPager = _k[1];
var initialPage = +query || 1;
var setPage = react_1.useCallback(function (page) {
var _a;
if (page < 1 || page > (pager === null || pager === void 0 ? void 0 : pager.totalPages)) {
return;
}
// get new pager object for specified page
var nextPager = getPager(postCount, page, pageCount);
setPager(nextPager);
// update state
var url = params_1.URLParams.setParams(queryString, ((_a = nextPager === null || nextPager === void 0 ? void 0 : nextPager.currentPage) === null || _a === void 0 ? void 0 : _a.toString()) || "");
if ((nextPager === null || nextPager === void 0 ? void 0 : nextPager.currentPage) !== 1) {
push({
search: "?" + url,
state: nextPager,
});
}
else {
push({
search: "",
});
}
}, [pageCount, postCount, pager]);
var getPager = react_1.useCallback(function (totalItems, currentPage, pageNumber) {
// default to first page
var _a, _b;
currentPage = currentPage || 1;
// default page size is 10
pageNumber = pageNumber || 10;
// calculate total pages
var totalPages = Math.ceil(totalItems / pageNumber);
var startPage;
var endPage;
if (totalPages <= 10) {
// less than 10 total pages so show all
startPage = 1;
endPage = totalPages;
}
else {
// more than 10 total pages so calculate start and end pages
if (currentPage <= 6) {
startPage = 1;
endPage = 10;
}
else if (currentPage + 4 >= totalPages) {
startPage = totalPages - 9;
endPage = totalPages;
}
else {
startPage = currentPage - 5;
endPage = currentPage + 4;
}
}
// calculate start and end item indexes
var startIndex = (currentPage - 1) * pageNumber;
var endIndex = Math.min(startIndex + pageNumber - 1, totalItems - 1);
// create an array of pages to ng-repeat in the pager control
var pages = (_b = Array.from((_a = Array(endPage + 1 - startPage)) === null || _a === void 0 ? void 0 : _a.keys())) === null || _b === void 0 ? void 0 : _b.map(function (i) { return startPage + i; });
// return object with all pager properties required by the view
return {
totalItems: totalItems,
currentPage: currentPage,
pageNumber: pageNumber,
totalPages: totalPages,
startPage: startPage,
endPage: endPage,
startIndex: startIndex,
endIndex: endIndex,
pages: pages,
};
}, []);
react_1.useLayoutEffect(function () {
if (initialPage > initialTotalPages) {
initialPage = initialTotalPages;
}
if (postCount > 1) {
// set page if items array isn't empty
setPage(initialPage);
}
return function () {
// clear page if items array has changed
if (!postCount) {
setPage(initialPage);
}
};
}, [query, initialTotalPages, pageCount]);
return (postCount > pageCount && (react_1.default.createElement("div", { className: "kb-pagination " + className },
react_1.default.createElement("ul", { className: "kb-pagination-" + size },
(pager === null || pager === void 0 ? void 0 : pager.currentPage) !== 1 && (react_1.default.createElement("li", { className: "kb-pagination__item", onClick: function () { return setPage(1); } }, react_1.default.createElement(Icon_1.default, { path: ["far", "arrow-to-left"] }))),
react_1.default.createElement("li", { className: "kb-pagination__item", onClick: function () { return setPage((pager === null || pager === void 0 ? void 0 : pager.currentPage) - 1); } },
react_1.default.createElement(Icon_1.default, { path: ["far", "chevron-left"] })), (_b = pager === null || pager === void 0 ? void 0 : pager.pages) === null || _b === void 0 ? void 0 :
_b.map(function (page, i) { return (react_1.default.createElement("li", { onClick: function () { return setPage(page); }, key: page, className: "kb-pagination__item " + ((pager === null || pager === void 0 ? void 0 : pager.currentPage) === page ? "active " + color : "") }, page)); }),
react_1.default.createElement("li", { className: "kb-pagination__item", onClick: function () { return setPage((pager === null || pager === void 0 ? void 0 : pager.currentPage) + 1); } },
react_1.default.createElement(Icon_1.default, { path: ["far", "chevron-right"] })),
(pager === null || pager === void 0 ? void 0 : pager.currentPage) !== (pager === null || pager === void 0 ? void 0 : pager.totalPages) && (react_1.default.createElement("li", { className: "kb-pagination__item", onClick: function () { return setPage(pager === null || pager === void 0 ? void 0 : pager.totalPages); } },
react_1.default.createElement(Icon_1.default, { path: ["far", "arrow-to-right"] })))))));
};
var Pagination = react_1.memo(PaginationView);
exports.default = Pagination;
//# sourceMappingURL=index.js.map