useTheme.js 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. import useMemo from "rc-util/es/hooks/useMemo";
  2. import isEqual from "rc-util/es/isEqual";
  3. import { devUseWarning } from '../../_util/warning';
  4. import { defaultConfig } from '../../theme/internal';
  5. import useThemeKey from './useThemeKey';
  6. export default function useTheme(theme, parentTheme, config) {
  7. var _a, _b;
  8. const warning = devUseWarning('ConfigProvider');
  9. const themeConfig = theme || {};
  10. const parentThemeConfig = themeConfig.inherit === false || !parentTheme ? Object.assign(Object.assign({}, defaultConfig), {
  11. hashed: (_a = parentTheme === null || parentTheme === void 0 ? void 0 : parentTheme.hashed) !== null && _a !== void 0 ? _a : defaultConfig.hashed,
  12. cssVar: parentTheme === null || parentTheme === void 0 ? void 0 : parentTheme.cssVar
  13. }) : parentTheme;
  14. const themeKey = useThemeKey();
  15. if (process.env.NODE_ENV !== 'production') {
  16. const cssVarEnabled = themeConfig.cssVar || parentThemeConfig.cssVar;
  17. const validKey = !!(typeof themeConfig.cssVar === 'object' && ((_b = themeConfig.cssVar) === null || _b === void 0 ? void 0 : _b.key) || themeKey);
  18. process.env.NODE_ENV !== "production" ? 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.') : void 0;
  19. }
  20. return useMemo(() => {
  21. var _a, _b;
  22. if (!theme) {
  23. return parentTheme;
  24. }
  25. // Override
  26. const mergedComponents = Object.assign({}, parentThemeConfig.components);
  27. Object.keys(theme.components || {}).forEach(componentName => {
  28. mergedComponents[componentName] = Object.assign(Object.assign({}, mergedComponents[componentName]), theme.components[componentName]);
  29. });
  30. const cssVarKey = `css-var-${themeKey.replace(/:/g, '')}`;
  31. const mergedCssVar = ((_a = themeConfig.cssVar) !== null && _a !== void 0 ? _a : parentThemeConfig.cssVar) && Object.assign(Object.assign(Object.assign({
  32. prefix: config === null || config === void 0 ? void 0 : config.prefixCls
  33. }, typeof parentThemeConfig.cssVar === 'object' ? parentThemeConfig.cssVar : {}), typeof themeConfig.cssVar === 'object' ? themeConfig.cssVar : {}), {
  34. key: typeof themeConfig.cssVar === 'object' && ((_b = themeConfig.cssVar) === null || _b === void 0 ? void 0 : _b.key) || cssVarKey
  35. });
  36. // Base token
  37. return Object.assign(Object.assign(Object.assign({}, parentThemeConfig), themeConfig), {
  38. token: Object.assign(Object.assign({}, parentThemeConfig.token), themeConfig.token),
  39. components: mergedComponents,
  40. cssVar: mergedCssVar
  41. });
  42. }, [themeConfig, parentThemeConfig], (prev, next) => prev.some((prevTheme, index) => {
  43. const nextTheme = next[index];
  44. return !isEqual(prevTheme, nextTheme, true);
  45. }));
  46. }