i18n: Added missing state handling for RTL languages (#6275)
* Add RTL Support * Add Arabic to supportedLanguages * Fixed lint errors * Allowed RTL flow for Hebrew Co-authored-by: Sana <sana.benhassouna@ensi-uma.tn>
This commit is contained in:
parent
cb0222981c
commit
e44b7b929e
4 changed files with 18 additions and 4 deletions
|
@ -16,6 +16,7 @@ import usePrevious from 'effects/use-previous';
|
|||
import REWARDS from 'rewards';
|
||||
import usePersistedState from 'effects/use-persisted-state';
|
||||
import Spinner from 'component/spinner';
|
||||
import LANGUAGES from 'constants/languages';
|
||||
// @if TARGET='app'
|
||||
import useZoom from 'effects/use-zoom';
|
||||
import useHistoryNav from 'effects/use-history-nav';
|
||||
|
@ -278,6 +279,10 @@ function App(props: Props) {
|
|||
useEffect(() => {
|
||||
if (!languages.includes(language)) {
|
||||
setLanguage(language);
|
||||
|
||||
if (document && document.documentElement && LANGUAGES[language].length >= 3) {
|
||||
document.documentElement.dir = LANGUAGES[language][2];
|
||||
}
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [language, languages]);
|
||||
|
|
|
@ -4,6 +4,7 @@ import React, { useState } from 'react';
|
|||
import { FormField } from 'component/common/form';
|
||||
import Spinner from 'component/spinner';
|
||||
import SUPPORTED_LANGUAGES from 'constants/supported_languages';
|
||||
import LANGUAGES from 'constants/languages';
|
||||
import { getDefaultLanguage, sortLanguageMap } from 'util/default-languages';
|
||||
|
||||
type Props = {
|
||||
|
@ -25,6 +26,13 @@ function SettingLanguage(props: Props) {
|
|||
const { value } = e.target;
|
||||
setPreviousLanguage(language || getDefaultLanguage());
|
||||
setLanguage(value);
|
||||
if (document && document.documentElement) {
|
||||
if (LANGUAGES[value].length >= 3) {
|
||||
document.documentElement.dir = LANGUAGES[value][2];
|
||||
} else {
|
||||
document.documentElement.dir = 'ltr';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
|
@ -5,7 +5,7 @@ const LANGUAGES = {
|
|||
ak: ['Akan', 'Akana'],
|
||||
am: ['Amharic', 'አማርኛ'],
|
||||
an: ['Aragonese', 'Aragonés'],
|
||||
ar: ['Arabic', 'العربية'],
|
||||
ar: ['Arabic', 'العربية', 'rtl'],
|
||||
as: ['Assamese', 'অসমীয়া'],
|
||||
av: ['Avar', 'Авар'],
|
||||
ay: ['Aymara', 'Aymar'],
|
||||
|
@ -40,7 +40,7 @@ const LANGUAGES = {
|
|||
es: ['Spanish', 'Español'],
|
||||
et: ['Estonian', 'Eesti'],
|
||||
eu: ['Basque', 'Euskara'],
|
||||
fa: ['Persian', 'فارسی'],
|
||||
fa: ['Persian', 'فارسی', 'rtl'],
|
||||
ff: ['Peul', 'Fulfulde'],
|
||||
fi: ['Finnish', 'Suomi'],
|
||||
fil: ['Filipino', 'Filipino'],
|
||||
|
@ -55,7 +55,7 @@ const LANGUAGES = {
|
|||
gu: ['Gujarati', 'ગુજરાતી'],
|
||||
gv: ['Manx', 'Gaelg'],
|
||||
ha: ['Hausa', 'هَوُسَ'],
|
||||
he: ['Hebrew', 'עברית'],
|
||||
he: ['Hebrew', 'עברית', 'rtl'],
|
||||
hi: ['Hindi', 'हिन्दी'],
|
||||
ho: ['Hiri Motu', 'Hiri Motu'],
|
||||
hr: ['Croatian', 'Hrvatski'],
|
||||
|
@ -171,7 +171,7 @@ const LANGUAGES = {
|
|||
ty: ['Tahitian', 'Reo Mā`ohi'],
|
||||
ug: ['Uyghur', 'Uyƣurqə / ئۇيغۇرچە'],
|
||||
uk: ['Ukrainian', 'Українська'],
|
||||
ur: ['Urdu', 'اردو'],
|
||||
ur: ['Urdu', 'اردو', 'rtl'],
|
||||
uz: ['Uzbek', 'Ўзбек'],
|
||||
ve: ['Venda', 'Tshivenḓa'],
|
||||
vi: ['Vietnamese', 'Tiếng Việt'],
|
||||
|
|
|
@ -40,6 +40,7 @@ const SUPPORTED_LANGUAGES = {
|
|||
kn: LANGUAGES.kn[1],
|
||||
uk: LANGUAGES.uk[1],
|
||||
vi: LANGUAGES.vi[1],
|
||||
ar: LANGUAGES.ar[1],
|
||||
};
|
||||
|
||||
// Properties: language code (e.g. 'ja')
|
||||
|
|
Loading…
Reference in a new issue