@gravity-ui/uikit
Version:
Gravity UI base styling and components
52 lines (51 loc) • 3.28 kB
JavaScript
'use client';
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Pagination = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const mobile_1 = require("../mobile/index.js");
const useDefaultProps_1 = require("../theme/useDefaultProps.js");
const cn_1 = require("../utils/cn.js");
const components_1 = require("./components/index.js");
const usePagination_1 = require("./hooks/usePagination.js");
const utils_1 = require("./utils.js");
require("./Pagination.css");
const b = (0, cn_1.block)('pagination');
const Pagination = (rawProps) => {
const { page, pageSize, total, size: propSize, onUpdate, compact: propCompact = true, pageSizeOptions, showPages = true, showInput = false, view: propView = 'outlined', className, qa, pageComponent, getPageProps, } = (0, useDefaultProps_1.useDefaultProps)('Pagination', rawProps);
const mobile = (0, mobile_1.useMobile)();
const size = (0, utils_1.getSize)({ propSize, mobile });
const compact = mobile ? true : propCompact;
const resultTotal = (0, utils_1.getResultTotal)(total);
const resultPage = (0, utils_1.getResultPage)({
page,
total: resultTotal,
pageSize,
});
const { buttonView, inputView, pageSizerView } = (0, utils_1.getViews)({ propView, mobile });
const { items, numberOfPages } = (0, usePagination_1.usePagination)({
page: resultPage,
pageSize,
total: resultTotal,
mobile,
});
const pagination = items
.map((item) => {
switch (item.type) {
case 'page':
return (showPages && ((0, jsx_runtime_1.jsx)(components_1.PaginationPage, { size: size, pageSize: pageSize, item: item, onUpdate: onUpdate, className: b('pagination-item'), pageComponent: pageComponent, getPageProps: getPageProps }, item.key)));
case 'ellipsis':
return (showPages && ((0, jsx_runtime_1.jsx)(components_1.PaginationEllipsis, { size: size, className: b('pagination-item') }, item.type)));
case 'pageOf':
return (showPages && ((0, jsx_runtime_1.jsx)(components_1.PaginationPageOf, { className: b('pagination-item'), size: size }, item.type)));
case 'button':
return ((0, jsx_runtime_1.jsx)(components_1.PaginationButton, { size: size, item: item, page: resultPage, pageSize: pageSize, onUpdate: onUpdate, compact: compact, className: b('pagination-item'), view: buttonView, pageComponent: pageComponent, getPageProps: getPageProps }, item.action));
default:
return null;
}
})
.filter(Boolean);
return ((0, jsx_runtime_1.jsxs)("div", { className: b(null, className), "data-qa": qa, children: [pagination, showInput && ((0, jsx_runtime_1.jsx)(components_1.PaginationInput, { numberOfPages: numberOfPages, pageSize: pageSize, size: size, onUpdate: onUpdate, className: b('input'), view: inputView })), pageSizeOptions && ((0, jsx_runtime_1.jsx)(components_1.PaginationPageSizer, { onUpdate: onUpdate, page: resultPage, pageSize: pageSize, pageSizeOptions: pageSizeOptions, size: size, total: resultTotal, className: b('page-sizer'), view: pageSizerView }))] }));
};
exports.Pagination = Pagination;
//# sourceMappingURL=Pagination.js.map