feat(pagination): added support to programmatically change active page

There are cases where users needs to programmatically change the active page number, eg. when
searching, the page should change to first page.

feat estevanmaito#42

.gitignore

@@ -4,4 +4,6 @@ dist
 dev
 style/output.css
 lib
-.env
+.env
+.DS_Store
+.idea

README.md

@@ -73,6 +73,7 @@ export default App
 - Fork
 - Clone
 - `npm install`
+- `npm rum predev`
 - `npm run storybook`
 
 It will start a local server at `localhost:6006` with all components rendered.

src/Pagination.tsx

@@ -76,7 +76,7 @@ export const PageButton: React.FC<PageButtonProps> = function PageButton({
 
 export const EmptyPageButton = () => <span className="px-2 py-1">...</span>
 
-interface PaginationProps {
+export interface PaginationProps {
   /**
    * The total number of results
    */
@@ -89,6 +89,10 @@ interface PaginationProps {
    * The accessible name of the pagination (what does it refer to?)
    */
   label: string
+  /**
+   * The current active page
+   */
+  activePage?: number
   /**
    * The function executed on page change
    */
@@ -98,9 +102,9 @@ interface PaginationProps {
 type Ref = HTMLDivElement
 
 const Pagination = React.forwardRef<Ref, PaginationProps>(function Pagination(props, ref) {
-  const { totalResults, resultsPerPage = 10, label, onChange, ...other } = props
+  const { totalResults, activePage: page = 1, resultsPerPage = 10, label, onChange, ...other } = props
   const [pages, setPages] = useState<(number | string)[]>([])
-  const [activePage, setActivePage] = useState(1)
+  const [activePage, setActivePage] = useState(page)
 
   const TOTAL_PAGES = Math.ceil(totalResults / resultsPerPage)
   const FIRST_PAGE = 1

src/__tests__/Pagination.test.tsx

@@ -298,4 +298,16 @@ describe('Pagination', () => {
     wrapper.update()
     expect(wrapper.find(PageButton).children().length).toBe(expectedAfterUpdate)
   })
+
+  it('should start with different active page', () => {
+    const onChange = () => {}
+    const expected = 'bg-purple-600'
+
+    const wrapper = mount(
+      <Pagination totalResults={30} resultsPerPage={5} activePage={3} label="Navigation" onChange={onChange} />
+    )
+
+    // Active page
+    expect(wrapper.find('button').at(3).getDOMNode().getAttribute('class')).toContain(expected)
+  })
 })

src/stories/Pagination.stories.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+
+import { Story, Meta } from '@storybook/react/types-6-0'
+
+import Pagination, { PaginationProps } from '../Pagination'
+
+export default {
+  title: 'Pagination',
+  component: Pagination,
+} as Meta
+
+const Template: Story<PaginationProps> = (args) => <Pagination {...args} />
+
+export const Current = Template.bind({})
+Current.args = {
+  totalResults: 120,
+  resultsPerPage: 10,
+  onChange: () => {},
+  label: "Table navigation",
+}
+
+// With programmatically adjusted active page
+export const ActivePage = Template.bind({})
+ActivePage.args = {
+  totalResults: 50,
+  resultsPerPage: 15,
+  onChange: () => {},
+  label: "Table navigation",
+  activePage: 3,
+}