Proyectos de Subversion LeadersLinked - Backend

Rev

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

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