Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

| Ultima modificación | Ver Log |

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