90 lines
2.4 KiB
TypeScript
90 lines
2.4 KiB
TypeScript
|
import { RootState } from '@/app/store';
|
||
|
|
import globalMessage from '@/components/message';
|
||
|
|
import { Locale, Theme } from '@/enum';
|
||
|
|
import * as langs from '@/langs';
|
||
|
|
import * as themes from '@/themes';
|
||
|
|
import { CSSVariablesStyle } from '@/themes/CSSVariablesStyle';
|
||
|
|
import { ConfigProvider } from '@df/toco-ui';
|
||
|
|
import { Store } from '@reduxjs/toolkit';
|
||
|
|
import { message as tocoMessage } from 'antd';
|
||
|
|
import enUS from 'antd/locale/en_US';
|
||
|
|
import zhCN from 'antd/locale/zh_CN';
|
||
|
|
import React, { useEffect, useMemo } from 'react';
|
||
|
|
import { HelmetProvider } from 'react-helmet-async';
|
||
|
|
import { IntlProvider } from 'react-intl';
|
||
|
|
import { Provider, useSelector } from 'react-redux';
|
||
|
|
|
||
|
|
const helmetContext = {};
|
||
|
|
|
||
|
|
type AppWrapperProps = {
|
||
|
|
children: React.ReactNode;
|
||
|
|
store: Store;
|
||
|
|
};
|
||
|
|
const AppWrapper = (props: AppWrapperProps) => {
|
||
|
|
const { children, store } = props;
|
||
|
|
return (
|
||
|
|
<Provider store={store}>
|
||
|
|
<Insider>{children}</Insider>
|
||
|
|
</Provider>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
type InsiderProps = {
|
||
|
|
children: React.ReactNode;
|
||
|
|
};
|
||
|
|
const Insider = (props: InsiderProps) => {
|
||
|
|
const { children } = props;
|
||
|
|
const [message, messageContextHolder] = tocoMessage.useMessage();
|
||
|
|
|
||
|
|
const locale = useSelector((state: RootState) => state.common.locale);
|
||
|
|
const theme = useSelector((state: RootState) => state.common.theme);
|
||
|
|
const primaryColor = useSelector(
|
||
|
|
(state: RootState) => state.common.primaryColor,
|
||
|
|
);
|
||
|
|
|
||
|
|
const antdLocaleMap = {
|
||
|
|
[Locale.zh_CN]: zhCN,
|
||
|
|
[Locale.en_US]: enUS,
|
||
|
|
};
|
||
|
|
const langsMap = {
|
||
|
|
[Locale.zh_CN]: langs.zh_CN,
|
||
|
|
[Locale.en_US]: langs.en_US,
|
||
|
|
};
|
||
|
|
|
||
|
|
const themeConfig = useMemo(() => {
|
||
|
|
const themeMap = {
|
||
|
|
[Theme.DEFAULT]: themes.defaultTheme,
|
||
|
|
[Theme.DARK]: themes.darkTheme,
|
||
|
|
};
|
||
|
|
const config = themeMap[theme];
|
||
|
|
if (primaryColor) {
|
||
|
|
return {
|
||
|
|
...config,
|
||
|
|
token: {
|
||
|
|
...(config.token ?? {}),
|
||
|
|
colorPrimary: primaryColor,
|
||
|
|
},
|
||
|
|
};
|
||
|
|
}
|
||
|
|
return config;
|
||
|
|
}, [primaryColor, theme]);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
globalMessage.setMessage(message);
|
||
|
|
}, [message]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<HelmetProvider context={helmetContext}>
|
||
|
|
<IntlProvider locale={locale} messages={langsMap[locale]}>
|
||
|
|
<ConfigProvider locale={antdLocaleMap[locale]} theme={themeConfig}>
|
||
|
|
<CSSVariablesStyle />
|
||
|
|
{messageContextHolder}
|
||
|
|
{children}
|
||
|
|
</ConfigProvider>
|
||
|
|
</IntlProvider>
|
||
|
|
</HelmetProvider>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default AppWrapper;
|