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:
Marko Lorentz 2021-07-16 19:51:08 +02:00 committed by GitHub
parent cb0222981c
commit e44b7b929e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 18 additions and 4 deletions

View file

@ -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]);

View file

@ -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 (

View file

@ -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'],

View file

@ -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')