Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2967 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 2967 Rev 3719
Línea 1... Línea 1...
1 
import React from 'react'
 1 
import React from 'react';
2 
import { Pagination as MuiPagination, styled } from '@mui/material'
 2 
import { Pagination as MuiPagination, styled } from '@mui/material';
3 
 
 3 
 
4 
const StyledPagination = styled(MuiPagination)(({ theme }) => ({
 4 
const StyledPagination = styled(MuiPagination)(({ theme }) => ({
5 
  padding: theme.spacing(0, 1),
 5 
  padding: theme.spacing(0, 1),
6 
  '.MuiPagination-ul': {
 6 
  '.MuiPagination-ul': {
7 
    width: '100%',
 7 
    width: '100%',
8 
    display: 'flex',
 8 
    display: 'flex',
9 
    alignItems: 'center',
 9 
    alignItems: 'center',
10 
    justifyContent: 'space-around',
 10 
    justifyContent: 'space-around',
11 
    gap: theme.spacing(0.5)
 11 
    gap: theme.spacing(0.5)
12 
  },
 12 
  },
13 
  '.MuiPaginationItem-root': {
 13 
  '.MuiPaginationItem-root': {
14 
    borderRadius: '65%',
 14 
    borderRadius: '65%',
15 
    height: '30px',
 15 
    height: '30px',
16 
    width: '30px'
 16 
    width: '30px'
17 
  }
 17 
  }
18 
}))
 18 
}));
19 
 
 19 
 
20 
const Pagination = ({ pages = 1, page = 1, onChange = () => {} }) => {
 20 
const Pagination = ({ pages = 1, page = 1, onChange = () => {} }) => {
21 
  const currentPage = Number(page) || 1
 21 
  const currentPage = Number(page) || 1;
22 
 
 22 
 
23 
  const handleChange = (event, value) => onChange(value)
 23 
  const handleChange = (event, value) => onChange(value);
24 
 
 24 
 
25 
  if (pages <= 1) {
 25 
  if (pages <= 1) {
26 
    return null
 26 
    return null;
27 
  }
 27 
  }
28 
 
 28 
 
29 
  return (
 29 
  return (
30 
    <StyledPagination
 30 
    <StyledPagination
31 
      count={pages}
 31 
      count={pages}
32 
      page={currentPage}
 32 
      page={currentPage}
33 
      onChange={handleChange}
 33 
      onChange={handleChange}
34 
      variant='outlined'
 34 
      variant='outlined'
35 
      color='secondary'
 35 
      color='secondary'
36 
    />
 36 
    />
37 
  )
 37 
  );
38 
}
 38 
};
39 
 
 39 
 
40 
export default Pagination
 40 
export default Pagination;