Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Ir a la última revisión | | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 www 1 
import React, { useEffect } from "react";
2 
import styled from "styled-components";
3 
import { Pagination } from "react-bootstrap";
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 = (props) => {
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;
30 
 
31 
  useEffect(() => {}, [currentPage, pages]);
32 
 
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 
  };
58 
 
59 
  const previousPageHandler = () => {
60 
    onChangePage(currentPage - 1);
61 
  };
62 
  const nextPageHandler = () => {
63 
    onChangePage(currentPage + 1);
64 
  };
65 
 
66 
  const onClickHandler = (pageToNavigate) => {
67 
    onChangePage(pageToNavigate);
68 
  };
69 
 
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 
};
107 
 
108 
export default PaginationComponent;