Rev 15501 | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
import React from 'react'
import styled from 'styled-components'
import Pagination from 'react-bootstrap/Pagination'
const StyledPagination = styled(Pagination)`
display: inline-flex;
flex-direction: ${props => props.isRow ? 'row' : 'column'} !important;
`
const PaginationComponent = ({ pages = 1, currentActivePage = 1, onChangePage, isRow = true }) => {
const currentPage = currentActivePage
const nextPages = []
const previousPages = []
const maxPages = 5 > pages ? pages : 5
const generateCurrentPages = () => {
let isPreviousOrNext = false
let pagesCont = 1
let nextPage = currentPage + 1
let previousPage = currentPage - 1
do {
if (isPreviousOrNext) {
// nextPage
if (nextPage <= pages) {
nextPages.push(nextPage)
nextPage++
pagesCont++
}
isPreviousOrNext = !isPreviousOrNext
} else {
// previousPage
if (previousPage > 0) {
previousPages.unshift(previousPage)
previousPage--
pagesCont++
}
isPreviousOrNext = !isPreviousOrNext
}
} while (pagesCont < maxPages)
}
const previousPageHandler = () => {
onChangePage(currentPage - 1)
}
const nextPageHandler = () => {
onChangePage(currentPage + 1)
}
const onClickHandler = (pageToNavigate) => {
onChangePage(pageToNavigate)
}
generateCurrentPages()
if (pages <= 1) return null
return (
<StyledPagination isRow={isRow}>
<Pagination.Prev
disabled={currentPage - 1 <= 0}
onClick={previousPageHandler}
>
Anterior
</Pagination.Prev>
{previousPages.map((previousPage) =>
<Pagination.Item
key={previousPage}
onClick={() => onClickHandler(previousPage)}
>
{previousPage}
</Pagination.Item>
)}
<Pagination.Item active>{currentPage}</Pagination.Item>
{nextPages.map((nextPage) =>
<Pagination.Item
key={nextPage}
onClick={() => onClickHandler(nextPage)}
>
{nextPage}
</Pagination.Item>
)}
<Pagination.Next
disabled={currentPage + 1 > pages}
onClick={nextPageHandler}
>
Siguiente
</Pagination.Next>
</StyledPagination>
)
}
export default PaginationComponent