deprecate react-intl types (#37388)

* deprecate react-intl types

* fix tsconfig

* change TS version
This commit is contained in:
Long Ho 2019-08-06 19:12:57 -04:00 committed by Nathan Shively-Sanders
parent 0c3b31c7b9
commit 13f400451a
12 changed files with 14 additions and 2197 deletions

View File

@ -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",

View File

@ -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"

View File

@ -1,6 +1,7 @@
{
"private": true,
"dependencies": {
"redux": "^4.0.0"
"redux": "^4.0.0",
"react-intl": "^3"
}
}

View File

@ -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"
]
}
}

File diff suppressed because it is too large Load Diff

View File

@ -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
};

View File

@ -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
}
}

View File

@ -1,7 +0,0 @@
{
"extends": "dtslint/dt.json",
"rules": {
// TODO
"no-declare-current-package": false
}
}

View File

@ -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
}

View File

@ -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:&nbsp;
<FormattedNumber value={99.95} style="currency" currency="USD"/>
</li>
<li>FormattedMessage:&nbsp;
<FormattedMessage message={this._messages['Sorry']} name='Dave'/>
</li>
<li>FormattedDate:&nbsp;
<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 }

View File

@ -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"
]
}

View File

@ -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
}
}