@navinc/base-react-components
Version:
Nav's Pattern Library
40 lines • 2.53 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 useMediaQuery from '@mui/material/useMediaQuery';
import styled, { useTheme } from 'styled-components';
import isRebrand from './is-rebrand.js';
import { Icon } from './index.js';
const Pagination = ({ 'data-testid': dataTestId = '', className, count, disabled, onChange, page, }) => {
const theme = useTheme();
const isDesktop = useMediaQuery(`(${theme.forLargerThanPhone})`);
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: () => (isRebrand(theme) ? '8px' : '12px'),
color: () => (isRebrand(theme) ? theme.navNeutral400 : theme.neutral400),
fontFamily: theme.fontPrimary,
},
// selected pagination item button style overrides
[`& .${buttonBaseClasses.root}.${paginationItemClasses.selected}`]: {
backgroundColor: () => `${isRebrand(theme) ? theme.navPrimary : theme.bubbleBlue200} !important`,
color: () => `${isRebrand(theme) ? theme.navNeutralLight : theme.navPrimary} !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))) }));
};
const StyledPagination = styled(Pagination).withConfig({ displayName: "brc-sc-StyledPagination", componentId: "brc-sc-nf9lhg" }) ``;
export default StyledPagination;
//# sourceMappingURL=pagination.js.map