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

Paginacion mas bonita y aceptable a la vista

Browse Source
This commit is contained in:
Daniel Cortes
2020-06-04 22:07:16 -04:00
parent bfbf488f77
commit 94057269b5
2 changed files with 41 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/Paginate.jsx
View File

@@ -2,6 +2,7 @@ import React, {Component, Fragment} from 'react';
const LEFT_PAGE = 'LEFT';
const RIGHT_PAGE = 'RIGHT';
const SPACE = 'SPACE';
/**
* Helper method for creating a range of numbers
@@ -54,7 +55,7 @@ export default class Paginate extends Component {
handleClick(page) {
return (evt) => {
evt.preventDefault();
if(this.state.currentPage !== page) this.gotoPage(page);
if (this.state.currentPage !== page) this.gotoPage(page);
}
}
@@ -114,17 +115,17 @@ export default class Paginate extends Component {
// handle: (1) < {5 6} [7] {8 9} (10)
if (hasLeftSpill && !hasRightSpill) {
const extraPages = range(startPage - spillOffset, startPage - 1);
pages = [LEFT_PAGE, ...extraPages, ...pages];
pages = [LEFT_PAGE, 1, SPACE, ...extraPages, ...pages];
// handle: (1) {2 3} [4] {5 6} > (10)
} else if (!hasLeftSpill && hasRightSpill) {
const extraPages = range(endPage + 1, endPage + spillOffset);
pages = [...pages, ...extraPages, RIGHT_PAGE];
pages = [1, ...pages, ...extraPages, SPACE, totalPages, RIGHT_PAGE];
// handle: (1) < {4 5} [6] {7 8} > (10)
} else if (hasLeftSpill && hasRightSpill) {
pages = [LEFT_PAGE, ...pages, RIGHT_PAGE];
pages = [LEFT_PAGE, 1, SPACE, ...pages, SPACE, totalPages, RIGHT_PAGE];
}
return [1, ...pages, totalPages];
return pages;
}
@@ -143,20 +144,23 @@ export default class Paginate extends Component {
if (page === LEFT_PAGE) return (
<li key={page} className="page-item">
<a className="page-link" href={this.makePageLink(this.state.currentPage - 1)} onClick={this.handleMoveLeft}>
<span>&laquo;</span>
<span>Anterior</span>
</a>
</li>
);
if (page === RIGHT_PAGE) return (
<li key={page} className="page-item">
<a className="page-link" href={this.makePageLink(this.state.currentPage + 1)} onClick={this.handleMoveRight}>
<span>&raquo;</span>
<span>Siguiente</span>
</a>
</li>
);
if (page === SPACE) return (
<span className='spacing'>…</span>
);
return (
<li key={page} className={`page-item ${currentPage === page ? 'active' : ''}`}>
<a className="page-link" href={this.makePageLink(page)} onClick={this.handleClick(page)}>{page}</a>
<li key={page} className='page-item '>
<a className={`page-link ${currentPage === page ? 'active' : ''}`} href={this.makePageLink(page)} onClick={this.handleClick(page)}>{page}</a>
</li>
);
})