OHIF-332: Users should be able to see all available hotkeys and language settings in one place (#1895)

* OHIF-330: Update Modal Styles

* feat/ohif-332: finish raw ui

* feat/ohif-332: update mode configuration strategy

* feat/ohif-332: fix hotkey errors

* feat/ohif-332: update hotkey logic with recent merged changes

* feat/ohif-322: wrap

* feat/ohif-322: add disable state

* ohif-332: cr updates

* ohif-332: disable

* ohif-332: cr updates

* ohif-332: extract header component

* ohif-332: cr update to fix merge conflicts and design issue

Co-authored-by: Rodrigo Antinarelli <rodrigoantinarelli@gmail.com>

platform/i18n/src/index.js

@@ -7,6 +7,7 @@ import { initReactI18next } from 'react-i18next';
 import customDebug from './debugger';
 import pkg from '../package.json';
 import { debugMode, detectionOptions } from './config';
+import { getLanguageLabel, getAvailableLanguagesInfo } from './utils.js';
 
 // Note: The index.js files inside src/locales are dynamically generated
 // by the pullTranslations.sh script
@@ -127,7 +128,7 @@ function initI18n(
       });
   }
 
-  return initialized.then(function(t) {
+  return initialized.then(function (t) {
     i18n.T = t;
     customDebug(`T function available.`, 'info');
   });
@@ -138,9 +139,8 @@ customDebug(`version ${pkg.version} loaded.`, 'info');
 i18n.initializing = initI18n();
 i18n.initI18n = initI18n;
 i18n.addLocales = addLocales;
-i18n.defaultLanguage = DEFAULT_LANGUAGE;
-
-import getAvailableLanguagesInfo from './getAvailableLanguagesInfo.js';
 i18n.availableLanguages = getAvailableLanguagesInfo(locales);
+i18n.defaultLanguage = { label: getLanguageLabel(DEFAULT_LANGUAGE), value: DEFAULT_LANGUAGE };
+i18n.currentLanguage = () => ({ label: getLanguageLabel(i18n.language), value: i18n.language });
 
 export default i18n;

platform/i18n/src/utils.js

@@ -56,15 +56,21 @@ const languagesMap = {
   'zh-TW': 'Chinese (Taiwan)',
 };
 
+const getLanguageLabel = (language) => {
+  return languagesMap[language];
+};
+
 export default function getAvailableLanguagesInfo(locales) {
   const availableLanguagesInfo = [];
 
   Object.keys(locales).forEach(key => {
     availableLanguagesInfo.push({
       value: key,
-      label: languagesMap[key] || key,
+      label: getLanguageLabel(key) || key,
     });
   });
 
   return availableLanguagesInfo;
 }
+
+export { getAvailableLanguagesInfo, getLanguageLabel };