Allow React components as dynamic data arguments (#100)

* Allow react data in components, update demo with NavLink example.

* Update types

Author: thchia

demo/src/Main.js

@@ -46,6 +46,13 @@ class Main extends React.Component<any, any> {
             trackStyle={{borderRadius: 2}}
             onToggle={() => this.props.onToggleClick()} 
             />
+
+          <Translate
+            id="homeLink"
+            data={{link: <NavLink to="/"><Translate id="here">here</Translate></NavLink>}}
+          >
+            {'Click ${ here } to go home'}
+          </Translate>
         </header>
 
         <main>
@@ -57,10 +64,6 @@ class Main extends React.Component<any, any> {
           <Route exact path="/movies" component={Movies} />
           <Route exact path="/books" component={Books} />
         </main>
-
-        {/* <h1>
-          <Translate id="title">Title</Translate>
-        </h1> */}
       </div>
     );
   }

demo/src/translations/global.json

@@ -8,5 +8,15 @@
     null,
     "Bonjour ${name}!",
     "Hola ${name}!"
+  ],
+  "homeLink": [
+    "Click ${ link } to go home.",
+    "Cliquez ${ link } pour rentrer à la page d'accueil",
+    "Haga clic ${ link } para ir a la página de inicio"
+  ],
+  "here": [
+    "here",
+    "ici",
+    "aquí"
   ]
 }

src/index.d.ts

@@ -97,7 +97,7 @@ export interface LocalizedElementMap {
 }
 
 export interface TranslatePlaceholderData {
-  [key: string]: string | number;
+  [key: string]: string | number | React.ReactNode;
 }
 
 export type TranslateChildFunction = (context: LocalizeContextProps) => any;

src/localize.js

@@ -80,7 +80,7 @@ export type LocalizedElementMap = {
 };
 
 export type TranslatePlaceholderData = {
-  [string]: string | number
+  [string]: string | number | React.Node
 };
 
 export type TranslateValue = string | string[];

src/utils.js

@@ -42,13 +42,30 @@ export const getLocalizedElement = (
         translationId: options.translationId,
         languageCode: options.languageCode
       };
-  const translatedValue = templater(localizedString, placeholderData);
+  const translatedValueOrArray = templater(localizedString, placeholderData);
+
+  // if result of templater is string, do the usual stuff
+  if (typeof translatedValueOrArray === 'string') {
+    return renderInnerHtml === true && hasHtmlTags(translatedValueOrArray)
+      ? React.createElement('span', {
+          dangerouslySetInnerHTML: { __html: translatedValueOrArray }
+        })
+      : translatedValueOrArray;
+  }
+
+  // at this point we know we have react components;
+  // check if there are HTMLTags in the translation (not allowed)
+  for (let portion of translatedValueOrArray) {
+    if (typeof portion === 'string' && hasHtmlTags(portion)) {
+      warning(
+        'HTML tags in the translation string are not supported when passing React components as arguments to the translation.'
+      );
+      return '';
+    }
+  }
 
