@unicity/design-system
Version:
A comprehensive React component library built on Material-UI with advanced theming capabilities including neumorphism design support
81 lines • 4.35 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Pagination as MuiPagination, PaginationItem, Box, Typography, Select, MenuItem, FormControl, InputLabel, } from '@mui/material';
import { FirstPage, LastPage, NavigateBefore, NavigateNext, } from '@mui/icons-material';
import { styled } from '@mui/material/styles';
const StyledPagination = styled(MuiPagination, {
shouldForwardProp: (prop) => prop !== 'variant',
})(({ theme, variant = 'default' }) => ({
'& .MuiPaginationItem-root': {
...(variant === 'outlined' && {
border: `1px solid ${theme.palette.divider}`,
'&.Mui-selected': {
backgroundColor: theme.palette.primary.main,
color: theme.palette.primary.contrastText,
border: `1px solid ${theme.palette.primary.main}`,
},
}),
...(variant === 'text' && {
'&.Mui-selected': {
backgroundColor: 'transparent',
color: theme.palette.primary.main,
fontWeight: 600,
},
}),
},
}));
const PaginationContainer = styled(Box)(({ theme }) => ({
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
gap: theme.spacing(2),
flexWrap: 'wrap',
}));
const PageSizeSelector = styled(FormControl)(({ theme }) => ({
minWidth: 120,
'& .MuiSelect-select': {
fontSize: theme.typography.body2.fontSize,
},
}));
const defaultLabels = {
firstPage: 'Go to first page',
lastPage: 'Go to last page',
previousPage: 'Go to previous page',
nextPage: 'Go to next page',
pageSize: 'Items per page',
totalItems: 'Total items',
showing: 'Showing',
of: 'of',
};
export const Pagination = ({ page, count, onChange, variant = 'default', showPageSize = false, pageSize = 10, pageSizeOptions = [5, 10, 25, 50, 100], onPageSizeChange, showTotal = false, totalItems, showFirstLast = false, labels = defaultLabels, compact = false, size = 'medium', ...props }) => {
const mergedLabels = { ...defaultLabels, ...labels };
const handlePageChange = (_, value) => {
onChange(value);
};
const handlePageSizeChange = (event) => {
const newPageSize = parseInt(event.target.value, 10);
onPageSizeChange?.(newPageSize);
};
const renderPaginationItem = (item) => {
if (showFirstLast) {
return (_jsx(PaginationItem, { slots: {
first: FirstPage,
last: LastPage,
previous: NavigateBefore,
next: NavigateNext,
}, ...item }));
}
return _jsx(PaginationItem, { ...item });
};
const getTotalInfo = () => {
if (!showTotal || !totalItems)
return null;
const startItem = (page - 1) * pageSize + 1;
const endItem = Math.min(page * pageSize, totalItems);
return (_jsxs(Typography, { variant: "body2", color: "textSecondary", children: [mergedLabels.showing, " ", startItem, "-", endItem, " ", mergedLabels.of, " ", totalItems] }));
};
if (compact) {
return (_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap", children: [_jsx(StyledPagination, { page: page, count: count, onChange: handlePageChange, variant: variant === 'default' ? undefined : variant, size: size, showFirstButton: showFirstLast, showLastButton: showFirstLast, renderItem: renderPaginationItem, ...props }), showTotal && getTotalInfo()] }));
}
return (_jsxs(PaginationContainer, { children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [showPageSize && onPageSizeChange && (_jsxs(PageSizeSelector, { size: "small", children: [_jsx(InputLabel, { children: mergedLabels.pageSize }), _jsx(Select, { value: pageSize, onChange: handlePageSizeChange, label: mergedLabels.pageSize, children: pageSizeOptions.map((option) => (_jsx(MenuItem, { value: option, children: option }, option))) })] })), showTotal && getTotalInfo()] }), _jsx(StyledPagination, { page: page, count: count, onChange: handlePageChange, variant: variant === 'default' ? undefined : variant, size: size, showFirstButton: showFirstLast, showLastButton: showFirstLast, renderItem: renderPaginationItem, ...props })] }));
};
//# sourceMappingURL=Pagination.js.map