mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2025-10-16 12:05:41 +00:00
deprecate react-intl types (#37388)
* deprecate react-intl types * fix tsconfig * change TS version
This commit is contained in:
parent
0c3b31c7b9
commit
13f400451a
@ -2850,6 +2850,12 @@
|
||||
"sourceRepoURL": "https://www.npmjs.com/package/react-icons",
|
||||
"asOfVersion": "3.0.0"
|
||||
},
|
||||
{
|
||||
"libraryName": "react-intl",
|
||||
"typingsPackageName": "react-intl",
|
||||
"sourceRepoURL": "https://github.com/formatjs/react-intl",
|
||||
"asOfVersion": "3.0.0"
|
||||
},
|
||||
{
|
||||
"libraryName": "react-monaco-editor",
|
||||
"typingsPackageName": "react-monaco-editor",
|
||||
|
||||
2
types/react-intl-redux/index.d.ts
vendored
2
types/react-intl-redux/index.d.ts
vendored
@ -2,7 +2,7 @@
|
||||
// Project: https://github.com/ratson/react-intl-redux
|
||||
// Definitions by: Karol Janyst <https://github.com/LKay>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 3.0
|
||||
// TypeScript Version: 3.3
|
||||
|
||||
import { Action, AnyAction } from "redux"
|
||||
import { Provider as ReduxProvider } from "react-redux"
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
{
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"redux": "^4.0.0"
|
||||
"redux": "^4.0.0",
|
||||
"react-intl": "^3"
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,7 +3,10 @@
|
||||
"module": "commonjs",
|
||||
"lib": [
|
||||
"es6",
|
||||
"dom"
|
||||
"dom",
|
||||
"es2017.intl",
|
||||
"es2018.intl",
|
||||
"esnext.intl"
|
||||
],
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
@ -22,4 +25,4 @@
|
||||
"index.d.ts",
|
||||
"react-intl-redux-tests.tsx"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
1383
types/react-intl/index.d.ts
vendored
1383
types/react-intl/index.d.ts
vendored
File diff suppressed because it is too large
Load Diff
@ -1,434 +0,0 @@
|
||||
/**
|
||||
* Created by Bruno Grieder and Christian Droulers
|
||||
* Updated by Fedor Nezhivoi
|
||||
*/
|
||||
|
||||
import * as React from "react";
|
||||
import * as PropTypes from "prop-types";
|
||||
import * as reactMixin from "react-mixin";
|
||||
|
||||
import {
|
||||
IntlProvider,
|
||||
InjectedIntl,
|
||||
InjectedIntlProps,
|
||||
addLocaleData,
|
||||
injectIntl,
|
||||
intlShape,
|
||||
defineMessages,
|
||||
FormattedRelative,
|
||||
FormattedMessage,
|
||||
FormattedHTMLMessage,
|
||||
FormattedNumber,
|
||||
FormattedPlural,
|
||||
FormattedDate,
|
||||
FormattedTime
|
||||
} from "react-intl";
|
||||
|
||||
import reactIntlEn = require("react-intl/locale-data/en");
|
||||
|
||||
addLocaleData(reactIntlEn);
|
||||
|
||||
interface SomeComponentProps {
|
||||
className: string;
|
||||
}
|
||||
|
||||
const SomeFunctionalComponentWithIntl: React.ComponentClass<SomeComponentProps> = injectIntl<SomeComponentProps & InjectedIntlProps>(({
|
||||
intl: {
|
||||
formatDate,
|
||||
formatHTMLMessage,
|
||||
formatNumber,
|
||||
formatMessage,
|
||||
formatPlural,
|
||||
formatRelative,
|
||||
formatTime,
|
||||
locale,
|
||||
defaultLocale
|
||||
},
|
||||
className
|
||||
}) => {
|
||||
const formattedDate = formatDate(new Date(), { format: "short" });
|
||||
const formattedTime = formatTime(new Date(), { format: "short" });
|
||||
const formattedRelative = formatRelative(new Date().getTime(), { format: "short" });
|
||||
const formattedNumber = formatNumber(123, { format: "short" });
|
||||
const formattedPlural = formatPlural(1, { style: "ordinal" });
|
||||
const formattedMessage = formatMessage({ id: "hello", defaultMessage: "Hello {name}!" }, { name: "Roger", nullAllowed: null, undefinedAllowed: undefined });
|
||||
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", nullAllowed: null, undefinedAllowed: undefined });
|
||||
return (
|
||||
<div className={className}>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
class SomeComponent extends React.Component<SomeComponentProps & InjectedIntlProps> {
|
||||
static propTypes: React.ValidationMap<SomeComponentProps & InjectedIntlProps> = {
|
||||
intl: intlShape.isRequired,
|
||||
className: PropTypes.string.isRequired
|
||||
};
|
||||
render(): React.ReactElement<{}> {
|
||||
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, { style: "ordinal" });
|
||||
const formattedMessage = intl.formatMessage({ id: "hello", defaultMessage: "Hello {name}!" }, { name: "Roger" });
|
||||
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()}
|
||||
units="hour"
|
||||
style="numeric"
|
||||
format="yyyy-MM-dd"
|
||||
updateInterval={123}
|
||||
initialNow={new Date()} />
|
||||
|
||||
<FormattedRelative
|
||||
value={new Date().getTime()}
|
||||
units="hour"
|
||||
style="numeric"
|
||||
format="yyyy-MM-dd"
|
||||
updateInterval={123}
|
||||
initialNow={new Date()}
|
||||
>
|
||||
{formattedRelative => formattedRelative.toUpperCase()}
|
||||
</FormattedRelative>
|
||||
|
||||
<FormattedMessage
|
||||
id="test"
|
||||
description="Test"
|
||||
defaultMessage="Hi, {name}!"
|
||||
values={{ name: "bob" }}
|
||||
tagName="div" />
|
||||
|
||||
<FormattedMessage
|
||||
id="test"
|
||||
description="Test"
|
||||
defaultMessage="Hi nested component {name}!"
|
||||
values={{ name: <p>p</p> }}
|
||||
tagName="div" />
|
||||
|
||||
<FormattedMessage
|
||||
id="test"
|
||||
description="Test"
|
||||
defaultMessage="Hi numbers {count}!"
|
||||
values={{ count: 123 }}
|
||||
tagName="div" />
|
||||
|
||||
<FormattedMessage
|
||||
id="test"
|
||||
description="Test"
|
||||
defaultMessage="Hi {bool}!"
|
||||
values={{ bool: false }}
|
||||
tagName="div" />
|
||||
|
||||
<FormattedMessage
|
||||
id="test"
|
||||
description="Test"
|
||||
defaultMessage="Hi {date}!"
|
||||
values={{ date: new Date() }}
|
||||
tagName="div" />
|
||||
|
||||
<FormattedMessage
|
||||
id="test"
|
||||
description="Test"
|
||||
defaultMessage="Hi plurals: {valueOne, number} {valueOne, plural, one {plural} other {plurals}} {valueTen, number} {valueTen, plural, one {plural} other {plurals}} !"
|
||||
values={{ valueOne: 1, valueTen: 10 }}
|
||||
tagName="div" />
|
||||
|
||||
<FormattedMessage
|
||||
id="test"
|
||||
description="Test"
|
||||
defaultMessage="Hi {blank} and {empty}!"
|
||||
values={{ blank: null, empty: undefined }}
|
||||
tagName="div" />
|
||||
|
||||
<FormattedMessage
|
||||
id="test"
|
||||
description="Test"
|
||||
defaultMessage="Hi {blank} and {empty}!"
|
||||
values={{ blank: null, empty: undefined }}
|
||||
tagName={({ children }) => <div>{children}</div>} />
|
||||
|
||||
<FormattedMessage
|
||||
id="test"
|
||||
description="Test"
|
||||
>
|
||||
{(text) => <div className="messageDiv">{text}</div>}
|
||||
</FormattedMessage>
|
||||
|
||||
<FormattedMessage
|
||||
id="test"
|
||||
description="Test"
|
||||
>
|
||||
{(text) => <input placeholder={text as string} />}
|
||||
</FormattedMessage>
|
||||
|
||||
<FormattedMessage
|
||||
id="test"
|
||||
description="Test"
|
||||
>
|
||||
{(...text) => <ul>{text.map(t => <li>{t}</li>)}</ul>}
|
||||
</FormattedMessage>
|
||||
|
||||
<FormattedMessage
|
||||
id="legal-statement"
|
||||
values={{
|
||||
privacy_policy: (
|
||||
<a href="/privacy-policy">
|
||||
<FormattedMessage id="request_invite.privacy_policy" />
|
||||
</a>
|
||||
),
|
||||
terms_of_service: (
|
||||
<a href="/terms-of-service">
|
||||
<FormattedMessage id="request_invite.terms_of_service" />
|
||||
</a>
|
||||
)
|
||||
}}
|
||||
>
|
||||
{(...messages) => messages.map(message => <>{message}</>)}
|
||||
</FormattedMessage>
|
||||
|
||||
<FormattedHTMLMessage
|
||||
id="test"
|
||||
description="Test"
|
||||
defaultMessage="Hi, {name}!"
|
||||
values={{ name: "bob" }}
|
||||
tagName="div" />
|
||||
|
||||
<FormattedHTMLMessage
|
||||
id="test"
|
||||
description="Test"
|
||||
defaultMessage="Hi, {name}!"
|
||||
values={{ name: "bob" }}
|
||||
tagName="div" />
|
||||
|
||||
<FormattedHTMLMessage
|
||||
id="test"
|
||||
description="Test"
|
||||
defaultMessage="Hi numbers {count}!"
|
||||
values={{ count: 123 }}
|
||||
tagName="div" />
|
||||
|
||||
<FormattedHTMLMessage
|
||||
id="test"
|
||||
description="Test"
|
||||
defaultMessage="Hi {bool}!"
|
||||
values={{ bool: false }}
|
||||
tagName="div" />
|
||||
|
||||
<FormattedHTMLMessage
|
||||
id="test"
|
||||
description="Test"
|
||||
defaultMessage="Hi {date}!"
|
||||
values={{ date: new Date() }}
|
||||
tagName="div" />
|
||||
|
||||
<FormattedNumber
|
||||
value={123456.78}
|
||||
format="N"
|
||||
localeMatcher="lookup"
|
||||
style="currency"
|
||||
currency="USD"
|
||||
currencyDisplay="name"
|
||||
useGrouping={false}
|
||||
minimumIntegerDigits={1}
|
||||
minimumFractionDigits={1}
|
||||
minimumSignificantDigits={2}
|
||||
maximumFractionDigits={3}
|
||||
maximumSignificantDigits={3} />
|
||||
|
||||
<FormattedNumber value={123}>
|
||||
{formattedNum => (
|
||||
<span className="number">{formattedNum}</span>
|
||||
)}
|
||||
</FormattedNumber>
|
||||
|
||||
<FormattedPlural
|
||||
style="cardinal"
|
||||
value={3}
|
||||
other="hai?"
|
||||
zero="no hai"
|
||||
one="hai"
|
||||
two="hai2"
|
||||
few="haifew"
|
||||
many="haiku" />
|
||||
|
||||
<FormattedPlural
|
||||
style="cardinal"
|
||||
value={3}
|
||||
other="hai?"
|
||||
zero="no hai"
|
||||
one="hai"
|
||||
two="hai2"
|
||||
few="haifew"
|
||||
many="haiku"
|
||||
>
|
||||
{formattedPlural => (
|
||||
<span className="number">{formattedPlural}</span>
|
||||
)}
|
||||
</FormattedPlural>
|
||||
|
||||
<FormattedDate
|
||||
value={new Date()}
|
||||
format="short"
|
||||
localeMatcher="best fit"
|
||||
formatMatcher="basic"
|
||||
timeZone="EDT"
|
||||
hour12={false}
|
||||
weekday="short"
|
||||
era="short"
|
||||
year="2-digit"
|
||||
month="2-digit"
|
||||
day="2-digit"
|
||||
hour="2-digit"
|
||||
minute="2-digit"
|
||||
second="2-digit"
|
||||
timeZoneName="short" />
|
||||
|
||||
<FormattedDate
|
||||
value={Date.now()}
|
||||
format="short"
|
||||
localeMatcher="best fit"
|
||||
formatMatcher="basic"
|
||||
timeZone="EDT"
|
||||
hour12={false}
|
||||
weekday="short"
|
||||
era="short"
|
||||
year="2-digit"
|
||||
month="2-digit"
|
||||
day="2-digit"
|
||||
hour="2-digit"
|
||||
minute="2-digit"
|
||||
second="2-digit"
|
||||
timeZoneName="short" />
|
||||
|
||||
<FormattedDate
|
||||
value={Date.now()}
|
||||
format="short"
|
||||
localeMatcher="best fit"
|
||||
formatMatcher="basic"
|
||||
timeZone="EDT"
|
||||
hour12={false}
|
||||
weekday="short"
|
||||
era="short"
|
||||
year="2-digit"
|
||||
month="2-digit"
|
||||
day="2-digit"
|
||||
hour="2-digit"
|
||||
minute="2-digit"
|
||||
second="2-digit"
|
||||
timeZoneName="short"
|
||||
>
|
||||
{formattedDate => formattedDate.toUpperCase()}
|
||||
</FormattedDate>
|
||||
|
||||
<FormattedTime
|
||||
value={new Date()}
|
||||
format="short"
|
||||
localeMatcher="best fit"
|
||||
formatMatcher="basic"
|
||||
timeZone="EDT"
|
||||
hour12={false}
|
||||
weekday="short"
|
||||
era="short"
|
||||
year="2-digit"
|
||||
month="2-digit"
|
||||
day="2-digit"
|
||||
hour="2-digit"
|
||||
minute="2-digit"
|
||||
second="2-digit"
|
||||
timeZoneName="short" />
|
||||
|
||||
<FormattedTime
|
||||
value={Date.now()}
|
||||
format="short"
|
||||
localeMatcher="best fit"
|
||||
formatMatcher="basic"
|
||||
timeZone="EDT"
|
||||
hour12={false}
|
||||
weekday="short"
|
||||
era="short"
|
||||
year="2-digit"
|
||||
month="2-digit"
|
||||
day="2-digit"
|
||||
hour="2-digit"
|
||||
minute="2-digit"
|
||||
second="2-digit"
|
||||
timeZoneName="short" />
|
||||
|
||||
<FormattedTime
|
||||
value={Date.now()}
|
||||
format="short"
|
||||
localeMatcher="best fit"
|
||||
formatMatcher="basic"
|
||||
timeZone="EDT"
|
||||
hour12={false}
|
||||
weekday="short"
|
||||
era="short"
|
||||
year="2-digit"
|
||||
month="2-digit"
|
||||
day="2-digit"
|
||||
hour="2-digit"
|
||||
minute="2-digit"
|
||||
second="2-digit"
|
||||
timeZoneName="short"
|
||||
>
|
||||
{formattedTime => formattedTime.toUpperCase()}
|
||||
</FormattedTime>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
||||
const SomeComponentWithIntl = injectIntl(SomeComponent);
|
||||
|
||||
class TestApp extends React.Component {
|
||||
render(): React.ReactElement<{}> {
|
||||
const definedMessages = defineMessages({
|
||||
sup: {
|
||||
id: "sup",
|
||||
defaultMessage: "Hai mom"
|
||||
}
|
||||
});
|
||||
|
||||
const messages = {
|
||||
hello: "Hello, {name}!"
|
||||
};
|
||||
return (
|
||||
<IntlProvider
|
||||
locale="en"
|
||||
formats={{}}
|
||||
messages={messages}
|
||||
defaultLocale="en"
|
||||
defaultFormats={messages}
|
||||
timeZone="UTC"
|
||||
onError={(error: string) => console.error(error)}
|
||||
>
|
||||
<SomeComponentWithIntl className="just-for-test" />
|
||||
<SomeFunctionalComponentWithIntl className="another-one" />
|
||||
</IntlProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const intlProvider = new IntlProvider({ locale: 'en' }, {});
|
||||
const { intl } = intlProvider.getChildContext();
|
||||
const wrappedComponent = <SomeComponentWithIntl.WrappedComponent className="test" intl={intl}/>;
|
||||
|
||||
export default {
|
||||
TestApp,
|
||||
SomeComponent: SomeComponentWithIntl
|
||||
};
|
||||
@ -1,25 +0,0 @@
|
||||
{
|
||||
"files": [
|
||||
"index.d.ts",
|
||||
"react-intl-tests.tsx"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"lib": [
|
||||
"es6",
|
||||
"dom"
|
||||
],
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"strictNullChecks": true,
|
||||
"strictFunctionTypes": true,
|
||||
"baseUrl": "../",
|
||||
"jsx": "react",
|
||||
"typeRoots": [
|
||||
"../"
|
||||
],
|
||||
"types": [],
|
||||
"noEmit": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
}
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
{
|
||||
"extends": "dtslint/dt.json",
|
||||
"rules": {
|
||||
// TODO
|
||||
"no-declare-current-package": false
|
||||
}
|
||||
}
|
||||
100
types/react-intl/v1/index.d.ts
vendored
100
types/react-intl/v1/index.d.ts
vendored
@ -1,100 +0,0 @@
|
||||
// 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/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 2.8
|
||||
|
||||
///<reference types="react" />
|
||||
|
||||
declare module "react-intl" {
|
||||
|
||||
import * as React from 'react'
|
||||
|
||||
namespace ReactIntl {
|
||||
|
||||
|
||||
interface IIntlMixin extends React.Mixin<any,any> {
|
||||
getIntlMessage(key: string): string
|
||||
}
|
||||
|
||||
var IntlMixin: IIntlMixin
|
||||
|
||||
namespace IntlComponent {
|
||||
interface Props {
|
||||
locales?: string[]
|
||||
messages?: {[key: string]: any}
|
||||
formats?: string[]
|
||||
}
|
||||
}
|
||||
interface IntlComponent {
|
||||
getIntlMessage(key: string): string;
|
||||
}
|
||||
|
||||
|
||||
namespace FormattedDate {
|
||||
export interface Props extends IntlComponent.Props {
|
||||
value: Date
|
||||
day?: string
|
||||
month?: string
|
||||
year?: string
|
||||
}
|
||||
}
|
||||
class FormattedDate extends React.Component<FormattedDate.Props,any> {}
|
||||
|
||||
|
||||
namespace 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> {}
|
||||
|
||||
|
||||
namespace 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> {}
|
||||
|
||||
|
||||
namespace FormattedMessage {
|
||||
export interface Props extends IntlComponent.Props {
|
||||
message: string;
|
||||
[prop: string]: any
|
||||
}
|
||||
}
|
||||
class FormattedMessage extends React.Component<FormattedMessage.Props,any> {}
|
||||
|
||||
|
||||
namespace FormattedHTMLMessage {
|
||||
export interface Props extends IntlComponent.Props {
|
||||
message: string;
|
||||
[prop: string]: any
|
||||
}
|
||||
}
|
||||
class FormattedHTMLMessage extends React.Component<FormattedHTMLMessage.Props,any> {}
|
||||
|
||||
|
||||
namespace 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
|
||||
|
||||
}
|
||||
@ -1,134 +0,0 @@
|
||||
/**
|
||||
* 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 <I18nDirect locales={['en-US']}/>
|
||||
//
|
||||
////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
|
||||
const MESSAGES: {[key: string] : { [lang: string]: string }} = {
|
||||
|
||||
Sorry: {
|
||||
'en-US': 'Sorry {name}',
|
||||
'fr-FR': 'Désolé {name}'
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
namespace I18nDirect {
|
||||
|
||||
export interface Props extends IntlComponent.Props {}
|
||||
}
|
||||
|
||||
class I18nDirect extends React.Component<I18nDirect.Props> {
|
||||
|
||||
private readonly _currentLocale: string
|
||||
private _messages: {[key: string]: string}
|
||||
|
||||
constructor( props: I18nDirect.Props ) {
|
||||
super( props )
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
|
||||
return (
|
||||
|
||||
<ul>
|
||||
<li>FormattedNumber:
|
||||
<FormattedNumber value={99.95} style="currency" currency="USD"/>
|
||||
</li>
|
||||
<li>FormattedMessage:
|
||||
<FormattedMessage message={this._messages['Sorry']} name='Dave'/>
|
||||
</li>
|
||||
<li>FormattedDate:
|
||||
<FormattedDate value={new Date()}/>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
componentWillReceiveProps( nextProps: I18nDirect.Props ) {
|
||||
this.compileMessages(nextProps)
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
this.compileMessages(this.props)
|
||||
}
|
||||
|
||||
|
||||
private readonly 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}/>
|
||||
//
|
||||
////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
|
||||
namespace I18nMixin {
|
||||
|
||||
export interface Props extends IntlComponent.Props {}
|
||||
}
|
||||
|
||||
@reactMixin.decorate( IntlMixin )
|
||||
class I18nMixin extends React.Component<I18nMixin.Props> implements IntlComponent {
|
||||
|
||||
private readonly _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 }
|
||||
@ -1,31 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"lib": [
|
||||
"es6",
|
||||
"dom"
|
||||
],
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"strictNullChecks": true,
|
||||
"strictFunctionTypes": true,
|
||||
"baseUrl": "../../",
|
||||
"typeRoots": [
|
||||
"../../"
|
||||
],
|
||||
"types": [],
|
||||
"paths": {
|
||||
"react-intl": [
|
||||
"react-intl/v1"
|
||||
]
|
||||
},
|
||||
"noEmit": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"jsx": "react",
|
||||
"experimentalDecorators": true
|
||||
},
|
||||
"files": [
|
||||
"index.d.ts",
|
||||
"react-intl-tests.tsx"
|
||||
]
|
||||
}
|
||||
@ -1,79 +0,0 @@
|
||||
{
|
||||
"extends": "dtslint/dt.json",
|
||||
"rules": {
|
||||
"adjacent-overload-signatures": false,
|
||||
"array-type": false,
|
||||
"arrow-return-shorthand": false,
|
||||
"ban-types": false,
|
||||
"callable-types": false,
|
||||
"comment-format": false,
|
||||
"dt-header": false,
|
||||
"eofline": false,
|
||||
"export-just-namespace": false,
|
||||
"import-spacing": false,
|
||||
"interface-name": false,
|
||||
"interface-over-type-literal": false,
|
||||
"jsdoc-format": false,
|
||||
"max-line-length": false,
|
||||
"member-access": false,
|
||||
"new-parens": false,
|
||||
"no-any-union": false,
|
||||
"no-boolean-literal-compare": false,
|
||||
"no-conditional-assignment": false,
|
||||
"no-consecutive-blank-lines": false,
|
||||
"no-construct": false,
|
||||
"no-declare-current-package": false,
|
||||
"no-duplicate-imports": false,
|
||||
"no-duplicate-variable": false,
|
||||
"no-empty-interface": false,
|
||||
"no-for-in-array": false,
|
||||
"no-inferrable-types": false,
|
||||
"no-internal-module": false,
|
||||
"no-irregular-whitespace": false,
|
||||
"no-mergeable-namespace": false,
|
||||
"no-misused-new": false,
|
||||
"no-namespace": false,
|
||||
"no-object-literal-type-assertion": false,
|
||||
"no-padding": false,
|
||||
"no-redundant-jsdoc": false,
|
||||
"no-redundant-jsdoc-2": false,
|
||||
"no-redundant-undefined": false,
|
||||
"no-reference-import": false,
|
||||
"no-relative-import-in-test": false,
|
||||
"no-self-import": false,
|
||||
"no-single-declare-module": false,
|
||||
"no-string-throw": false,
|
||||
"no-unnecessary-callback-wrapper": false,
|
||||
"no-unnecessary-class": false,
|
||||
"no-unnecessary-generics": false,
|
||||
"no-unnecessary-qualifier": false,
|
||||
"no-unnecessary-type-assertion": false,
|
||||
"no-useless-files": false,
|
||||
"no-var-keyword": false,
|
||||
"no-var-requires": false,
|
||||
"no-void-expression": false,
|
||||
"no-trailing-whitespace": false,
|
||||
"object-literal-key-quotes": false,
|
||||
"object-literal-shorthand": false,
|
||||
"one-line": false,
|
||||
"one-variable-per-declaration": false,
|
||||
"only-arrow-functions": false,
|
||||
"prefer-conditional-expression": false,
|
||||
"prefer-const": false,
|
||||
"prefer-declare-function": false,
|
||||
"prefer-for-of": false,
|
||||
"prefer-method-signature": false,
|
||||
"prefer-template": false,
|
||||
"radix": false,
|
||||
"semicolon": false,
|
||||
"space-before-function-paren": false,
|
||||
"space-within-parens": false,
|
||||
"strict-export-declare-modifiers": false,
|
||||
"trim-file": false,
|
||||
"triple-equals": false,
|
||||
"typedef-whitespace": false,
|
||||
"unified-signatures": false,
|
||||
"void-return": false,
|
||||
"whitespace": false
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user