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

fix type definitions for prop injection

Browse Source
This commit is contained in:
Fedor Nezhivoi
2016-11-16 11:13:37 +02:00
parent 96896fe428
commit 2bdf986666
2 changed files with 33 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
react-intl/index.d.ts vendored
View File

@@ -1,6 +1,6 @@
// Type definitions for react-intl 2.0.0
// Type definitions for react-intl 2.1.5
// Project: http://formatjs.io/react/
// Definitions by: Bruno Grieder <https://github.com/bgrieder>, Christian Droulers <https://github.com/cdroulers>
// Definitions by: Bruno Grieder <https://github.com/bgrieder>, Christian Droulers <https://github.com/cdroulers>, Fedor Nezhivoi <https://github.com/gyzerok>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
///<reference types="react" />
@@ -12,7 +12,7 @@ declare namespace ReactIntl {
pluralRuleFunction?: (n: number, ord: boolean) => string;
}
function injectIntl<T>(clazz: T): T;
function injectIntl<TOriginalProps, TOwnProps>(component: React.ComponentClass<TOriginalProps> | React.StatelessComponent<TOriginalProps>): React.ComponentClass<TOwnProps>;
function addLocaleData(data: Locale[] | Locale): void;
@@ -34,14 +34,14 @@ declare namespace ReactIntl {
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;
interface InjectedIntl {
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;
}
namespace IntlComponent {

38
react-intl/react-intl-tests.tsx
View File

@@ -1,5 +1,6 @@
/**
* Created by Bruno Grieder and Christian Droulers
* Updated by Fedor Nezhivoi
*/
///<reference types="react" />
@@ -9,7 +10,7 @@ import * as reactMixin from "react-mixin"
import {
IntlProvider,
InjectedIntlProps,
InjectedIntl,
addLocaleData,
hasLocaleData,
injectIntl,
@@ -29,22 +30,23 @@ import reactIntlEn = require("react-intl/locale-data/en");
addLocaleData(reactIntlEn);
console.log(hasLocaleData("en"));
interface SomeComponentProps extends InjectedIntlProps {
interface SomeComponentProps {
intl: InjectedIntl
}
class SomeComponent extends React.Component<SomeComponentProps, {}> {
class SomeComponent extends React.Component<SomeComponentProps, void> {
static propTypes: React.ValidationMap<any> = {
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 <strong>{name}</strong>!" }, { name: "Roger" });
const intl = this.props.intl;
const formattedDate = intl.formatDate(new Date(), { format: "short" });
const formattedTime = intl.formatTime(new Date(), { format: "short" });
const formattedRelative = intl.formatRelative(new Date().getTime(), { format: "short" });
const formattedNumber = intl.formatNumber(123, { format: "short" });
const formattedPlural = intl.formatPlural(1, { one: "hai!" });
const formattedMessage = intl.formatMessage({ id: "hello", defaultMessage: "Hello {name}!" }, { name: "Roger" });
const formattedHTMLMessage = intl.formatHTMLMessage({ id: "hello", defaultMessage: "Hello <strong>{name}</strong>!" }, { name: "Roger" });
return <div>
<FormattedRelative
value={new Date().getTime() }
@@ -142,6 +144,8 @@ class SomeComponent extends React.Component<SomeComponentProps, {}> {
}
}
const SomeComponentWithIntl = injectIntl(SomeComponent);
class TestApp extends React.Component<{}, {}> {
public render(): React.ReactElement<{}> {
const definedMessages = defineMessages({
@@ -153,14 +157,16 @@ class TestApp extends React.Component<{}, {}> {
const messages = {
"hello": "Hello, {name}!"
}
return (<IntlProvider locale="en" formats={{}} messages={messages} defaultLocale="en" defaultFormats={messages}>
<SomeComponent />
</IntlProvider>)
};
return (
<IntlProvider locale="en" formats={{}} messages={messages} defaultLocale="en" defaultFormats={messages}>
<SomeComponentWithIntl />
</IntlProvider>
);
}
}
export default {
TestApp,
SomeComponent: injectIntl(SomeComponent)
SomeComponent: SomeComponentWithIntl
}