IMPROVED: languages are now dynamically loaded so added a new lang is as easy as adding a new json file (#57)

UPDATED: readme with instructions for adding a new language
UPDATED: typescript to latest 5.1.0

Author: warpdesign

README.md

@@ -75,6 +75,14 @@ React-Explorer can also be built for a single patform. For example, to build onl
 npm run dist-win
 ```
 
+## Localization
+
+React-Explorer is fully localized using `.json` files. Right now, English and French are available.
+
+Adding a new language to React-Explorer is easy: simply duplicate one of the file found in [src/locale/lang](https://github.com/warpdesign/react-explorer/tree/master/src/locale/lang) directory.
+
+The new file should have the name `code.json` where code is a valid language code, for example: `ja.json` to add support for Japanese.
+
 ## How to develop a new Plugin
 
 React-Explorer has been written so that it can easily be extended using plugins.

package-lock.json

@@ -49,6 +49,7 @@
     "@types/i18next": "^12.1.0",
     "@types/react-i18next": "^8.1.0",
     "@types/react-virtualized": "^9.18.12",
+    "@types/webpack-env": "^1.13.9",
     "awesome-typescript-loader": "^5.2.1",
     "aws-sdk": "^2.332.0",
     "clean-webpack-plugin": "^2.0.2",
@@ -62,7 +63,7 @@
     "html-webpack-plugin": "^3.2.0",
     "source-map-loader": "^0.2.4",
     "style-loader": "^0.23.0",
-    "typescript": "^3.1.1",
+    "typescript": "^3.5.1",
     "url-loader": "^1.1.2",
     "webpack": "^4.30.0",
     "webpack-cli": "^3.1.2"
@@ -91,4 +92,4 @@
     "react-i18next": "^8.4.0",
     "react-virtualized": "^9.21.0"
   }
-}
+}

package.json

@@ -1,7 +1,7 @@
 import { AppState } from "../state/appState";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import { FocusStyleManager, Icon, HotkeysTarget, Hotkeys, Hotkey, Alert, Popover, Classes } from "@blueprintjs/core";
+import { FocusStyleManager, Icon, HotkeysTarget, Hotkeys, Hotkey, Alert, Popover, Classes, IHotkeysProps } from "@blueprintjs/core";
 import { Provider, observer, inject } from "mobx-react";
 import { Navbar, Alignment, Button, Intent } from "@blueprintjs/core";
 import { SideView } from "./SideView";
@@ -317,10 +317,10 @@ class App extends React.Component<WithNamespaces, IState> {
         </Accelerators>;
     }
 
-    public renderHotkeys() {
+    public renderHotkeys(): React.ReactElement<IHotkeysProps> {
         const t = this.props.t;
 
-        return <Hotkeys>
+        return (<Hotkeys>
             <Hotkey
                 global={true}
                 combo="alt + mod + l"
@@ -451,7 +451,7 @@ class App extends React.Component<WithNamespaces, IState> {
                 onKeyDown={this.onDebugCache}
                 group={t('SHORTCUT.GROUP.ACTIVE_VIEW')}
             />
-        </Hotkeys>;
+        </Hotkeys>) as React.ReactElement<IHotkeysProps>;
     }
 
     onDebugCache = () => {

src/components/App.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IconName, Icon, Classes, HotkeysTarget, Hotkeys, Hotkey } from '@blueprintjs/core';
+import { IconName, Icon, Classes, HotkeysTarget, Hotkeys, Hotkey, IHotkeysProps } from '@blueprintjs/core';
 import { Column, Table, AutoSizer, Index, HeaderMouseEventHandlerParams } from 'react-virtualized';
 import { AppState } from '../state/appState';
 import { WithNamespaces, withNamespaces } from 'react-i18next';
@@ -168,10 +168,10 @@ export class FileTableClass extends React.Component<IProps, IState> {
         </Accelerators>;
     }
 
-    renderHotkeys() {
+    renderHotkeys(): React.ReactElement<IHotkeysProps> {
         const { t } = this.props;
 
-        return <Hotkeys>
+        return (<Hotkeys>
             <Hotkey
                 global={true}
                 combo="mod + o"
@@ -200,7 +200,7 @@ export class FileTableClass extends React.Component<IProps, IState> {
                 onKeyDown={this.onInvertSelection}
                 group={t('SHORTCUT.GROUP.ACTIVE_VIEW')}>
             </Hotkey>
-        </Hotkeys>;
+        </Hotkeys>) as React.ReactElement<IHotkeysProps>;
     }
 
     private get injected() {

src/components/FileTable.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { observer } from 'mobx-react';
 import { observable, runInAction } from 'mobx';
 import { debounce } from '../utils/debounce';
-import { Intent, HotkeysTarget, Hotkeys, Hotkey, Classes } from '@blueprintjs/core';
+import { Intent, HotkeysTarget, Hotkeys, Hotkey, Classes, IHotkeysProps } from '@blueprintjs/core';
 import { WithNamespaces, withNamespaces } from 'react-i18next';
 import { shouldCatchEvent } from '../utils/dom';
 import classnames from 'classnames';
@@ -123,17 +123,17 @@ export class LogUIClass extends React.Component<WithNamespaces, LogUIState> {
             });
     }
 
-    renderHotkeys() {
+    renderHotkeys(): React.ReactElement<IHotkeysProps> {
         const { t } = this.props;
 
-        return <Hotkeys>
+        return (<Hotkeys>
             <Hotkey
                 global={true}
                 combo="escape"
                 label={t('SHORTCUT.LOG.TOGGLE')}
                 onKeyDown={this.toggleConsole}>
             </Hotkey>
-        </Hotkeys>;
+        </Hotkeys>) as React.ReactElement<IHotkeysProps>;
     }
 
     // shouldComponentUpdate() {

src/components/Log.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { reaction, IReactionDisposer } from 'mobx';
 import { inject, observer } from 'mobx-react';
-import { InputGroup, ControlGroup, Button, ButtonGroup, Popover, Intent, Alert, ProgressBar, Classes, HotkeysTarget, Hotkeys, Hotkey, Tooltip, Position } from '@blueprintjs/core';
+import { InputGroup, ControlGroup, Button, ButtonGroup, Popover, Intent, Alert, ProgressBar, Classes, HotkeysTarget, Hotkeys, Hotkey, Tooltip, Position, IHotkeysProps } from '@blueprintjs/core';
 import { AppState } from "../state/appState";
 import { FileMenu } from "./FileMenu";
 import { MakedirDialog } from "./dialogs/MakedirDialog";
@@ -303,10 +303,10 @@ export class ToolbarClass extends React.Component<IProps, PathInputState> {
         </Accelerators>;
     }
 
-    public renderHotkeys() {
+    public renderHotkeys(): React.ReactElement<IHotkeysProps> {
         const { t } = this.props;
 
-        return <Hotkeys>
+        return (<Hotkeys>
             <Hotkey
                 global={true}
                 combo="mod+l"
@@ -328,7 +328,7 @@ export class ToolbarClass extends React.Component<IProps, PathInputState> {
                 onKeyDown={this.onDelete}
                 group={t('SHORTCUT.GROUP.ACTIVE_VIEW')}
             /> */}
-        </Hotkeys>;
+        </Hotkeys>) as React.ReactElement<IHotkeysProps>;
     }
 
 

src/components/Toolbar.tsx

@@ -1,16 +1,22 @@
 import i18next from 'i18next';
-import * as en from './lang/en.json';
-import * as fr from './lang/fr.json';
 import { ipcRenderer } from 'electron';
 
-    i18next
-        .init({
+const locales: any = {};
+
+function importAllLocales(r: any) {
+    r.keys().forEach((key: any) => {
+        const code = key.match(/([a-zA-Z]+)\.json$/)[1];
+        locales[code] = r(key);
+    });
+}
+
+importAllLocales(require['context']('./lang/', true, /\.json$/));
+
+i18next
+    .init({
         lng: 'en',
         // we init with resources
-        resources: {
-            en: en,
-            fr: fr
-        },
+        resources: locales,
         fallbackLng: 'en',
         debug: true,