EuiContext & I18n

scripts/babel/proptypes-from-ts-props/index.js

@@ -346,6 +346,9 @@ function getPropTypesForNode(node, optional, state) {
         [
           types.objectExpression(
             node.members.map(property => {
+              // skip TS index signatures
+              if (types.isTSIndexSignature(property)) return null;
+
               const objectProperty = types.objectProperty(
                 types.identifier(property.key.name || `"${property.key.value}"`),
                 getPropTypesForNode(property.typeAnnotation, property.optional, state)
@@ -354,7 +357,7 @@ function getPropTypesForNode(node, optional, state) {
                 objectProperty.leadingComments = property.leadingComments.map(({ type, value }) => ({ type, value }));
               }
               return objectProperty;
-            })
+            }).filter(x => x != null)
           )
         ]
       );
@@ -967,7 +970,7 @@ module.exports = function propTypesFromTypeScript({ types }) {
                   processComponentDeclaration(idTypeAnnotation.typeAnnotation.typeParameters.params[0], nodePath, state);
                   fileCodeNeedsUpdating = true;
                 } else {
-                  throw new Error(`Cannot process annotation id React.${right.name}`);
+                  // throw new Error(`Cannot process annotation id React.${right.name}`);
                 }
               }
             } else if (idTypeAnnotation.typeAnnotation.typeName.type === 'Identifier') {

src-docs/src/routes.js

@@ -90,6 +90,9 @@ import { ColorPickerExample }
 import { ComboBoxExample }
   from './views/combo_box/combo_box_example';
 
+import { ContextExample }
+  from './views/context/context_example';
+
 import { ContextMenuExample }
   from './views/context_menu/context_menu_example';
 
@@ -405,6 +408,7 @@ const navigation = [{
   items: [
     AccessibilityExample,
     ColorPaletteExample,
+    ContextExample,
     CopyExample,
     UtilityClassesExample,
     DelayHideExample,

src-docs/src/views/context/context.js

@@ -0,0 +1,73 @@
+import React, { Component, Fragment } from 'react';
+
+import {
+  EuiContext,
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFieldText,
+  EuiSpacer,
+  I18n,
+  I18nNumber,
+} from '../../../../src/components';
+
+const mappings = {
+  fr: {
+    greeting: 'Salutations!',
+    guestNo: 'Vous êtes invité #',
+    question: 'Quel est votre nom?',
+    placeholder: 'Jean Dupont',
+    action: 'Soumettre',
+  },
+};
+
+export default class extends Component {
+  state = {
+    language: 'en',
+    name: ''
+  }
+
+  setLanguage = (language) => this.setState({ language })
+
+  render() {
+    const i18n = {
+      mapping: mappings[this.state.language],
+      formatNumber: (value) => new Intl.NumberFormat(this.state.language).format(value),
+    };
+
+    return (
+      <EuiContext i18n={i18n}>
+        <div>
+          <EuiButtonEmpty onClick={() => this.setLanguage('en')}>English</EuiButtonEmpty>
+          <EuiButtonEmpty onClick={() => this.setLanguage('fr')}>French</EuiButtonEmpty>
+
+          <EuiSpacer size="m"/>
+
+          <strong><I18n token="greeting" default="Welcome!"/></strong>
+
+          <EuiSpacer size="s"/>
+
+          <p><I18n token="guestNo" default="You are guest #"/><I18nNumber value={1582394}/></p>
+
+          <EuiSpacer size="m"/>
+
+          <I18n token="question" default="What is your name?">{question => <p>{question}</p>}</I18n>
+
+          <EuiSpacer size="s"/>
+
+          <I18n tokens={['placeholder', 'action']} defaults={['John Doe', 'Submit']}>
+            {([placeholder, action]) => (
+              <Fragment>
+                <EuiFieldText
+                  placeholder={placeholder}
+                  value={this.state.name}
+                /><EuiSpacer size="m" />
+
+                <EuiButton>{action}</EuiButton>
+              </Fragment>
+            )}
+          </I18n>
+        </div>
+      </EuiContext>
+    );
+  }
+}

src-docs/src/views/context/context_example.js

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import {
+  GuideSectionTypes,
+} from '../../components';
+
+import {
+  EuiCode,
+  EuiContext,
+  I18n,
+} from '../../../../src/components';
+
+import Context from './context';
+const contextSource = require('!!raw-loader!./context');
+const contextHtml = renderToHtml(Context);
+
+export const ContextExample = {
+  title: 'Context',
+  sections: [{
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: contextSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: contextHtml,
+    }],
+    text: (
+      <p>
+        <EuiCode>EuiContext</EuiCode> allows setting global internationalization copy for
+        EUI components. Any components used within this context will lookup their display values
+        from this mapping.
+      </p>
+    ),
+    components: { EuiContext },
+    demo: <Context />,
+    props: { EuiContext, I18n },
+  }],
+};

src/components/context/context.tsx

@@ -0,0 +1,25 @@
+import React, { createContext, ReactChild } from 'react';
+
+export interface I18nShape {
+  mapping?: {
+    [key: string]: ReactChild;
+  };
+  formatNumber?: (x: number) => string;
+  formatDateTime?: (x: Date) => string;
+}
+
+const I18nContext: React.Context<I18nShape> = createContext({});
+const { Provider: EuiI18nProvider, Consumer: EuiI18nConsumer } = I18nContext;
+
+interface IEuiContextProps {
+  i18n: I18nShape;
+  children: React.ReactNode;
+}
+
+const EuiContext: React.SFC<IEuiContextProps> = ({i18n = {}, children}) => (
+  <EuiI18nProvider value={i18n}>
+    {children}
+  </EuiI18nProvider>
+);
+
+export { EuiContext, EuiI18nConsumer };

src/components/context/index.ts

@@ -0,0 +1,4 @@
+export {
+  EuiContext,
+  EuiI18nConsumer
+} from './context';

src/components/i18n/i18n.tsx

@@ -0,0 +1,52 @@
+import React, { ReactChild, ReactElement } from 'react';
+import { EuiI18nConsumer } from '../context';
+import { ExclusiveUnion } from '../common';
+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: I18nShape['mapping'], valueDefault: ReactChild) {
+  return (i18nMapping && i18nMapping[token]) || valueDefault;
+}
+
+interface I18nTokenShape {
+  token: string;
+  default: ReactChild;
+  children?: (x: ReactChild) => ReactElement<any>;
+}
+
+interface I18nTokensShape {
+  tokens: string[];
+  defaults: ReactChild[];
+  children: (x: ReactChild[]) => ReactElement<any>;
+}
+
+type I18nProps = ExclusiveUnion<I18nTokenShape, I18nTokensShape>;
+
+function hasTokens(x: I18nProps): x is I18nTokensShape {
+  return x.tokens != null;
+}
+
+const I18n: React.SFC<I18nProps> = (props) => (
+  <EuiI18nConsumer>
+    {
+      (i18nConfig) => {
+        const { mapping } = i18nConfig;
+        if (hasTokens(props)) {
+          return props.children(props.tokens.map((token, idx) => lookupToken(token, mapping, props.defaults[idx])));
+        }
+
+        const tokenValue = lookupToken(props.token, mapping, props.default);
+        if (props.children) {
+          return props.children(tokenValue);
+        } else {
+          return tokenValue;
+        }
+      }
+    }
+  </EuiI18nConsumer>
+);
+
+export { I18n };

src/components/i18n/i18n_number.tsx

@@ -0,0 +1,47 @@
+import React, { ReactChild, ReactElement } from 'react';
+import { EuiI18nConsumer } from '../context';
+import { ExclusiveUnion } from '../common';
+
+const defaultFormatter = new Intl.NumberFormat('en');
+function defaultFormatNumber(value: number) {
+  return defaultFormatter.format(value);
+}
+
+interface I18nNumberValueShape {
+  value: number;
+  children?: (x: ReactChild) => ReactElement<any>;
+}
+
+interface I18nNumberValuesShape {
+  values: number[];
+  children: (x: ReactChild[]) => ReactElement<any>;
+}
+
+type I18nNumberProps = ExclusiveUnion<I18nNumberValueShape, I18nNumberValuesShape>;
+
+function hasValues(x: I18nNumberProps): x is I18nNumberValuesShape {
+  return x.values != null;
+}
+
+const I18nNumber: React.SFC<I18nNumberProps> = (props) => (
+  <EuiI18nConsumer>
+    {
+      (i18nConfig) => {
+        const formatNumber = i18nConfig.formatNumber || defaultFormatNumber;
+
+        if (hasValues(props)) {
+          return props.children(props.values.map(value => formatNumber(value)));
+        }
+
+        const formattedValue = (formatNumber || defaultFormatNumber)(props.value);
+        if (props.children) {
+          return props.children(formattedValue);
+        } else {
+          return formattedValue;
+        }
+      }
+    }
+  </EuiI18nConsumer>
+);
+
+export { I18nNumber };

src/components/i18n/index.ts

@@ -0,0 +1,2 @@
+export { I18n } from './i18n';
+export { I18nNumber } from './i18n_number';

src/components/index.js

@@ -60,6 +60,11 @@ export {
   EuiComboBox,
 } from './combo_box';
 
+export {
+  EuiContext,
+  EuiI18nConsumer
+} from './context';
+
 export {
   EuiContextMenu,
   EuiContextMenuPanel,
@@ -181,6 +186,11 @@ export {
   EuiImage,
 } from './image';
 
+export {
+  I18n,
+  I18nNumber,
+} from './i18n';
+
 export {
   EuiLoadingKibana,
   EuiLoadingChart,