ant-design/.dumi/theme/layouts/GlobalLayout.tsx
afc163 cf476d9477
chore: improve ThemeSwitcher implementation (#39398)
* docs: theme should be in searchParams

* chore: use locale text

* chore: fix searchParams usage

* fix: compact can use with dark/light theme

* chore: fix lint
2022-12-08 17:44:49 +08:00

54 lines
1.5 KiB
TypeScript

import React from 'react';
import { useOutlet, useSearchParams } from 'dumi';
import { ConfigProvider, theme as antdTheme } from 'antd';
import { createCache, StyleProvider } from '@ant-design/cssinjs';
import ThemeSwitch from '../common/ThemeSwitch';
import type { ThemeName } from '../common/ThemeSwitch';
import useLocation from '../../hooks/useLocation';
const styleCache = createCache();
if (typeof global !== 'undefined') {
(global as any).styleCache = styleCache;
}
const getAlgorithm = (themes: ThemeName[]) =>
(themes || []).map((theme) => {
if (theme === 'dark') {
return antdTheme.darkAlgorithm;
}
if (theme === 'compact') {
return antdTheme.compactAlgorithm;
}
return antdTheme.defaultAlgorithm;
});
const GlobalLayout: React.FC = () => {
const outlet = useOutlet();
const { pathname } = useLocation();
const [searchParams, setSearchParams] = useSearchParams();
const theme = searchParams.getAll('theme') as unknown as ThemeName[];
const handleThemeChange = (value: ThemeName[]) => {
setSearchParams({
...searchParams,
theme: value,
});
};
return (
<StyleProvider cache={styleCache}>
<ConfigProvider
theme={{
algorithm: getAlgorithm(theme),
}}
>
{outlet}
{!pathname.startsWith('/~demos') && (
<ThemeSwitch value={theme} onChange={handleThemeChange} />
)}
</ConfigProvider>
</StyleProvider>
);
};
export default GlobalLayout;