Merge pull request #638 from rvsia/pf4translatableSelect

fix(pf4): allow translated strings in select

Author: Hyperkid123

packages/pf4-component-mapper/demo/demo-schemas/select-schema.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
 
 const options = [
@@ -127,6 +128,37 @@ const selectSchema = {
       name: 'dosbaled-option-select',
       label: 'Disabled-option-select',
       options: [...options, { label: 'Disabled option', value: 'disabled', isDisabled: true }]
+    },
+    {
+      component: componentTypes.SELECT,
+      name: 'translated-select',
+      label: 'Translated-select',
+      options: [
+        {
+          label: <span>None</span>,
+          key: 'none'
+        },
+        {
+          label: <span>Jack</span>,
+          value: 'jack'
+        }
+      ]
+    },
+    {
+      component: componentTypes.SELECT,
+      name: 'translated-select-multi',
+      label: 'Translated-select-multi',
+      isMulti: true,
+      options: [
+        {
+          label: <span>Jack</span>,
+          value: 'jack'
+        },
+        {
+          label: <span>Mary</span>,
+          value: 'Mary'
+        }
+      ]
     }
   ]
 };

packages/pf4-component-mapper/demo/index.js

@@ -24,7 +24,7 @@ const fieldArrayState = { schema: arraySchemaDDF, additionalOptions: {
 class App extends React.Component {
     constructor(props) {
         super(props);
-        this.state = {schema: wizardSchema, additionalOptions: {}} 
+        this.state = {schema: selectSchema, additionalOptions: {}} 
     }
 
     render() {

packages/pf4-component-mapper/src/common/select/menu.js

@@ -106,7 +106,7 @@ const Menu = ({
           isSelected: isMulti ? !!selectedItem.find(({ value }) => item.value === value) : selectedItem === item.value,
           onMouseUp: (e) => e.stopPropagation() // we need this to prevent issues with portal menu not selecting a option
         });
-        return <Option key={item.value} item={item} {...itemProps} />;
+        return <Option key={item.key || item.value || (typeof item.label === 'string' && item.label) || item} item={item} {...itemProps} />;
       })}
     </ul>
   );

packages/pf4-component-mapper/src/common/select/select.js

@@ -29,7 +29,7 @@ const itemToString = (value, isMulti, showMore, handleShowMore, handleChange) =>
             {visibleOptions.map((item, index) => {
               const label = typeof item === 'object' ? item.label : item;
               return (
-                <li className="pf-c-chip-group__list-item" onClick={(event) => event.stopPropagation()} key={label}>
+                <li className="pf-c-chip-group__list-item" onClick={(event) => event.stopPropagation()} key={item.key || item.value || item}>
                   <div className="pf-c-chip">
                     <span className="pf-c-chip__text" id={`pf-random-id-${index}-${label}`}>
                       {label}
@@ -53,7 +53,7 @@ const itemToString = (value, isMulti, showMore, handleShowMore, handleChange) =>
       );
     }
 
-    return value.map((item) => (typeof item === 'object' ? item.label : item)).join(',');
+    return value.map((item) => (typeof item === 'object' ? item.label : item));
   }
 
   if (typeof value === 'object') {

packages/pf4-component-mapper/src/files/select.d.ts

@@ -5,6 +5,7 @@ import { ReactNode } from "react";
 export interface SelectOption {
   label: ReactNode;
   value?: any;
+  key?: string;
 }
 
 interface BaseSelectProps  {

packages/pf4-component-mapper/src/tests/select/select.test.js

@@ -1,9 +1,13 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import isEqual from 'lodash/isEqual';
+import FormRenderer, { componentTypes } from '@data-driven-forms/react-form-renderer';
 
 import Select from '../../common/select/select';
 import { act } from 'react-dom/test-utils';
+import ValueContainer from '../../common/select/value-container';
+import FormTemplate from '../../files/form-template';
+import componentMapper from '../../files/component-mapper';
 
 describe('<Select />', () => {
   let initialProps;
@@ -30,6 +34,47 @@ describe('<Select />', () => {
     onChange.mockReset();
   });
 
+  it('should render translated option in value container', async () => {
+    const wrapper = mount(
+      <FormRenderer
+        onSubmit={jest.fn}
+        FormTemplate={FormTemplate}
+        componentMapper={componentMapper}
+        schema={{
+          fields: [
+            {
+              component: componentTypes.SELECT,
+              name: 'select',
+              options: [
+                {
+                  label: <h1>Translated</h1>,
+                  value: 'translated'
+                }
+              ]
+            }
+          ]
+        }}
+      />
+    );
+
+    expect(wrapper.find(ValueContainer).find('h1')).toHaveLength(0);
+
+    wrapper.find('.pf-c-select__toggle').simulate('click');
+    const option = wrapper.find('button.pf-c-select__menu-item').first();
+
+    await act(async () => {
+      option.simulate('click');
+    });
+    wrapper.update();
+
+    expect(
+      wrapper
+        .find(ValueContainer)
+        .find('h1')
+        .text()
+    ).toEqual('Translated');
+  });
+
   it('should return single simple value', async () => {
     const wrapper = mount(<Select {...initialProps} />);
     wrapper.find('.pf-c-select__toggle').simulate('click');