vhad/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/gosticks/DefinitelyTyped.git synced 2026-08-11 20:40:20 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

React-i18next Generic translate

Browse Source 
Fixes #16395
This commit is contained in:
Micha Reiser
2017-12-14 12:58:41 +01:00
parent 78c2b845a6
commit c46598893c
5 changed files with 151 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
types/react-i18next/index.d.ts
Vendored
+4 -14
View File
@@ -1,10 +1,10 @@
// Type definitions for react-i18next 4.6
// Type definitions for react-i18next 7.0
// Project: https://github.com/i18next/react-i18next
// Definitions by: Giedrius Grabauskas <https://github.com/GiedriusGrabauskas>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.3
// TypeScript Version: 2.4
import { TranslationFunction } from "i18next";
import { i18n as I18n, TranslationFunction } from "i18next";
import I18nextProvider from "./src/I18nextProvider";
import Interpolate from "./src/interpolate";
@@ -22,16 +22,6 @@ export {
TranslationFunction
};
/**
* Extend your component's Prop interface with this one to get access to `this.props.t`
*
* Please note that if you use the `translateFuncName` option, you should create
* your own interface just like this one, but with your name of the translation function.
*
* interface MyComponentProps extends ReactI18next.InjectedTranslateProps {}
*/
export interface InjectedTranslateProps {
t?: TranslationFunction;
}
export { InjectedI18nProps, InjectedTranslateProps } from "./src/props";
export as namespace reactI18Next;
types/react-i18next/src/context.d.ts
Vendored
+14
View File
@@ -0,0 +1,14 @@
import { i18n } from "i18next";
export interface ReactI18NextOptions {
wait?: boolean;
withRef?: boolean;
bindI18n?: string;
bindStore?: string;
translateFuncName?: string;
nsMode?: string;
}
export function setDefaults(options: ReactI18NextOptions): void;
export function setI18n(instance: i18n): void;
types/react-i18next/src/props.d.ts
Vendored
+24
View File
@@ -0,0 +1,24 @@
import {i18n as I18n, TranslationFunction} from "i18next";
/**
* Extend your component's Prop interface with this one to get access to `this.props.t`
*
* Please note that if you use the `translateFuncName` option, you should create
* your own interface just like this one, but with your name of the translation function.
*
* interface MyComponentProps extends ReactI18next.InjectedTranslateProps {}
*
* Then specify the name of the translate function as generic argument
*
* const translated = translate<string, "_">("view", { translateFuncName: "_" })(YourComponent);
*/
export interface InjectedTranslateProps {
t: TranslationFunction;
}
/**
* Extend your component's Prop interface with this one to get access to `this.props.i18n`
*/
export interface InjectedI18nProps {
i18n: I18n
}
types/react-i18next/src/translate.d.ts
Vendored
+55 -6
View File
@@ -1,15 +1,64 @@
import * as React from "react";
import { i18n } from "i18next";
import { i18n as I18n, TranslationFunction } from "i18next";
import { InjectedTranslateProps, InjectedI18nProps } from "./props";
import { setDefaults, setI18n } from "./context";
export interface TranslateOptions {
export interface TranslateOptions<TTranslateFuncName extends string = string> {
withRef?: boolean;
bindI18n?: string;
bindStore?: string;
translateFuncName?: string;
translateFuncName?: TTranslateFuncName;
wait?: boolean;
nsMode?: string;
i18n?: i18n;
i18n?: I18n;
}
// tslint:disable-next-line:ban-types
export default function translate<TKey extends string = string>(namespaces?: TKey[] | TKey, options?: TranslateOptions): <C extends Function>(WrappedComponent: C) => C;
export interface TranslateHocProps {
i18n?: I18n;
initialI18nStore?: object;
initialLanguage?: string;
}
// Diff / Omit taken from https://github.com/Microsoft/TypeScript/issues/12215#issuecomment-311923766
type Diff<T extends string, U extends string> = ({[P in T]: P } & {[P in U]: never } & { [x: string]: never })[T];
type Omit<T, K extends string> = Pick<T, Diff<keyof T, K>>;
type InjectedProps = InjectedI18nProps & InjectedTranslateProps;
export interface WrapperComponentClass<P = {}, PWrapped = {}> extends React.ComponentClass<P & TranslateHocProps> {
new (props: P, context?: any): React.Component<P & TranslateHocProps, React.ComponentState> & { getWrappedInstance(): React.Component<PWrapped> };
}
// Injects props and removes them from the prop requirements.
// Adds the new properties t (or whatever the translation function is called) and i18n if needed.
export type InferableComponentEnhancerWithProps<TTranslateFunctionName extends string> =
<P extends {}>(component: React.ComponentClass<P> | React.StatelessComponent<P>) =>
React.ComponentClass<Omit<P, keyof InjectedI18nProps | TTranslateFunctionName> & TranslateHocProps>;
export type InferableComponentEnhancerWithPropsAndRef<TTranslateFunctionName extends string> =
<P extends {}>(component: React.ComponentClass<P> | React.StatelessComponent<P>) =>
WrapperComponentClass<Omit<P, keyof InjectedI18nProps | TTranslateFunctionName>, P>;
export interface Translate {
<TNamespace extends string>
(namespaces?: TNamespace | TNamespace[], options?: Omit<TranslateOptions, "translateFuncName"> & { withRef?: false }):
InferableComponentEnhancerWithProps<"t">;
<TNamespace extends string>
(namespaces?: TNamespace | TNamespace[], options?: Omit<TranslateOptions, "translateFuncName"> & { withRef: true }):
InferableComponentEnhancerWithPropsAndRef<"t">;
<TNamespace extends string, TTranslateFunctionName extends string>
(namespaces?: TNamespace | TNamespace[], options?: TranslateOptions<TTranslateFunctionName> & { withRef?: false }):
InferableComponentEnhancerWithProps<TTranslateFunctionName>;
<TNamespace extends string, TTranslateFunctionName extends string>
(namespaces?: TNamespace | TNamespace[], options?: TranslateOptions<TTranslateFunctionName> & { withRef: true }):
InferableComponentEnhancerWithPropsAndRef<TTranslateFunctionName>;
setDefaults: typeof setDefaults;
setI18n: typeof setI18n;
}
declare const translate: Translate;
export default translate;
types/react-i18next/test/react-i18next-tests.tsx
+54 -9
View File
@@ -1,33 +1,54 @@
import * as React from 'react';
import * as i18n from 'i18next';
import { translate, I18nextProvider, Interpolate, InjectedTranslateProps, TranslationFunction, loadNamespaces, Trans } from 'react-i18next';
import { InjectedI18nProps } from 'react-i18next/src/props';
interface InnerAnotherComponentProps {
_?: TranslationFunction;
_: TranslationFunction;
}
class InnerAnotherComponent extends React.Component<InnerAnotherComponentProps> {
render() {
const _ = this.props._!;
const _ = this.props._;
return <p>{_('content.text', { /* options t options */ })}</p>;
}
}
const AnotherComponent = translate('view', { wait: true, translateFuncName: '_' })(InnerAnotherComponent);
const AnotherComponent = translate<Key, "_">('view', { wait: true, translateFuncName: '_' })(InnerAnotherComponent);
const instanceWithoutRef = new AnotherComponent({});
instanceWithoutRef.componentWillReceiveProps!({
i18n,
initialI18nStore: { context: { text: "a message" } },
initialLanguage: "en"
}, {});
translate.setDefaults({ wait: false });
translate.setI18n(i18n);
const AnotherComponentWithRef = translate<Key, "_">("view" as Key, { translateFuncName: "_", withRef: true })(InnerAnotherComponent);
const instanceWithRef = new AnotherComponentWithRef({});
const ref = instanceWithRef.getWrappedInstance();
instanceWithRef.componentWillReceiveProps!({
i18n,
initialI18nStore: { context: { text: "a message" } },
initialLanguage: "en"
}, {});
class InnerYetAnotherComponent extends React.Component<InjectedTranslateProps> {
render() {
const t = this.props.t!;
const t = this.props.t;
return <p>{t('usingDefaultNS', { /* options t options */ })}</p>;
}
}
const YetAnotherComponent = translate()(InnerYetAnotherComponent);
@translate(['view', 'nav'], { wait: true })
const YetAnotherComponentWithRef = translate(undefined, { withRef: true })(InnerYetAnotherComponent);
new YetAnotherComponentWithRef({}).getWrappedInstance();
class TranslatableView extends React.Component<InjectedTranslateProps> {
render() {
const t = this.props.t!;
const t = this.props.t;
const interpolateComponent = <strong>"a interpolated component"</strong>;
return (
@@ -55,12 +76,14 @@ class TranslatableView extends React.Component<InjectedTranslateProps> {
}
}
const TranslatedView = translate(["view", "nav"] as Key[], { wait: true })(TranslatableView);
class App extends React.Component {
render() {
return (
<div className='main'>
<main>
<TranslatableView />
<TranslatedView />
</main>
</div>
);
@@ -81,12 +104,34 @@ loadNamespaces({ components: [App], i18n }).then(() => { }).catch(error => { });
type Key = "view" | "nav";
@translate<Key>(['view', 'nav'])
class GenericsTest extends React.Component<InjectedTranslateProps> {
render() { return null; }
}
@translate<Key>('view')
const TranslatedGenericsTest = translate(["view", "nav"] as Key[])(GenericsTest);
<TranslatedGenericsTest />;
class GenericsTest2 extends React.Component<InjectedTranslateProps> {
render() { return null; }
}
const TranslatedGenericsTest2 = translate("view" as Key)(GenericsTest2);
<TranslatedGenericsTest2 />;
class ComponentWithInjectedI18n extends React.Component<InjectedI18nProps> {
render() { return null; }
}
const TranslatedComponentWithInjectedI18n = translate()(ComponentWithInjectedI18n);
<TranslatedComponentWithInjectedI18n />;
function StatlessComponent(props: InjectedTranslateProps) {
return <h1>{props.t("hy")}</h1>;
}
const TranslatedStatlessComponent = translate()(StatlessComponent);
<TranslatedStatlessComponent />;
interface CustomTranslateFunctionProps {
_: TranslationFunction;
}