Migrating i18n
Adding Base Internationalization Support
The I18nDecorator
is usually applied at the root level of an application and provides basic internationalization support to your application. It adds locale and text directionality CSS classes, provides automatic re-rendering when the locale changes via the onlanguagechange
event, and adds context
parameters for downstream components to update the locale or determine the current text directionality.
Note:
MoonstoneDecorator
automatically appliesI18nDecorator
by default but can be disabled by settings itsi18n
config property tofalse
.
ilib Modules
ilib
modules are supplied with the i18n
library but can be imported using an enact cli
provided shortcut:
Previous: enyo-ilib/[MODULE_NAME]
Current: ilib/[MODULE_NAME]
String translation
Previous: $L()
Current: $L()
import $L from '@enact/i18n/$L';
const MyTranslatedString = $L('Hello World');
String Translation - ilib string
Previous: $L.rb()
Current: toIString()
import {toIString} from '@enact/i18n/$L';
const MyIString = toIString('Hello IString');
const MyIStringText = MyIString.toString();
Updating the locale
Previous: The updateLocale()
method of the enyo/i18n
library could be invoked
Current: The updateLocale()
method is available for any component whose ancestor is wrapped with the I18nDecorator
, which provides this method as part of the context
.
import Button from '@enact/moonstone/Button';
import {contextTypes} from '@enact/i18n/I18nDecorator';
import React from 'react';
class MyComponent extends React.Component {
static contextTypes = contextTypes
setLocale = () => (locale) => {
const {updateLocale} = this.context;
updateLocale(locale);
}
render () {
const {updateLocale} = this.context;
return (
<div>
<Button onClick={setLocale('ar-SA')} small>ar-SA</Button>
<Button onClick={setLocale('en-US')} small>en-US</Button>
<Button onClick={setLocale('ko-KR')} small>ko-KR</Button>
<Button onClick={setLocale('th-TH')} small>th-TH</Button>
</div>
);
}
}
Current Locale Text Directionality
Previous: Components could check the value of this.rtl
Current: Using context
, any component whose ancestor is wrapped with I18nDecorator
can check the value of rtl
. Additionally, the value of context.rtl
can be updated by any intermediary component, which will affect all descendants.
import Button from '@enact/moonstone/Button';
import {contextTypes} from '@enact/i18n/I18nDecorator';
import React from 'react';
class MyComponent extends React.Component {
static contextTypes = contextTypes
render () {
const {rtl} = this.context;
return (
<Button>My {rtl ? 'RTL' : 'LTR'} button</Button>
);
}
}
Determine Text Directionality
Previous: isRtl()
provided by enyo/utils
Current: isRtlText()
provided by @enact/i18n/util
import {isRtlText} from '@enact/i18n/util';
const isHebrewRtl = isRtlText('שועל החום');
const isEnglishRtl = isRtlText('LTR Text');
i18n Classes
Previous: enyo-locale-...
Current: enact-locale-...
.div .enact-locale-non-latin {
background-color: green;
}