Translate message "Nothing to show"

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

@@ -1,17 +1,19 @@
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import './FileNavigator.less';
+import PropTypes from 'prop-types';
+import { SortDirection } from 'react-virtualized';
+import clickOutside from 'react-click-outside';
+import { find, isEqual } from 'lodash';
+
 import ListView from '../ListView';
 import LocationBar from '../LocationBar';
 import Notifications from '../Notifications';
 import Toolbar from '../Toolbar';
-import { SortDirection } from 'react-virtualized';
-import { find, isEqual } from 'lodash';
-import clickOutside from 'react-click-outside';
 import ContextMenu from '../ContextMenu';
 import rawToReactElement from '../raw-to-react-element';
 import { createHistory, pushToHistory } from '../history';
 
+import './FileNavigator.less';
+
 function hasContext(capability, context) {
   return capability.availableInContexts && capability.availableInContexts.indexOf(context) !== -1;
 }
@@ -501,6 +503,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

@@ -1,21 +1,24 @@
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import './ListView.less';
-import 'react-virtualized/styles.css';
+import PropTypes from 'prop-types';
+import { range } from 'lodash';
+import nanoid from 'nanoid';
+import detectIt from 'detect-it';
 // TBD individual imports from 'react-virtualized' to decrease bundle size?
 // ex. import Table from 'react-virtualized/dist/commonjs/Table'
 import { Table, AutoSizer, SortDirection } from 'react-virtualized';
+import 'react-virtualized/styles.css';
 import { ContextMenuTrigger } from "react-contextmenu";
+
 import NoFilesFoundStub from '../NoFilesFoundStub';
 import Row from './Row.react';
 import ScrollOnMouseOut from '../ScrollOnMouseOut';
-import { range } from 'lodash';
-import nanoid from 'nanoid';
-import detectIt from 'detect-it';
 import rawToReactElement from '../raw-to-react-element';
 import WithSelection from './withSelectionHOC';
 import { isDef } from './utils';
 
+import './ListView.less';
+
+
 const ROW_HEIGHT = 38;
 const HEADER_HEIGHT = 38;
 const SCROLL_STRENGTH = 80;
@@ -44,7 +47,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 +67,8 @@ const defaultProps = {
   onSelection: () => {},
   onSort: () => {},
   onKeyDown: () => {},
-  onRef: () => {}
+  onRef: () => {},
+  locale: 'en'
 };
 
 export default
@@ -250,7 +255,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 PropTypes from "prop-types";
 import Svg from '@opuscapita/react-svg/lib/SVG';
 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, "common.NoFilesFoundStub.nothingToShow")}
     </div>
     <div className="oc-fm--no-files-found-stub__sub-title">
-      Use toolbar or context menu to perform available actions
+      {getMessage(locale, "common.NoFilesFoundStub.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',
+    'common.NoFilesFoundStub.nothingToShow': 'Nothing to show',
+    'common.NoFilesFoundStub.useContextMenu': 'Use toolbar or context menu to perform available actions'
   },
   fr: {
     'common.Toolbar.moveForward': 'Avancer',
     'common.Toolbar.moveBack': 'Revenir en arrière',
+    'common.NoFilesFoundStub.nothingToShow': 'Aucun élément à afficher',
+    'common.NoFilesFoundStub.useContextMenu': 'Utilisez la barre d\'outil ou le menu contextuel pour faire une action'
   },
   zh: {
     'common.Toolbar.moveForward': '向前',