-  return renderInnerHtml === true && hasHtmlTags(translatedValue)
-    ? React.createElement('span', {
-        dangerouslySetInnerHTML: { __html: translatedValue }
-      })
-    : translatedValue;
+  // return as Element
+  return React.createElement('span', null, ...translatedValueOrArray);
 };
 
 export const hasHtmlTags = (value: string): boolean => {
@@ -63,13 +80,39 @@ export const hasHtmlTags = (value: string): boolean => {
  * @param {object} data The data that should be inserted in template
  * @return {string} The template string with the data merged in
  */
-export const templater = (strings: string, data: Object = {}): string => {
-  for (let prop in data) {
-    const pattern = '\\${\\s*' + prop + '\\s*}';
-    const regex = new RegExp(pattern, 'gmi');
-    strings = strings.replace(regex, data[prop]);
+export const templater = (strings: string, data: Object = {}): string | string[] => {
+  if (!strings) return '';
+
+  // ${**}
+  // brackets to include it in the result of .split()
+  const genericPlaceholderPattern = '(\\${\\s*[^\\s]+\\s*})';
+
+  // split: from 'Hey ${name}' -> ['Hey', '${name}']
+  // filter: clean empty strings
+  // map: replace ${prop} with data[prop]
+  let splitStrings = strings
+    .split(new RegExp(genericPlaceholderPattern, 'gmi'))
+    .filter(str => !!str)
+    .map(templatePortion => {
+      let matched;
+      for (let prop in data) {
+        if (matched) break;
+        const pattern = '\\${\\s*' + prop + '\\s*}';
+        const regex = new RegExp(pattern, 'gmi');
+        if (regex.test(templatePortion)) matched = data[prop];
+      }
+      return matched || templatePortion;
+    });
+
+  // if there is a React element, return as array
+  if (splitStrings.some(portion => React.isValidElement(portion))) {
+    return splitStrings;
   }
-  return strings;
+
+  // otherwise concatenate all portions into the translated value
+  return splitStrings.reduce((translated, portion) => {
+    return translated + `${portion}`;
+  }, '');
 };
 
 export const getIndexForLanguageCode = (

tests/Translate.test.js

@@ -25,6 +25,7 @@ describe('<Translate />', () => {
       bye: ['Goodbye', 'Goodbye FR'],
       missing: ['Missing'],
       html: ['Hey <a href="http://google.com">google</a>', ''],
+      htmlPlaceholder: ['Translation with <strong>html</strong> and placeholder: ${ comp }.'],
       multiline: [null, ''],
       placeholder: ['Hey ${name}!', '']
     },
@@ -105,6 +106,27 @@ describe('<Translate />', () => {
     );
   });
 
+  it('should render React', () => {
+    const Comp = ({name}) => <strong>{name}</strong>;
+    const Translate = getTranslateWithContext();
+    const wrapper = mount(
+      <Translate id='placeholder' data={{ name: <Comp name='ReactJS' /> }} />
+    );
+
+    expect(wrapper.find(Comp).length).toBe(1);
+    expect(wrapper.text()).toContain('ReactJS');
+  })
+
+  it('should render empty string if passing React placeholder data to translation with html', () => {
+    const Comp = ({name}) => <strong>{name}</strong>;
+    const Translate = getTranslateWithContext();
+    const wrapper = mount(
+      <Translate id='htmlPlaceholder' data={{comp: <Comp name='ReactJS' />}} />
+    );
+
+    expect(wrapper.text()).toBe('');
+  })
+
   it('should just pass through string when renderToStaticMarkup not set', () => {
     const Translate = getTranslateWithContext({
       ...initialState,

tests/utils.test.js

@@ -1,4 +1,5 @@
-import Enzyme, { shallow } from 'enzyme';
+import React from 'react'
+import Enzyme, { mount, shallow } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import * as utils from 'utils';
 
@@ -61,6 +62,17 @@ describe('locale utils', () => {
       });
       expect(result).toEqual('Hello Ted');
     });
+
+    it('should handle React in data', () => {
+      const Comp = () => <div>ReactJS</div>
+      const translations = { test: 'Hello ${ comp } data' }
+      const result = utils.getLocalizedElement({
+        translationId: 'test',
+        translations,
+        data: { comp: <Comp /> }
+      });
+      expect(mount(result).text()).toContain('ReactJS');
+    })
   });
 
   describe('hasHtmlTags', () => {
@@ -86,6 +98,15 @@ describe('locale utils', () => {
       const result = utils.templater(before);
       expect(result).toEqual(before);
     });
+
+    it('should return an array if React components are passed in data', () => {
+      const Comp = () => <div>Test</div>;
+      const data = { comp:  <Comp />};
+      const before = 'Hello this is a ${ comp } translation';
+      const after = ['Hello this is a ', <Comp /> , ' translation'];
+      const result = utils.templater(before, data);
+      expect(result).toEqual(after);
+    })
   });
 
   describe('getIndexForLanguageCode', () => {