@lunit/oui
Version:
Lunit Oncology UI components
64 lines (63 loc) • 1.94 kB
JavaScript
import { Button, styled, Box } from '@mui/material';
import { subScrollbarWidth } from '../../foundations';
export const DEFAULT_PAGE_SIZE = 100;
export const PAGE_SIZE_LIST = [25, 50, 75, 100];
export const PaginationBox = styled(Box)(({ theme }) => ({
...theme.typography.body5,
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
borderTop: `1px solid ${theme.palette.neutralGrey[90]}`,
height: '48px',
padding: '14px 0',
color: theme.palette.neutralGrey[40],
}));
export const PaperProps = { style: { maxHeight: 378, width: 136 } };
export const SidePageBox = styled('div')({
display: 'flex',
alignItems: 'center',
height: '20px',
});
export const SelectButton = styled(Button)(({ theme }) => ({
justifyContent: 'flex-end',
border: '1px solid transparent',
minWidth: 'auto',
width: '58px',
height: '28px',
marginLeft: theme.spacing(3),
padding: '4px 4px 4px 8px',
color: theme.palette.neutralGrey[15],
'.MuiButton-endIcon': { margin: 0 },
'&:hover': {
background: 'transparent',
borderColor: theme.palette.neutralGrey[40],
},
'&:focus-visible': {
background: 'transparent',
borderColor: theme.palette.scope1,
},
}));
export const ArrowButton = styled(Button)(({ theme }) => ({
border: '1px solid transparent',
minWidth: 'auto',
height: '28px',
padding: theme.spacing(0.5),
color: theme.palette.neutralGrey[40],
'&:hover': {
background: theme.palette.neutralGrey[70],
},
'&:disabled': {
color: theme.palette.neutralGrey[40],
opacity: 0.4,
},
'.MuiButton-endIcon': {
margin: 0,
},
}));
export const PaginationContainer = styled('div')(({ theme }) => ({
padding: `0 ${subScrollbarWidth(theme.spacing(5))} 0 ${theme.spacing(5)}`,
}));
export const divider = {
borderWidth: '0',
margin: '0 12px',
};