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> {
}
private toPage = (e: React.MouseEvent) => {
e.preventDefault();
const { loadData, paged } = this.props;
const page = +(e.currentTarget as HTMLElement).dataset.page;
......@@ -80,34 +81,39 @@ class Pagination extends React.Component<IPagination> {
private renderPagination = () => {
const { paged, t } = this.props;
const currentPageStyle = { fontWeight: 500, border: 0 };
return (
<div style={ { display: 'flex' } }>
<button style={ { border: 0 } } onClick={ this.toPage } data-page={ 0 } disabled={ paged.number === 0 }>
{ `<< ${t('pag.first')}`}
</button>
<button style={ { border: 0 } } onClick={ this.toPage } data-page={ paged.number - 1 } disabled={ paged.number === 0 }>
{ `< ${t('pag.prev')}`}
</button>
<nav aria-label="Page navigation">
<ul className="pagination">
<li className={`page-item ${paged.number === 0 ? "disabled" : ""}`}>
<a className="page-link" onClick={ this.toPage } data-page={ 0 } href="#" aria-label={t('pag.first')}>
<span aria-hidden="true">&laquo; {t('pag.first')}</span>
</a>
</li>
<li className={`page-item ${paged.number === 0 ? "disabled" : ""}`}>
<a onClick={ this.toPage } data-page={ paged.number - 1 } href="#" className="page-link">&lsaquo; {t('pag.prev')}</a>
</li>
{ this.getPageNumbers().map((page, i) => (
<button
key={ `page-${page}-${i}` }
style={ paged.number === page - 1 ? currentPageStyle : { border: 0 } }
disabled={ paged.number === page - 1 }
onClick={ this.toPage }
data-page={ page - 1 }
>
{ page }
</button>
<li key={ `page-${page}-${i}` } data-page={ page - 1 } onClick={ this.toPage } aria-current="page" className={`page-item ${paged.number === page - 1 ? "active" : ""}`}>
{paged.number === page - 1
? <span tabIndex={-1} className="page-link">{page} <span className="sr-only">(current)</span></span>
: <a className="page-link" href="#">
{page}
</a>
}
</li>
)) }
<button style={ { border: 0 } } onClick={ this.toPage } data-page={ paged.number + 1 } disabled={ paged.last }>
{ `${t('pag.next')} >`}
</button>
<button style={ { border: 0 } } onClick={ this.toPage } data-page={ paged.totalPages - 1 } disabled={ paged.last }>
{ `${t('pag.last')} >>`}
</button>
</div>
<li className={`page-item ${paged.last ? "disabled" : ""}`}>
<a onClick={ this.toPage } data-page={ paged.number + 1 } href="#" className="page-link">{t('pag.next')} &rsaquo;</a>
</li>
<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>
);
}
......
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