feat(react-toolkit-table): allow to customize labels of Pager

AxaFrance · May 12, 2020 · 2f39067 · 2f39067
1 parent dec41e9
commit 2f39067
Show file tree

Hide file tree

Showing 4 changed files with 137 additions and 19 deletions.
diff --git a/packages/table/src/Pager/Pager.spec.tsx b/packages/table/src/Pager/Pager.spec.tsx
@@ -13,4 +13,22 @@ describe('Table.Pager', () => {
 
     expect(component).toMatchSnapshot();
   });
+
+  it('renders correctly with custom label', () => {
+    const handleOnChangeMock = jest.fn();
+    handleOnChangeMock.mockImplementationOnce(() => 'My mock is called');
+
+    const component = create(
+      <Pager
+        numberPages={10}
+        onChange={handleOnChangeMock}
+        currentPage={1}
+        previousLabel="< Previous"
+        nextLabel="Next >"
+        ofLabel="of"
+      />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
 });
diff --git a/packages/table/src/Pager/Pager.tsx b/packages/table/src/Pager/Pager.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
 import {
-  WithClassModifierOptions,
-  withClassModifier,
-  withClassDefault,
+  compose,
   OnChangeCustomEvent,
+  withClassDefault,
+  withClassModifier,
+  WithClassModifierOptions,
   WithOnChangeEvent,
-  compose,
 } from '@axa-fr/react-toolkit-core';
 import Modes from './Modes';
 import Previous from './Previous';
@@ -16,21 +16,35 @@ import Li from './Li';
 const DEFAULT_CLASSNAME = 'af-pager';
 
 export type PagerComponentProps = {
-  numberItems?: number;
   numberPages?: number;
-  currentPage: number;
+  currentPage?: number;
   mode?: Modes;
+  previousLabel?: React.ReactNode;
+  nextLabel?: React.ReactNode;
+  ofLabel?: React.ReactNode;
 } & Pick<React.HTMLProps<HTMLAnchorElement>, 'className'> &
   WithOnChangeEvent<OnChangeCustomEvent>;
 
 const defaultProps: Partial<PagerComponentProps> = {
-  numberItems: 10,
   numberPages: 1,
   currentPage: 1,
+  mode: Modes.default,
+  previousLabel: '« Précédent',
+  nextLabel: 'Suivant »',
+  ofLabel: 'sur',
 };
 
-const Pager: React.SFC<PagerComponentProps> = props => {
-  const { numberPages, currentPage, onChange, mode, className } = props;
+const Pager = (props: PagerComponentProps) => {
+  const {
+    numberPages,
+    currentPage,
+    onChange,
+    mode,
+    className,
+    previousLabel,
+    nextLabel,
+    ofLabel,
+  } = props;
 
   const hasNext = currentPage < numberPages;
   const hasPrevious = currentPage > 1;
@@ -50,7 +64,7 @@ const Pager: React.SFC<PagerComponentProps> = props => {
             />
           </Previous>
           <LiPoint isVisible>
-            {currentPage} sur {numberPages}
+            {currentPage} {ofLabel} {numberPages}
           </LiPoint>
           <Next
             onChange={onChange}
@@ -75,7 +89,7 @@ const Pager: React.SFC<PagerComponentProps> = props => {
           value={currentPage - 1}
           active={hasPrevious}
           isVisible>
-          « Précédent
+          {previousLabel}
         </Previous>
 
         <Li
@@ -113,7 +127,7 @@ const Pager: React.SFC<PagerComponentProps> = props => {
           value={currentPage + 1}
           active={hasNext}
           isVisible>
-          Suivant »
+          {nextLabel}
         </Next>
       </ul>
     </nav>
@@ -126,6 +140,6 @@ const enhance = compose<PagerComponentProps, PagerProps>(
   withClassDefault(DEFAULT_CLASSNAME),
   withClassModifier
 );
+Pager.defaultProps = defaultProps;
 const Enhance = enhance(Pager);
-Enhance.defaultProps = defaultProps;
 export default Enhance;
diff --git a/packages/table/src/Pager/__snapshots__/Pager.spec.tsx.snap b/packages/table/src/Pager/__snapshots__/Pager.spec.tsx.snap
@@ -79,3 +79,83 @@ exports[`Table.Pager renders correctly 1`] = `
   </ul>
 </nav>
 `;
+
+exports[`Table.Pager renders correctly with custom label 1`] = `
+<nav
+  className="af-pager"
+>
+  <ul
+    className="af-pager__pagination"
+  >
+    <li
+      className="af-pager__item af-pager__item--disabled"
+    >
+      <span
+        className="af-pager__item-nolink"
+      >
+        &lt; Previous
+      </span>
+    </li>
+    <li
+      className="af-pager__item af-pager__item--active"
+    >
+      <a
+        className="af-pager__item-link"
+        href="#"
+        onClick={[Function]}
+      >
+        <span>
+          1
+        </span>
+      </a>
+    </li>
+    <li
+      className="af-pager__item"
+    >
+      <a
+        className="af-pager__item-link"
+        href="#"
+        onClick={[Function]}
+      >
+        <span>
+          2
+        </span>
+      </a>
+    </li>
+    <li
+      className="af-pager__item af-pager__item--disabled"
+    >
+      <span
+        className="af-pager__item-link"
+      >
+        ...
+      </span>
+    </li>
+    <li
+      className="af-pager__item"
+    >
+      <a
+        className="af-pager__item-link"
+        href="#"
+        onClick={[Function]}
+      >
+        <span>
+          10
+        </span>
+      </a>
+    </li>
+    <li
+      className="af-pager__item"
+    >
+      <a
+        className="af-pager__item-link"
+        href="#"
+        onClick={[Function]}
+        role="button"
+      >
+        Next &gt;
+      </a>
+    </li>
+  </ul>
+</nav>
+`;
diff --git a/storybook/storybook/src/packages/table/src/Pager/Pager.stories.js b/storybook/storybook/src/packages/table/src/Pager/Pager.stories.js
@@ -7,23 +7,29 @@ import readme from '@axa-fr/react-toolkit-table/src/Pager/README.md';
 
 const PagerStory = () => (
   <Pager
-    numberPages={number('numberPages', 23)}
-    currentPage={number('currentPage', 5)}
-    onChange={action('onChange')}
     classModifier={text('classModifier', '')}
     className={text('className', '')}
+    currentPage={number('currentPage', 5)}
     mode={select('mode', Modes, Modes.default)}
+    nextLabel={text('nextLabel', 'Next »')}
+    ofLabel={text('ofLabel', 'of')}
+    onChange={action('onChange')}
+    previousLabel={text('previousLabel', '« Previous')}
+    numberPages={number('numberPages', 23)}
   />
 );
 
 const LightStory = () => (
   <Pager
-    numberPages={number('numberPages', 23)}
-    currentPage={number('currentPage', 5)}
-    onChange={action('onChange')}
     classModifier={text('classModifier', '')}
     className={text('className', '')}
+    currentPage={number('currentPage', 5)}
     mode={select('mode', Modes, Modes.light)}
+    nextLabel={text('nextLabel', 'Next »')}
+    ofLabel={text('ofLabel', 'of')}
+    onChange={action('onChange')}
+    previousLabel={text('previousLabel', '« Previous')}
+    numberPages={number('numberPages', 23)}
   />
 );