diff --git a/react-intl/react-intl-1.2.0.d.ts b/react-intl/react-intl-1.2.0.d.ts new file mode 100644 index 000000000..3d7a9b737 --- /dev/null +++ b/react-intl/react-intl-1.2.0.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 + +} diff --git a/react-intl/react-intl-tests-1.2.0.tsx b/react-intl/react-intl-tests-1.2.0.tsx new file mode 100644 index 000000000..d14cd4db8 --- /dev/null +++ b/react-intl/react-intl-tests-1.2.0.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-1.2.0.tsx.tscparams b/react-intl/react-intl-tests-1.2.0.tsx.tscparams new file mode 100644 index 000000000..7cf88bb1b --- /dev/null +++ b/react-intl/react-intl-tests-1.2.0.tsx.tscparams @@ -0,0 +1 @@ +--target es5 --noImplicitAny --experimentalDecorators --jsx react --module commonjs diff --git a/react-intl/react-intl-tests.tsx b/react-intl/react-intl-tests.tsx index 2258343fd..c7907214c 100644 --- a/react-intl/react-intl-tests.tsx +++ b/react-intl/react-intl-tests.tsx @@ -1,138 +1,168 @@ /** - * Created by Bruno Grieder + * Created by Bruno Grieder and Christian Droulers */ -/// -/// -/// - -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 -// -//////////////////////////////////////////////////////////////////////////// +import * as React from "react" +import * as reactMixin from "react-mixin" +import { +IntlProvider, +InjectedIntlProps, +addLocaleData, +hasLocaleData, +injectIntl, +intlShape, +defineMessages, +FormattedRelative, +FormattedMessage, +FormattedHTMLMessage, +FormattedNumber, +FormattedPlural, +FormattedDate, +FormattedTime +} from "react-intl" +import reactIntlEn = require("react-intl/lib/locale-data/en"); -const MESSAGES: {[key: string] : { [lang: string]: string }} = { +addLocaleData(reactIntlEn); +console.log(hasLocaleData("en")); - Sorry: { - 'en-US': 'Sorry {name}', - 'fr-FR': 'Désolé {name}' +interface SomeComponentProps extends InjectedIntlProps { + +} + +class SomeComponent extends React.Component { + static propTypes: React.ValidationMap = { + intl: intlShape.isRequired + }; + public render(): React.ReactElement<{}> { + const formattedDate = this.props.formatDate(new Date(), { format: "short" }); + const formattedTime = this.props.formatTime(new Date(), { format: "short" }); + const formattedRelative = this.props.formatRelative(new Date().getTime(), { format: "short" }); + const formattedNumber = this.props.formatNumber(123, { format: "short" }); + const formattedPlural = this.props.formatPlural(1, { one: "hai!" }); + const formattedMessage = this.props.formatMessage({ id: "hello", defaultMessage: "Hello {name}!" }, { name: "Roger" }); + const formattedHTMLMessage = this.props.formatHTMLMessage({ id: "hello", defaultMessage: "Hello {name}!" }, { name: "Roger" }); + return
+ + + + + + + + + + + + + + + + + + {(formattedNum: string) => ( + {formattedNum} + ) } + +
} } +class TestApp extends React.Component<{}, {}> { + public render(): React.ReactElement<{}> { + const definedMessages = defineMessages({ + "sup": { + id: "sup", + defaultMessage: "Hai mom" + } + }); -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; } - ) + const messages = { + "hello": "Hello, {name}!" } - } - -} - -/////////////////////////////////////////////////////////////////////////// -// -// 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 */} -
  • -
