added translation

package.json

@@ -24,9 +24,11 @@
     "classnames": "^2.2.5",
     "css-loader": "^0.28.7",
     "file-loader": "^1.1.5",
+    "i18next": "^10.5.0",
     "prop-types": "^15.6.0",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
+    "react-i18next": "^7.5.0",
     "standard": "^11.0.0",
     "standard-loader": "^6.0.1",
     "style-loader": "^0.19.0",

src/component/Input/SelectStatus/SelectStatus.jsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { translate } from 'react-i18next'
+import i18n from '../../../i18n.js'
+
+translate.setI18n(i18n)
+
+export const SelectStatus = props =>
+  <div className='wsFileGeneric__option__menu__status dropdown'>
+    <button className='wsFileGeneric__option__menu__status__dropdownbtn check btn dropdown-toggle' type='button' id='dropdownMenu2' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
+      {props.t('Input.SelectStatus.validated')}
+      <div className='wsFileGeneric__option__menu__status__dropdownbtn__icon'>
+        <i className='fa fa-check' />
+      </div>
+    </button>
+
+    <div className='wsFileGeneric__option__menu__status__submenu dropdown-menu' aria-labelledby='dropdownMenu2'>
+      <h6 className='dropdown-header'>{props.t('Input.SelectStatus.file_status')}</h6>
+
+      <div className='dropdown-divider' />
+
+      <button className='wsFileGeneric__option__menu__status__submenu__item current  dropdown-item' type='button'>
+        {props.t('Input.SelectStatus.ongoing')}
+        <div className='wsFileGeneric__option__menu__status__submenu__item__icon'>
+          <i className='fa fa-gears' />
+        </div>
+      </button>
+
+      <button className='wsFileGeneric__option__menu__status__submenu__item check dropdown-item' type='button'>
+        {props.t('Input.SelectStatus.validated')}
+        <div className='wsFileGeneric__option__menu__status__submenu__item__icon'>
+          <i className='fa fa-check' />
+        </div>
+      </button>
+
+      <button className='wsFileGeneric__option__menu__status__submenu__item invalid dropdown-item' type='button'>
+        {props.t('Input.SelectStatus.unvalidated')}
+        <div className='wsFileGeneric__option__menu__status__submenu__item__icon'>
+          <i className='fa fa-times' />
+        </div>
+      </button>
+
+      <button className='wsFileGeneric__option__menu__status__submenu__item ban dropdown-item' type='button'>
+        {props.t('Input.SelectStatus.obsolete')}
+        <div className='wsFileGeneric__option__menu__status__submenu__item__icon'>
+          <i className='fa fa-ban' />
+        </div>
+      </button>
+    </div>
+  </div>
+
+export default translate()(SelectStatus)

src/component/PopinFixed/PopinFixedOption.jsx

@@ -1,6 +1,11 @@
 import React from 'react'
 // import classnames from 'classnames'
 // import PropTypes from 'prop-types'
+import { translate } from 'react-i18next'
+import i18n from '../../i18n.js'
+import SelectStatus from '../Input/SelectStatus/SelectStatus.jsx'
+
+translate.setI18n(i18n)
 
 const PopinFixedOption = props => {
   return (
@@ -8,47 +13,12 @@ const PopinFixedOption = props => {
       <div className='wsFileGeneric__option__menu'>
 
         <div className='wsFileFile__option__menu__addversion btn mr-auto'>
-          Nouvelle version
+          {props.t('PopinFixedOption.new_version')}
           <i className='fa fa-plus-circle' />
         </div>
 
-        <div className='wsFileGeneric__option__menu__status dropdown'>
-          <button className='wsFileGeneric__option__menu__status__dropdownbtn check btn dropdown-toggle' type='button' id='dropdownMenu2' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
-            Validé
-            <div className='wsFileGeneric__option__menu__status__dropdownbtn__icon'>
-              <i className='fa fa-check' />
-            </div>
-          </button>
+        <SelectStatus />
 
-          <div className='wsFileGeneric__option__menu__status__submenu dropdown-menu' aria-labelledby='dropdownMenu2'>
-            <h6 className='dropdown-header'>Statut du fichier</h6>
-            <div className='dropdown-divider' />
-            <button className='wsFileGeneric__option__menu__status__submenu__item current  dropdown-item' type='button'>
-              En cours
-              <div className='wsFileGeneric__option__menu__status__submenu__item__icon'>
-                <i className='fa fa-gears' />
-              </div>
-            </button>
-            <button className='wsFileGeneric__option__menu__status__submenu__item check dropdown-item' type='button'>
-              Validé
-              <div className='wsFileGeneric__option__menu__status__submenu__item__icon'>
-                <i className='fa fa-check' />
-              </div>
-            </button>
-            <button className='wsFileGeneric__option__menu__status__submenu__item invalid dropdown-item' type='button'>
-              Invalidé
-              <div className='wsFileGeneric__option__menu__status__submenu__item__icon'>
-                <i className='fa fa-times' />
-              </div>
-            </button>
-            <button className='wsFileGeneric__option__menu__status__submenu__item ban dropdown-item' type='button'>
-              Obsolète
-              <div className='wsFileGeneric__option__menu__status__submenu__item__icon'>
-                <i className='fa fa-ban' />
-              </div>
-            </button>
-          </div>
-        </div>
         <div className='wsFileGeneric__option__menu__action'>
           <i className='fa fa-archive' />
         </div>
@@ -60,7 +30,7 @@ const PopinFixedOption = props => {
   )
 }
 
-export default PopinFixedOption
+export default translate()(PopinFixedOption)
 
 PopinFixedOption.propTypes = {
 

src/i18n.js

@@ -0,0 +1,26 @@
+import i18n from 'i18next'
+import { reactI18nextModule } from 'react-i18next'
+import fr from './translate/fr.js'
+import en from './translate/en.js'
+
+i18n
+  .use(reactI18nextModule)
+  .init({
+    fallbackLng: 'fr',
+    // have a common namespace used around the full app
+    ns: ['translation'], // namespace
+    defaultNS: 'translation',
+    debug: true,
+    // interpolation: {
+    //   escapeValue: false, // not needed for react!!
+    // },
+    react: {
+      wait: true
+    },
+    resources: {
+      en,
+      fr
+    }
+  })
+
+export default i18n

src/translate/en.js

@@ -0,0 +1,18 @@
+const en = {
+  translation: { // 'en' in the namespace 'translation'
+    Input: {
+      SelectStatus: {
+        file_status: 'File status',
+        validated: 'Validated',
+        unvalidated: 'Unvalidated',
+        obsolete: 'Obsolete',
+        ongoing: 'Ongoing'
+      }
+    },
+    PopinFixedOption: {
+      new_version: 'New version'
+    }
+  }
+}
+
+export default en

src/translate/fr.js

@@ -0,0 +1,18 @@
+const fr = {
+  translation: { // 'fr' in the namespace 'translation'
+    Input: {
+      SelectStatus: {
+        file_status: 'Statut du fichier',
+        validated: 'Validé',
+        unvalidated: 'Invalidé',
+        obsolete: 'Obsolète',
+        ongoing: 'En cours'
+      }
+    },
+    PopinFixedOption: {
+      new_version: 'Nouvelle version'
+    }
+  }
+}
+
+export default fr