/* This file is part of TALER (C) 2016 GNUnet e.V. TALER is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 3, or (at your option) any later version. TALER is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with TALER; see the file COPYING. If not, see */ /** * Translation helpers for React components and template literals. */ /** * Imports. */ import {strings} from "../i18n/strings"; // @ts-ignore: no type decl for this library import * as jedLib from "jed"; import * as React from "react"; const jed = setupJed(); let enableTracing = false; /** * Set up jed library for internationalization, * based on browser language settings. */ function setupJed(): any { let lang: string; try { lang = chrome.i18n.getUILanguage(); // Chrome gives e.g. "en-US", but Firefox gives us "en_US" lang = lang.replace("_", "-"); } catch (e) { lang = "en"; console.warn("i18n default language not available"); } if (!strings[lang]) { lang = "en-US"; console.log(`language ${lang} not found, defaulting to english`); } return new jedLib.Jed(strings[lang]); } /** * Convert template strings to a msgid */ function toI18nString(stringSeq: ReadonlyArray) { let s = ""; for (let i = 0; i < stringSeq.length; i++) { s += stringSeq[i]; if (i < stringSeq.length - 1) { s += `%${i + 1}$s`; } } return s; } /** * Internationalize a string template with arbitrary serialized values. */ export function str(stringSeq: TemplateStringsArray, ...values: any[]) { const s = toI18nString(stringSeq); const tr = jed.translate(s).ifPlural(1, s).fetch(...values); return tr; } interface TranslateSwitchProps { target: number; } function stringifyChildren(children: any): string { let n = 1; const ss = React.Children.map(children, (c) => { if (typeof c === "string") { return c; } return `%${n++}$s`; }); const s = ss.join("").replace(/ +/g, " ").trim(); enableTracing && console.log("translation lookup", JSON.stringify(s)); return s; } 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; } /** * Translate text node children of this component. * If a child component might produce a text node, it must be wrapped * in a another non-text element. * * Example: * ``` * * Hello. Your score is * * ``` */ export class Translate extends React.Component { render(): JSX.Element { const s = stringifyChildren(this.props.children); const tr = jed.ngettext(s, s, 1).split(/%(\d+)\$s/).filter((e: any, i: number) => i % 2 === 0); const childArray = React.Children.toArray(this.props.children!); for (let i = 0; i < childArray.length - 1; ++i) { if ((typeof childArray[i]) === "string" && (typeof childArray[i + 1]) === "string") { childArray[i + 1] = (childArray[i] as string).concat(childArray[i + 1] as string); childArray.splice(i, 1); } } const result = []; while (childArray.length > 0) { const x = childArray.shift(); if (x === undefined) { continue; } if (typeof x === "string") { const t = tr.shift(); result.push(t); } else { result.push(x); } } if (!this.props.wrap) { return
{result}
; } return React.createElement(this.props.wrap, this.props.wrapProps, result); } } /** * Switch translation based on singular or plural based on the target prop. * Should only contain TranslateSingular and TransplatePlural as children. * * Example: * ``` * * I have {n} apple. * I have {n} apples. * * ``` */ export class TranslateSwitch extends React.Component { render(): JSX.Element { let singular: React.ReactElement | undefined; let plural: React.ReactElement | undefined; const children = this.props.children; if (children) { React.Children.forEach(children, (child: any) => { if (child.type === TranslatePlural) { plural = child; } if (child.type === TranslateSingular) { singular = child; } }); } if ((!singular) || (!plural)) { console.error("translation not found"); return React.createElement("span", {}, ["translation not found"]); } singular.props.target = this.props.target; plural.props.target = this.props.target; // We're looking up the translation based on the // singular, even if we must use the plural form. return singular; } } interface TranslationPluralProps { target: number; } /** * See [[TranslateSwitch]]. */ export class TranslatePlural extends React.Component { render(): JSX.Element { const s = stringifyChildren(this.props.children); const tr = jed.ngettext(s, s, 1).split(/%(\d+)\$s/).filter((e: any, i: number) => i % 2 === 0); const childArray = React.Children.toArray(this.props.children!); for (let i = 0; i < childArray.length - 1; ++i) { if ((typeof childArray[i]) === "string" && (typeof childArray[i + 1]) === "string") { childArray[i + i] = childArray[i] as string + childArray[i + 1] as string; childArray.splice(i, 1); } } const result = []; while (childArray.length > 0) { const x = childArray.shift(); if (x === undefined) { continue; } if (typeof x === "string") { const t = tr.shift(); result.push(t); } else { result.push(x); } } return
{result}
; } } /** * See [[TranslateSwitch]]. */ export class TranslateSingular extends React.Component { render(): JSX.Element { const s = stringifyChildren(this.props.children); const tr = jed.ngettext(s, s, 1).split(/%(\d+)\$s/).filter((e: any, i: number) => i % 2 === 0); const childArray = React.Children.toArray(this.props.children!); for (let i = 0; i < childArray.length - 1; ++i) { if ((typeof childArray[i]) === "string" && (typeof childArray[i + 1]) === "string") { childArray[i + i] = childArray[i] as string + childArray[i + 1] as string; childArray.splice(i, 1); } } const result = []; while (childArray.length > 0) { const x = childArray.shift(); if (x === undefined) { continue; } if (typeof x === "string") { const t = tr.shift(); result.push(t); } else { result.push(x); } } return
{result}
; } }