Fix broken i18n behavior

- <EuiI18n> with `tokens` arrays was not passing an i18nMappingFunc - i18n tokens that passed a function were not passing the rendered function output to the i18nMappingFunc - Updated the i18n documentation page to show both of these examples now working with the babelfish toggled on
elastic · Mar 24, 2022 · d53c0a2 · d53c0a2
1 parent 10792e7
commit d53c0a2
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 2 deletions.
diff --git a/src-docs/src/views/i18n/i18n_interpolation.js b/src-docs/src/views/i18n/i18n_interpolation.js
@@ -10,7 +10,7 @@ import {
 } from '../../../../src/components';
 
 export default () => {
-  const [count, setCount] = useState(1);
+  const [count, setCount] = useState(0);
 
   return (
     <>
@@ -44,6 +44,35 @@ export default () => {
 
       <EuiSpacer size="l" />
 
+      <EuiTitle size="xs">
+        <h3>useEuiI18n with function interpolation</h3>
+      </EuiTitle>
+      <p>
+        {useEuiI18n(
+          'euiI18nInterpolation.clickedCount',
+          ({ count }) =>
+            `Clicked on button ${count} time${count === 1 ? '' : 's'}.`,
+          { count }
+        )}
+      </p>
+
+      <EuiSpacer size="l" />
+
+      <EuiTitle size="xs">
+        <h3>EuiI18n with function interpolation</h3>
+      </EuiTitle>
+      <p>
+        <EuiI18n
+          token="euiI18nInterpolation.clickedCount"
+          default={({ count }) =>
+            `Clicked on button ${count} time${count === 1 ? '' : 's'}.`
+          }
+          values={{ count }}
+        />
+      </p>
+
+      <EuiSpacer size="l" />
+
       <EuiTitle size="xs">
         <h3>useEuiI18n with component interpolation</h3>
       </EuiTitle>

diff --git a/src/components/i18n/i18n.tsx b/src/components/i18n/i18n.tsx
@@ -61,7 +61,10 @@ function lookupToken<
       return errorOnMissingValues(token);
     }
     // @ts-ignore TypeScript complains that `DEFAULT` doesn't have a call signature but we verified `renderable` is a function
-    return renderable(values);
+    const rendered = renderable(values);
+    return (i18nMappingFunc
+      ? i18nMappingFunc(rendered as string)
+      : rendered) as RESOLVED;
   } else if (values === undefined || typeof renderable !== 'string') {
     if (i18nMappingFunc && typeof valueDefault === 'string') {
       renderable = i18nMappingFunc(valueDefault);
@@ -133,6 +136,7 @@ const EuiI18n = <
             lookupToken({
               token,
               i18nMapping: mapping,
+              i18nMappingFunc: mappingFunc,
               valueDefault: props.defaults[idx],
               render,
             })