feat: Improve language UI element and support more UI languages (#15)

* feat: Improve language UI element and support more UI languages

* feat: Improve language UI element and support more UI languages

web/src/App.js

@@ -1,7 +1,7 @@
 import React, {Component} from "react";
 import {Link, Redirect, Route, Switch, withRouter} from "react-router-dom";
 import {Avatar, BackTop, Dropdown, Layout, Menu} from "antd";
-import {DownOutlined, LogoutOutlined, SettingOutlined, createFromIconfontCN} from "@ant-design/icons";
+import {DownOutlined, LogoutOutlined, SettingOutlined} from "@ant-design/icons";
 import "./App.less";
 import * as Setting from "./Setting";
 import * as AccountBackend from "./backend/AccountBackend";
@@ -21,13 +21,10 @@ import VideoListPage from "./VideoListPage";
 import VideoEditPage from "./VideoEditPage";
 import SigninPage from "./SigninPage";
 import i18next from "i18next";
+import LanguageSelect from "./LanguageSelect";
 
 const {Header, Footer} = Layout;
 
-const IconFont = createFromIconfontCN({
-  scriptUrl: "//at.alicdn.com/t/font_2680620_ffij16fkwdg.js",
-});
-
 class App extends Component {
   constructor(props) {
     super(props);
@@ -204,8 +201,14 @@ class App extends Component {
           </a>
         </Menu.Item>
       );
+      res.push(
+        <LanguageSelect />
+      );
     } else {
       res.push(this.renderRightDropdown());
+      res.push(
+        <LanguageSelect />
+      );
       return (
         <div style={{float: "right", margin: "0px", padding: "0px"}}>
           {
@@ -342,24 +345,6 @@ class App extends Component {
             {
               this.renderAccount()
             }
-            <Menu.Item key="en" className="rightDropDown" style={{float: "right", cursor: "pointer", marginLeft: "-10px", marginRight: "20px"}}>
-              <div className="rightDropDown" style={{float: "right", cursor: "pointer"}} onClick={() => {Setting.changeLanguage("en");}}>
-                &nbsp;&nbsp;&nbsp;&nbsp;<IconFont type="icon-en" />
-                &nbsp;
-                English
-                &nbsp;
-                &nbsp;
-              </div>
-            </Menu.Item>
-            <Menu.Item key="zh" className="rightDropDown" style={{float: "right", cursor: "pointer"}}>
-              <div className="rightDropDown" style={{float: "right", cursor: "pointer"}} onClick={() => {Setting.changeLanguage("zh");}}>
-                &nbsp;&nbsp;&nbsp;&nbsp;<IconFont type="icon-zh" />
-                &nbsp;
-                中文
-                &nbsp;
-                &nbsp;
-              </div>
-            </Menu.Item>
           </Menu>
         </Header>
         <Switch>

web/src/LanguageSelect.js

@@ -0,0 +1,66 @@
+import React from "react";
+import * as Setting from "./Setting";
+import {Dropdown, Menu} from "antd";
+
+function flagIcon(country, alt) {
+  return (
+    <img width={24} alt={alt} src={`${Setting.StaticBaseUrl}/flag-icons/${country}.svg`} />
+  );
+}
+
+class LanguageSelect extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      classes: props,
+      languages: props.languages ?? Setting.Countries.map(item => item.key),
+    };
+
+    Setting.Countries.forEach((country) => {
+      new Image().src = `${Setting.StaticBaseUrl}/flag-icons/${country.country}.svg`;
+    });
+  }
+
+  items = Setting.Countries.map((country) => Setting.getItem(country.label, country.key, flagIcon(country.country, country.alt)));
+
+  getOrganizationLanguages(languages) {
+    const select = [];
+
+    for (const language of languages) {
+      this.items.map((item, index) => {
+        if (item.key === language) {
+          select.push(
+            <Menu.Item key={item.key} onClick={this.handleLanguageSelect}>
+              {item.icon} {item.label}
+            </Menu.Item>
+          );
+        }
+      });
+    }
+
+    return select;
+  }
+
+  handleLanguageSelect = (e) => {
+    Setting.changeLanguage(e.key);
+  };
+
+  render() {
+    const languageItems = this.getOrganizationLanguages(this.state.languages);
+
+    const languageMenu = (
+      <Menu onClick={this.handleLanguageSelect.bind(this)}>
+        {languageItems}
+      </Menu>
+    );
+
+    return (
+      <Dropdown overlay={languageMenu} className="rightDropDown">
+        <div className="language_box">
+        </div>
+      </Dropdown>
+    );
+  }
+}
+
+export default LanguageSelect;

web/src/Setting.js

@@ -554,3 +554,28 @@ export function submitStoreEdit(storeObj) {
       showMessage("error", `failed to save: ${error}`);
     });
 }
+
+export const StaticBaseUrl = "https://cdn.casbin.org";
+
+export const Countries = [{label: "English", key: "en", country: "US", alt: "English"},
+  {label: "中文", key: "zh", country: "CN", alt: "中文"},
+  {label: "Español", key: "es", country: "ES", alt: "Español"},
+  {label: "Français", key: "fr", country: "FR", alt: "Français"},
+  {label: "Deutsch", key: "de", country: "DE", alt: "Deutsch"},
+  {label: "Indonesia", key: "id", country: "ID", alt: "Indonesia"},
+  {label: "日本語", key: "ja", country: "JP", alt: "日本語"},
+  {label: "한국어", key: "ko", country: "KR", alt: "한국어"},
+  {label: "Русский", key: "ru", country: "RU", alt: "Русский"},
+  {label: "TiếngViệt", key: "vi", country: "VN", alt: "TiếngViệt"},
+  {label: "Português", key: "pt", country: "BR", alt: "Português"},
+];
+
+export function getItem(label, key, icon, children, type) {
+  return {
+    key,
+    icon,
+    children,
+    label,
+    type,
+  };
+}