diff --git a/packages/ui-pagination/src/Pagination/index.tsx b/packages/ui-pagination/src/Pagination/index.tsx index a845e10ea9..607c8e5be2 100644 --- a/packages/ui-pagination/src/Pagination/index.tsx +++ b/packages/ui-pagination/src/Pagination/index.tsx @@ -22,7 +22,7 @@ * SOFTWARE. */ /** @jsx jsx */ -import React, { Component } from 'react' +import React, { Component, ReactElement, ReactNode } from 'react' import { View } from '@instructure/ui-view' import { testable } from '@instructure/ui-testable' @@ -104,7 +104,7 @@ class Pagination extends Component { currentPage: 1, siblingCount: 1, boundaryCount: 1, - ellipsis:
  • ...
  • , + ellipsis: '...', renderPageIndicator: (page: number) => page } @@ -317,7 +317,7 @@ class Pagination extends Component { renderPagesInInterval = (from: number, to: number, currentPage: number) => { if (to - from > 1000) throw new Error('Pagination: too many pages (more than 1000)') - const pages = [] + const pages: ReactElement[] = [] for (let i = from; i <= to; i++) { pages.push( { boundaryCount, variant } = this.props - const pages: any = [] + const pages: ReactNode[] = [] if ( totalPageNumber! <= 2 * boundaryCount! || totalPageNumber! <= 1 + siblingCount! + boundaryCount! || variant === 'full' ) { - return this.renderPagesInInterval(1, totalPageNumber!, currentPage!) + return ( +
      + {this.renderPagesInInterval(1, totalPageNumber!, currentPage!)} +
    + ) } if (currentPage! > boundaryCount! + siblingCount! + 1) { pages.push(this.renderPagesInInterval(1, boundaryCount!, currentPage!)) - pages.push(ellipsis) + pages.push( +
  • + {ellipsis} +
  • + ) if ( currentPage! - siblingCount! > totalPageNumber! - boundaryCount! + 1 @@ -365,7 +373,7 @@ class Pagination extends Component { currentPage! ) ) - return pages + return
      {pages}
    } pages.push( this.renderPagesInInterval( @@ -392,7 +400,11 @@ class Pagination extends Component { currentPage! ) ) - pages.push(ellipsis) + pages.push( +
  • + {ellipsis} +
  • + ) pages.push( this.renderPagesInInterval( totalPageNumber! - boundaryCount! + 1, @@ -409,7 +421,7 @@ class Pagination extends Component { ) ) } - return (
      {pages}
    ) + return
      {pages}
    } renderPages(currentPageIndex: number) { @@ -434,22 +446,22 @@ class Pagination extends Component { if (sliceStart - firstIndex > 1) visiblePages.unshift( - + ) if (sliceStart - firstIndex > 0) visiblePages.unshift(firstPage) if (lastIndex - sliceEnd + 1 > 1) visiblePages.push( - + ) if (lastIndex - sliceEnd + 1 > 0) visiblePages.push(lastPage) } return ( - + {this.transferDisabledPropToChildren(visiblePages)} )