test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-29 18:50:00 +08:00
Code Issues Actions 48 Packages Projects Releases Wiki Activity

chore: use startTransition to avoid affecting hydration (#39155)

Browse Source 
* chore: use startTransition to avoid affecting hydration

* chore: code clean
This commit is contained in:
MadCcc 2022-12-01 17:55:20 +08:00 committed by GitHub
parent 720b514ac5
commit f863703f12
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
.dumi/theme/layouts/GlobalLayout.tsx
View File

@ -1,10 +1,8 @@
import React, { useLayoutEffect } from 'react';
import React, { startTransition, useLayoutEffect } from 'react';
import { useOutlet } from 'dumi';
import { ConfigProvider, theme as antdTheme } from 'antd';
import type { ThemeConfig } from 'antd/es/config-provider/context';
import { createCache, StyleProvider } from '@ant-design/cssinjs';
import type { ThemeContextProps } from '../slots/ThemeContext';
import ThemeContext from '../slots/ThemeContext';
import ThemeSwitch from '../common/ThemeSwitch';
import useLocation from '../../hooks/useLocation';
@ -60,48 +58,32 @@ const GlobalLayout: React.FC = () => {
);
};
const contextValue = React.useMemo<ThemeContextProps>(
() => ({
theme,
setTheme: handleThemeChange,
}),
[theme],
);
useLayoutEffect(() => {
const localTheme = localStorage.getItem(ANT_DESIGN_SITE_THEME);
if (localTheme) {
try {
const themeConfig = JSON.parse(localTheme);
if (themeConfig.algorithm) {
themeConfig.algorithm = themeConfig.algorithm.map((item: string) => getAlgorithm(item));
} else {
themeConfig.algorithm = [antdTheme.defaultAlgorithm];
}
setTheme(themeConfig);
} catch (e) {
console.error(e);
const themeConfig = JSON.parse(localTheme);
if (themeConfig.algorithm) {
themeConfig.algorithm = themeConfig.algorithm.map((item: string) => getAlgorithm(item));
} else {
themeConfig.algorithm = [antdTheme.defaultAlgorithm];
}
startTransition(() => {
setTheme(themeConfig);
});
}
}, []);
return (
<StyleProvider cache={styleCache}>
<ThemeContext.Provider value={contextValue}>
<ConfigProvider
theme={{
...theme,
}}
>
{outlet}
{!pathname.startsWith('/~demos') && (
<ThemeSwitch
value={theme.algorithm as []}
onChange={(value) => handleThemeChange({ ...theme, algorithm: value }, false)}
/>
)}
</ConfigProvider>
</ThemeContext.Provider>
<ConfigProvider theme={theme}>
{outlet}
{!pathname.startsWith('/~demos') && (
<ThemeSwitch
value={theme.algorithm as []}
onChange={(value) => handleThemeChange({ ...theme, algorithm: value }, false)}
/>
)}
</ConfigProvider>
</StyleProvider>
);
};

11
.dumi/theme/slots/ThemeContext.tsx
View File

@ -1,11 +0,0 @@
import { createContext } from 'react';
import type { ThemeConfig } from 'antd/es/config-provider/context';
export type ThemeContextProps = {
theme: ThemeConfig;
setTheme: (theme: ThemeConfig) => void;
};
const ThemeContext = createContext<ThemeContextProps>({ theme: {}, setTheme: () => {} });
export default ThemeContext;