i18n - Multiple languages overrides

extensions/ohif-vtk-extension/package.json

@@ -30,7 +30,9 @@
     "react-dom": "^15.0.0 || ^16.0.0",
     "react-redux": "^6.0.0",
     "react-resize-detector": "^3.4.0",
-    "redux": "^4.0.1"
+    "redux": "^4.0.1",
+    "i18next": "^15.1.3",
+    "react-i18next": "^10.11.0"
   },
   "devDependencies": {
     "@babel/core": "^7.2.2",

src/components/Header/Header.js

@@ -36,12 +36,12 @@ class Header extends Component {
     const { t } = this.props;
     this.options = [
       {
-        title: t('header_preferences'),
+        title: t('preferences'),
         icon: 'fa fa-user',
         onClick: this.props.openUserPreferencesModal,
       },
       {
-        title: t('header_about'),
+        title: t('about'),
         icon: 'fa fa-info',
         link: 'http://ohif.org',
       },
@@ -50,7 +50,9 @@ class Header extends Component {
 
   changeLanguage(language) {
     const { i18n } = this.props;
-    i18n.changeLanguage(language);
+    i18n.init({
+      lng: language
+    });
     this.loadOptions();
   }
 
@@ -64,7 +66,7 @@ class Header extends Component {
               to={this.props.location.studyLink}
               className="header-btn header-viewerLink"
             >
-              {t('header_back_to_viewer')}
+              {t('back_to_viewer')}
             </Link>
           )}
 
@@ -78,27 +80,39 @@ class Header extends Component {
                 state: { studyLink: this.props.location.pathname },
               }}
             >
-              {t('header_study_list')}
+              {t('study_list')}
             </Link>
           )}
         </div>
 
         <div className="header-menu">
-          <span className="research-use">{t('header_research_use')}</span>
+          <span className="research-use">{t('research_use')}</span>
           <button
             className="research-use"
             onClick={() => this.changeLanguage('en-US')}
           >
-            US
+            EN-US
+          </button>
+          <button
+            className="research-use"
+            onClick={() => this.changeLanguage('en-UK')}
+          >
+            EN-UK
+          </button>
+          <button
+            className="research-use"
+            onClick={() => this.changeLanguage('es-AR')}
+          >
+            ES-AR
           </button>
           <button
             className="research-use"
             onClick={() => this.changeLanguage('es-MX')}
           >
-            ES
+            ES-MX
           </button>
           <Dropdown
-            title={t('header_options')}
+            title={t('options')}
             list={this.options}
             align="right"
           />

src/i18n.js

@@ -3,10 +3,10 @@ import { initReactI18next } from 'react-i18next';
 
 const currentLanguage = process.env.APP_LANG || 'es-MX';
 
