@gravity-ui/uikit
Version:
Gravity UI base styling and components
48 lines (47 loc) • 2.97 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMobile } from "../mobile/index.js";
import { useDefaultProps } from "../theme/useDefaultProps.js";
import { block } from "../utils/cn.js";
import { PaginationButton, PaginationEllipsis, PaginationInput, PaginationPage, PaginationPageOf, PaginationPageSizer, } from "./components/index.js";
import { usePagination } from "./hooks/usePagination.js";
import { getResultPage, getResultTotal, getSize, getViews } from "./utils.js";
import "./Pagination.css";
const b = block('pagination');
export 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, } = useDefaultProps('Pagination', rawProps);
const mobile = useMobile();
const size = getSize({ propSize, mobile });
const compact = mobile ? true : propCompact;
const resultTotal = getResultTotal(total);
const resultPage = getResultPage({
page,
total: resultTotal,
pageSize,
});
const { buttonView, inputView, pageSizerView } = getViews({ propView, mobile });
const { items, numberOfPages } = usePagination({
page: resultPage,
pageSize,
total: resultTotal,
mobile,
});
const pagination = items
.map((item) => {
switch (item.type) {
case 'page':
return (showPages && (_jsx(PaginationPage, { size: size, pageSize: pageSize, item: item, onUpdate: onUpdate, className: b('pagination-item'), pageComponent: pageComponent, getPageProps: getPageProps }, item.key)));
case 'ellipsis':
return (showPages && (_jsx(PaginationEllipsis, { size: size, className: b('pagination-item') }, item.type)));
case 'pageOf':
return (showPages && (_jsx(PaginationPageOf, { className: b('pagination-item'), size: size }, item.type)));
case 'button':
return (_jsx(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 (_jsxs("div", { className: b(null, className), "data-qa": qa, children: [pagination, showInput && (_jsx(PaginationInput, { numberOfPages: numberOfPages, pageSize: pageSize, size: size, onUpdate: onUpdate, className: b('input'), view: inputView })), pageSizeOptions && (_jsx(PaginationPageSizer, { onUpdate: onUpdate, page: resultPage, pageSize: pageSize, pageSizeOptions: pageSizeOptions, size: size, total: resultTotal, className: b('page-sizer'), view: pageSizerView }))] }));
};
//# sourceMappingURL=Pagination.js.map