@instructure/ui-pagination 8.51.0 → 8.51.1-snapshot-5

package/src/Pagination/__new-tests__/Pagination.test.tsx

@@ -0,0 +1,210 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import { Pagination } from '../index'
+
+describe('<Pagination />', () => {
+  describe('with minimal config', () => {
+    it('should render the correct pages - 1', () => {
+      const { container } = render(
+        <Pagination
+          variant="compact"
+          labelNext="Next Page"
+          labelPrev="Previous Page"
+          totalPageNumber={9}
+        />
+      )
+      expect(container.firstChild).toHaveTextContent('12...9Next Page')
+    })
+    it('should render the correct pages - 2', () => {
+      const { container } = render(
+        <Pagination
+          variant="compact"
+          labelNext="Next Page"
+          labelPrev="Previous Page"
+          totalPageNumber={9}
+          currentPage={5}
+        />
+      )
+      expect(container.firstChild).toHaveTextContent(
+        'Previous Page1...456...9Next Page'
+      )
+    })
+    it('should render the correct pages - 3', () => {
+      const { container } = render(
+        <Pagination
+          variant="compact"
+          labelNext="Next Page"
+          labelPrev="Previous Page"
+          totalPageNumber={9}
+          currentPage={5}
+          siblingCount={1}
+          boundaryCount={3}
+        />
+      )
+      expect(container.firstChild).toHaveTextContent(
+        'Previous Page123456789Next Page'
+      )
+    })
+    it('should render the correct pages - 4', () => {
+      const { container } = render(
+        <Pagination
+          variant="compact"
+          labelNext="Next Page"
+          labelPrev="Previous Page"
+          totalPageNumber={9}
+          currentPage={5}
+          siblingCount={1}
+          boundaryCount={2}
+        />
+      )
+      expect(container.firstChild).toHaveTextContent(
+        'Previous Page12...456...89Next Page'
+      )
+    })
+    it('should render the correct pages - 5', () => {
+      const { container } = render(
+        <Pagination
+          variant="compact"
+          labelNext="Next Page"
+          labelPrev="Previous Page"
+          totalPageNumber={9}
+          currentPage={5}
+          siblingCount={100}
+        />
+      )
+      expect(container.firstChild).toHaveTextContent(
+        'Previous Page123456789Next Page'
+      )
+    })
+    it('should render the correct pages - 6', () => {
+      const { container } = render(
+        <Pagination
+          variant="compact"
+          labelNext="Next Page"
+          labelPrev="Previous Page"
+          totalPageNumber={9}
+          currentPage={5}
+          boundaryCount={100}
+        />
+      )
+      expect(container.firstChild).toHaveTextContent(
+        'Previous Page123456789Next Page'
+      )
+    })
+    it('should render the correct pages - 7', () => {
+      const { container } = render(
+        <Pagination
+          variant="compact"
+          labelNext="Next Page"
+          labelPrev="Previous Page"
+          totalPageNumber={9}
+          currentPage={1}
+          boundaryCount={3}
+          siblingCount={1}
+        />
+      )
+      expect(container.firstChild).toHaveTextContent('123...789Next Page')
+    })
+    it('should render the correct ellipsis', () => {
+      const { container } = render(
+        <Pagination
+          variant="compact"
+          labelNext="Next Page"
+          labelPrev="Previous Page"
+          totalPageNumber={9}
+          currentPage={1}
+          boundaryCount={3}
+          siblingCount={1}
+          ellipsis="<->"
+        />
+      )
+      expect(container.firstChild).toHaveTextContent('123<->789Next Page')
+    })
+    it('should render custom buttons', () => {
+      const pageMap = ['A-G', 'H-J', 'K-M', 'N-Q', 'R-Z']
+      const { container } = render(
+        <Pagination
+          variant="full"
+          labelNext="Next Page"
+          labelPrev="Previous Page"
+          totalPageNumber={5}
+          currentPage={1}
+          renderPageIndicator={(page) => pageMap[page - 1]}
+        />
+      )
+      expect(container.firstChild).toHaveTextContent('A-GH-JK-MN-QR-Z')
+    })
+    it('should render huge "totalPageNumber"s properly', () => {
+      const { container } = render(
+        <Pagination
+          variant="compact"
+          labelNext="Next Page"
+          labelPrev="Previous Page"
+          totalPageNumber={1000000000000000}
+          currentPage={5678}
+        />
+      )
+      expect(container.firstChild).toHaveTextContent(
+        'Previous Page1...567756785679...1000000000000000Next Page'
+      )
+    })
+    it('should render first and last buttons', () => {
+      const { container } = render(
+        <Pagination
+          variant="compact"
+          labelNext="Next Page"
+          labelPrev="Previous Page"
+          labelFirst="First Page"
+          labelLast="Last Page"
+          totalPageNumber={100}
+          currentPage={5}
+          withFirstAndLastButton
+        />
+      )
+      expect(container.firstChild).toHaveTextContent(
+        'First PagePrevious Page1...456...100Next PageLast Page'
+      )
+    })
+    it('should render every page if boundary and sibling counts are big enough', () => {
+      const { container } = render(
+        <Pagination
+          variant="compact"
+          labelNext="Next Page"
+          labelPrev="Previous Page"
+          totalPageNumber={10}
+          currentPage={1}
+          siblingCount={5}
+          boundaryCount={4}
+        />
+      )
+      expect(container.firstChild).toHaveTextContent('12345678910Next Page')
+    })
+  })
+})

