58 lines
2.3 KiB
JavaScript
58 lines
2.3 KiB
JavaScript
'use strict';
|
|
|
|
const { Component } = require('inferno');
|
|
|
|
module.exports = class extends Component {
|
|
render() {
|
|
const { current, total, baseUrl, path, urlFor, prevTitle, nextTitle } = this.props;
|
|
|
|
function getPageUrl(i) {
|
|
return urlFor(i === 1 ? baseUrl : baseUrl + path + '/' + i + '/');
|
|
}
|
|
|
|
function pagination(c, m) {
|
|
const current = c;
|
|
const last = m;
|
|
const delta = 1;
|
|
const left = current - delta;
|
|
const right = current + delta + 1;
|
|
const range = [];
|
|
const elements = [];
|
|
let l;
|
|
|
|
for (let i = 1; i <= last; i++) {
|
|
if (i === 1 || i === last || (i >= left && i < right)) {
|
|
range.push(i);
|
|
}
|
|
}
|
|
|
|
for (const i of range) {
|
|
if (l) {
|
|
if (i - l === 2) {
|
|
elements.push(<li><a className="pagination-link has-text-black-ter" href={getPageUrl(l + 1)}>{l + 1}</a></li>);
|
|
} else if (i - l !== 1) {
|
|
elements.push(<li><span className="pagination-ellipsis has-text-black-ter" dangerouslySetInnerHTML={{ __html: '…' }}></span></li>);
|
|
}
|
|
}
|
|
elements.push(<li><a className={`pagination-link${c === i ? ' is-current' : ' has-text-black-ter'}`} href={getPageUrl(i)}>{i}</a></li>);
|
|
l = i;
|
|
}
|
|
return elements;
|
|
}
|
|
|
|
return <div className="card card-transparent">
|
|
<nav className="pagination is-centered" role="navigation" aria-label="pagination">
|
|
<div className={`pagination-previous${current > 1 ? '' : ' is-invisible is-hidden-mobile'}`}>
|
|
<a className="is-flex-grow has-text-black-ter" href={getPageUrl(current - 1)}>{prevTitle}</a>
|
|
</div>
|
|
<div className={`pagination-next${current < total ? '' : ' is-invisible is-hidden-mobile'}`}>
|
|
<a className="is-flex-grow has-text-black-ter" href={getPageUrl(current + 1)}>{nextTitle}</a>
|
|
</div>
|
|
<ul className="pagination-list is-hidden-mobile">
|
|
{pagination(current, total)}
|
|
</ul>
|
|
</nav>
|
|
</div>;
|
|
}
|
|
};
|