add ability to wrap translated elements

This commit is contained in:
Florian Dold 2016-11-23 00:33:34 +01:00
parent 0f98d411d5
commit c43e24bb13

View File

@ -218,7 +218,21 @@ function stringifyChildren(children: any): string {
return ss.join(""); return ss.join("");
} }
i18n.Translate = class extends React.Component<void,void> {
interface TranslateProps {
/**
* Component that the translated element should be wrapped in.
* Defaults to "div".
*/
wrap?: any;
/**
* Props to give to the wrapped component.
*/
wrapProps?: any;
}
i18n.Translate = class extends React.Component<TranslateProps,void> {
render(): JSX.Element { render(): JSX.Element {
init(); init();
if (typeof jed !== "object") { if (typeof jed !== "object") {
@ -246,14 +260,17 @@ i18n.Translate = class extends React.Component<void,void> {
result.push(x); result.push(x);
} }
} }
return <div>{result}</div>; if (!this.props.wrap) {
return <div>{result}</div>;
}
return React.createElement(this.props.wrap, this.props.wrapProps, result);
} }
} }
i18n.TranslateSwitch = class extends React.Component<TranslateSwitchProps,void>{ i18n.TranslateSwitch = class extends React.Component<TranslateSwitchProps,void>{
render(): JSX.Element { render(): JSX.Element {
let singular: React.ReactElement<TranslationProps> | undefined; let singular: React.ReactElement<TranslationPluralProps> | undefined;
let plural: React.ReactElement<TranslationProps> | undefined; let plural: React.ReactElement<TranslationPluralProps> | undefined;
let children = this.props.children; let children = this.props.children;
if (children) { if (children) {
React.Children.forEach(children, (child: any) => { React.Children.forEach(children, (child: any) => {
@ -286,11 +303,11 @@ i18n.TranslateSwitch = class extends React.Component<TranslateSwitchProps,void>{
} }
} }
interface TranslationProps { interface TranslationPluralProps {
target: number; target: number;
} }
class TranslatePlural extends React.Component<TranslationProps,void> { class TranslatePlural extends React.Component<TranslationPluralProps,void> {
render(): JSX.Element { render(): JSX.Element {
init(); init();
if (typeof jed !== "object") { if (typeof jed !== "object") {
@ -324,7 +341,7 @@ class TranslatePlural extends React.Component<TranslationProps,void> {
i18n.TranslatePlural = TranslatePlural; i18n.TranslatePlural = TranslatePlural;
class TranslateSingular extends React.Component<TranslationProps,void> { class TranslateSingular extends React.Component<TranslationPluralProps,void> {
render(): JSX.Element { render(): JSX.Element {
init(); init();
if (typeof jed !== "object") { if (typeof jed !== "object") {