Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 15500 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
14164 stevensc 1 
import React from 'react'
11938 stevensc 2 
import styled from 'styled-components'
15501 stevensc 3 
import Pagination from 'react-bootstrap/Pagination'
7458 stevensc 4 
 
15501 stevensc 5 
const StyledPagination = styled(Pagination)`
7458 stevensc 6 
  display: flex;
7 
  justify-content: center;
8 
  align-items: center;
15501 stevensc 9 
  flex-direction: ${props => props.isRow ? 'row' : 'column'} !important;
7458 stevensc 10 
  position: inherit !important;
11 
  transform: inherit !important;
15501 stevensc 12 
  top: inherit !important;
13 
  left: inherit !important;
11938 stevensc 14 
`
7458 stevensc 15 
 
14164 stevensc 16 
const PaginationComponent = ({ pages = 1, currentActivePage = 1, onChangePage, isRow = true }) => {
11938 stevensc 17 
	const currentPage = currentActivePage
18 
	const nextPages = []
19 
	const previousPages = []
20 
	const maxPages = 5 > pages ? pages : 5
7458 stevensc 21 
 
11938 stevensc 22 
	const generateCurrentPages = () => {
23 
		let isPreviousOrNext = false
24 
		let pagesCont = 1
25 
		let nextPage = currentPage + 1
26 
		let previousPage = currentPage - 1
27 
		do {
28 
			if (isPreviousOrNext) {
29 
				// nextPage
30 
				if (nextPage <= pages) {
31 
					nextPages.push(nextPage)
32 
					nextPage++
33 
					pagesCont++
34 
				}
35 
				isPreviousOrNext = !isPreviousOrNext
36 
			} else {
37 
				// previousPage
38 
				if (previousPage > 0) {
39 
					previousPages.unshift(previousPage)
40 
					previousPage--
41 
					pagesCont++
42 
				}
43 
				isPreviousOrNext = !isPreviousOrNext
44 
			}
45 
		} while (pagesCont < maxPages)
46 
	}
7458 stevensc 47 
 
11938 stevensc 48 
	const previousPageHandler = () => {
49 
		onChangePage(currentPage - 1)
50 
	}
51 
	const nextPageHandler = () => {
52 
		onChangePage(currentPage + 1)
53 
	}
7458 stevensc 54 
 
11938 stevensc 55 
	const onClickHandler = (pageToNavigate) => {
56 
		onChangePage(pageToNavigate)
57 
	}
7458 stevensc 58 
 
11938 stevensc 59 
	generateCurrentPages()
15500 stevensc 60 
 
61 
	if (pages <= 1) return null
62 
 
11938 stevensc 63 
	return (
15501 stevensc 64 
		<StyledPagination isRow={isRow}>
14164 stevensc 65 
			<Pagination.Prev
66 
				disabled={currentPage - 1 <= 0}
67 
				onClick={previousPageHandler}
15500 stevensc 68 
			>
69 
				Anterior
70 
			</Pagination.Prev>
14164 stevensc 71 
			{previousPages.map((previousPage) =>
72 
				<Pagination.Item
73 
					key={previousPage}
74 
					onClick={() => onClickHandler(previousPage)}
75 
				>
76 
					{previousPage}
77 
				</Pagination.Item>
11938 stevensc 78 
			)}
14164 stevensc 79 
			<Pagination.Item active>{currentPage}</Pagination.Item>
80 
			{nextPages.map((nextPage) =>
81 
				<Pagination.Item
82 
					key={nextPage}
83 
					onClick={() => onClickHandler(nextPage)}
84 
				>
85 
					{nextPage}
86 
				</Pagination.Item>
87 
			)}
88 
			<Pagination.Next
15500 stevensc 89 
				disabled={currentPage + 1 > pages}
14164 stevensc 90 
				onClick={nextPageHandler}
15500 stevensc 91 
			>
92 
				Siguiente
93 
			</Pagination.Next>
14164 stevensc 94 
		</StyledPagination>
11938 stevensc 95 
	)
96 
}
7458 stevensc 97 
 
11938 stevensc 98 
export default PaginationComponent