Add theme i18n component

2022-02-24 15:21:32 +08:00
parent 0eb0b6f7f5
commit 6ee85aff1b
14 changed files with 1375 additions and 863 deletions
@@ -0,0 +1,7 @@
+span.ZH_CN {
+    font-family: 'Microsoft Yahei', Verdana, Simsun, 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+span.EN_US {
+    font-family: 'Segoe UI Web Regular', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
+}
@@ -0,0 +1,70 @@
+import { Component, ReactNode, DetailedHTMLProps, HTMLAttributes } from "react";
+import { useSetting, IMixinSettingProps, Language } from "@Context/Setting";
+import "./Localization.scss";
+
+import EN_US from "../../Localization/EN-US";
+import ZH_CN from "../../Localization/ZH-CN";
+
+const LanguageDataBase = {
+    EN_US, ZH_CN
+}
+
+interface ILocalizationProps {
+    className?: string;
+    i18nKey: keyof typeof EN_US;
+    options?: Record<string, string>;
+}
+
+function I18N(language: Language, key: keyof typeof EN_US, values?: Record<string, string>) {
+    let i18nValue = LanguageDataBase[language][key];
+    if (values) {
+        for (let valueKey in values) {
+            i18nValue = i18nValue.replaceAll(new RegExp(`\\{\\s*${valueKey}\\s*\\}`, "g"), values[valueKey]);
+        }
+    }
+    return i18nValue;
+}
+
+/**
+ * 本地化组件
+ */
+@useSetting
+class Localization extends Component<ILocalizationProps & IMixinSettingProps & 
+    DetailedHTMLProps<
+        HTMLAttributes<HTMLSpanElement>, HTMLSpanElement
+    >
+> {
+
+    private handelLanguageChange = () => {
+        this.forceUpdate();
+    }
+
+    public componentDidMount() {
+        if (this.props.setting) {
+            this.props.setting.on("language", this.handelLanguageChange);
+        }
+    }
+
+    public componentWillUnmount() {
+        if (this.props.setting) {
+            this.props.setting.off("language", this.handelLanguageChange);
+        }
+    }
+
+    public render(): ReactNode {
+        let language: Language = this.props.setting ? this.props.setting.language : "EN_US";
+        let classNameList: string[] = [];
+        if (this.props.className) classNameList.push(this.props.className);
+        classNameList.push(language);
+        let safeProps = {...this.props};
+        delete safeProps.className;
+        delete safeProps.setting;
+        delete (safeProps as any).i18nKey;
+        delete safeProps.options;
+        return <span {...safeProps} className={classNameList.join(" ")}>
+            {I18N(language, this.props.i18nKey, this.props.options)}
+        </span>
+    }
+}
+
+export { Localization, I18N };