wip

elastic · Jan 8, 2019 · b545ff4 · b545ff4
1 parent b153ad0
commit b545ff4
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 10 deletions.
diff --git a/src-docs/src/views/context/context.js b/src-docs/src/views/context/context.js
@@ -27,8 +27,12 @@ export default class extends Component {
   setLanguage = (language) => this.setState({ language })
 
   render() {
+    const i18n = {
+      mapping: mappings[this.state.language]
+    };
+
     return (
-      <EuiContext i18n={mappings[this.state.language]}>
+      <EuiContext i18n={i18n}>
         <div>
           <EuiButtonEmpty onClick={() => this.setLanguage('en')}>English</EuiButtonEmpty>
           <EuiButtonEmpty onClick={() => this.setLanguage('fr')}>French</EuiButtonEmpty>

diff --git a/src/components/context/context.tsx b/src/components/context/context.tsx
@@ -1,14 +1,18 @@
 import React, { createContext, ReactChild } from 'react';
 
-export interface I18nMappingShape {
-  [key: string]: ReactChild;
+export interface I18nShape {
+  mapping?: {
+    [key: string]: ReactChild;
+  };
+  formatNumber?: (x: number) => string;
+  formatDate?: (x: Date) => string;
 }
 
-const I18nContext: React.Context<I18nMappingShape> = createContext({});
+const I18nContext: React.Context<I18nShape> = createContext({});
 const { Provider: EuiI18nProvider, Consumer: EuiI18nConsumer } = I18nContext;
 
 interface IEuiContextProps {
-  i18n: I18nMappingShape;
+  i18n: I18nShape;
   children: React.ReactNode;
 }
 

diff --git a/src/components/i18n/i18n.tsx b/src/components/i18n/i18n.tsx
@@ -1,14 +1,14 @@
 import React, { ReactChild, ReactElement } from 'react';
 import { EuiI18nConsumer } from '../context';
 import { ExclusiveUnion } from '../common';
-import { I18nMappingShape } from '../context/context';
+import { I18nShape } from '../context/context';
 
 // <I18n token="foo"/>
 // <I18n token="foo">{(foo) => <p>foo</p>}</I18n>
 // <I18n tokens=['foo', 'bar']>{([foo, bar]) => <p>{foo}, {bar}</p></I18n>
 
-function lookupToken(token: string, i18nMapping: I18nMappingShape, valueDefault: ReactChild) {
-  return i18nMapping[token] || valueDefault;
+function lookupToken(token: string, i18nMapping: I18nShape['mapping'], valueDefault: ReactChild) {
+  return (i18nMapping && i18nMapping[token]) || valueDefault;
 }
 
 interface I18nTokenShape {
@@ -33,11 +33,12 @@ const I18n: React.SFC<I18nProps> = (props) => (
   <EuiI18nConsumer>
     {
       (i18nConfig) => {
+        const { mapping } = i18nConfig;
         if (hasTokens(props)) {
-          return props.children(props.tokens.map((token, idx) => lookupToken(token, i18nConfig, props.defaults[idx])));
+          return props.children(props.tokens.map((token, idx) => lookupToken(token, mapping, props.defaults[idx])));
         }
 
-        const tokenValue = lookupToken(props.token, i18nConfig, props.default);
+        const tokenValue = lookupToken(props.token, mapping, props.default);
         if (props.children) {
           return props.children(tokenValue);
         } else {