diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx index 09f97e4987..ba2056fb85 100644 --- a/components/config-provider/index.tsx +++ b/components/config-provider/index.tsx @@ -24,11 +24,11 @@ import defaultSeedToken from '../theme/themes/seed'; import type { BadgeConfig, ButtonConfig, - DrawerConfig, ComponentStyleConfig, ConfigConsumerProps, CSPConfig, DirectionType, + DrawerConfig, FlexConfig, ModalConfig, PopupOverflow, @@ -547,16 +547,21 @@ const ProviderChildren: React.FC = (props) => { parsedComponents[componentName] = parsedToken; }); + const mergedToken = { + ...defaultSeedToken, + ...token, + }; + return { ...rest, theme: themeObj, - token: { - ...defaultSeedToken, - ...token, - }, - + token: mergedToken, components: parsedComponents, + override: { + override: mergedToken, + ...parsedComponents, + }, }; }, [mergedTheme]); diff --git a/components/theme/context.ts b/components/theme/context.ts index 1908049ac8..1803754351 100644 --- a/components/theme/context.ts +++ b/components/theme/context.ts @@ -1,6 +1,7 @@ +import React from 'react'; import type { Theme } from '@ant-design/cssinjs'; import { createTheme } from '@ant-design/cssinjs'; -import React from 'react'; + import type { AliasToken, MapToken, OverrideToken, SeedToken } from './interface'; import defaultDerivative from './themes/default'; import defaultSeedToken from './themes/seed'; @@ -11,17 +12,22 @@ export const defaultTheme = createTheme(defaultDerivative); // To ensure snapshot stable. We disable hashed in test env. export const defaultConfig = { token: defaultSeedToken, + override: { override: defaultSeedToken }, hashed: true, }; +export type ComponentsToken = { + [key in keyof OverrideToken]?: OverrideToken[key] & { + theme?: Theme; + }; +}; + export interface DesignTokenProviderProps { token: Partial; theme?: Theme; - components?: { - [key in keyof OverrideToken]?: OverrideToken[key] & { - theme?: Theme; - }; - }; + components?: ComponentsToken; + /** Just merge `token` & `override` at top to save perf */ + override: { override: Partial } & ComponentsToken; hashed?: string | boolean; } diff --git a/components/theme/useToken.ts b/components/theme/useToken.ts index c508b09ada..831c6d4e3e 100644 --- a/components/theme/useToken.ts +++ b/components/theme/useToken.ts @@ -1,10 +1,11 @@ +import React from 'react'; import type { Theme } from '@ant-design/cssinjs'; import { useCacheToken } from '@ant-design/cssinjs'; -import React from 'react'; + import version from '../version'; -import type { AliasToken, GlobalToken, MapToken, SeedToken } from './interface'; import type { DesignTokenProviderProps } from './context'; import { defaultTheme, DesignTokenContext } from './context'; +import type { AliasToken, GlobalToken, MapToken, SeedToken } from './interface'; import defaultSeedToken from './themes/seed'; import formatToken from './util/alias'; @@ -57,12 +58,7 @@ export default function useToken(): [ token: GlobalToken, hashId: string, ] { - const { - token: rootDesignToken, - hashed, - theme, - components, - } = React.useContext(DesignTokenContext); + const { token: rootDesignToken, hashed, theme, override } = React.useContext(DesignTokenContext); const salt = `${version}-${hashed || ''}`; @@ -73,7 +69,7 @@ export default function useToken(): [ [defaultSeedToken, rootDesignToken], { salt, - override: { override: rootDesignToken, ...components }, + override, getComputedToken, // formatToken will not be consumed after 1.15.0 with getComputedToken. // But token will break if @ant-design/cssinjs is under 1.15.0 without it diff --git a/components/tree/demo/virtual-scroll.tsx b/components/tree/demo/virtual-scroll.tsx index 38cb78c826..2b4c6be3a2 100644 --- a/components/tree/demo/virtual-scroll.tsx +++ b/components/tree/demo/virtual-scroll.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Tree } from 'antd'; +import { Tooltip, Tree } from 'antd'; import type { DataNode } from 'antd/es/tree'; const dig = (path = '0', level = 3) => { @@ -22,6 +22,15 @@ const dig = (path = '0', level = 3) => { const treeData = dig(); -const App: React.FC = () => ; +const MemoTooltip = Tooltip || React.memo(Tooltip); + +const App: React.FC = () => ( + {item.title as any}} + /> +); export default App; diff --git a/package.json b/package.json index 59f85c0d87..d8259919d7 100644 --- a/package.json +++ b/package.json @@ -110,7 +110,7 @@ ], "dependencies": { "@ant-design/colors": "^7.0.0", - "@ant-design/cssinjs": "^1.17.0", + "@ant-design/cssinjs": "^1.17.1", "@ant-design/icons": "^5.2.6", "@ant-design/react-slick": "~1.0.2", "@babel/runtime": "^7.18.3", @@ -154,7 +154,7 @@ "rc-tree": "~5.7.12", "rc-tree-select": "~5.13.0", "rc-upload": "~4.3.5", - "rc-util": "^5.37.0", + "rc-util": "^5.38.0", "scroll-into-view-if-needed": "^3.0.3", "throttle-debounce": "^5.0.0" }, @@ -217,7 +217,7 @@ "cross-fetch": "^4.0.0", "crypto": "^1.0.1", "dekko": "^0.2.1", - "dumi": "^2.3.0-alpha.4", + "dumi": "^2.3.0-alpha.7", "dumi-plugin-color-chunk": "^1.0.2", "duplicate-package-checker-webpack-plugin": "^3.0.0", "esbuild-loader": "^4.0.0", diff --git a/scripts/collect-token-statistic.ts b/scripts/collect-token-statistic.ts index 602196c249..847a0f28fa 100644 --- a/scripts/collect-token-statistic.ts +++ b/scripts/collect-token-statistic.ts @@ -1,9 +1,10 @@ /* eslint-disable no-console */ +import React from 'react'; import chalk from 'chalk'; import fs from 'fs-extra'; import ProgressBar from 'progress'; -import React from 'react'; import ReactDOMServer from 'react-dom/server'; + import { DesignTokenContext } from '../components/theme/internal'; import seedToken from '../components/theme/themes/seed'; import { statistic } from '../components/theme/util/statistic'; @@ -26,10 +27,18 @@ const bar = new ProgressBar('🚀 Collecting by component: [:bar] :component (:c render(Component: any) { ReactDOMServer.renderToString(React.createElement(Component)); // Render wireframe + const wireframeToken = { ...seedToken, wireframe: true }; ReactDOMServer.renderToString( React.createElement( DesignTokenContext.Provider, - { value: { token: { ...seedToken, wireframe: true } } }, + { + value: { + token: wireframeToken, + override: { + override: wireframeToken, + }, + }, + }, React.createElement(Component), ), );