kylefang/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/zhigang1992/DefinitelyTyped.git synced 2026-05-16 02:57:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #17133 from kristerkari/feature/add-linting-and-allow-dates-and-bools-in-formatted-messages

Browse Source 
[react-intl] Enable linting and allow booleans, dates, numbers and strings when formatting a message
This commit is contained in:
Daniel Rosenwasser
2017-06-15 00:19:32 -07:00
committed by GitHub
parent 028efe1030 81e990d1d7
commit 864b982842
3 changed files with 55 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
types/react-intl/index.d.ts vendored
View File

@@ -1,22 +1,22 @@
// Type definitions for react-intl 2.2
// Type definitions for react-intl 2.3
// Project: http://formatjs.io/react/
// Definitions by: Bruno Grieder <https://github.com/bgrieder>,
// Christian Droulers <https://github.com/cdroulers>,
// Fedor Nezhivoi <https://github.com/gyzerok>,
// Till Wolff <https://github.com/tillwolff>,
// Karol Janyst <https://github.com/LKay>,
// Brian Houser <https://github.com/bhouser>
// Brian Houser <https://github.com/bhouser>,
// Krister Kari <https://github.com/kristerkari>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.1
declare namespace ReactIntl {
type DateSource = Date | string | number;
interface Locale {
locale: string;
fields?: { [key: string]: string },
pluralRuleFunction?: (n: number, ord: boolean) => string;
fields?: { [key: string]: string };
pluralRuleFunction?(n: number, ord: boolean): string;
}
type LocaleData = Locale[];
@@ -26,7 +26,7 @@ declare namespace ReactIntl {
withRef?: boolean;
}
type ComponentConstructor<P> = React.ComponentClass<P> | React.StatelessComponent<P>
type ComponentConstructor<P> = React.ComponentClass<P> | React.StatelessComponent<P>;
function injectIntl<P>(component: ComponentConstructor<P & InjectedIntlProps>, options?: InjectIntlConfig):
React.ComponentClass<P> & { WrappedComponent: ComponentConstructor<P & InjectedIntlProps> };
@@ -34,7 +34,7 @@ declare namespace ReactIntl {
function addLocaleData(data: Locale[] | Locale): void;
interface Messages {
[key: string]: FormattedMessage.MessageDescriptor
[key: string]: FormattedMessage.MessageDescriptor;
}
function defineMessages<T extends Messages>(messages: T): T;
@@ -64,19 +64,19 @@ declare namespace ReactIntl {
const intlShape: IntlShape;
interface InjectedIntl {
formatDate: (value: DateSource, options?: FormattedDate.PropsBase) => string;
formatTime: (value: DateSource, options?: FormattedTime.PropsBase) => string;
formatRelative: (value: DateSource, options?: FormattedRelative.PropsBase & { now?: any }) => string;
formatNumber: (value: number, options?: FormattedNumber.PropsBase) => string;
formatPlural: (value: number, options?: FormattedPlural.Base) => keyof FormattedPlural.PropsBase;
formatMessage: (messageDescriptor: FormattedMessage.MessageDescriptor, values?: {[key: string]: string | number}) => string;
formatHTMLMessage: (messageDescriptor: FormattedMessage.MessageDescriptor, values?: {[key: string]: string}) => string;
formatDate(value: DateSource, options?: FormattedDate.PropsBase): string;
formatTime(value: DateSource, options?: FormattedTime.PropsBase): string;
formatRelative(value: DateSource, options?: FormattedRelative.PropsBase & { now?: any }): string;
formatNumber(value: number, options?: FormattedNumber.PropsBase): string;
formatPlural(value: number, options?: FormattedPlural.Base): keyof FormattedPlural.PropsBase;
formatMessage(messageDescriptor: FormattedMessage.MessageDescriptor, values?: {[key: string]: string | number | boolean | Date}): string;
formatHTMLMessage(messageDescriptor: FormattedMessage.MessageDescriptor, values?: {[key: string]: string | number | boolean | Date}): string;
locale: string;
formats: any;
messages: { [id: string]: string };
defaultLocale: string;
defaultFormats: any;
now : () => number;
now(): number;
}
interface InjectedIntlProps {
@@ -90,9 +90,9 @@ declare namespace ReactIntl {
}
namespace FormattedDate {
export interface PropsBase extends IntlComponent.DateTimeFormatProps {}
type PropsBase = IntlComponent.DateTimeFormatProps;
export interface Props extends PropsBase {
interface Props extends PropsBase {
value: DateSource;
}
}
@@ -100,16 +100,16 @@ declare namespace ReactIntl {
class FormattedDate extends React.Component<FormattedDate.Props, any> { }
namespace FormattedTime {
export interface PropsBase extends IntlComponent.DateTimeFormatProps {}
type PropsBase = IntlComponent.DateTimeFormatProps;
export interface Props extends PropsBase {
interface Props extends PropsBase {
value: DateSource;
}
}
class FormattedTime extends React.Component<FormattedTime.Props, any> { }
namespace FormattedRelative {
export interface PropsBase {
interface PropsBase {
/*
* one of "second", "minute", "hour", "day", "month" or "year"
*/
@@ -123,7 +123,7 @@ declare namespace ReactIntl {
initialNow?: any;
}
export interface Props extends PropsBase {
interface Props extends PropsBase {
value: DateSource;
}
}
@@ -131,13 +131,13 @@ declare namespace ReactIntl {
class FormattedRelative extends React.Component<FormattedRelative.Props, any> { }
namespace FormattedMessage {
export interface MessageDescriptor {
interface MessageDescriptor {
id: string;
description?: string;
defaultMessage?: string;
}
export interface Props extends MessageDescriptor {
interface Props extends MessageDescriptor {
values?: {[key: string]: string | number | JSX.Element};
tagName?: string;
}
@@ -147,26 +147,25 @@ declare namespace ReactIntl {
class FormattedHTMLMessage extends React.Component<FormattedMessage.Props, any> { }
namespace FormattedNumber {
export interface PropsBase extends Intl.NumberFormatOptions {
interface PropsBase extends Intl.NumberFormatOptions {
format?: string;
}
export interface Props extends PropsBase {
interface Props extends PropsBase {
value: number;
}
}
class FormattedNumber extends React.Component<FormattedNumber.Props, any> { }
namespace FormattedPlural {
export interface Base {
interface Base {
/*
* one of "cardinal" (default) | "ordinal"
*/
style?: "cardinal" | "ordinal";
}
export interface PropsBase extends Base {
interface PropsBase extends Base {
other?: any;
zero?: any;
one?: any;
@@ -175,15 +174,14 @@ declare namespace ReactIntl {
many?: any;
}
export interface Props extends PropsBase {
interface Props extends PropsBase {
value: number;
}
}
class FormattedPlural extends React.Component<FormattedPlural.Props, any> { }
namespace IntlProvider {
export interface Props {
interface Props {
locale?: string;
formats?: any;
messages?: any;
@@ -196,12 +194,12 @@ declare namespace ReactIntl {
class IntlProvider extends React.Component<IntlProvider.Props, any> {
getChildContext(): {
intl: InjectedIntl;
}
};
}
}
declare module "react-intl" {
export = ReactIntl
export = ReactIntl;
}
declare module "react-intl/locale-data/af" {

34
types/react-intl/react-intl-tests.tsx
View File

@@ -3,8 +3,8 @@
* Updated by Fedor Nezhivoi
*/
import * as React from "react"
import * as reactMixin from "react-mixin"
import * as React from "react";
import * as reactMixin from "react-mixin";
import {
IntlProvider,
@@ -21,14 +21,14 @@ import {
FormattedPlural,
FormattedDate,
FormattedTime
} from "react-intl"
} from "react-intl";
import reactIntlEn = require("react-intl/locale-data/en");
addLocaleData(reactIntlEn);
interface SomeComponentProps {
className: string
className: string;
}
const SomeFunctionalComponentWithIntl: React.ComponentClass<SomeComponentProps> = injectIntl<SomeComponentProps>(({
@@ -51,7 +51,10 @@ const SomeFunctionalComponentWithIntl: React.ComponentClass<SomeComponentProps>
const formattedNumber = formatNumber(123, { format: "short" });
const formattedPlural = formatPlural(1, { style: "ordinal" });
const formattedMessage = formatMessage({ id: "hello", defaultMessage: "Hello {name}!" }, { name: "Roger" });
const formattedMessagePlurals = formatMessage({ id: "hello", defaultMessage: "Hello {name} you have {unreadCount, number} {unreadCount, plural, one {message} other {messages}}!" }, { name: "Roger", unreadCount: 123 });
const formattedMessagePlurals = formatMessage({
id: "hello",
defaultMessage: "Hello {name} you have {unreadCount, number} {unreadCount, plural, one {message} other {messages}}!" },
{ name: "Roger", unreadCount: 123 });
const formattedHTMLMessage = formatHTMLMessage({ id: "hello", defaultMessage: "Hello <strong>{name}</strong>!" }, { name: "Roger" });
return (
<div className={className}>
@@ -71,8 +74,17 @@ class SomeComponent extends React.Component<SomeComponentProps & InjectedIntlPro
const formattedNumber = intl.formatNumber(123, { format: "short" });
const formattedPlural = intl.formatPlural(1, { style: "ordinal" });
const formattedMessage = intl.formatMessage({ id: "hello", defaultMessage: "Hello {name}!" }, { name: "Roger" });
const formattedMessagePlurals = intl.formatMessage({ id: "hello", defaultMessage: "Hello {name} you have {unreadCount, number} {unreadCount, plural, one {message} other {messages}}!" }, { name: "Roger", unreadCount: 123 });
const formattedMessageNumber = intl.formatMessage({ id: "hello", defaultMessage: "Hello {num}!" }, { num: 1 });
const formattedMessageDate = intl.formatMessage({ id: "hello", defaultMessage: "Hello {date}!" }, { date: new Date() });
const formattedMessageBool = intl.formatMessage({ id: "hello", defaultMessage: "Hello {bool}!" }, { bool: true });
const formattedMessagePlurals = intl.formatMessage({
id: "hello",
defaultMessage: "Hello {name} you have {unreadCount, number} {unreadCount, plural, one {message} other {messages}}!" },
{ name: "Roger", unreadCount: 123 });
const formattedHTMLMessage = intl.formatHTMLMessage({ id: "hello", defaultMessage: "Hello <strong>{name}</strong>!" }, { name: "Roger" });
const formattedHTMLMessageNumber = intl.formatHTMLMessage({ id: "hello", defaultMessage: "Hello <strong>{num}</strong>!" }, { num: 1 });
const formattedHTMLMessageDate = intl.formatHTMLMessage({ id: "hello", defaultMessage: "Hello <strong>{date}</strong>!" }, { date: new Date() });
const formattedHTMLMessageBool = intl.formatHTMLMessage({ id: "hello", defaultMessage: "Hello <strong>{bool}</strong>!" }, { bool: true });
return <div className={this.props.className}>
<FormattedRelative
value={new Date().getTime()}
@@ -221,7 +233,7 @@ class SomeComponent extends React.Component<SomeComponentProps & InjectedIntlPro
<span className="number">{formattedNum}</span>
)}
</FormattedNumber>
</div>
</div>;
}
}
@@ -230,14 +242,14 @@ const SomeComponentWithIntl = injectIntl(SomeComponent);
class TestApp extends React.Component<{}, {}> {
render(): React.ReactElement<{}> {
const definedMessages = defineMessages({
"sup": {
sup: {
id: "sup",
defaultMessage: "Hai mom"
}
});
const messages = {
"hello": "Hello, {name}!"
hello: "Hello, {name}!"
};
return (
<IntlProvider locale="en" formats={{}} messages={messages} defaultLocale="en" defaultFormats={messages}>
@@ -250,9 +262,9 @@ class TestApp extends React.Component<{}, {}> {
const intlProvider = new IntlProvider({ locale: 'en' }, {});
const { intl } = intlProvider.getChildContext();
const wrappedComponent = <SomeComponentWithIntl.WrappedComponent className="test" intl={intl}/>
const wrappedComponent = <SomeComponentWithIntl.WrappedComponent className="test" intl={intl}/>;
export default {
TestApp,
SomeComponent: SomeComponentWithIntl
}
};

1
types/react-intl/tslint.json Normal file
View File

@@ -0,0 +1 @@
{ "extends": "dtslint/dt.json" }