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

.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,
+}