added I18nNumber

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)
           )
         ]
       );

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

@@ -7,11 +7,13 @@ import {
   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',
@@ -28,7 +30,8 @@ export default class extends Component {
 
   render() {
     const i18n = {
-      mapping: mappings[this.state.language]
+      mapping: mappings[this.state.language],
+      formatNumber: (value) => new Intl.NumberFormat(this.state.language).format(value),
     };
 
     return (
@@ -43,6 +46,10 @@ export default class extends Component {
 
           <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"/>

src/components/context/context.tsx

@@ -5,7 +5,7 @@ export interface I18nShape {
     [key: string]: ReactChild;
   };
   formatNumber?: (x: number) => string;
-  formatDate?: (x: Date) => string;
+  formatDateTime?: (x: Date) => string;
 }
 
 const I18nContext: React.Context<I18nShape> = createContext({});

src/components/i18n/i18n_number.tsx

@@ -0,0 +1,31 @@
+import React, { ReactChild, ReactElement } from 'react';
+import { EuiI18nConsumer } from '../context';
+
+const defaultFormatter = new Intl.NumberFormat('en');
+function defaultFormatNumber(value: number) {
+  return defaultFormatter.format(value);
+}
+
+interface I18nNumberProps {
+  value: number;
+  default: ReactChild;
+  children?: (x: ReactChild) => ReactElement<any>;
+}
+
+const I18nNumber: React.SFC<I18nNumberProps> = ({value, children}) => (
+  <EuiI18nConsumer>
+    {
+      (i18nConfig) => {
+        const { formatNumber } = i18nConfig;
+        const formattedValue = (formatNumber || defaultFormatNumber)(value);
+        if (children) {
+          return children(formattedValue);
+        } else {
+          return formattedValue;
+        }
+      }
+    }
+  </EuiI18nConsumer>
+);
+
+export { I18nNumber };

src/components/i18n/index.ts

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

src/components/index.js

@@ -188,6 +188,7 @@ export {
 
 export {
   I18n,
+  I18nNumber,
 } from './i18n';
 
 export {