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

36
src/styles/main.scss
View File

@@ -76,28 +76,42 @@ h1, h2, h3, h4 {
ul.pagination { ul.pagination {
display: flex; display: flex;
margin: 1rem auto; margin: 1rem auto;
justify-content: center;
.page-item { .page-item {
height: 2rem;
.page-link {
display: inline-block;
height: 100%;
border: 1px solid var(--gray-2); border: 1px solid var(--gray-2);
border-radius: 3px;
margin-right: .4rem;
padding: .5rem 1em;
color: var(--black);
text-decoration: none;
font-size: .75rem;
line-height: 1;
&.active { &.active {
background-color: var(--accent); background-color: var(--accent);
color: var(--white);
}
a { &:hover:not(.active) {
color: white; background-color: var(--gray-2);
border: 1px solid var(--gray-3);
}
&:focus {
outline: none;
} }
} }
} }
.page-link { .spacing {
color: var(--black); margin: auto 1rem;
text-decoration: none;
padding: 0 1rem;
@media (max-width: 767px) {
padding: 0 .4rem;
}
} }
} }