package/src/Pagination/index.tsx

@@ -62,7 +62,9 @@ const childrenArray = (props: PaginationProps) => {
 }
 
 function propsHaveCompactView(props: PaginationProps) {
-  return props.variant === 'compact' && childrenArray(props).length > 5
+  if (props.children)
+    return props.variant === 'compact' && childrenArray(props).length > 5
+  return props.variant === 'compact' && props.totalPageNumber! > 5
 }
 
 type ArrowConfig = {
@@ -96,7 +98,13 @@ class Pagination extends Component<PaginationProps> {
       currentPage: number,
       numberOfPages: number
     ) => `Select page (${currentPage} of ${numberOfPages})`,
-    shouldHandleFocus: true
+    shouldHandleFocus: true,
+    totalPageNumber: 0,
+    currentPage: 1,
+    siblingCount: 1,
+    boundaryCount: 1,
+    ellipsis: '...',
+    renderPageIndicator: (page: number) => page
   }
 
   static Page = PaginationButton
@@ -110,6 +118,7 @@ class Pagination extends Component<PaginationProps> {
   private _lastButton: HTMLButtonElement | null = null
 
   ref: Element | null = null
+  currentPageRef: PaginationButton | null = null
 
   constructor(props: PaginationProps) {
     super(props)
@@ -167,6 +176,18 @@ class Pagination extends Component<PaginationProps> {
   ) {
     this.props.makeStyles?.()
 
+    // set focus on the currently active page
+    if (
+      this.props.currentPage !== prevProps.currentPage &&
+      document.activeElement !== this._firstButton &&
+      document.activeElement !== this._prevButton &&
+      document.activeElement !== this._nextButton &&
+      document.activeElement !== this._lastButton
+    ) {
+      // @ts-expect-error fix typing
+      this.currentPageRef?.ref?.focus?.()
+    }
+
     if (
       !this.props.shouldHandleFocus ||
       (!propsHaveCompactView(prevProps) && !propsHaveCompactView(this.props))
@@ -243,7 +264,25 @@ class Pagination extends Component<PaginationProps> {
     )
   }
 
+  renderDefaultPageInput = () => {
+    const { currentPage, totalPageNumber } = this.props
+    return (
+      <PaginationPageInput
+        numberOfPages={totalPageNumber!}
+        currentPageIndex={currentPage! - 1}
+        onChange={(_e, nextPageIndex) =>
+          this.props.onPageChange?.(nextPageIndex + 1, currentPage!)
+        }
+        screenReaderLabel={this.props.screenReaderLabelNumberInput!}
+        label={this.props.labelNumberInput}
+        disabled={this.props.disabled}
+        inputRef={this.handleInputRef}
+      />
+    )
+  }
+
   renderPageInput(currentPageIndex: number) {
+    if (!this.props.children) return this.renderDefaultPageInput()
     return (
       <PaginationPageInput
         numberOfPages={this.childPages.length}
@@ -267,7 +306,113 @@ class Pagination extends Component<PaginationProps> {
     this.childPages[pageIndex].props.onClick?.(event)
   }
 
+  handleNavigation = (nextIndex: number, previousIndex: number) => {
+    const { onPageChange } = this.props
+    if (typeof onPageChange === 'function') {
+      onPageChange(nextIndex, previousIndex)
+    }
+  }
+
+  renderPagesInInterval = (from: number, to: number, currentPage: number) => {
+    if (to - from > 1000)
+      throw new Error('Pagination: too many pages (more than 1000)')
+    const pages = []
+    for (let i = from; i <= to; i++) {
+      pages.push(
+        <Pagination.Page
+          ref={(e) => (i === currentPage ? (this.currentPageRef = e) : null)}
+          key={i}
+          onClick={() => this.handleNavigation(i, currentPage)}
+          current={i === currentPage}
+        >
+          {this.props.renderPageIndicator?.(i, currentPage)}
+        </Pagination.Page>
+      )
+    }
+    return pages
+  }
+
+  renderDefaultPages = () => {
+    const {
+      ellipsis,
+      currentPage,
+      totalPageNumber,
+      siblingCount,
+      boundaryCount,
+      variant
+    } = this.props
+    const pages: any = []
+    if (
+      totalPageNumber! <= 2 * boundaryCount! ||
+      totalPageNumber! <= 1 + siblingCount! + boundaryCount! ||
+      variant === 'full'
+    ) {
+      return this.renderPagesInInterval(1, totalPageNumber!, currentPage!)
+    }
+
+    if (currentPage! > boundaryCount! + siblingCount! + 1) {
+      pages.push(this.renderPagesInInterval(1, boundaryCount!, currentPage!))
+      pages.push(ellipsis)
+      if (
+        currentPage! - siblingCount! >
+        totalPageNumber! - boundaryCount! + 1
+      ) {
+        pages.push(
+          this.renderPagesInInterval(
+            totalPageNumber! - boundaryCount! + 1,
+            totalPageNumber!,
+            currentPage!
+          )
+        )
+        return pages
+      }
+      pages.push(
+        this.renderPagesInInterval(
+          currentPage! - siblingCount!,
+          currentPage!,
+          currentPage!
+        )
+      )
+    } else {
+      pages.push(
+        this.renderPagesInInterval(
+          1,
+          Math.max(currentPage!, boundaryCount!),
+          currentPage!
+        )
+      )
+    }
+
+    if (currentPage! < totalPageNumber! - (siblingCount! + boundaryCount!)) {
+      pages.push(
+        this.renderPagesInInterval(
+          Math.max(currentPage!, boundaryCount!) + 1,
+          currentPage! + siblingCount!,
+          currentPage!
+        )
+      )
+      pages.push(ellipsis)
+      pages.push(
+        this.renderPagesInInterval(
+          totalPageNumber! - boundaryCount! + 1,
+          totalPageNumber!,
+          currentPage!
+        )
+      )
+    } else {
+      pages.push(
+        this.renderPagesInInterval(
+          currentPage! + 1,
+          totalPageNumber!,
+          currentPage!
+        )
+      )
+    }
+    return pages
+  }
+
   renderPages(currentPageIndex: number) {
+    if (!this.props.children) return this.renderDefaultPages()
     const allPages = this.childPages
     let visiblePages = allPages
 
@@ -354,12 +499,61 @@ class Pagination extends Component<PaginationProps> {
     }
   }
 
+  renderDefaultArrowButton = (direction: PaginationArrowDirections) => {
+    if (
+      !this.withFirstAndLastButton &&
+      (direction === 'first' || direction === 'last')
+    ) {
+      return null
+    }
+    // We don't display the arrows in "compact" variant under 6 items
+    if (!(propsHaveCompactView(this.props) || this.inputMode)) {
+      return null
+    }
+    const { totalPageNumber, currentPage } = this.props
+    const { label, shouldEnableIcon, handleButtonRef } = this.getArrowVariant(
+      direction,
+      currentPage! - 1,
+      totalPageNumber!
+    )
+
+    const disabled = this.props.disabled || !shouldEnableIcon
+    const onClick = () => {
+      if (direction === 'first') {
+        this.handleNavigation(1, currentPage!)
+      }
+      if (direction === 'prev') {
+        this.handleNavigation(Math.max(currentPage! - 1, 1), currentPage!)
+      }
+      if (direction === 'next') {
+        this.handleNavigation(
+          Math.min(currentPage! + 1, totalPageNumber!),
+          currentPage!
+        )
+      }
+      if (direction === 'last') {
+        this.handleNavigation(totalPageNumber!, currentPage!)
+      }
+    }
+
+    return shouldEnableIcon || this.showDisabledButtons ? (
+      <PaginationArrowButton
+        direction={direction}
+        data-direction={direction}
+        label={label}
+        onClick={onClick}
+        disabled={disabled}
+        buttonRef={handleButtonRef}
+      />
+    ) : null
+  }
+
   renderArrowButton(
     direction: PaginationArrowDirections,
     currentPageIndex: number
   ) {
+    if (!this.props.children) return this.renderDefaultArrowButton(direction)
     const { childPages } = this
-
     // We don't display the arrows in "compact" variant under 6 items
     if (!(propsHaveCompactView(this.props) || this.inputMode)) {
       return null
@@ -394,8 +588,6 @@ class Pagination extends Component<PaginationProps> {
   }
 
   render() {
-    if (!this.props.children) return null
-
     const currentPageIndex = fastFindIndex(
       this.childPages,
       (p) => p && p.props && p.props.current

package/src/Pagination/props.ts

@@ -146,6 +146,46 @@ type PaginationOwnProps = {
    * Set this property to `false` to prevent this behavior.
    */
   shouldHandleFocus?: boolean
+
+  /**
+   * The total number of pages
+   */
+  totalPageNumber?: number
+
+  /**
+   * The current page number
+   */
+  currentPage?: number
+
+  /**
+   * The number of pages to display before and after the current page
+   */
+  siblingCount?: number
+
+  /**
+   * The number of always visible pages at the beginning and end
+   * of the pagination component
+   * */
+  boundaryCount?: number
+
+  /**
+   * Called when page number is changed
+   */
+  onPageChange?: (next: number, prev: number) => void
+
+  /**
+   * Renders the visible pages
+   */
+  renderPageIndicator?: (
+    pageIndex: number,
+    currentPage: number
+  ) => React.ReactNode
+
+  /**
+   * The ellipsis
+   * (e.g. "...")
+   */
+  ellipsis?: React.ReactNode
 }
 
 type PropKeys = keyof PaginationOwnProps
@@ -154,7 +194,8 @@ type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type PaginationProps = PaginationOwnProps &
   WithStyleProps<null, PaginationStyle> &
-  OtherHTMLAttributes<PaginationOwnProps> & WithDeterministicIdProps
+  OtherHTMLAttributes<PaginationOwnProps> &
+  WithDeterministicIdProps
 
 type PaginationStyle = ComponentStyle<'pagination' | 'pages'>
 
@@ -175,7 +216,14 @@ const propTypes: PropValidators<PropKeys> = {
   as: PropTypes.elementType,
   elementRef: PropTypes.func,
   inputRef: PropTypes.func,
-  shouldHandleFocus: PropTypes.bool
+  shouldHandleFocus: PropTypes.bool,
+  totalPageNumber: PropTypes.number,
+  currentPage: PropTypes.number,
+  siblingCount: PropTypes.number,
+  boundaryCount: PropTypes.number,
+  onPageChange: PropTypes.func,
+  renderPageIndicator: PropTypes.func,
+  ellipsis: PropTypes.node
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -195,7 +243,14 @@ const allowedProps: AllowedPropKeys = [
   'as',
   'elementRef',
   'inputRef',
-  'shouldHandleFocus'
+  'shouldHandleFocus',
+  'totalPageNumber',
+  'currentPage',
+  'onPageChange',
+  'siblingCount',
+  'boundaryCount',
+  'renderPageIndicator',
+  'ellipsis'
 ]
 
 type PaginationSnapshot = {