Commit 76400a6b authored by Maksym Tishchenko's avatar Maksym Tishchenko
Browse files

Updated Pagination.tsx to be using bootstrap-style.

parent 7f9973fa
...@@ -25,6 +25,7 @@ class Pagination extends React.Component<IPagination> { ...@@ -25,6 +25,7 @@ class Pagination extends React.Component<IPagination> {
} }
private toPage = (e: React.MouseEvent) => { private toPage = (e: React.MouseEvent) => {
e.preventDefault();
const { loadData, paged } = this.props; const { loadData, paged } = this.props;
const page = +(e.currentTarget as HTMLElement).dataset.page; const page = +(e.currentTarget as HTMLElement).dataset.page;
...@@ -80,35 +81,40 @@ class Pagination extends React.Component<IPagination> { ...@@ -80,35 +81,40 @@ class Pagination extends React.Component<IPagination> {
private renderPagination = () => { private renderPagination = () => {
const { paged, t } = this.props; const { paged, t } = this.props;
const currentPageStyle = { fontWeight: 500, border: 0 };
return ( return (
<div style={ { display: 'flex' } }> <nav aria-label="Page navigation">
<button style={ { border: 0 } } onClick={ this.toPage } data-page={ 0 } disabled={ paged.number === 0 }> <ul className="pagination">
{ `<< ${t('pag.first')}`} <li className={`page-item ${paged.number === 0 ? "disabled" : ""}`}>
</button> <a className="page-link" onClick={ this.toPage } data-page={ 0 } href="#" aria-label={t('pag.first')}>
<button style={ { border: 0 } } onClick={ this.toPage } data-page={ paged.number - 1 } disabled={ paged.number === 0 }> <span aria-hidden="true">&laquo; {t('pag.first')}</span>
{ `< ${t('pag.prev')}`} </a>
</button> </li>
{ this.getPageNumbers().map((page, i) => ( <li className={`page-item ${paged.number === 0 ? "disabled" : ""}`}>
<button <a onClick={ this.toPage } data-page={ paged.number - 1 } href="#" className="page-link">&lsaquo; {t('pag.prev')}</a>
key={ `page-${page}-${i}` } </li>
style={ paged.number === page - 1 ? currentPageStyle : { border: 0 } } { this.getPageNumbers().map((page, i) => (
disabled={ paged.number === page - 1 } <li key={ `page-${page}-${i}` } data-page={ page - 1 } onClick={ this.toPage } aria-current="page" className={`page-item ${paged.number === page - 1 ? "active" : ""}`}>
onClick={ this.toPage } {paged.number === page - 1
data-page={ page - 1 } ? <span tabIndex={-1} className="page-link">{page} <span className="sr-only">(current)</span></span>
> : <a className="page-link" href="#">
{ page } {page}
</button> </a>
)) } }
<button style={ { border: 0 } } onClick={ this.toPage } data-page={ paged.number + 1 } disabled={ paged.last }> </li>
{ `${t('pag.next')} >`} )) }
</button>
<button style={ { border: 0 } } onClick={ this.toPage } data-page={ paged.totalPages - 1 } disabled={ paged.last }> <li className={`page-item ${paged.last ? "disabled" : ""}`}>
{ `${t('pag.last')} >>`} <a onClick={ this.toPage } data-page={ paged.number + 1 } href="#" className="page-link">{t('pag.next')} &rsaquo;</a>
</button> </li>
</div> <li className={`page-item ${paged.last ? "disabled" : ""}`}>
); <a className="page-link" onClick={ this.toPage } data-page={ paged.totalPages - 1 } href="#" aria-label="{t('pag.last')}">
<span aria-hidden="true">{t('pag.last')} &raquo;</span>
</a>
</li>
</ul>
</nav>
);
} }
public render() { public render() {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment