mirror of https://github.com/usememos/memos
feat: use `i18next`
Steven
3 years ago
parent
307483e499
commit
366afdd1e4
@ -1,3 +0,0 @@
|
||||
import useI18n from "../labs/i18n/useI18n";
|
||||
|
||||
export default useI18n;
|
||||
@ -0,0 +1,23 @@
|
||||
import i18n from "i18next";
|
||||
import { initReactI18next } from "react-i18next";
|
||||
import enLocale from "./locales/en.json";
|
||||
import zhLocale from "./locales/zh.json";
|
||||
import viLocale from "./locales/vi.json";
|
||||
|
||||
i18n.use(initReactI18next).init({
|
||||
resources: {
|
||||
en: {
|
||||
translation: enLocale,
|
||||
},
|
||||
zh: {
|
||||
translation: zhLocale,
|
||||
},
|
||||
vi: {
|
||||
translation: viLocale,
|
||||
},
|
||||
},
|
||||
lng: "en",
|
||||
fallbackLng: "en",
|
||||
});
|
||||
|
||||
export default i18n;
|
||||
@ -1,27 +0,0 @@
|
||||
import { createContext, useEffect, useState } from "react";
|
||||
import i18nStore from "./i18nStore";
|
||||
|
||||
interface Props {
|
||||
children: React.ReactElement;
|
||||
}
|
||||
|
||||
const i18nContext = createContext(i18nStore.getState());
|
||||
|
||||
const I18nProvider: React.FC<Props> = (props: Props) => {
|
||||
const { children } = props;
|
||||
const [i18nState, setI18nState] = useState(i18nStore.getState());
|
||||
|
||||
useEffect(() => {
|
||||
const unsubscribe = i18nStore.subscribe((ns) => {
|
||||
setI18nState(ns);
|
||||
});
|
||||
|
||||
return () => {
|
||||
unsubscribe();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return <i18nContext.Provider value={i18nState}>{children}</i18nContext.Provider>;
|
||||
};
|
||||
|
||||
export default I18nProvider;
|
||||
@ -1,52 +0,0 @@
|
||||
type I18nState = Readonly<{
|
||||
locale: string;
|
||||
}>;
|
||||
|
||||
type Listener = (ns: I18nState, ps?: I18nState) => void;
|
||||
|
||||
const createI18nStore = (preloadedState: I18nState) => {
|
||||
const listeners: Listener[] = [];
|
||||
let currentState = preloadedState;
|
||||
|
||||
const getState = () => {
|
||||
return currentState;
|
||||
};
|
||||
|
||||
const setState = (state: Partial<I18nState>) => {
|
||||
const nextState = {
|
||||
...currentState,
|
||||
...state,
|
||||
};
|
||||
const prevState = currentState;
|
||||
currentState = nextState;
|
||||
|
||||
for (const cb of listeners) {
|
||||
cb(currentState, prevState);
|
||||
}
|
||||
};
|
||||
|
||||
const subscribe = (listener: Listener) => {
|
||||
let isSubscribed = true;
|
||||
listeners.push(listener);
|
||||
|
||||
const unsubscribe = () => {
|
||||
if (!isSubscribed) {
|
||||
return;
|
||||
}
|
||||
|
||||
const index = listeners.indexOf(listener);
|
||||
listeners.splice(index, 1);
|
||||
isSubscribed = false;
|
||||
};
|
||||
|
||||
return unsubscribe;
|
||||
};
|
||||
|
||||
return {
|
||||
getState,
|
||||
setState,
|
||||
subscribe,
|
||||
};
|
||||
};
|
||||
|
||||
export default createI18nStore;
|
||||
@ -1,9 +0,0 @@
|
||||
import createI18nStore from "./createI18nStore";
|
||||
|
||||
const defaultI18nState = {
|
||||
locale: "en",
|
||||
};
|
||||
|
||||
const i18nStore = createI18nStore(defaultI18nState);
|
||||
|
||||
export default i18nStore;
|
||||
@ -1,57 +0,0 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import i18nStore from "./i18nStore";
|
||||
import enLocale from "../../locales/en.json";
|
||||
import zhLocale from "../../locales/zh.json";
|
||||
import viLocale from "../../locales/vi.json";
|
||||
|
||||
const resources: Record<string, any> = {
|
||||
en: enLocale,
|
||||
zh: zhLocale,
|
||||
vi: viLocale,
|
||||
};
|
||||
|
||||
const useI18n = () => {
|
||||
const [{ locale }, setState] = useState(i18nStore.getState());
|
||||
|
||||
useEffect(() => {
|
||||
const unsubscribe = i18nStore.subscribe((ns) => {
|
||||
setState(ns);
|
||||
});
|
||||
|
||||
return () => {
|
||||
unsubscribe();
|
||||
};
|
||||
}, []);
|
||||
|
||||
const translate = (key: string): string => {
|
||||
const keys = key.split(".");
|
||||
let value = resources[locale];
|
||||
for (const k of keys) {
|
||||
if (value) {
|
||||
value = value[k];
|
||||
} else {
|
||||
return key;
|
||||
}
|
||||
}
|
||||
|
||||
if (value) {
|
||||
return value;
|
||||
} else {
|
||||
return key;
|
||||
}
|
||||
};
|
||||
|
||||
const setLocale = (locale: Locale) => {
|
||||
i18nStore.setState({
|
||||
locale,
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
t: translate,
|
||||
locale,
|
||||
setLocale,
|
||||
};
|
||||
};
|
||||
|
||||
export default useI18n;
|
||||
Loading…
Reference in New Issue