github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

Skip React Intl placeholder during pseudo localization. (#26350)

Browse source
This commit is contained in:
Aleh Zasypkin 2018-11-30 13:26:58 +01:00 • committed by GitHub
parent a8f688d610
commit b3a618c585
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 24 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

25
packages/kbn-i18n/src/react/provider.tsx
View file

@ -25,6 +25,28 @@ import * as i18n from '../core';
import { isPseudoLocale, translateUsingPseudoLocale } from '../core/pseudo_locale';
import { injectI18n } from './inject';
/**
* To translate label that includes nested `FormattedMessage` instances React Intl
* replaces them with special placeholders (@__uid__@ELEMENT-uid-counter@__uid__@)
* and maps them back with nested translations after `formatMessage` processes
* original string, so we shouldn't modify these special placeholders with pseudo
* translations otherwise React Intl won't be able to properly replace placeholders.
* It's implementation detail of the React Intl, but since pseudo localization is dev
* only feature we should be fine here.
* @param message
*/
function translateFormattedMessageUsingPseudoLocale(message: string) {
const formattedMessageDelimiter = message.match(/@__.{10}__@/);
if (formattedMessageDelimiter !== null) {
return message
.split(formattedMessageDelimiter[0])
.map(part => (part.startsWith('ELEMENT-') ? part : translateUsingPseudoLocale(part)))
.join(formattedMessageDelimiter[0]);
}
return translateUsingPseudoLocale(message);
}
/**
* If pseudo locale is detected, default intl.formatMessage should be decorated
* with the pseudo localization function.
@ -34,7 +56,8 @@ function wrapIntlFormatMessage(child: React.ReactNode) {
return React.createElement(
injectI18n(({ intl }) => {
const formatMessage = intl.formatMessage;
intl.formatMessage = (...args) => translateUsingPseudoLocale(formatMessage(...args));
intl.formatMessage = (...args) =>
translateFormattedMessageUsingPseudoLocale(formatMessage(...args));
return React.Children.only(child);
})