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 = currentActivePageconst nextPages = []const previousPages = []const maxPages = 5 > pages ? pages : 5const generateCurrentPages = () => {let isPreviousOrNext = falselet pagesCont = 1let nextPage = currentPage + 1let previousPage = currentPage - 1do {if (isPreviousOrNext) {// nextPageif (nextPage <= pages) {nextPages.push(nextPage)nextPage++pagesCont++}isPreviousOrNext = !isPreviousOrNext} else {// previousPageif (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 nullreturn (<StyledPagination isRow={isRow}><Pagination.Prevdisabled={currentPage - 1 <= 0}onClick={previousPageHandler}>Anterior</Pagination.Prev>{previousPages.map((previousPage) =><Pagination.Itemkey={previousPage}onClick={() => onClickHandler(previousPage)}>{previousPage}</Pagination.Item>)}<Pagination.Item active>{currentPage}</Pagination.Item>{nextPages.map((nextPage) =><Pagination.Itemkey={nextPage}onClick={() => onClickHandler(nextPage)}>{nextPage}</Pagination.Item>)}<Pagination.Nextdisabled={currentPage + 1 > pages}onClick={nextPageHandler}>Siguiente</Pagination.Next></StyledPagination>)}export default PaginationComponent