quantumai-design-system
Version:
퀀텀에이아이의 디자인 시스템
67 lines (66 loc) • 4.55 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import PageInfo from './PageInfo';
import { PageMoveButton, PageNumberButton, PageNumberContainer, PaginationContainer, PaginationContent } from './styles';
var Pagination = function (_a) {
var _b;
var totalItems = _a.totalItems, itemsPerPage = _a.itemsPerPage, currentPage = _a.currentPage, onPageChange = _a.onPageChange, renderPrevButton = _a.renderPrevButton, renderNextButton = _a.renderNextButton, childOfPrevButton = _a.childOfPrevButton, childOfNextButton = _a.childOfNextButton, info = _a.info, props = __rest(_a, ["totalItems", "itemsPerPage", "currentPage", "onPageChange", "renderPrevButton", "renderNextButton", "childOfPrevButton", "childOfNextButton", "info"]);
var totalPages = Math.ceil(totalItems / itemsPerPage);
var range = function (start, end, step) {
if (step === void 0) { step = 1; }
return Array.from({ length: (end - start) / step + 1 }, function (_, index) { return start + index * step; });
};
var createPages = function () {
var visiblePages = 7;
var pages = [];
if (totalPages <= visiblePages)
return range(1, totalPages);
switch (true) {
case currentPage <= 4:
pages = __spreadArray(__spreadArray([], range(1, 5), true), ['···', totalPages], false);
break;
case currentPage >= totalPages - 3:
pages = __spreadArray([1, '···'], range(totalPages - 4, totalPages), true);
break;
default:
pages = __spreadArray(__spreadArray([1, '···'], range(currentPage - 1, currentPage + 1), true), ['···', totalPages], false);
}
return pages;
};
var handlePageChange = function (page) {
onPageChange(page);
};
return (_jsxs(PaginationContainer, __assign({}, props, { children: [info &&
((_b = info === null || info === void 0 ? void 0 : info.render) !== null && _b !== void 0 ? _b : (_jsx(PageInfo, { itemsPerPageArray: info === null || info === void 0 ? void 0 : info.itemsPerPageArray, selectedValue: info === null || info === void 0 ? void 0 : info.selectedValue, total: totalItems, onSelectedChange: info === null || info === void 0 ? void 0 : info.onSelectedChange }))), _jsxs(PaginationContent, { children: [renderPrevButton !== null && renderPrevButton !== void 0 ? renderPrevButton : (_jsx(PageMoveButton, { onClick: function () { return handlePageChange(currentPage - 1); }, disabled: currentPage === 1, children: childOfPrevButton !== null && childOfPrevButton !== void 0 ? childOfPrevButton : 'Prev' })), _jsx(PageNumberContainer, { children: createPages().map(function (page, index) { return (_jsx(PageNumberButton, { onClick: function () { return handlePageChange(+page); }, "aria-current": currentPage === page, disabled: page === '···', children: page }, index)); }) }), renderNextButton !== null && renderNextButton !== void 0 ? renderNextButton : (_jsx(PageMoveButton, { onClick: function () { return handlePageChange(currentPage + 1); }, disabled: currentPage === totalPages, children: childOfNextButton !== null && childOfNextButton !== void 0 ? childOfNextButton : 'Next' }))] })] })));
};
export default Pagination;