feat(Pagination): Avoir une valeur props pour la page courante.

packages/react/.eslintrc.js

@@ -7,6 +7,7 @@ module.exports = {
         'import/no-extraneous-dependencies': ['error',
             { devDependencies: ['src/**/*.test.{ts,tsx}', 'src/test-utils/**/*', 'test/**/*'] },
         ],
+        'linebreak-style': 'off',
     },
     settings: {
         'import/resolver': {

packages/react/src/components/pagination/pagination.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useState, VoidFunctionComponent } from 'react';
+import React, { ReactElement, useState, VoidFunctionComponent, useEffect } from 'react';
 import styled from 'styled-components';
 import { useTranslation } from '../../i18n/use-translation';
 import { focus } from '../../utils/css-state';
@@ -107,6 +107,11 @@ interface PaginationProps {
      * Function callback when page is changed
      */
     onPageChange?(pageNumber: number): void;
+
+    /**
+     * The current active page of the pagination
+     */
+    activePage?: number;
 }
 
 export function Pagination({
@@ -116,16 +121,23 @@ export function Pagination({
     defaultActivePage = 1,
     pagesShown = 3,
     onPageChange = () => undefined,
+    activePage,
 }: PaginationProps): ReactElement {
     const { t } = useTranslation('pagination');
     const { isMobile } = useDeviceContext();
     const pagesDisplayed = Math.min(pagesShown, totalPages);
-    const [currentPage, setCurrentPage] = useState(clamp(defaultActivePage, 1, totalPages));
+    const [currentPage, setCurrentPage] = useState(clamp(activePage || defaultActivePage, 1, totalPages));
     const canNavigatePrevious = currentPage > 1;
     const canNavigateNext = currentPage < totalPages;
     const firstLastNavActive = totalPages > 5;
     const forwardBackwardNavActive = totalPages > 3 || pagesDisplayed < totalPages;
 
+    useEffect(() => {
+        if (activePage && currentPage !== activePage) {
+            setCurrentPage(activePage);
+        }
+    }, [activePage, currentPage]);
+
     function changePage(page: number): void {
         setCurrentPage(page);
         onPageChange(page);

packages/storybook/.eslintrc.js

@@ -12,6 +12,9 @@ module.exports = {
             },
         },
     ],
+    rules: {
+      'linebreak-style': 'off',
+    },
     settings: {
         'import/resolver': {
             typescript: {

packages/storybook/stories/pagination.stories.tsx

@@ -1,6 +1,6 @@
 import { Pagination } from '@equisoft/design-elements-react';
 import { Story } from '@storybook/react';
-import React from 'react';
+import React, { useState } from 'react';
 import { DeviceContextDecorator } from './utils/device-context-decorator';
 
 export default {
@@ -16,6 +16,20 @@ export const Normal: Story = () => (
         <Pagination totalPages={50} numberOfResults={1530} />
     </>
 );
+
+export const ControlledPagination: Story = () => {
+    const [currentPage, setCurrentPage] = useState(1);
+
+    return (
+        <Pagination
+            totalPages={5}
+            numberOfResults={100}
+            onPageChange={setCurrentPage}
+            activePage={currentPage}
+        />
+    );
+};
+
 export const WithoutResults: Story = () => (
     <>
         <Pagination totalPages={11} />