-function getDefaultLanguage() {
+/*function getDefaultLanguage() {
   const mainLanguage = currentLanguage.match(/(.*.)(-)/);
   return mainLanguage !== null ? mainLanguage[1] : null;
-}
+}*/
 
 function getNameSpaceString(key) {
   const nameSpaceMatcher = key.match(/[^/]+$/g);
@@ -47,7 +47,19 @@ function getLocales() {
 
 i18n.use(initReactI18next).init({
   resources: getLocales(),
-  fallbackLng: getDefaultLanguage(),
+  // fallbackLng: getDefaultLanguage(),
+  fallbackLng:{
+    'es-MX': ['es'],
+    'default': ['en']
+  },
+
+  /*fallbackLng: {
+    'de-CH': ['fr', 'it'],
+    'zh-Hant': ['zh-Hans', 'en'],
+    'es': ['fr'],
+    'default': ['en']
+  },*/
+
   lng: currentLanguage,
   debug: true,
 
@@ -57,7 +69,7 @@ i18n.use(initReactI18next).init({
     escapeValue: false,
   },
 
-  fallbackNS: ['common'],
+  fallbackNS: ['Header'],
   defaultNS: 'common',
 
   react: {

src/locales/en/Buttons.json

@@ -0,0 +1,39 @@
+{
+  "Themes": "Themes",
+  "Previous": "Previous",
+  "Next": "Next",
+  "Play": "Play",
+  "Stop": "Stop",
+  "Layout": "Layout",
+  "More": "More",
+  "Crosshairs": "Crosshairs",
+  "Magnify": "Magnify",
+  "ROI Window": "ROI Window",
+  "Probe": "Probe",
+  "Ellipse": "Ellipse",
+  "Rectangle": "Rectangle",
+  "Invert": "Invert",
+  "Rotate Right": "Rotate Right",
+  "Flip H": "Flip H",
+  "Flip V": "Flip V",
+  "Clear": "Clear",
+  "Brush": "Brush",
+  "Coronal": "Coronal",
+  "Stack Scroll": "Stack Scroll",
+  "Measurements": "Measurements",
+  "Zoom": "Zoom",
+  "Levels": "Levels",
+  "Pan": "Pan",
+  "Length": "Length",
+  "Angle": "Angle",
+  "Bidirectional": "Bidirectional",
+  "Freehand": "Freehand",
+  "EllipticalRoi": "EllipticalRoi",
+  "CircleRoi": "CircleRoi",
+  "RectangleRoi": "RectangleRoi",
+  "Reset": "Reset",
+  "CINE": "CINE",
+  "Acquired": "Acquired",
+  "Sagittal": "Sagittal",
+  "Axial": "Axial"
+}

src/locales/en/CineDialog.json

@@ -1,3 +1,18 @@
 {
-  "fps": "ingles fps"
+  "fps":  "ingles fps",
+  "Skip to first image":  "Skip to first image",
+  "Previous image":  "Previous, image",
+  "Play / Stop":  "Play, / Stop",
+  "Next image":  "Next, image",
+  "Skip to last image":  "Skip, to last image",
+  "Skip to first image":  "Skip, to first image",
+  "Previous image":  "Previous, image",
+  "Play / Stop":  "Play, / Stop",
+  "Next image":  "Next, image",
+  "Skip to last image":  "Skip, to last image",
+  "Skip to first image":  "Skip, to first image",
+  "Previous image":  "Previous, image",
+  "Play / Stop":  "Play, / Stop",
+  "Next image":  "Next, image",
+  "Skip to last image":  "Skip, to last image"
 }

src/locales/en/Header.json

@@ -1,7 +1,8 @@
 {
-  "header_research_use": "SOLO USO DE INVESTIGACIÓN",
+  "preferences": "Preferences",
-  "header_options": "Opciones",
+  "options": "Options",
-  "header_about": "Sobre",
+  "about": "About",
-  "header_preferences": "Preferencias",
+  "back_to_viewer": "Back to Viewer",
-  "header_study_list": "Lista de estudio"
+  "study_list": "Study list",
+  "research_use": "INVESTIGATIONAL USE ONLY"
 }

src/locales/en/UK/Header.json

@@ -1,3 +1,3 @@
 {
-  "header_test": "Joao Grandao"
+  "header_research_use": "INVESTIGATIONAL PURPOSES ONLY"
 }

src/locales/en/UK/common.json

@@ -1,4 +0,0 @@
-{
-  "Welcome to React": "Welcome to React and react-i18next",
-  "welcomeMsg": "welcome"
-}

src/locales/en/US/Header.json

@@ -1,9 +1,4 @@
 {
-  "header_preferences": "Preferences",
+  "options": "Options",
-  "header_options": "Options",
+  "about": "About"
-  "header_about": "About",
-  "header_back_to_viewer": "Back to Viewer",
-  "header_study_list": "Study list",
-  "header_research_use": "INVESTIGATIONAL USE ONLY",
-  "header_test": "$t(common:test)"
 }

src/locales/en/US/Toolbar.json

@@ -1,19 +0,0 @@
-{
-  "toolbar_series": "Series",
-  "toolbar_measurements": "Measurements",
-  "toolbar_stack_scroll": "Stack Scroll",
-  "toolbar_zoom": "Zoom",
-  "toolbar_levels": "Levels",
-  "toolbar_pan": "Pan",
-  "toolbar_length": "Length",
-  "toolbar_annotate": "Annotate",
-  "toolbar_angle": "Angle",
-  "toolbar_reset": "Reset",
-  "toolbar_cine": "CINE",
-  "toolbar_bidirectional": "Bidirectional",
-  "toolbar_brush": "Brush",
-  "toolbar_freehand": "Freehand",
-  "toolbar_elliptical_roi": "EllipticalRoi",
-  "toolbar_circle_roi": "CircleRoi",
-  "toolbar_rectangle_roi": "RectangleRoi"
-}

src/locales/en/US/common.json

@@ -1,3 +0,0 @@
-{
-  "tests___": "test common"
-}

src/locales/es/AR/Header.json

@@ -0,0 +1,3 @@
+{
+  "research_use": "SOLO USO DE DESAROLLO"
+}

src/locales/es/Buttons.json

@@ -0,0 +1,40 @@
+{
+  "Themes": "Temas",
+  "Previous": "Anterior",
+  "Next": "Próximo",
+  "Play": "Play",
+  "Stop": "Stop",
+  "Layout": "Esquema",
+  "More": "Más",
+  "Crosshairs": "Cruces",
+  "Magnify": "Lupa",
+  "ROI Window": "Ventana ROI",
+  "Probe": "Probar",
+  "Ellipse": "Elipse",
+  "Rectangle": "Rectángulo",
+  "Invert": "Invertido",
+  "Rotate Right": "Rotar ->",
+  "Flip H": "Espejo Hor.",
+  "Flip V": "Espejo Ver.",
+  "Clear": "Limpiar",
+  "Brush": "Escoba",
+  "Coronal": "Coronal",
+  "Stack Scroll": "Avance X slice",
+  "Measurements": "Medidas",
+  "Zoom": "Zoom",
+  "Levels": "Niveles",
+  "Pan": "Mover",
+  "Length": "Medición",
+  "Angle": "Ángulo",
+  "Bidirectional": "Bidirectional",
+  "Freehand": "Freehand",
+  "EllipticalRoi": "EllipticalRoi",
+  "CircleRoi": "CircleRoi",
+  "RectangleRoi": "RectangleRoi",
+  "Reset": "Reiniciar",
+  "CINE": "CINE",
+  "Acquired": "Acquired",
+  "Sagittal": "Sagittal",
+  "Axial": "Axial"
+
+}

src/locales/es/CineDialog.json

@@ -1,3 +1,8 @@
 {
-  "fps": "ES RAIZ cps"
+  "fps":  "fps",
+  "Skip to first image":  "Avanza para la primera imagen",
+  "Previous image":  "Imagen anterior",
+  "Play / Stop":  "Play / Stop",
+  "Next image":  "Próximo image",
+  "Skip to last image":  "Pular para la ultima imagen"
 }

src/locales/es/Header.json

@@ -1,7 +1,7 @@
 {
-  "header_research_use": "SOLO USO DE INVESTIGACIÓN",
+  "research_use": "SOLO USO DE INVESTIGACIÓN",
-  "header_options": "Opciones",
+  "options": "Opciones",
-  "header_about": "Sobre",
+  "about": "Sobre",
-  "header_preferences": "Preferencias",
+  "preferences": "Preferencias",
-  "header_study_list": "Lista de estudio"
+  "study_list": "Lista de estudio"
 }

src/locales/es/MX/CineDialog.json

@@ -1,3 +0,0 @@
-{
-  "fps": "MX cps"
-}

src/locales/es/MX/Header.json

@@ -1,7 +1,3 @@
 {
-  "header_research_use": "SOLO USO DE INVESTIGACIÓN",
+  "Opciones": "Elecciones"
-  "header_options": "Opciones",
-  "header_about": "Sobre",
-  "header_preferences": "Preferencias",
-  "header_study_list": "Lista de estudio"
 }

src/locales/es/MX/Toolbar.json

@@ -1,13 +0,0 @@
-{
-  "toolbar_series": "Series",
-  "toolbar_measurements": "Medidas",
-  "toolbar_stack_scroll": "Avance X slice",
-  "toolbar_zoom": "Zoom",
-  "toolbar_levels": "Niveles",
-  "toolbar_pan": "Mover",
-  "toolbar_length": "Medición",
-  "toolbar_annotate": "Anotación",
-  "toolbar_angle": "Ángulo",
-  "toolbar_reset": "Reiniciar",
-  "toolbar_cine": "CINE"
-}

src/locales/es/MX/common.json

@@ -1,20 +0,0 @@
-{
-  "Themes": "Temas",
-  "Previous": "Anterior",
-  "Next": "Próximo",
-  "Play": "Play",
-  "Stop": "Stop",
-  "Layout": "Esquema",
-  "More": "Más",
-  "Crosshairs": "Cruces",
-  "Magnify": "Lupa",
-  "ROI Window": "Ventana ROI",
-  "Probe": "Probar",
-  "Ellipse": "Elipse",
-  "Rectangle": "Rectángulo",
-  "Invert": "Invertido",
-  "Rotate Right": "Rotar ->",
-  "Flip H": "Espejo Hor.",
-  "Flip V": "Espejo Ver.",
-  "Clear": "Limpiar"
-}

src/locales/es/common.json

@@ -1,5 +1,21 @@
 {
-  "Welcome to React": "Welcome to React and react-i18next",
+  "Themes": "Temas",
-  "welcomeMsg": "welcome",
+  "Previous": "Anterior",
-  "test": "Lunch time"
+  "Next": "Próximo",
+  "Play": "Play",
+  "Stop": "Stop",
+  "Layout": "Esquema",
+  "More": "Más",
+  "Crosshairs": "Cruces",
+  "Magnify": "Lupa",
+  "ROI Window": "Ventana ROI",
+  "Probe": "Probar",
+  "Ellipse": "Elipse",
+  "Rectangle": "Rectángulo",
+  "Invert": "Invertido",
+  "Rotate Right": "Rotar ->",
+  "Flip H": "Espejo Hor.",
+  "Flip V": "Espejo Ver.",
+  "Clear": "Limpiar",
+  "Brush": "Escoba"
 }