added multiple language support with related layout directions

1 files changed, 122 insertions, 59 deletions

diff --git a/modern/src/common/localization.js b/modern/src/common/localization.js
index 9e2123a9..3b2f04b3 100644
--- a/modern/src/common/localization.js
+++ b/modern/src/common/localization.js
@@ -1,3 +1,8 @@
+import React, { useState, createContext, useContext, useEffect } from "react";
+import { create } from 'jss';
+import rtl from 'jss-rtl';
+import { StylesProvider, jssPreset, useTheme, ThemeProvider } from '@material-ui/core/styles';
+
 import af from '../../../web/l10n/af.json';
 import ar from '../../../web/l10n/ar.json';
 import az from '../../../web/l10n/az.json';
@@ -52,71 +57,77 @@ import uz from '../../../web/l10n/uz.json';
 import vi from '../../../web/l10n/vi.json';
 import zh from '../../../web/l10n/zh.json';
 import zh_TW from '../../../web/l10n/zh_TW.json';
+import theme from "../theme";
 
 const supportedLanguages = {
-  af: { data: af, name: 'Afrikaans' },
-  ar: { data: ar, name: 'العربية' },
-  az: { data: az, name: 'Azərbaycanca' },
-  bg: { data: bg, name: 'Български' },
-  bn: { data: bn, name: 'বাংলা' },
-  cs: { data: cs, name: 'Čeština' },
-  de: { data: de, name: 'Deutsch' },
-  da: { data: da, name: 'Dansk' },
-  el: { data: el, name: 'Ελληνικά' },
-  en: { data: en, name: 'English' },
-  es: { data: es, name: 'Español' },
-  fa: { data: fa, name: 'فارسی' },
-  fi: { data: fi, name: 'Suomi' },
-  fr: { data: fr, name: 'Français' },
-  he: { data: he, name: 'עברית' },
-  hi: { data: hi, name: 'हिन्दी' },
-  hr: { data: hr, name: 'Hrvatski' },
-  hu: { data: hu, name: 'Magyar' },
-  id: { data: id, name: 'Bahasa Indonesia' },
-  it: { data: it, name: 'Italiano' },
-  ja: { data: ja, name: '日本語' },
-  ka: { data: ka, name: 'ქართული' },
-  kk: { data: kk, name: 'Қазақша' },
-  ko: { data: ko, name: '한국어' },
-  km: { data: km, name: 'ភាសាខ្មែរ' },
-  lo: { data: lo, name: 'ລາວ' },
-  lt: { data: lt, name: 'Lietuvių' },
-  lv: { data: lv, name: 'Latviešu' },
-  ml: { data: ml, name: 'മലയാളം' },
-  mn: { data: mn, name: 'Монгол хэл' },
-  ms: { data: ms, name: 'بهاس ملايو' },
-  nb: { data: nb, name: 'Norsk bokmål' },
-  ne: { data: ne, name: 'नेपाली' },
-  nl: { data: nl, name: 'Nederlands' },
-  nn: { data: nn, name: 'Norsk nynorsk' },
-  pl: { data: pl, name: 'Polski' },
-  pt: { data: pt, name: 'Português' },
-  pt_BR: { data: pt_BR, name: 'Português (Brasil)' },
-  ro: { data: ro, name: 'Română' },
-  ru: { data: ru, name: 'Русский' },
-  si: { data: si, name: 'සිංහල' },
-  sk: { data: sk, name: 'Slovenčina' },
-  sl: { data: sl, name: 'Slovenščina' },
-  sq: { data: sq, name: 'Shqipëria' },
-  sr: { data: sr, name: 'Srpski' },
-  sv: { data: sv, name: 'Svenska' },
-  ta: { data: ta, name: 'தமிழ்' },
-  th: { data: th, name: 'ไทย' },
-  tr: { data: tr, name: 'Türkçe' },
-  uk: { data: uk, name: 'Українська' },
-  uz: { data: uz, name: 'Oʻzbekcha' },
-  vi: { data: vi, name: 'Tiếng Việt' },
-  zh: { data: zh, name: '中文' },
-  zh_TW: { data: zh_TW, name: '中文 (Taiwan)' },
+  'af': { data: af, name: 'Afrikaans' },
+  'ar': { data: ar, name: 'العربية' },
+  'az': { data: az, name: 'Azərbaycanca' },
+  'bg': { data: bg, name: 'Български' },
+  'bn': { data: bn, name: 'বাংলা' },
+  'cs': { data: cs, name: 'Čeština' },
+  'de': { data: de, name: 'Deutsch' },
+  'da': { data: da, name: 'Dansk' },
+  'el': { data: el, name: 'Ελληνικά' },
+  'en': { data: en, name: 'English' },
+  'es': { data: es, name: 'Español' },
+  'fa': { data: fa, name: 'فارسی' },
+  'fi': { data: fi, name: 'Suomi' },
+  'fr': { data: fr, name: 'Français' },
+  'he': { data: he, name: 'עברית' },
+  'hi': { data: hi, name: 'हिन्दी' },
+  'hr': { data: hr, name: 'Hrvatski' },
+  'hu': { data: hu, name: 'Magyar' },
+  'id': { data: id, name: 'Bahasa Indonesia' },
+  'it': { data: it, name: 'Italiano' },
+  'ja': { data: ja, name: '日本語' },
+  'ka': { data: ka, name: 'ქართული' },
+  'kk': { data: kk, name: 'Қазақша' },
+  'ko': { data: ko, name: '한국어' },
+  'km': { data: km, name: 'ភាសាខ្មែរ' },
+  'lo': { data: lo, name: 'ລາວ' },
+  'lt': { data: lt, name: 'Lietuvių' },
+  'lv': { data: lv, name: 'Latviešu' },
+  'ml': { data: ml, name: 'മലയാളം' },
+  'mn': { data: mn, name: 'Монгол хэл' },
+  'ms': { data: ms, name: 'بهاس ملايو' },
+  'nb': { data: nb, name: 'Norsk bokmål' },
+  'ne': { data: ne, name: 'नेपाली' },
+  'nl': { data: nl, name: 'Nederlands' },
+  'nn': { data: nn, name: 'Norsk nynorsk' },
+  'pl': { data: pl, name: 'Polski' },
+  'pt': { data: pt, name: 'Português' },
+  'pt_BR': { data: pt_BR, name: 'Português (Brasil)' },
+  'ro': { data: ro, name: 'Română' },
+  'ru': { data: ru, name: 'Русский' },
+  'si': { data: si, name: 'සිංහල' },
+  'sk': { data: sk, name: 'Slovenčina' },
+  'sl': { data: sl, name: 'Slovenščina' },
+  'sq': { data: sq, name: 'Shqipëria' },
+  'sr': { data: sr, name: 'Srpski' },
+  'sv': { data: sv, name: 'Svenska' },
+  'ta': { data: ta, name: 'தமிழ்' },
+  'th': { data: th, name: 'ไทย' },
+  'tr': { data: tr, name: 'Türkçe' },
+  'uk': { data: uk, name: 'Українська' },
+  'uz': { data: uz, name: 'Oʻzbekcha' },
+  'vi': { data: vi, name: 'Tiếng Việt' },
+  'zh': { data: zh, name: '中文' },
+  'zh_TW': { data: zh_TW, name: '中文 (Taiwan)' }
 };
 
