getPagerContent()

in src/pager/pager.tsx [231:313]

• 66 lines of code
• 18 McCabe index (conditional complexity)

  getPagerContent() {
    const {currentPage, visiblePagesLimit} = this.props;
    const totalPages = this.getTotalPages();
    const {translate} = this.context;

    if (totalPages < this.props.currentPage) {
      this.props.onPageChange?.(totalPages);
    }

    let start = 1;
    let end = totalPages;

    if (totalPages >= visiblePagesLimit) {
      const leftHalfFrameSize = Math.ceil(visiblePagesLimit / 2) - 1;
      const rightHalfFrameSize = visiblePagesLimit - leftHalfFrameSize - 1;

      start = currentPage - leftHalfFrameSize;
      end = currentPage + rightHalfFrameSize;

      if (start < 1) {
        const tail = 1 - start;
        start += tail;
        end += tail;
      }

      if (end > totalPages) {
        const tail = end - totalPages;
        start -= tail;
        end -= tail;
      }

      if (start < 1) {
        start += 1 - start;
      }
    }

    const buttons = [];
    for (let i = start; i <= end; i++) {
      buttons.push(this.getButton(i, i, i, i === currentPage));
    }

    const lastPageButtonAvailable =
      (!this.props.disableLastPageButton && end < totalPages && !this.props.openTotal) ||
      (this.props.openTotal && this.props.canLoadLastPageWithOpenTotal);

    return (
      <div>
        {this.getPagerLinks()}

        <div className={style.actions}>
          <ButtonToolbar>
            {start > 1 && this.getButton(1, this.props.translations?.firstPage ?? translate('firstPage'))}

            <ButtonGroup>
              {start > 1 && this.getButton(start - 1, '...')}

              {buttons}

              {end < totalPages && this.getButton(end + 1, '...')}

              {end === totalPages && this.props.openTotal && (
                <Button
                  href={this.generateHref(end + 1)}
                  disabled={this.props.loader}
                  {...this.getClickProps(this.handleLoadMore(end + 1))}
                >
                  {'...'}
                </Button>
              )}
            </ButtonGroup>

            {lastPageButtonAvailable &&
              this.getButton(
                this.props.openTotal ? -1 : totalPages,
                this.props.translations?.lastPage ?? translate('lastPage'),
              )}
          </ButtonToolbar>

          {this.getPageSizeSelector()}
        </div>
      </div>
    );
  }