Proyectos de Subversion LeadersLinked - Backend

Rev

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