Translate message "Nothing to show"

packages/client-react/src/client/components/FileNavigator/FileNavigator.react.js

@@ -501,6 +501,7 @@ class FileNavigator extends Component {
             items={resourceChildren}
             layout={listViewLayout}
             layoutOptions={viewLayoutOptions}
+            locale={apiOptions.locale}
           >
             <Notifications
               className="oc-fm--file-navigator__notifications"

packages/client-react/src/client/components/ListView/ListView.react.js

@@ -44,7 +44,8 @@ const propTypes = {
   onSelection: PropTypes.func,
   onSort: PropTypes.func,
   onKeyDown: PropTypes.func,
-  onRef: PropTypes.func
+  onRef: PropTypes.func,
+  locale: PropTypes.string
 };
 const defaultProps = {
   rowContextMenuId: nanoid(),
@@ -63,7 +64,8 @@ const defaultProps = {
   onSelection: () => {},
   onSort: () => {},
   onKeyDown: () => {},
-  onRef: () => {}
+  onRef: () => {},
+  locale: 'en'
 };
 
 export default
@@ -250,7 +252,7 @@ class ListView extends Component {
                         rowRenderer={Row({
                           selection, lastSelected, loading, contextMenuId: rowContextMenuId, hasTouch: HAS_TOUCH
                         })}
-                        noRowsRenderer={NoFilesFoundStub}
+                        noRowsRenderer={() => <NoFilesFoundStub locale={this.props.locale}/>}
                         onRowClick={onRowClick}
                         onRowRightClick={onRowRightClick}
                         onRowDoubleClick={onRowDoubleClick}

packages/client-react/src/client/components/NoFilesFoundStub/NoFilesFoundStub.react.js

@@ -1,20 +1,23 @@
 import React from 'react';
-import './NoFilesFoundStub.less';
 import Svg from '@opuscapita/react-svg/lib/SVG';
+import PropTypes from "prop-types";
 const nothingToShowIcon = require('@opuscapita/svg-icons/lib/add_to_photos.svg');
 
-// TODO Add localization
-export default () => (
+import getMessage from '../../../translations'
+
+import './NoFilesFoundStub.less';
+
+const NoFilesFoundStub = ({ locale }) => (
   <div className="oc-fm--no-files-found-stub">
     <Svg
       className="oc-fm--no-files-found-stub__icon"
       svg={nothingToShowIcon}
     />
     <div className="oc-fm--no-files-found-stub__title">
-      Nothing to show
+      {getMessage(locale, "nothingToShow")}
     </div>
     <div className="oc-fm--no-files-found-stub__sub-title">
-      Use toolbar or context menu to perform available actions
+      {getMessage(locale, "useContextMenu")}
     </div>
     {/*
     <div className="oc-fm--no-files-found-stub__sub-title">
@@ -23,3 +26,13 @@ export default () => (
     */}
   </div>
 );
+
+NoFilesFoundStub.propTypes = {
+  locale: PropTypes.string
+};
+
+NoFilesFoundStub.defaultProps = {
+  locale: 'en',
+};
+
+export default NoFilesFoundStub;

packages/client-react/src/translations.js

@@ -2,10 +2,14 @@ const translations = {
   en: {
     'common.Toolbar.moveForward': 'Move forward',
     'common.Toolbar.moveBack': 'Move back',
+    'nothingToShow': 'Nothing to show',
+    'useContextMenu': 'Use toolbar or context menu to perform available actions'
   },
   fr: {
     'common.Toolbar.moveForward': 'Avancer',
     'common.Toolbar.moveBack': 'Revenir en arrière',
+    'nothingToShow': 'Aucun élément à afficher',
+    'useContextMenu': 'Utilisez la barre d\'outil ou le menu contextuel pour faire une action'
   },
   zh: {
     'common.Toolbar.moveForward': '向前',
@@ -39,6 +43,7 @@ const translations = {
 };
 
 export default function getMessage(locale, key, params) {
+  console.log(locale, key, params);
   let translationExists = (translations[locale] && translations[locale][key]);
   let translation = translationExists ? translations[locale][key] : translations['en'][key];
   if (!params) {