feat:新增多语言切换

SunLxy · SunLxy · commit 893bf77fd9b0 · 2022-05-07T20:49:01.000+08:00
diff --git a/website/package.json b/website/package.json
@@ -22,6 +22,8 @@
     "@uiw/react-codepen": "~1.0.2",
     "@uiw/copy-to-clipboard": "^1.0.12",
     "@wcj/dark-mode": "^1.0.14",
+    "react-i18next": "~11.16.9",
+    "i18next": "~21.7.1",
     "react": "18.1.0",
     "react-dom": "18.1.0",
     "react-router-dom": "^6.3.0",
diff --git a/website/src/Layout.tsx b/website/src/Layout.tsx
@@ -3,7 +3,7 @@ import { Outlet, NavLink } from 'react-router-dom';
 import GitHubCorners from '@uiw/react-github-corners';
 import '@wcj/dark-mode';
 import styles from './Layout.module.less';
-
+import Language from './language/Select';
 export function Layout() {
   return (
     <Fragment>
@@ -17,6 +17,7 @@ export function Layout() {
             Example
           </NavLink>
           <dark-mode permanent></dark-mode>
+          <Language />
         </nav>
       </header>
       <div className={styles.warpper}>
diff --git a/website/src/components/useMdData/index.ts b/website/src/components/useMdData/index.ts
@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react';
+import { CodeBlockData } from 'markdown-react-code-preview-loader';
+import { useTranslation } from 'react-i18next';
+
+const useMdData = (path: (lang: string) => Promise<{ default: CodeBlockData }>) => {
+  const init = useTranslation();
+  const [mdData, setMdData] = useState<CodeBlockData>({
+    source: '',
+    components: {},
+    codeBlock: {},
+    languages: {},
+  });
+  const lang = init.t('language');
+  useEffect(() => {
+    const getMd = async () => {
+      try {
+        const result = await path(lang);
+        if (result.default) {
+          setMdData(result.default);
+        }
+      } catch (err) {
+        console.warn(err);
+      }
+    };
+    getMd();
+  }, [lang, path]);
+  return mdData;
+};
+
+export default useMdData;
diff --git a/website/src/index.tsx b/website/src/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
+import './language/i18n';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
diff --git a/website/src/language/Select.tsx b/website/src/language/Select.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import languageData from './language.json';
+import { Select } from 'uiw';
+import { useTranslation } from 'react-i18next';
+
+const Language = () => {
+  const { i18n } = useTranslation();
+  const Options = React.useMemo(() => {
+    return Object.entries(languageData).map(([key, item]) => {
+      return (
+        <Select.Option key={key} value={key}>
+          {item.label}
+        </Select.Option>
+      );
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(languageData)]);
+
+  return (
+    <div style={{ width: 100 }}>
+      <Select
+        value={i18n.language}
+        onChange={(event) => {
+          const value = event.target.value;
+          i18n.changeLanguage(value);
+        }}
+      >
+        {Options}
+      </Select>
+    </div>
+  );
+};
+
+export default Language;
diff --git a/website/src/language/i18n.ts b/website/src/language/i18n.ts
@@ -0,0 +1,25 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageData from './language.json';
+// the translations
+// (tip move them in a JSON file and import them,
+// or even better, manage them separated from your code: https://react.i18next.com/guides/multiple-translation-files)
+const resources: Record<string, { translation: { language: string } }> = {};
+Object.entries(LanguageData).forEach(([key, item]) => {
+  resources[key] = {
+    translation: {
+      language: item.value,
+    },
+  };
+});
+
+i18n
+  .use(initReactI18next) // passes i18n down to react-i18next
+  .init({
+    resources,
+    lng: 'en', // language to use, more information here: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources
+    // you can use the i18n.changeLanguage function to change the language manually: https://www.i18next.com/overview/api#changelanguage
+    // if you're using a language detector, do not define the lng option
+  });
+
+export default i18n;
diff --git a/website/src/language/language.json b/website/src/language/language.json
@@ -0,0 +1,10 @@
+{
+  "zh": {
+    "label": "中文",
+    "value": "-zh"
+  },
+  "en": {
+    "label": "英文",
+    "value": ""
+  }
+}
diff --git a/website/src/pages/docs/index.tsx b/website/src/pages/docs/index.tsx
@@ -1,6 +1,6 @@
 import MarkdownPreview from '@uiw/react-markdown-preview';
-import mdStr from 'markdown-react-code-preview-loader/README.md';
-
+import useMdData from './../../components/useMdData';
 export function HomePage() {
-  return <MarkdownPreview source={mdStr.source} />;
+  const mdData = useMdData((lang) => import(`markdown-react-code-preview-loader/README${lang}.md`));
+  return <MarkdownPreview source={mdData.source} />;
 }
diff --git a/website/src/pages/example/App.md b/website/src/pages/example/App.md
@@ -1,18 +1,18 @@
-# Alert 确认对话框
+# Alert Confirmation dialog box
 
 [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-alert/file/README.md)
 [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-alert.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-alert)
 [![npm version](https://img.shields.io/npm/v/@uiw/react-alert.svg?label=@uiw/react-alert)](https://npmjs.com/@uiw/react-alert)
 
-弹出对话框会在继续之前，通知用户重要信息，点击确定后异步关闭对话框。
+The pop-up dialog box will notify the user of important information before continuing, and click OK to close the dialog box asynchronously.
 
 ```js
 import { Alert } from "uiw";
 // or
 import Alert from "@uiw/react-alert";
 ```
 
-## 基本用法
+## Basic Usage
 
 ```jsx mdx:preview
 import React from "react";
@@ -70,9 +70,9 @@ class Demo extends React.Component {
 export default Demo;
 ```
 
-## 延迟关闭对话框
+## Delay closing dialog
 
-这里是利用 `Promise` 等它执行完成再去关闭窗口
+Here is to use `Promise` to close the window after its execution is completed
 
 ```jsx mdx:preview
 import React from "react";
@@ -134,9 +134,9 @@ class Demo extends React.Component {
 export default Demo;
 ```
 
-## 带图标的弹出框
+## Pop up box with Icon
 
-通过设置 `icon` 和 `type` 参数设置带状态的弹出对话框。
+Set the pop-up dialog box with status by setting the `icon` and `type` parameters.
 
 ```jsx mdx:preview
 import React from "react";
@@ -242,13 +242,7 @@ class Demo extends React.Component {
 export default Demo;
 ```
 
-```js
-import { Alert } from "uiw";
-// or
-import Alert from "@uiw/react-alert";
-```
-
-## 带标题的弹出框
+## Pop up box with title
 
 ```jsx mdx:preview
 import React from "react";
@@ -359,9 +353,9 @@ class Demo extends React.Component {
 export default Demo;
 ```
 
-### 自定义按钮
+### Custom button
 
-这个对话框有两个按钮，单击 **`确定按钮`** 或 **`取消按钮`** 后，此对话框将关闭，将不触发 ~~`onConfirm`~~ 或 ~~`onCancel`~~ 事件。因为这俩按钮是自定义按钮。你可以正对自定义按钮外面的对象定义 `className="w-alert-footer"` 将显示默认样式。
+There are two buttons in this dialog box. After clicking **OK button** or **cancel button**, this dialog box will close and the ~~`onconfirm`~~ or ~~`OnCancel`~~ event will not be triggered. Because these two buttons are custom buttons. You can define `classname = "w-alert-footer"` for the object outside the custom button, and the default style will be displayed.
 
 ```jsx mdx:preview:base23
 import React from "react";
@@ -415,7 +409,7 @@ class Demo extends React.Component {
 export default Demo;
 ```
 
-### 不显示遮罩层
+### Mask layers are not displayed
 
 ```jsx mdx:preview
 import React from "react";
@@ -463,19 +457,18 @@ export default Demo;
 
 ## Props
 
-虽然类似于对 `<Modal>`，但 `<Alert>` 更具限制性，只应用于重要信息。此组件继承 [`<Modal>`](#/components/modal) 的属性，所以部分参数可以参考 `<Modal>` 组件。
-
-| 参数                                        | 说明                                                                                                                                                  | 类型             | 默认值  |
-| ------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | ------- |
-| onCancel                                    | 取消按钮的回调函数                                                                                                                                    | Function(e)      | -       |
-| onConfirm                                   | 点击确定按钮回调                                                                                                                                      | Function(e)      | -       |
-| cancelText                                  | 取消按钮文字，                                                                                                                                        | String           | -       |
-| confirmText                                 | 确认按钮文字                                                                                                                                          | String           | `确认`  |
-| type                                        | 按钮类型跟 `<Button>` 组件的 `type` 参数一致，同时会影响按钮颜色。                                                                                    | String           | `light` |
-| icon[`<Modal>`](#/components/modal)         | 设置对话框右上角图标，，设置 `type` 将图标设置不同的颜色。当前属性为 [`<Icon>`](#/components/icon) 组件的 `type` 属性，所以可以参考该组件自定义图标。 | String/ReactNode | -       |
-| title[`<Modal>`](#/components/modal)        | 设置标题                                                                                                                                              | Function(e)      | -       |
-| useButton[`<Modal>`](#/components/modal)    | 是否使用默认按钮，如果设置 `false` 需要自定义按钮关闭                                                                                                 | Boolean          | `true`  |
-| isOpen[`<Modal>`](#/components/modal)       | 对话框是否可见                                                                                                                                        | Boolean          | `false` |
-| maskClosable[`<Modal>`](#/components/modal) | 点击遮罩层是否允许关闭                                                                                                                                | boolean          | `true`  |
+Although similar to `<Modal>`, `<Alert>` is more restrictive and applies only to important information. This component inherits the properties of [`<Modal>`](#/components/modal), so some parameters can refer to the `<Modal>` component.
+| parameter       | explain       | type             | Default value  |
+| ------------------------------------------- | ----- | ---------------- | ------- |
+| onCancel                                    | Callback function of cancel button | Function(e)      | -       |
+| onConfirm                                   | Click OK to call back | Function(e)      | -       |
+| cancelText                                  | Cancel button text,    | String           | -       |
+| confirmText                                 | Confirm button text      | String           | `确认`  |
+| type                                        | The button type is consistent with the `type` parameter of the `<Button>` component and will affect the button color.| String           | `light` |
+| icon[`<Modal>`](#/components/modal)         | Set the icon in the upper right corner of the dialog box. Set `type` to set the icon to a different color. The current attribute is the `type` attribute of [`<Icon>`](#/components/icon) component, so you can refer to the custom icon of the component. | String/ReactNode | -       |
+| title[`<Modal>`](#/components/modal)        | Set title                                                 | Function(e)      | -       |
+| useButton[`<Modal>`](#/components/modal)    | Whether to use the default button. If you set `false`, you need to customize the button to close    | Boolean          | `true`  |
+| isOpen[`<Modal>`](#/components/modal)       | Whether the dialog box is visible      | Boolean          | `false` |
+| maskClosable[`<Modal>`](#/components/modal) | Click whether the mask layer is allowed to be turned off  | boolean          | `true`  |
 
-更多属性文档请参考 [Modal](#/components/modal)。
+For more attribute documents, please refer to [Modal](#/components/modal)。
diff --git a/website/src/pages/example/index.tsx b/website/src/pages/example/index.tsx
@@ -1,8 +1,6 @@
-import { useEffect, useState } from 'react';
 import MarkdownPreview from '@uiw/react-markdown-preview';
-import { CodeBlockData } from 'markdown-react-code-preview-loader';
 import PreView from '../../components/CodeLayout';
-
+import useMdData from './../../components/useMdData';
 const getMetaData = (meta: string) => {
   if (meta) {
     const [metaItem] = /mdx:(.[\w|:]+)/i.exec(meta) || [];
@@ -16,25 +14,7 @@ const getMetaData = (meta: string) => {
 };
 
 export function ExamplePage() {
-  const [mdData, setMdData] = useState<CodeBlockData>({
-    source: '',
-    components: {},
-    codeBlock: {},
-    languages: {},
-  });
-
-  const [lang] = useState('');
-  useEffect(() => {
-    const getMd = async () => {
-      // const result = await import(`@uiw/react-layout/README${lang}.md`);
-      const result = await import(`./App${lang}.md`);
-      console.log(result);
-      if (result.default) {
-        setMdData(result.default);
-      }
-    };
-    getMd();
-  }, [lang]);
+  const mdData = useMdData((lang) => import(`./App${lang}.md`));
   return (
     <div>
       <MarkdownPreview
