Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 1 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 1 Rev 5187
Línea 1... Línea 1...
1 
import React, { useEffect } from "react";
 1 
import React, { useEffect } from 'react'
2 
import styled from "styled-components";
 2 
import styled from 'styled-components'
3 
import { Pagination } from "react-bootstrap";
 3 
import { Pagination } from 'react-bootstrap'
Línea 4... Línea 4...
4 
 
 4 
 
5 
const StyledDefaultPagination = styled(Pagination)`
 5 
const StyledDefaultPagination = styled(Pagination)`
6 
  display: flex;
 6 
  display: flex;
7 
  justify-content: center;
 7 
  justify-content: center;
8 
  align-items: center;
 8 
  align-items: center;
9 
  flex-direction: inherit !important;
 9 
  flex-direction: inherit !important;
10 
  position: inherit !important;
 10 
  position: inherit !important;
11 
  transform: inherit !important;
 11 
  transform: inherit !important;
12 
`;
 12 
`
13 
const StyledRowPagination = styled(Pagination)`
 13 
const StyledRowPagination = styled(Pagination)`
14 
  display: flex;
 14 
  display: flex;
15 
  justify-content: center;
 15 
  justify-content: center;
16 
  align-items: center;
 16 
  align-items: center;
17 
  flex-direction: initial !important;
 17 
  flex-direction: initial !important;
18 
  position: inherit !important;
 18 
  position: inherit !important;
19 
  transform: inherit !important;
 19 
  transform: inherit !important;
Línea 20... Línea 20...
20 
`;
 20 
`
21 
 
 21 
 
22 
const PaginationComponent = (props) => {
 22 
const PaginationComponent = (props) => {
23 
  const { pages = 1, currentActivePage = 1, onChangePage } = props;
 23 
  const { pages = 1, currentActivePage = 1, onChangePage } = props
24 
  const currentPage = currentActivePage;
 24 
  const currentPage = currentActivePage
25 
  const StyledPagination = props.isRow ? StyledRowPagination : StyledDefaultPagination
 25 
  const StyledPagination = props.isRow ? StyledRowPagination : StyledDefaultPagination
26 
  // const pages = 10;
 26 
  // const pages = 10;
27 
  const nextPages = [];
 27 
  const nextPages = []
Línea 28... Línea 28...
28 
  const previousPages = [];
 28 
  const previousPages = []
Línea 29... Línea 29...
29 
  const maxPages = 5 > pages ? pages : 5;
 29 
  const maxPages = pages < 5 ? pages : 5
30 
 
 30 
 
31 
  useEffect(() => {}, [currentPage, pages]);
 31 
  useEffect(() => {}, [currentPage, pages])
32 
 
 32 
 
33 
  const generateCurrentPages = () => {
 33 
  const generateCurrentPages = () => {
34 
    let isPreviousOrNext = false;
 34 
    let isPreviousOrNext = false
35 
    let pagesCont = 1;
 35 
    let pagesCont = 1
36 
    let nextPage = currentPage + 1;
 36 
    let nextPage = currentPage + 1
37 
    let previousPage = currentPage - 1;
 37 
    let previousPage = currentPage - 1
38 
    do {
 38 
    do {
39 
      if (isPreviousOrNext) {
 39 
      if (isPreviousOrNext) {
40 
        // nextPage
 40 
        // nextPage
41 
        if (nextPage <= pages) {
 41 
        if (nextPage <= pages) {
42 
          nextPages.push(nextPage);
 42 
          nextPages.push(nextPage)
43 
          nextPage++;
 43 
          nextPage++
44 
          pagesCont++;
 44 
          pagesCont++
45 
        }
 45 
        }
46 
        isPreviousOrNext = !isPreviousOrNext;
 46 
        isPreviousOrNext = !isPreviousOrNext
47 
      } else {
 47 
      } else {
48 
        // previousPage
 48 
        // previousPage
49 
        if (previousPage > 0) {
 49 
        if (previousPage > 0) {
50 
          previousPages.unshift(previousPage);
 50 
          previousPages.unshift(previousPage)
51 
          previousPage--;
 51 
          previousPage--
52 
          pagesCont++;
 52 
          pagesCont++
53 
        }
 53 
        }
Línea 54... Línea 54...
54 
        isPreviousOrNext = !isPreviousOrNext;
 54 
        isPreviousOrNext = !isPreviousOrNext
55 
      }
 55 
      }
56 
    } while (pagesCont < maxPages);
 56 
    } while (pagesCont < maxPages)
57 
  };
 57 
  }
58 
 
 58 
 
59 
  const previousPageHandler = () => {
 59 
  const previousPageHandler = () => {
Línea 60... Línea 60...
60 
    onChangePage(currentPage - 1);
 60 
    onChangePage(currentPage - 1)
61 
  };
 61 
  }
62 
  const nextPageHandler = () => {
 62 
  const nextPageHandler = () => {
Línea 63... Línea 63...
63 
    onChangePage(currentPage + 1);
 63 
    onChangePage(currentPage + 1)
64 
  };
 64 
  }
65 
 
 65 
 
66 
  const onClickHandler = (pageToNavigate) => {
 66 
  const onClickHandler = (pageToNavigate) => {
- 
 
 67 
    onChangePage(pageToNavigate)
67 
    onChangePage(pageToNavigate);
 68 
  }
68 
  };
 69 
 
69 
 
 70 
  generateCurrentPages()
70 
  generateCurrentPages();
 71 
  return (
71 
  return (
 72 
    <React.Fragment>
Línea 96... Línea 97...
96 
          <Pagination.Next
 97 
          <Pagination.Next
97 
            onClick={nextPageHandler}
 98 
            onClick={nextPageHandler}
98 
            disabled={currentPage + 1 > pages}
 99 
            disabled={currentPage + 1 > pages}
99 
          />
 100 
          />
100 
        </StyledPagination>
 101 
        </StyledPagination>
101 
      ) : (
 102 
          )
102 
        ""
 103 
        : (
- 
 
 104 
            ''
103 
      )}
 105 
          )}
104 
    </React.Fragment>
 106 
    </React.Fragment>
105 
  );
 107 
  )
106 
};
 108 
}
Línea 107... Línea 109...
107 
 
 109