skrd/musiclist-client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Mejorado paginate visualmente, es mas bonito y espaciado

Browse Source 
Me copie levemente de lastfm
This commit is contained in:
Daniel Cortes
2020-06-05 22:28:54 -04:00
parent 86d999f004
commit 6d84f1e223
2 changed files with 51 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/Paginate.jsx
View File

@@ -27,6 +27,8 @@ export const Paginate = (props) => {
const pageNeighbours = typeof props.pageNeighbours === 'number' ? Math.max(0, Math.min(props.pageNeighbours, 2)) : 0;
const totalPages = Math.ceil(totalRecords / pageLimit);
const [currentPage, setCurrentPage] = useState(typeof props.currentPage === 'number' ? props.currentPage : 1);
let hasLeft = false;
let hasRight = false;
const gotoPage = (page) => {
const currentPage = Math.max(0, Math.min(page, totalPages));
@@ -88,14 +90,18 @@ export const Paginate = (props) => {
// handle: (1) < {5 6} [7] {8 9} (10)
if (hasLeftSpill && !hasRightSpill) {
const extraPages = range(startPage - spillOffset, startPage - 1);
pages = [LEFT_PAGE, 1, SPACE_A, ...extraPages, ...pages];
hasLeft = true;
pages = [1, SPACE_A, ...extraPages, ...pages];
// handle: (1) {2 3} [4] {5 6} > (10)
} else if (!hasLeftSpill && hasRightSpill) {
const extraPages = range(endPage + 1, endPage + spillOffset);
pages = [1, ...pages, ...extraPages, SPACE_B, totalPages, RIGHT_PAGE];
hasRight = true;
pages = [1, ...pages, ...extraPages, SPACE_B, totalPages];
// handle: (1) < {4 5} [6] {7 8} > (10)
} else if (hasLeftSpill && hasRightSpill) {
pages = [LEFT_PAGE, 1, SPACE_A, ...pages, SPACE_B, totalPages, RIGHT_PAGE];
hasLeft = true;
hasRight = true;
pages = [1, SPACE_A, ...pages, SPACE_B, totalPages];
}
return pages;
@@ -110,24 +116,9 @@ export const Paginate = (props) => {
const pages = fetchPageNumbers();
const blocks = pages.map((page, index) => {
if (page === LEFT_PAGE) return (
<li key={page} className="page-item">
<a className="page-link" href={makePageLink(currentPage - 1)} onClick={handleMoveLeft}>
<span>Anterior</span>
</a>
</li>
);
if (page === RIGHT_PAGE) return (
<li key={page} className="page-item">
<a className="page-link" href={makePageLink(currentPage + 1)} onClick={handleMoveRight}>
<span>Siguiente</span>
</a>
</li>
);
if (page === SPACE_A || page === SPACE_B) return (
<span key={page} className='spacing'>…</span>
);
return (
<li key={page} className='page-item '>
<a className={`page-link ${currentPage === page ? 'active' : ''}`} href={makePageLink(page)} onClick={handleClick(page)}>{page}</a>
@@ -138,7 +129,27 @@ export const Paginate = (props) => {
return (
<Fragment>
<ul className="pagination">
{blocks}
{ hasLeft ?
<li key='left' className="page-item left">
<a className="page-link" href={makePageLink(currentPage - 1)} onClick={handleMoveLeft}>
<span>Anterior</span>
</a>
</li>
:
<li key='left' className="page-item left"/>
}
<ul key='center' className='page-center'>
{blocks}
</ul>
{hasRight ?
<li key='right' className="page-item right">
<a className="page-link" href={makePageLink(currentPage + 1)} onClick={handleMoveRight}>
<span>Siguiente</span>
</a>
</li>
:
<li key='right' className="page-item right"/>
}
</ul>
</Fragment>
);