tachybase_todo/packages/client/src/ConfigProvider.tsx
chenos 479f64f197
feat: support i18n (#99)
* feat: i18next

* multi language data

* feat(client): locale support

* en-US for collections

* us-EN for routes

* en-US for routes

* en-US for attachments

* feat: partial translations

* translation

* add AntdConfigProvider

* translation

* translation

* feat: translation

* feat: add translation

* fix: improve translation

* feat: improve translation

* fix: SyntaxError: Unexpected token ) in JSON at position

* typo

* feat: improve translation

* feat: improve translation

* feat: language settings can be saved on the server

* feat: lang option of init cli

* demo translation

* typo

* change address field to textarea

* address data

* feat: chart translation

* feat: chart translation

* improve translation

* signin,signup,signout...

Co-authored-by: Zhou <zhou.working@gmail.com>
2021-11-08 19:32:59 +08:00

41 lines
1.3 KiB
TypeScript

import React, { createContext } from 'react';
import { I18nextProvider, useTranslation } from 'react-i18next';
import { i18n } from './i18n';
import { ConfigProvider as AntdConfigProvider, Spin } from 'antd';
import enUS from 'antd/lib/locale/en_US';
import zhCN from 'antd/lib/locale/zh_CN';
import { ClientProvider, useClient } from './constate';
import useRequest from '@ahooksjs/use-request';
function AntdProvider(props) {
const { i18n } = useTranslation();
const { client } = useClient();
const { loading } = useRequest(() => client.request('app:getLang'), {
onSuccess(data) {
const locale = localStorage.getItem('locale');
if (locale !== data.lang) {
console.log('changeLanguage', data.lang);
i18n.changeLanguage(data.lang);
}
},
refreshDeps: [i18n.language],
formatResult: (data) => data?.data,
});
if (loading) {
return <Spin />;
}
console.log('i18n.language', i18n.language);
return <AntdConfigProvider locale={i18n.language === 'zh-CN' ? zhCN : enUS}>{props.children}</AntdConfigProvider>;
}
export function ConfigProvider(props: any) {
const { client } = props;
return (
<ClientProvider client={client}>
<I18nextProvider i18n={i18n}>
<AntdProvider>{props.children}</AntdProvider>
</I18nextProvider>
</ClientProvider>
);
}