-const languages = window.navigator.languages !== undefined ? window.navigator.languages.slice() : [];
-let language = window.navigator.userLanguage || window.navigator.language;
+export const languageList = Object.entries(supportedLanguages).map((values) => ({ code: values[0], name: values[1].name }));
+
+const languages = localStorage.getItem('language') ? [localStorage.getItem('language')] : (window.navigator.languages !== undefined ? window.navigator.languages.slice() : []);
+
+let language = localStorage.getItem('language') || window.navigator.userLanguage || window.navigator.language;
+
 languages.push(language);
 languages.push(language.substring(0, 2));
 languages.push('en');
 for (let i = 0; i < languages.length; i++) {
   language = languages[i].replace('-', '_');
+
   if (language in supportedLanguages) {
     break;
   }
@@ -128,8 +139,60 @@ for (let i = 0; i < languages.length; i++) {
   }
 }
 
-const selectedLanguage = supportedLanguages[language];
+let selectedLanguage = supportedLanguages[language];
+
+export const findStringKeys = (predicate) => {
+  return Object.keys(selectedLanguage.data).filter(predicate);
+}
+
+export default key => {
+  return selectedLanguage.data[key];
+};
+
+const rtlLangueges = ['ar', 'he', 'fa'];
+const isRtl = (language) => rtlLangueges.indexOf(language) > -1;
+
+export const setSelectedLanguage = (language) => {
+  selectedLanguage = supportedLanguages[language];
+  localStorage.setItem('language', language);
+  localStorage.setItem('direction', isRtl(language) ? 'rtl' : 'ltr');
+}
+
+export const defaultLanguage = language;
+const defaultDirection = localStorage.getItem('direction') || 'ltr';
+
+export const LocalizationContext = createContext({
+  direction: defaultDirection,
+  language
+});
+
+const jss = create({ plugins: [...jssPreset().plugins, rtl()] });
 
-export const findStringKeys = (predicate) => Object.keys(selectedLanguage.data).filter(predicate);
+export function LocalizationProvider(props) {
+  const [language, setLanguage] = useState(defaultLanguage);
+
+  const [direction, setDirection] = useState(defaultDirection);
+
+  const handleLanguageChange = (nextLanguage) => {
+    setSelectedLanguage(nextLanguage);
+    setLanguage(nextLanguage);
+    setDirection(isRtl(nextLanguage) ? 'rtl' : 'ltr');
+  };
+
+  useEffect(() => {
+    theme.direction = direction;
+    window.document.body.dir = direction
+  }, [direction])
+
+  return <LocalizationContext.Provider value={{ language, setLanguage: handleLanguageChange, languageList, direction }}>
+    <StylesProvider jss={jss}>
+      <ThemeProvider theme={theme}>
+        {props.children}
+      </ThemeProvider>
+    </StylesProvider>
+  </LocalizationContext.Provider>
+}
 
-export default (key) => selectedLanguage.data[key];
+export const useLocalization = () => {
+  return useContext(LocalizationContext);
+}
\ No newline at end of file