feat: optimize antd-config-orovider
This commit is contained in:
parent
a5393e52c7
commit
224a08c057
25
packages/client/src/antd-config-provider/demos/demo1.tsx
Normal file
25
packages/client/src/antd-config-provider/demos/demo1.tsx
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Table } from 'antd';
|
||||||
|
import { i18n, compose, APIClient, APIClientProvider, AntdConfigProvider } from '@nocobase/client';
|
||||||
|
import MockAdapter from 'axios-mock-adapter';
|
||||||
|
import { I18nextProvider } from 'react-i18next';
|
||||||
|
|
||||||
|
const apiClient = new APIClient({
|
||||||
|
baseURL: `${location.protocol}//${location.host}/api/`,
|
||||||
|
});
|
||||||
|
|
||||||
|
const mock = new MockAdapter(apiClient.axios);
|
||||||
|
|
||||||
|
mock.onGet('/app:getLang').reply(200, {
|
||||||
|
data: { lang: 'zh-CN' },
|
||||||
|
});
|
||||||
|
|
||||||
|
const providers = [
|
||||||
|
[APIClientProvider, { apiClient }],
|
||||||
|
[I18nextProvider, { i18n }],
|
||||||
|
[AntdConfigProvider, { remoteLocale: true }],
|
||||||
|
];
|
||||||
|
|
||||||
|
export default compose(...providers)(() => {
|
||||||
|
return <Table />;
|
||||||
|
});
|
@ -7,4 +7,6 @@ group:
|
|||||||
|
|
||||||
# AntdConfigProvider
|
# AntdConfigProvider
|
||||||
|
|
||||||
为 antd 组件提供统一的全局化配置
|
为 antd 组件提供统一的全局化配置
|
||||||
|
|
||||||
|
<code src="./demos/demo1.tsx" />
|
||||||
|
@ -3,8 +3,31 @@ import { I18nextProvider, useTranslation } from 'react-i18next';
|
|||||||
import { ConfigProvider, Spin } from 'antd';
|
import { ConfigProvider, Spin } from 'antd';
|
||||||
import enUS from 'antd/lib/locale/en_US';
|
import enUS from 'antd/lib/locale/en_US';
|
||||||
import zhCN from 'antd/lib/locale/zh_CN';
|
import zhCN from 'antd/lib/locale/zh_CN';
|
||||||
|
import { useRequest } from '../api-client';
|
||||||
|
|
||||||
export function AntdConfigProvider(props) {
|
export function AntdConfigProvider(props) {
|
||||||
|
const { remoteLocale, ...others } = props;
|
||||||
const { i18n } = useTranslation();
|
const { i18n } = useTranslation();
|
||||||
return <ConfigProvider locale={i18n.language === 'zh-CN' ? zhCN : enUS}>{props.children}</ConfigProvider>;
|
const { loading } = useRequest(
|
||||||
|
{
|
||||||
|
url: 'app:getLang',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
onSuccess(data) {
|
||||||
|
const locale = localStorage.getItem('locale');
|
||||||
|
if (data?.data?.lang && locale !== data?.data?.lang) {
|
||||||
|
i18n.changeLanguage(data?.data?.lang);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
manual: !remoteLocale,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
if (loading) {
|
||||||
|
return <Spin />;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<ConfigProvider {...others} locale={i18n.language === 'zh-CN' ? zhCN : enUS}>
|
||||||
|
{props.children}
|
||||||
|
</ConfigProvider>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user