wba/frontend/src/js/widget/wb-pagination.js

import { h, Component } from 'preact';

class WBPagination extends Component {
  renderVisiblePages(numPages, activePage, chunkSize, onPageChanged) {
    let visible = {};

    let begActChnk = activePage - Math.floor(chunkSize / 2);
    let endActChnk = activePage + Math.floor(chunkSize / 2) + 1;
    for (let i = begActChnk; i < endActChnk; i++)
      visible[i] = true;

    for (let i = 0; i < chunkSize; i++)
      visible[i] = true;

    for (let i = Math.max(numPages - chunkSize, 0); i < numPages; i++)
      visible[i] = true;

    visible = Object.keys(visible).map(n => Number(n));

    let res = [];
    let prev = 0;

    res.push((
      <li class={ activePage === 0 ? "page-item disabled" : "page-item" }>
        <a class="page-link" href="#"
          onclick={ () => onPageChanged(activePage - 1) }>Previous</a>
      </li>
    ));

    for (let i in visible) {
      if (i > prev + 1)
        res.push((
          <li class="page-item">
            <a class="page-link" href="#"
              onclick={ () => onPageChanged(i - 1) }>...</a>
          </li>
        ));
      prev = i;

      res.push((
        <li class={ i === activePage ? "page-item active" : "page-item" }>
          <a class="page-link" href="#"
            onclick={ () => onPageChanged(i) }>{ i + 1 }</a>
        </li>
      ));
    }

    res.push((
      <li class={ activePage >= numPages - 1 ? "page-item disabled" : "page-item" }>
        <a class="page-link" href="#"
          onclick={ () => onPageChanged(activePage + 1) }>Next</a>
      </li>
    ));

    return res;
  }

  render({ numPages, activePage, chunkSize, onPageChanged }) {
    return (
      <nav aria-label="Pagination">
        <ul class="pagination">
          { this.renderVisiblePages(numPages, activePage, chunkSize, onPageChanged) }
        </ul>
      </nav>
    );
  }
}

WBPagination.defaultProps = {
  'chunkSize': 5
};

export default WBPagination;