@navinc/base-react-components
Version:
Nav's Pattern Library
37 lines • 2.22 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { buttonBaseClasses } from '@mui/material/ButtonBase';
import MuiPagination, { paginationClasses } from '@mui/material/Pagination';
import MuiPaginationItem, { paginationItemClasses } from '@mui/material/PaginationItem';
import styled, { useTheme } from 'styled-components';
import { Icon, useIsLargerThanPhone } from './index.js';
const _Pagination = ({ 'data-testid': dataTestId = '', className, count, disabled, onChange, page, }) => {
const theme = useTheme();
const isDesktop = useIsLargerThanPhone();
return (_jsx(MuiPagination, { className: className, count: count, "data-testid": dataTestId ? `pagination ${dataTestId}` : 'pagination', disabled: disabled, onChange: onChange, page: page, shape: "rounded", siblingCount: isDesktop ? 1 : 0, sx: {
// centers the pagination
[`&.${paginationClasses.root}`]: {
display: 'flex',
justifyContent: 'center',
},
// pagination item style overrides
[`& .${paginationItemClasses.root}`]: {
borderRadius: '8px',
color: theme.navNeutral400,
fontFamily: theme.fontPrimary,
},
// selected pagination item button style overrides
[`& .${buttonBaseClasses.root}.${paginationItemClasses.selected}`]: {
backgroundColor: `${theme.navPrimary} !important`,
color: `${theme.navNeutralLight} !important`,
},
// disabled selected pagination item button style overrides
[`& .${buttonBaseClasses.root}.${paginationItemClasses.selected}.${paginationItemClasses.disabled}`]: {
opacity: 0.38,
},
}, renderItem: (item) => (_jsx(MuiPaginationItem, Object.assign({ slots: {
previous: () => _jsx(Icon, { name: "actions/carrot-left", size: "16" }),
next: () => _jsx(Icon, { name: "actions/carrot-right", size: "16" }),
} }, item))) }));
};
export const Pagination = styled(_Pagination).withConfig({ displayName: "brc-sc-Pagination", componentId: "brc-sc-12fjkvo" }) ``;
//# sourceMappingURL=pagination.js.map