feat(pagination): add currentPageText prop

estevanmaito · Nov 9, 2020 · 44b2ae5 · 44b2ae5
1 parent 1b53901
commit 44b2ae5
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 5 deletions.
diff --git a/src/Pagination.tsx b/src/Pagination.tsx
@@ -70,17 +70,35 @@ export const PageButton: React.FC<PageButtonProps> = function PageButton({
 
 export const EmptyPageButton = () => <span className="px-2 py-1">...</span>
 
+export interface CurrentPageTextParams {
+  pageStart: number,
+  pageEnd: number,
+  totalResults: number
+}
+
+const defaultCurrentPageText = ({ pageStart, pageEnd, totalResults }: CurrentPageTextParams): string => {
+  return [
+    'Showing ',
+    pageStart,
+    '-',
+    pageEnd,
+    ' of ',
+    totalResults
+  ].join('')
+}
+
 interface PaginationProps {
   totalResults: number
   resultsPerPage?: number
   label: string
+  currentPageText?: (params: CurrentPageTextParams) => string,
   onChange: (activePage: number) => void
 }
 
 type Ref = HTMLDivElement
 
 const Pagination = React.forwardRef<Ref, PaginationProps>(function Pagination(props, ref) {
-  const { totalResults, resultsPerPage = 10, label, onChange, ...other } = props
+  const { totalResults, resultsPerPage = 10, label, onChange, currentPageText = defaultCurrentPageText, ...other } = props
   const [pages, setPages] = useState<(number | string)[]>([])
   const [activePage, setActivePage] = useState(1)
 
@@ -150,9 +168,12 @@ const Pagination = React.forwardRef<Ref, PaginationProps>(function Pagination(pr
       {/*
        * This (label) should probably be an option, and not the default
        */}
-      <span className="flex items-center font-semibold tracking-wide uppercase">
-        Showing {activePage * resultsPerPage - resultsPerPage + 1}-
-        {Math.min(activePage * resultsPerPage, totalResults)} of {totalResults}
+      <span data-testid="current-page-text" className="flex items-center font-semibold tracking-wide uppercase">
+        {currentPageText({
+          pageStart: activePage * resultsPerPage - resultsPerPage + 1,
+          pageEnd: Math.min(activePage * resultsPerPage, totalResults),
+          totalResults,
+        })}
       </span>
 
       <div className="flex mt-2 sm:mt-auto sm:justify-end">

diff --git a/src/__tests__/Pagination.test.tsx b/src/__tests__/Pagination.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { mount } from 'enzyme'
-import Pagination, { PageButton, NavigationButton, EmptyPageButton } from '../Pagination'
+import Pagination, { PageButton, NavigationButton, EmptyPageButton, CurrentPageTextParams } from '../Pagination'
 
 describe('NavigationButton', () => {
   it('should render without crashing', () => {
@@ -298,4 +298,17 @@ describe('Pagination', () => {
     wrapper.update()
     expect(wrapper.find(PageButton).children().length).toBe(expectedAfterUpdate)
   })
+
+  it('should use currentPageText prop to transform helper text', () => {
+    const onChange = () => {}
+
+    const currentPageText = ({ pageStart, pageEnd, totalResults }: CurrentPageTextParams) =>
+      `Total results: ${totalResults}. Showing between ${pageStart} and ${pageEnd}.`
+
+    const wrapper = mount(
+      <Pagination totalResults={30} resultsPerPage={5} label="Navigation" onChange={onChange} currentPageText={currentPageText} />
+    )
+
+    expect(wrapper.find(Pagination).find('[data-testid="current-page-text"]').text()).toEqual('Total results: 30. Showing between 1 and 5.')
+  })
 })