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

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

Hide file tree

Showing 4 changed files with 120 additions and 9 deletions.
diff --git a/packages/table/src/Items/Items.spec.tsx b/packages/table/src/Items/Items.spec.tsx
@@ -4,7 +4,7 @@ import { create } from 'react-test-renderer';
 import Items from './Items';
 
 describe('Table.Items', () => {
-  it('renders correctly', () => {
+  it('renders correctly with default values', () => {
     const handleOnChangeMock = jest.fn();
     handleOnChangeMock.mockImplementationOnce(() => 'My mock is called');
 
@@ -20,6 +20,24 @@ describe('Table.Items', () => {
     expect(component).toMatchSnapshot();
   });
 
+  it('renders correctly with custom values', () => {
+    const handleOnChangeMock = jest.fn();
+    handleOnChangeMock.mockImplementationOnce(() => 'My mock is called');
+
+    const component = create(
+      <Items
+        numberItems={10}
+        onChange={handleOnChangeMock}
+        items={[5, 10, 25, 50, 100]}
+        id="itemid"
+        displayLabel="Show"
+        elementsLabel="elements"
+      />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
   test('handleChange when value updated', () => {
     const handleOnChangeMock = jest.fn();
     handleOnChangeMock.mockImplementationOnce(() => 'My mock is called');
@@ -32,6 +50,8 @@ describe('Table.Items', () => {
         onChange={handleOnChangeMock}
         items={[5, 10, 25, 50, 100]}
         id="itemid"
+        displayLabel="show"
+        elementsLabel="elements"
       />
     );
 

diff --git a/packages/table/src/Items/Items.tsx b/packages/table/src/Items/Items.tsx
@@ -7,7 +7,7 @@ import {
   withClassModifier,
   WithOnChangeEvent,
   OnChangeCustomEvent,
-  compose
+  compose,
 } from '@axa-fr/react-toolkit-core';
 
 export type ItemsComponentProps = Pick<
@@ -18,13 +18,17 @@ export type ItemsComponentProps = Pick<
     id: string;
     numberItems?: number;
     items?: number[];
+    displayLabel?: React.ReactNode;
+    elementsLabel?: React.ReactNode;
   };
 const DEFAULT_CLASSNAME = 'af-paging__form';
 
 const defaultProps: Partial<ItemsComponentProps> = {
   numberItems: 10,
   items: [5, 10, 25, 50, 100],
   id: null,
+  displayLabel: 'Afficher',
+  elementsLabel: 'éléments',
 };
 
 class Items extends React.PureComponent<ItemsComponentProps> {
@@ -42,7 +46,15 @@ class Items extends React.PureComponent<ItemsComponentProps> {
   }
 
   render() {
-    const { numberItems, className, items, id } = this.props;
+    const {
+      className,
+      displayLabel,
+      elementsLabel,
+      id,
+      items,
+      numberItems,
+    } = this.props;
+
     const content = items.map(item => (
       <option key={item} value={item}>
         {item}
@@ -56,7 +68,7 @@ class Items extends React.PureComponent<ItemsComponentProps> {
           <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={defaultIdName}>
-                Afficher
+                {displayLabel}
               </label>
             </div>
             <div className="col col-sm-10 col-md-10 col-lg-10 col-xl-10">
@@ -71,7 +83,7 @@ class Items extends React.PureComponent<ItemsComponentProps> {
                   </select>
                   <span className="glyphicon glyphicon-menu-down" />
                 </div>
-                <span className="af-form__input-cmplt">éléments</span>
+                <span className="af-form__input-cmplt">{elementsLabel}</span>
               </div>
             </div>
           </div>

diff --git a/packages/table/src/Items/__snapshots__/Items.spec.tsx.snap b/packages/table/src/Items/__snapshots__/Items.spec.tsx.snap
@@ -1,6 +1,83 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Table.Items renders correctly 1`] = `
+exports[`Table.Items renders correctly with custom values 1`] = `
+<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="itemid"
+        >
+          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="itemid"
+              onChange={[Function]}
+              value={10}
+            >
+              <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>
+`;
+
+exports[`Table.Items renders correctly with default values 1`] = `
 <div
   className="af-paging__limit"
 >

diff --git a/storybook/storybook/src/packages/table/src/Items/Items.stories.js b/storybook/storybook/src/packages/table/src/Items/Items.stories.js
@@ -7,11 +7,13 @@ import readme from '@axa-fr/react-toolkit-table/src/Items/README.md';
 
 const ItemsStory = () => (
   <Items
-    numberItems={number('numberItems', 20)}
-    onChange={action('onChange')}
-    items={[5, 10, 25, 50, 100]}
     classModifier={text('classModifier', '')}
     className={text('className', '')}
+    displayLabel={text('displayLabel', 'Show')}
+    elementsLabel={text('elementsLabel', 'elements')}
+    items={[5, 10, 25, 50, 100]}
+    onChange={action('onChange')}
+    numberItems={number('numberItems', 20)}
   />
 );