Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 11938 | 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'
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 }) => {
23 
 
11938 stevensc 24 
	const currentPage = currentActivePage
14164 stevensc 25 
	const StyledPagination = isRow ? StyledRowPagination : StyledDefaultPagination
11938 stevensc 26 
	// const pages = 10;
27 
	const nextPages = []
28 
	const previousPages = []
29 
	const maxPages = 5 > pages ? pages : 5
7458 stevensc 30 
 
11938 stevensc 31 
	const generateCurrentPages = () => {
32 
		let isPreviousOrNext = false
33 
		let pagesCont = 1
34 
		let nextPage = currentPage + 1
35 
		let previousPage = currentPage - 1
36 
		do {
37 
			if (isPreviousOrNext) {
38 
				// nextPage
39 
				if (nextPage <= pages) {
40 
					nextPages.push(nextPage)
41 
					nextPage++
42 
					pagesCont++
43 
				}
44 
				isPreviousOrNext = !isPreviousOrNext
45 
			} else {
46 
				// previousPage
47 
				if (previousPage > 0) {
48 
					previousPages.unshift(previousPage)
49 
					previousPage--
50 
					pagesCont++
51 
				}
52 
				isPreviousOrNext = !isPreviousOrNext
53 
			}
54 
		} while (pagesCont < maxPages)
55 
	}
7458 stevensc 56 
 
11938 stevensc 57 
	const previousPageHandler = () => {
58 
		onChangePage(currentPage - 1)
59 
	}
60 
	const nextPageHandler = () => {
61 
		onChangePage(currentPage + 1)
62 
	}
7458 stevensc 63 
 
11938 stevensc 64 
	const onClickHandler = (pageToNavigate) => {
65 
		onChangePage(pageToNavigate)
66 
	}
7458 stevensc 67 
 
11938 stevensc 68 
	generateCurrentPages()
69 
	return (
14164 stevensc 70 
		pages > 1
71 
		&&
72 
		<StyledPagination>
73 
			<Pagination.Prev
74 
				disabled={currentPage - 1 <= 0}
75 
				onClick={previousPageHandler}
76 
			/>
77 
			{previousPages.map((previousPage) =>
78 
				<Pagination.Item
79 
					key={previousPage}
80 
					onClick={() => onClickHandler(previousPage)}
81 
				>
82 
					{previousPage}
83 
				</Pagination.Item>
11938 stevensc 84 
			)}
14164 stevensc 85 
			<Pagination.Item active>{currentPage}</Pagination.Item>
86 
			{nextPages.map((nextPage) =>
87 
				<Pagination.Item
88 
					key={nextPage}
89 
					onClick={() => onClickHandler(nextPage)}
90 
				>
91 
					{nextPage}
92 
				</Pagination.Item>
93 
			)}
94 
			<Pagination.Next
95 
				onClick={nextPageHandler}
96 
				disabled={currentPage + 1 > pages}
97 
			/>
98 
		</StyledPagination>
11938 stevensc 99 
	)
100 
}
7458 stevensc 101 
 
11938 stevensc 102 
export default PaginationComponent