67 lines
2.1 KiB
TypeScript
67 lines
2.1 KiB
TypeScript
import { Divider } from '@mui/material';
|
||
import Pagination from '@mui/material/Pagination';
|
||
import Stack from '@mui/material/Stack';
|
||
import * as React from 'react';
|
||
|
||
interface BasePaginationProps {
|
||
page: number;
|
||
totalCount: number;
|
||
pageSize: number;
|
||
onChange: (newPage: number) => void;
|
||
}
|
||
|
||
export default function BasePagination({ page, pageSize, totalCount, onChange }: BasePaginationProps) {
|
||
const [inputValue, setInputValue] = React.useState(page);
|
||
|
||
React.useEffect(() => {
|
||
setInputValue(page);
|
||
}, [page]);
|
||
|
||
React.useEffect(() => {
|
||
const handler = setTimeout(() => {
|
||
const maxPage = Math.ceil(totalCount / pageSize);
|
||
let newPage = inputValue;
|
||
|
||
if (inputValue === 0) {
|
||
newPage = 1; // Agar 0 kiritsa, 1 page ga o‘tsin
|
||
} else if (inputValue > maxPage) {
|
||
newPage = maxPage; // Max page dan oshsa, max page ga o‘tsin
|
||
}
|
||
|
||
if (newPage !== page) {
|
||
onChange(newPage);
|
||
}
|
||
}, 1000);
|
||
|
||
return () => clearTimeout(handler);
|
||
}, [inputValue, page, totalCount, pageSize, onChange]);
|
||
|
||
return (
|
||
<Stack spacing={2} direction='row' divider={<Divider orientation='vertical' flexItem />}>
|
||
<Pagination
|
||
page={page}
|
||
size='large'
|
||
count={Math.ceil(totalCount / pageSize)}
|
||
onChange={(_, newPage) => onChange(newPage)}
|
||
variant='outlined'
|
||
shape='rounded'
|
||
siblingCount={11}
|
||
boundaryCount={1}
|
||
color='primary'
|
||
sx={{
|
||
'.Mui-selected': {
|
||
backgroundColor: theme => theme.palette.primary.main,
|
||
color: '#fff',
|
||
},
|
||
}}
|
||
/>
|
||
<input
|
||
value={inputValue}
|
||
type='number'
|
||
style={{ width: '50px', textAlign: 'center', outline: 'none' }}
|
||
onChange={e => setInputValue(Number(e.target.value))}
|
||
/>
|
||
</Stack>
|
||
);
|
||
}
|