diff options
| author | Rafi Zadanly <zadanlyr@gmail.com> | 2023-02-22 11:03:34 +0700 |
|---|---|---|
| committer | Rafi Zadanly <zadanlyr@gmail.com> | 2023-02-22 11:03:34 +0700 |
| commit | f66b12fd1d0b83af0d7230d7b1565fbe00afbe3c (patch) | |
| tree | 253dcf854a3c92e09ca846e86a09e5b4c5d16be1 /src/core/components/elements/Pagination/Pagination.js | |
| parent | 3c559031623649a67825ff47f34512f0eb946861 (diff) | |
prettier
Diffstat (limited to 'src/core/components/elements/Pagination/Pagination.js')
| -rw-r--r-- | src/core/components/elements/Pagination/Pagination.js | 102 |
1 files changed, 59 insertions, 43 deletions
diff --git a/src/core/components/elements/Pagination/Pagination.js b/src/core/components/elements/Pagination/Pagination.js index 485295fe..c009171f 100644 --- a/src/core/components/elements/Pagination/Pagination.js +++ b/src/core/components/elements/Pagination/Pagination.js @@ -1,4 +1,4 @@ -import Link from "../Link/Link" +import Link from '../Link/Link' const Pagination = ({ pageCount, currentPage, url, className }) => { let firstPage = false @@ -6,54 +6,70 @@ const Pagination = ({ pageCount, currentPage, url, className }) => { let dotsPrevPage = false let dotsNextPage = false let urlParameterPrefix = url.includes('?') ? '&' : '?' - - return pageCount > 1 && ( - <div className={`pagination ${className}`}> - { Array.from(Array(pageCount)).map((v, i) => { - let page = i + 1 - let rangePrevPage = currentPage - 2 - let rangeNextPage = currentPage + 2 - let PageComponent = <Link key={i} href={`${url + urlParameterPrefix}page=${page}`} className={"pagination-item" + (page == currentPage ? " pagination-item--active " : "")}>{page}</Link> - let DotsComponent = <div key={i} className="pagination-dots">...</div> - if (pageCount == 7) { - return PageComponent - } + return ( + pageCount > 1 && ( + <div className={`pagination ${className}`}> + {Array.from(Array(pageCount)).map((v, i) => { + let page = i + 1 + let rangePrevPage = currentPage - 2 + let rangeNextPage = currentPage + 2 + let PageComponent = ( + <Link + key={i} + href={`${url + urlParameterPrefix}page=${page}`} + className={ + 'pagination-item' + (page == currentPage ? ' pagination-item--active ' : '') + } + > + {page} + </Link> + ) + let DotsComponent = ( + <div key={i} className='pagination-dots'> + ... + </div> + ) - if (currentPage == 1) rangeNextPage += 3 - if (currentPage == 2) rangeNextPage += 2 - if (currentPage == 3) rangeNextPage += 1 - if (currentPage == 4) rangePrevPage -= 1 - if (currentPage == pageCount) rangePrevPage -= 3 - if (currentPage == pageCount - 1) rangePrevPage -= 2 - if (currentPage == pageCount - 2) rangePrevPage -= 1 - if (currentPage == pageCount - 3) rangeNextPage += 1 + if (pageCount == 7) { + return PageComponent + } - if (page > rangePrevPage && page < rangeNextPage) { - return PageComponent - } + if (currentPage == 1) rangeNextPage += 3 + if (currentPage == 2) rangeNextPage += 2 + if (currentPage == 3) rangeNextPage += 1 + if (currentPage == 4) rangePrevPage -= 1 + if (currentPage == pageCount) rangePrevPage -= 3 + if (currentPage == pageCount - 1) rangePrevPage -= 2 + if (currentPage == pageCount - 2) rangePrevPage -= 1 + if (currentPage == pageCount - 3) rangeNextPage += 1 - if (page == 1 && rangePrevPage >= 1 && !firstPage) { - firstPage = true - return PageComponent - } + if (page > rangePrevPage && page < rangeNextPage) { + return PageComponent + } - if (page == pageCount && rangeNextPage <= pageCount && !lastPage) { - lastPage = true - return PageComponent - } + if (page == 1 && rangePrevPage >= 1 && !firstPage) { + firstPage = true + return PageComponent + } - if (page > currentPage && (pageCount - currentPage) > 1 && !dotsNextPage) { - dotsNextPage = true - return DotsComponent - } + if (page == pageCount && rangeNextPage <= pageCount && !lastPage) { + lastPage = true + return PageComponent + } - if (page < currentPage && (currentPage - 1) > 1 && !dotsPrevPage) { - dotsPrevPage = true - return DotsComponent - } - }) } - </div> + if (page > currentPage && pageCount - currentPage > 1 && !dotsNextPage) { + dotsNextPage = true + return DotsComponent + } + + if (page < currentPage && currentPage - 1 > 1 && !dotsPrevPage) { + dotsPrevPage = true + return DotsComponent + } + })} + </div> + ) ) } @@ -61,4 +77,4 @@ Pagination.defaultProps = { className: '' } -export default Pagination
\ No newline at end of file +export default Pagination |
