mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 09:49:57 +08:00
4e29e8d1ce
* feat: css var * chore: fix type * chore: fix type * chore: update
82 lines
2.5 KiB
TypeScript
82 lines
2.5 KiB
TypeScript
import useMemo from 'rc-util/lib/hooks/useMemo';
|
|
import isEqual from 'rc-util/lib/isEqual';
|
|
import type { OverrideToken } from '../../theme/interface';
|
|
import type { ThemeConfig } from '../context';
|
|
import { defaultConfig } from '../../theme/internal';
|
|
import useThemeKey from './useThemeKey';
|
|
import { devUseWarning } from '../../_util/warning';
|
|
|
|
export default function useTheme(
|
|
theme?: ThemeConfig,
|
|
parentTheme?: ThemeConfig,
|
|
): ThemeConfig | undefined {
|
|
const warning = devUseWarning('ConfigProvider');
|
|
|
|
const themeConfig = theme || {};
|
|
const parentThemeConfig: ThemeConfig =
|
|
themeConfig.inherit === false || !parentTheme ? defaultConfig : parentTheme;
|
|
|
|
const themeKey = useThemeKey();
|
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
const cssVarEnabled = themeConfig.cssVar || parentThemeConfig.cssVar;
|
|
const validKey = !!(
|
|
(typeof themeConfig.cssVar === 'object' && themeConfig.cssVar?.key) ||
|
|
themeKey
|
|
);
|
|
warning(
|
|
!cssVarEnabled || validKey,
|
|
'breaking',
|
|
'Missing key in `cssVar` config. Please upgrade to React 18 or set `cssVar.key` manually in each ConfigProvider inside `cssVar` enabled ConfigProvider.',
|
|
);
|
|
}
|
|
|
|
return useMemo<ThemeConfig | undefined>(
|
|
() => {
|
|
if (!theme) {
|
|
return parentTheme;
|
|
}
|
|
|
|
// Override
|
|
const mergedComponents = {
|
|
...parentThemeConfig.components,
|
|
};
|
|
|
|
Object.keys(theme.components || {}).forEach((componentName: keyof OverrideToken) => {
|
|
mergedComponents[componentName] = {
|
|
...mergedComponents[componentName],
|
|
...theme.components![componentName],
|
|
} as any;
|
|
});
|
|
|
|
const cssVarKey = `css-var-${themeKey.replace(/:/g, '')}`;
|
|
const mergedCssVar = (themeConfig.cssVar || parentThemeConfig.cssVar) && {
|
|
prefix: 'antd', // Default to antd
|
|
...(typeof parentThemeConfig.cssVar === 'object' ? parentThemeConfig.cssVar : {}),
|
|
...(typeof themeConfig.cssVar === 'object' ? themeConfig.cssVar : {}),
|
|
key: (typeof themeConfig.cssVar === 'object' && themeConfig.cssVar?.key) || cssVarKey,
|
|
};
|
|
|
|
// Base token
|
|
return {
|
|
...parentThemeConfig,
|
|
...themeConfig,
|
|
|
|
token: {
|
|
...parentThemeConfig.token,
|
|
...themeConfig.token,
|
|
},
|
|
components: mergedComponents,
|
|
cssVar: mergedCssVar,
|
|
};
|
|
},
|
|
[themeConfig, parentThemeConfig],
|
|
(prev, next) =>
|
|
prev.some((prevTheme, index) => {
|
|
const nextTheme = next[index];
|
|
|
|
return !isEqual(prevTheme, nextTheme, true);
|
|
}),
|
|
);
|
|
}
|