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

AxaFrance · May 12, 2020 · ca68009 · ca68009
1 parent 0945a94
commit ca68009
Show file tree

Hide file tree

Showing 4 changed files with 200 additions and 16 deletions.
diff --git a/packages/table/src/Paging/Paging.spec.tsx b/packages/table/src/Paging/Paging.spec.tsx
@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { create } from 'react-test-renderer';
 import Paging from './Paging';
+import Items from '../Items/Items';
+import Modes from '../Pager/Modes';
 
 describe('Table.Paging', () => {
-  it('renders correctly', () => {
+  it('renders correctly with default values', () => {
     const handleOnChangeMock = jest.fn();
     handleOnChangeMock.mockImplementationOnce(() => 'My mock is called');
 
@@ -19,4 +21,27 @@ describe('Table.Paging', () => {
 
     expect(component).toMatchSnapshot();
   });
+
+  it('renders correctly with custom values', () => {
+    const handleOnChangeMock = jest.fn();
+    handleOnChangeMock.mockImplementationOnce(() => 'My mock is called');
+
+    const component = create(
+      <Paging
+        numberItems={20}
+        numberPages={10}
+        onChange={handleOnChangeMock}
+        currentPage={1}
+        id="pagingid"
+        previousLabel="« Previous"
+        nextLabel="Next »"
+        ofLabel="of"
+        displayLabel="Show"
+        elementsLabel="elements"
+        mode={Modes.light}
+      />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
 });
diff --git a/packages/table/src/Paging/Paging.tsx b/packages/table/src/Paging/Paging.tsx
@@ -7,8 +7,8 @@ import {
   OnChangeCustomEvent,
   compose,
 } from '@axa-fr/react-toolkit-core';
-import Pager from '../Pager/Pager';
-import Items from '../Items/Items';
+import Pager, { PagerComponentProps } from '../Pager/Pager';
+import Items, { ItemsComponentProps } from '../Items/Items';
 
 const DEFAULT_CLASSNAME = 'af-paging';
 
@@ -18,11 +18,9 @@ export interface PagingEvent {
 }
 
 export type PagingComponentProps = React.HTMLProps<HTMLTableElement> &
-  WithOnChangeEvent<PagingEvent> & {
-    numberItems?: number;
-    numberPages?: number;
-    currentPage: number;
-  };
+  WithOnChangeEvent<PagingEvent> &
+  PagerComponentProps &
+  ItemsComponentProps;
 
 const defaultProps: Partial<PagingComponentProps> = {
   numberItems: 10,
@@ -55,7 +53,19 @@ class Paging extends React.PureComponent<PagingComponentProps> {
   }
 
   render() {
-    const { numberItems, currentPage, numberPages, className, id } = this.props;
+    const {
+      className,
+      currentPage,
+      displayLabel,
+      elementsLabel,
+      id,
+      mode,
+      nextLabel,
+      numberItems,
+      numberPages,
+      ofLabel,
+      previousLabel,
+    } = this.props;
 
     return (
       <div className={className}>
@@ -64,13 +74,19 @@ class Paging extends React.PureComponent<PagingComponentProps> {
             onChange={this.onChangeItems}
             numberItems={numberItems}
             id={id}
+            displayLabel={displayLabel}
+            elementsLabel={elementsLabel}
           />
         </div>
         <div className="af-paging__pager">
           <Pager
             onChange={this.onChangePage}
             currentPage={currentPage}
             numberPages={numberPages}
+            previousLabel={previousLabel}
+            nextLabel={nextLabel}
+            ofLabel={ofLabel}
+            mode={mode}
           />
         </div>
       </div>

diff --git a/packages/table/src/Paging/__snapshots__/Paging.spec.tsx.snap b/packages/table/src/Paging/__snapshots__/Paging.spec.tsx.snap
@@ -1,6 +1,143 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Table.Paging renders correctly 1`] = `
+exports[`Table.Paging renders correctly with custom values 1`] = `
+<div
+  className="af-paging"
+>
+  <div
+    className="af-paging__limit"
+  >
+    <div
+      className="af-paging__limit"
+    >
+      <form
+        className="af-paging__form"
+      >
+        <div
+          className="af-form__group"
+        >
+          <div
+            className="col col-sm-2 col-md-2 col-lg-2 col-xl-2"
+          >
+            <label
+              className="af-form__group-label"
+              htmlFor="pagingid"
+            >
+              Show
+            </label>
+          </div>
+          <div
+            className="col col-sm-10 col-md-10 col-lg-10 col-xl-10"
+          >
+            <div
+              className="af-form__select"
+            >
+              <div
+                className="af-form__select-container"
+              >
+                <select
+                  className="af-form__input-select"
+                  id="pagingid"
+                  onChange={[Function]}
+                  value={20}
+                >
+                  <option
+                    value={5}
+                  >
+                    5
+                  </option>
+                  <option
+                    value={10}
+                  >
+                    10
+                  </option>
+                  <option
+                    value={25}
+                  >
+                    25
+                  </option>
+                  <option
+                    value={50}
+                  >
+                    50
+                  </option>
+                  <option
+                    value={100}
+                  >
+                    100
+                  </option>
+                </select>
+                <span
+                  className="glyphicon glyphicon-menu-down"
+                />
+              </div>
+              <span
+                className="af-form__input-cmplt"
+              >
+                elements
+              </span>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+  <div
+    className="af-paging__pager"
+  >
+    <nav
+      className="af-pager"
+    >
+      <ul
+        className="af-pager__pagination"
+      >
+        <li
+          className="af-pager__item af-pager__item--disabled"
+        >
+          <span
+            className="af-pager__item-nolink"
+          >
+            <i
+              aria-hidden="true"
+              className="glyphicon glyphicon-chevron-left"
+            />
+          </span>
+        </li>
+        <li
+          className="af-pager__item af-pager__item--disabled"
+        >
+          <span
+            className="af-pager__item-link"
+          >
+            1
+             
+            of
+             
+            10
+          </span>
+        </li>
+        <li
+          className="af-pager__item"
+        >
+          <a
+            className="af-pager__item-link"
+            href="#"
+            onClick={[Function]}
+            role="button"
+          >
+            <i
+              aria-hidden="true"
+              className="glyphicon glyphicon-chevron-right"
+            />
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</div>
+`;
+
+exports[`Table.Paging renders correctly with default values 1`] = `
 <div
   className="af-paging"
 >

diff --git a/storybook/storybook/src/packages/table/src/Paging/Paging.stories.js b/storybook/storybook/src/packages/table/src/Paging/Paging.stories.js
@@ -1,18 +1,24 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { text, number } from '@storybook/addon-knobs';
+import { text, number, select } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/react';
-import { Paging } from '@axa-fr/react-toolkit-table';
+import { Paging, Modes } from '@axa-fr/react-toolkit-table';
 import readme from '@axa-fr/react-toolkit-table/src/Paging/README.md';
 
 const PagingStory = () => (
   <Paging
-    numberItems={number('numberItems', 20)}
-    numberPages={number('numberPages', 23)}
-    currentPage={number('currentPage', 5)}
-    onChange={action('onChange')}
     classModifier={text('classModifier', '')}
     className={text('className', 'af-paging')}
+    currentPage={number('currentPage', 5)}
+    displayLabel={text('displayLabel', 'Show')}
+    elementsLabel={text('elementsLabel', 'elements')}
+    mode={select('mode', Modes, Modes.default)}
+    nextLabel={text('nextLabel', 'Next »')}
+    numberPages={number('numberPages', 23)}
+    ofLabel={text('ofLabel', 'of')}
+    onChange={action('onChange')}
+    previousLabel={text('previousLabel', '« Previous')}
+    numberItems={number('numberItems', 20)}
   />
 );