IF YOU WOULD LIKE TO GET AN ACCOUNT, please write an email to s dot adaszewski at gmail dot com. User accounts are meant only to report issues and/or generate pull requests. This is a purpose-specific Git hosting for ADARED projects. Thank you for your understanding!
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

wb-pagination.js 2.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. import { h, Component } from 'preact';
  2. class WBPagination extends Component {
  3. renderVisiblePages(numPages, activePage, chunkSize, onPageChanged, getPageUrl) {
  4. let visible = {};
  5. let begActChnk = activePage - Math.floor(chunkSize / 2);
  6. let endActChnk = activePage + Math.floor(chunkSize / 2) + 1;
  7. for (let i = Math.max(0, begActChnk); i < Math.min(numPages, endActChnk); i++)
  8. visible[i] = true;
  9. for (let i = 0; i < Math.min(numPages, chunkSize); i++)
  10. visible[i] = true;
  11. for (let i = Math.max(numPages - chunkSize, 0); i < numPages; i++)
  12. visible[i] = true;
  13. visible = Object.keys(visible).map(n => Number(n));
  14. visible.sort((a, b) => (a - b));
  15. let res = [];
  16. let prev = 0;
  17. res.push((
  18. <li class={ activePage === 0 ? "page-item disabled" : "page-item" }>
  19. <a class="page-link" href={ getPageUrl(activePage - 1) }
  20. onclick={ e => this.changePage(e, activePage - 1) }>Previous</a>
  21. </li>
  22. ));
  23. for (let idx = 0; idx < visible.length; idx++) {
  24. let i = visible[idx];
  25. let capturePrev = prev;
  26. if (i > prev + 1)
  27. res.push((
  28. <li class="page-item">
  29. <a class="page-link" href={ getPageUrl(Math.round((i + capturePrev) / 2)) }
  30. onclick={ e => this.changePage(e, Math.round((i + capturePrev) / 2)) }>...</a>
  31. </li>
  32. ));
  33. prev = i;
  34. res.push((
  35. <li class={ i === activePage ? "page-item active" : "page-item" }>
  36. <a class="page-link" href={ getPageUrl(i) }
  37. onclick={ e => this.changePage(e, i) }>{ i + 1 }</a>
  38. </li>
  39. ));
  40. }
  41. res.push((
  42. <li class={ activePage >= numPages - 1 ? "page-item disabled" : "page-item" }>
  43. <a class="page-link" href={ getPageUrl(activePage + 1) }
  44. onclick={ e => this.changePage(e, activePage + 1) }>Next</a>
  45. </li>
  46. ));
  47. return res;
  48. }
  49. changePage(e, pageIdx) {
  50. if (this.props.onPageChanged) {
  51. e.preventDefault();
  52. this.props.onPageChanged(pageIdx);
  53. }
  54. }
  55. render({ numPages, activePage, chunkSize, onPageChanged, getPageUrl }) {
  56. return (
  57. <nav aria-label="Pagination">
  58. <ul class="pagination">
  59. { this.renderVisiblePages(numPages, activePage, chunkSize, onPageChanged, getPageUrl) }
  60. </ul>
  61. </nav>
  62. );
  63. }
  64. }
  65. WBPagination.defaultProps = {
  66. 'chunkSize': 5,
  67. 'getPageUrl': () => ('#')
  68. };
  69. export default WBPagination;