Proyectos de Subversion LeadersLinked - Backend

import React, { useEffect } from "react";

import styled from "styled-components";

import { Pagination } from "react-bootstrap";

const StyledDefaultPagination = styled(Pagination)`

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: inherit !important;

  position: inherit !important;

  transform: inherit !important;

`;

const StyledRowPagination = styled(Pagination)`

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: initial !important;

  position: inherit !important;

  transform: inherit !important;

`;

const PaginationComponent = (props) => {

    const { pages = 1, currentActivePage = 1, onChangePage } = props;

    const currentPage = currentActivePage;

    const StyledPagination = props.isRow ? StyledRowPagination : StyledDefaultPagination

    // const pages = 10;

    const nextPages = [];

    const previousPages = [];

    const maxPages = 5 > pages ? pages : 5;

    useEffect(() => { }, [currentPage, pages]);

    const generateCurrentPages = () => {

        let isPreviousOrNext = false;

        let pagesCont = 1;

        let nextPage = currentPage + 1;

        let previousPage = currentPage - 1;

        do {

            if (isPreviousOrNext) {

                // nextPage

                if (nextPage <= pages) {

                    nextPages.push(nextPage);

                    nextPage++;

                    pagesCont++;

                }

                isPreviousOrNext = !isPreviousOrNext;

            } else {

                // previousPage

                if (previousPage > 0) {

                    previousPages.unshift(previousPage);

                    previousPage--;

                    pagesCont++;

                }

                isPreviousOrNext = !isPreviousOrNext;

            }

        } while (pagesCont < maxPages);

    };

    const previousPageHandler = () => {

        onChangePage(currentPage - 1);

    };

    const nextPageHandler = () => {

        onChangePage(currentPage + 1);

    };

    const onClickHandler = (pageToNavigate) => {

        onChangePage(pageToNavigate);

    };

    generateCurrentPages();

    return (

        <React.Fragment>

            {pages > 1 ? (

                <StyledPagination>

                    <Pagination.Prev

                        disabled={currentPage - 1 <= 0}

                        onClick={previousPageHandler}

                    />

                    {previousPages.map((previousPage) => (

                        <Pagination.Item

                            key={previousPage}

                            onClick={() => onClickHandler(previousPage)}

                        >

                            {previousPage}

                        </Pagination.Item>

                    ))}

                    <Pagination.Item active>{currentPage}</Pagination.Item>

                    {nextPages.map((nextPage) => (

                        <Pagination.Item

                            key={nextPage}

                            onClick={() => onClickHandler(nextPage)}

                        >

                            {nextPage}

                        </Pagination.Item>

                    ))}

                    <Pagination.Next

                        onClick={nextPageHandler}

                        disabled={currentPage + 1 > pages}

                    />

                </StyledPagination>

            ) : (

                ""

            )}

        </React.Fragment>

    );

};

export default PaginationComponent;