diff --git a/react-intl/react-intl-tests.tsx b/react-intl/react-intl-tests.tsx new file mode 100644 index 000000000..2258343fd --- /dev/null +++ b/react-intl/react-intl-tests.tsx @@ -0,0 +1,138 @@ +/** + * Created by Bruno Grieder + */ + +/// +/// +/// + +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 +// +//////////////////////////////////////////////////////////////////////////// + + +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 { + + private _currentLocale: string + private _messages: {[key: string]: string} + + constructor( props: I18nDirect.Props ) { + super( props ) + } + + + render() { + + return ( + +
    +
  • FormattedNumber:  + +
  • +
  • FormattedMessage:  + +
  • +
  • FormattedDate:  + +
  • +
+ + ) + } + + 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 +// +//////////////////////////////////////////////////////////////////////////// + + +module I18nMixin { + + export interface Props extends IntlComponent.Props {} +} + +@reactMixin.decorate( IntlMixin ) +class I18nMixin extends React.Component 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 ( + +
    +
  • FormattedNumber: + +
  • +
  • FormattedMessage: + {/* this uses the mixin */} +
  • +
+ + ) + } +} + +export { I18nDirect, I18nMixin } diff --git a/react-intl/react-intl-tests.tsx.tscparams b/react-intl/react-intl-tests.tsx.tscparams new file mode 100644 index 000000000..c90abf04f --- /dev/null +++ b/react-intl/react-intl-tests.tsx.tscparams @@ -0,0 +1 @@ +--target es5 --noImplicitAny --experimentalDecorators --jsx react diff --git a/react-intl/react-intl.d.ts b/react-intl/react-intl.d.ts new file mode 100644 index 000000000..3d7a9b737 --- /dev/null +++ b/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 +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +/// + +declare module "react-intl" { + + import * as React from 'react' + + module ReactIntl { + + + interface IIntlMixin extends React.Mixin { + 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 {} + + + module FormattedTime { + export interface Props extends IntlComponent.Props { + value: Date + day?: string + month?: string + year?: string + format?: string + } + } + class FormattedTime extends React.Component {} + + + 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 {} + + + module FormattedMessage { + export interface Props extends IntlComponent.Props { + message: string; + [prop: string]: any + } + } + class FormattedMessage extends React.Component {} + + + module FormattedHTMLMessage { + export interface Props extends IntlComponent.Props { + message: string; + [prop: string]: any + } + } + class FormattedHTMLMessage extends React.Component {} + + + module FormattedNumber { + export interface Props extends IntlComponent.Props { + value: number + style?: string + currency?: string + format?: string + } + } + class FormattedNumber extends React.Component {} + + } + + export = ReactIntl + +}