Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 7458 | Rev 14164 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 7458 Rev 11938
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 = []
28 
    const previousPages = [];
 28 
	const previousPages = []
29 
    const maxPages = 5 > pages ? pages : 5;
 29 
	const maxPages = 5 > pages ? 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 
				}
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 = () => {
60 
        onChangePage(currentPage - 1);
 60 
		onChangePage(currentPage - 1)
61 
    };
 61 
	}
62 
    const nextPageHandler = () => {
 62 
	const nextPageHandler = () => {
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>
 72 
		<React.Fragment>
73 
            {pages > 1 ? (
 73 
			{pages > 1 ? (
74 
                <StyledPagination>
 74 
				<StyledPagination>
75 
                    <Pagination.Prev
 75 
					<Pagination.Prev
76 
                        disabled={currentPage - 1 <= 0}
 76 
						disabled={currentPage - 1 <= 0}
77 
                        onClick={previousPageHandler}
 77 
						onClick={previousPageHandler}
78 
                    />
 78 
					/>
79 
                    {previousPages.map((previousPage) => (
 79 
					{previousPages.map((previousPage) => (
80 
                        <Pagination.Item
 80 
						<Pagination.Item
81 
                            key={previousPage}
 81 
							key={previousPage}
82 
                            onClick={() => onClickHandler(previousPage)}
 82 
							onClick={() => onClickHandler(previousPage)}
83 
                        >
 83 
						>
84 
                            {previousPage}
 84 
							{previousPage}
85 
                        </Pagination.Item>
 85 
						</Pagination.Item>
86 
                    ))}
 86 
					))}
87 
                    <Pagination.Item active>{currentPage}</Pagination.Item>
 87 
					<Pagination.Item active>{currentPage}</Pagination.Item>
88 
                    {nextPages.map((nextPage) => (
 88 
					{nextPages.map((nextPage) => (
89 
                        <Pagination.Item
 89 
						<Pagination.Item
90 
                            key={nextPage}
 90 
							key={nextPage}
91 
                            onClick={() => onClickHandler(nextPage)}
 91 
							onClick={() => onClickHandler(nextPage)}
92 
                        >
 92 
						>
93 
                            {nextPage}
 93 
							{nextPage}
94 
                        </Pagination.Item>
 94 
						</Pagination.Item>
95 
                    ))}
 95 
					))}
96 
                    <Pagination.Next
 96 
					<Pagination.Next
97 
                        onClick={nextPageHandler}
 97 
						onClick={nextPageHandler}
98 
                        disabled={currentPage + 1 > pages}
 98 
						disabled={currentPage + 1 > pages}
99 
                    />
 99 
					/>
100 
                </StyledPagination>
 100 
				</StyledPagination>
101 
            ) : (
 101 
			) : (
102 
                ""
 102 
				''
103 
            )}
 103 
			)}
104 
        </React.Fragment>
 104 
		</React.Fragment>
Línea 105... Línea -...
105 
    );
 - 
 
106 
};
 105 
	)
- 
 
 106 
}
107 
 
 107