Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 1 | | Comparar con el anterior | Ultima modificación | Ver Log |

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