Merge pull request #6303 from bgrieder/master

Definitions for react-intl 1.2.0

react-intl/react-intl-tests.tsx

@@ -0,0 +1,138 @@
+/**
+ * Created by Bruno Grieder
+ */
+
+///<reference path='../react/react.d.ts' />
+///<reference path='../react-mixin/react-mixin.d.ts' />
+///<reference path='../react-intl/react-intl.d.ts' />
+
+import * as React from 'react'
+
+import * as reactMixin from 'react-mixin'
+import {IntlMixin, IntlComponent, FormattedNumber, FormattedMessage, FormattedDate} from 'react-intl'
+
+
+///////////////////////////////////////////////////////////////////////////
+//
+// This class does not use the mixin and react-mixin is not required
+// The MESSAGES are maintained in the file
+// To use it call <I18nDirect locales={['en-US']}/>
+//
+////////////////////////////////////////////////////////////////////////////
+
+
+const MESSAGES: {[key: string] : { [lang: string]: string }} = {
+
+    Sorry: {
+        'en-US': 'Sorry {name}',
+        'fr-FR': 'Désolé {name}'
+    }
+}
+
+
+module I18nDirect {
+
+    export interface Props extends IntlComponent.Props {}
+}
+
+class I18nDirect extends React.Component<I18nDirect.Props, any> {
+
+    private _currentLocale: string
+    private _messages: {[key: string]: string}
+
+    constructor( props: I18nDirect.Props ) {
+        super( props )
+    }
+
+
+    render() {
+
+        return (
+
+            <ul>
+                <li>FormattedNumber:&nbsp;
+                    <FormattedNumber value={99.95} style="currency" currency="USD"/>
+                </li>
+                <li>FormattedMessage:&nbsp;
+                    <FormattedMessage message={this._messages['Sorry']} name='Dave'/>
+                </li>
+                <li>FormattedDate:&nbsp;
+                    <FormattedDate value={new Date()}/>
+                </li>
+            </ul>
+
+        )
+    }
+
+    componentWillReceiveProps( nextProps: I18nDirect.Props ) {
+        this.compileMessages(nextProps)
+    }
+
+    componentWillMount() {
+        this.compileMessages(this.props)
+    }
+
+
+    private compileMessages = (props: I18nDirect.Props): void => {
+
+        let locale: string = ( props.locales && props.locales[ 0 ] ) || 'en-US'
+
+        if (this._currentLocale !== locale) {
+
+            this._messages = Object.keys( MESSAGES ).reduce(
+                ( dic , key ) => {
+                    dic[ key ] = MESSAGES[ key ][ locale ]
+                    return dic
+                },
+                {} as { [key: string]: string; }
+            )
+        }
+    }
+
+}
+
+///////////////////////////////////////////////////////////////////////////
+//
+// This class uses the mixin and react-mixin is
+// The MESSAGES are passed from messages property of the props
+// To use it call <I18nMixin {...props}/>
+//
+////////////////////////////////////////////////////////////////////////////
+
+
+module I18nMixin {
+
+    export interface Props extends IntlComponent.Props {}
+}
+
+@reactMixin.decorate( IntlMixin )
+class I18nMixin extends React.Component<I18nMixin.Props, any> implements IntlComponent {
+
+    private _currentLocale: string
+
+    constructor( props: I18nMixin.Props ) {
+        super( props )
+    }
+
+    //Expose the method provided by the Mixin
+    getIntlMessage: (key: string) => string =  this['getIntlMessage']
+
+
+    render() {
+
+        return (
+
+            <ul>
+                <li>FormattedNumber:
+                    <FormattedNumber value={99.95} style="currency" currency="USD"/>
+                </li>
+                <li>FormattedMessage:
+                    <FormattedMessage message={this.getIntlMessage('Sorry')} name='Dave'/> {/* this uses the mixin */}
+                </li>
+            </ul>
+
+        )
+    }
+}
+
+export { I18nDirect, I18nMixin }

react-intl/react-intl-tests.tsx.tscparams

@@ -0,0 +1 @@
+--target es5 --noImplicitAny --experimentalDecorators --jsx react

react-intl/react-intl.d.ts

@@ -0,0 +1,99 @@
+// Type definitions for react-intl 1.2.0
+// Project: http://formatjs.io/react/
+// Definitions by: Bruno Grieder <https://github.com/bgrieder>
+// Definitions: https://github.com/borisyankov/DefinitelyTyped
+
+///<reference path='../react/react.d.ts' />
+
+declare module "react-intl" {
+
+    import * as React from 'react'
+
+    module ReactIntl {
+
+
+        interface IIntlMixin extends React.Mixin<any,any> {
+            getIntlMessage(key: string): string
+        }
+
+        var IntlMixin: IIntlMixin
+
+        module IntlComponent {
+            interface Props {
+                locales?: string[]
+                messages?: {[key: string]: any}
+                formats?: string[]
+            }
+        }
+        interface IntlComponent {
+            getIntlMessage(key: string): string;
+        }
+
+
+        module FormattedDate {
+            export interface Props extends IntlComponent.Props {
+                value: Date
+                day?: string
+                month?: string
+                year?: string
+            }
+        }
+        class FormattedDate extends React.Component<FormattedDate.Props,any> {}
+
+
+        module FormattedTime {
+            export interface Props extends IntlComponent.Props  {
+                value: Date
+                day?: string
+                month?: string
+                year?: string
+                format?: string
+            }
+        }
+        class FormattedTime extends React.Component<FormattedTime.Props,any> {}
+
+
+        module FormattedRelative {
+            export interface Props extends IntlComponent.Props  {
+                value: number
+                units?: string //"second", "minute", "hour", "day", "month" or "year"
+                style?: string //"best fit" (default) or "numeric"
+                format?: string
+            }
+        }
+        class FormattedRelative extends React.Component<FormattedRelative.Props,any> {}
+
+
+        module FormattedMessage {
+            export interface Props extends IntlComponent.Props  {
+                message: string;
+                [prop: string]: any
+            }
+        }
+        class FormattedMessage extends React.Component<FormattedMessage.Props,any> {}
+
+
+        module FormattedHTMLMessage {
+            export interface Props extends IntlComponent.Props  {
+                message: string;
+                [prop: string]: any
+            }
+        }
+        class FormattedHTMLMessage extends React.Component<FormattedHTMLMessage.Props,any> {}
+
+
+        module FormattedNumber {
+            export interface Props extends IntlComponent.Props  {
+                value: number
+                style?: string
+                currency?: string
+                format?: string
+            }
+        }
+        class FormattedNumber extends React.Component<FormattedNumber.Props,any> {}
+
+    }
+
+    export  = ReactIntl
+
+}