- - ) + return ( + + ) } } -export { I18nDirect, I18nMixin } +export default { + TestApp, + SomeComponent: injectIntl(SomeComponent) +} \ No newline at end of file diff --git a/react-intl/react-intl-tests.tsx.tscparams b/react-intl/react-intl-tests.tsx.tscparams index c90abf04f..7cf88bb1b 100644 --- a/react-intl/react-intl-tests.tsx.tscparams +++ b/react-intl/react-intl-tests.tsx.tscparams @@ -1 +1 @@ ---target es5 --noImplicitAny --experimentalDecorators --jsx react +--target es5 --noImplicitAny --experimentalDecorators --jsx react --module commonjs diff --git a/react-intl/react-intl.d.ts b/react-intl/react-intl.d.ts index 3d7a9b737..b216a7dc8 100644 --- a/react-intl/react-intl.d.ts +++ b/react-intl/react-intl.d.ts @@ -1,99 +1,239 @@ -// Type definitions for react-intl 1.2.0 +// Type definitions for react-intl 2.0.0-beta1 // Project: http://formatjs.io/react/ -// Definitions by: Bruno Grieder +// Definitions by: Bruno Grieder , Christian Droulers // 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 {} +declare module ReactIntl { + import React = __React; + interface Locale { + locale: string; + fields?: { [key: string]: string }, + pluralRuleFunction?: (n: number, ord: boolean) => string; } - export = ReactIntl + function injectIntl(clazz: T): T; + function addLocaleData(data: Locale[] | Locale): void; + + function hasLocaleData(localeName: string): boolean; + + interface Messages { + [key: string]: FormattedMessage.MessageDescriptor + } + + function defineMessages(messages: Messages): T; + + interface IntlShape extends React.Requireable { + } + + var intlShape: IntlShape; + + interface FormatConfig { + locale?: string; + formats?: any; + } + + interface InjectedIntlProps { + formatDate?: (date: Date, options?: FormattedDate.PropsBase) => string; + formatTime?: (date: Date, options?: FormattedTime.PropsBase) => string; + formatRelative?: (value: number, options?: FormattedRelative.PropsBase) => string; + formatNumber?: (value: number, options?: FormattedNumber.PropsBase) => string; + formatPlural?: (value: number, options?: FormattedPlural.PropsBase) => string; + formatMessage?: (messageDescriptor: FormattedMessage.MessageDescriptor, values?: Object) => string; + formatHTMLMessage?: (messageDescriptor: FormattedMessage.MessageDescriptor, values?: Object) => string; + } + + module IntlComponent { + interface DateTimeFormatProps { + /* + * one of "best fit" (default) | "lookup" + */ + localeMatcher?: string; + /* + * one of "basic" (default) | "best fit" + */ + formatMatcher?: string; + timeZone?: string, + hour12?: boolean; + /* + * one of "narrow" (default) | "short" | "long" + */ + weekday?: string; + /* + * one of "narrow" (default) | "short" | "long" + */ + era?: string; + /* + * one of "numeric" (default) | "2-digit" + */ + year?: string; + /* + * one of "numeric" (default) | "2-digit" | "narrow" | "short" | "long" + */ + month?: string; + /* + * one of "numeric" (default) | "2-digit" + */ + day?: string; + /* + * one of "numeric" (default) | "2-digit" + */ + hour?: string; + /* + * one of "numeric" (default) | "2-digit" + */ + minute?: string; + /* + * one of "numeric" (default) | "2-digit" + */ + second?: string; + /* + * one of "short" (default) | "long" + */ + timeZoneName?: string; + } + } + + + module FormattedDate { + export interface PropsBase extends IntlComponent.DateTimeFormatProps { + format?: string; + } + + export interface Props extends PropsBase { + value: Date; + } + } + class FormattedDate extends React.Component { } + + + module FormattedTime { + export interface PropsBase extends IntlComponent.DateTimeFormatProps { + format?: string; + } + + export interface Props extends PropsBase { + value: Date; + } + } + class FormattedTime extends React.Component { } + + + module FormattedRelative { + export interface PropsBase { + /* + * one of "second", "minute", "hour", "day", "month" or "year" + */ + units?: string; + /* + * one of "best fit" (default) | "numeric" + */ + style?: string; + format?: string; + updateInterval?: number; + initialNow?: any; + } + + export interface Props extends PropsBase { + value: number; + } + } + class FormattedRelative extends React.Component { } + + + module FormattedMessage { + export interface MessageDescriptor { + id: string; + description?: string; + defaultMessage?: string; + } + + export interface Props extends MessageDescriptor { + values?: Object; + tagName?: string; + } + } + class FormattedMessage extends React.Component { } + + + class FormattedHTMLMessage extends React.Component { } + + + module FormattedNumber { + export interface PropsBase { + format?: string; + /* + * one of "best fit" (default) | "lookup" + */ + localeMatcher?: string; + /* + * one of "decimal" (default) | "currency" | "percent" + */ + style?: string; + currency?: string, + /* + * one of "symbol" (default) | "code" | "name" + */ + currencyDisplay?: string; + useGrouping?: boolean; + minimumIntegerDigits?: number; + minimumFractionDigits?: number; + maximumFractionDigits?: number; + minimumSignificantDigits?: number; + maximumSignificantDigits?: number; + } + + export interface Props extends PropsBase { + value: number; + } + } + class FormattedNumber extends React.Component { } + + + module FormattedPlural { + export interface PropsBase { + /* + * one of "cardinal" (default) | "ordinal" + */ + style?: string; + other?: any; + zero?: any; + one?: any; + two?: any; + few?: any; + many?: any; + } + + export interface Props extends PropsBase { + value: number; + } + } + class FormattedPlural extends React.Component { } + + + module IntlProvider { + export interface Props { + locale?: string; + formats?: Object; + messages?: Object; + defaultLocale?: string; + defaultFormats?: Object; + } + } + class IntlProvider extends React.Component { } + + class LocaleData extends Array { + } } + +declare module "react-intl" { + export = ReactIntl +} + +declare module "react-intl/lib/locale-data/en" { + var data: ReactIntl.LocaleData; + export = data; +} \ No newline at end of file