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

chore: auto merge branches (#46446)

Browse Source 
chore: merge master into feature
This commit is contained in:
github-actions[bot] 2023-12-14 07:32:07 +00:00 committed by GitHub
commit 5f9e52a5a8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
99 changed files with 482 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/affix/index.tsx
View File

@ -243,9 +243,9 @@ const Affix = React.forwardRef<AffixRef, AffixProps>((props, ref) => {
updatePosition();
}, [target, offsetTop, offsetBottom]);
const [wrapCSSVar, hashId] = useStyle(affixPrefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(affixPrefixCls);
const rootCls = classNames(rootClassName, hashId, affixPrefixCls);
const rootCls = classNames(rootClassName, hashId, affixPrefixCls, cssVarCls);
const mergedCls = classNames({ [rootCls]: affixStyle });

3
components/alert/Alert.tsx
View File

@ -127,7 +127,7 @@ const Alert: React.FC<AlertProps> = (props) => {
const { getPrefixCls, direction, alert } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('alert', customizePrefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
const handleClose = (e: React.MouseEvent<HTMLButtonElement>) => {
setClosed(true);
@ -169,6 +169,7 @@ const Alert: React.FC<AlertProps> = (props) => {
alert?.className,
className,
rootClassName,
cssVarCls,
hashId,
);

3
components/anchor/Anchor.tsx
View File

@ -153,7 +153,7 @@ const Anchor: React.FC<AnchorProps> = (props) => {
const prefixCls = getPrefixCls('anchor', customPrefixCls);
const rootCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
const getCurrentContainer = getContainer ?? getTargetContainer ?? getDefaultContainer;
@ -273,6 +273,7 @@ const Anchor: React.FC<AnchorProps> = (props) => {
const wrapperClass = classNames(
hashId,
cssVarCls,
rootCls,
rootClassName,
`${prefixCls}-wrapper`,

4
components/app/index.tsx
View File

@ -36,8 +36,8 @@ const App: React.FC<AppProps> & { useApp: () => useAppProps } = (props) => {
} = props;
const { getPrefixCls } = useContext<ConfigConsumerProps>(ConfigContext);
const prefixCls = getPrefixCls('app', customizePrefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const customClassName = classNames(hashId, prefixCls, className, rootClassName);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
const customClassName = classNames(hashId, prefixCls, className, rootClassName, cssVarCls);
const appConfig = useContext<AppConfig>(AppConfigContext);

5
components/avatar/avatar.tsx
View File

@ -145,8 +145,8 @@ const InternalAvatar: React.ForwardRefRenderFunction<HTMLSpanElement, AvatarProp
}
const prefixCls = getPrefixCls('avatar', customizePrefixCls);
const cssVarCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls, cssVarCls);
const rootCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
const sizeCls = classNames({
[`${prefixCls}-lg`]: size === 'large',
@ -167,6 +167,7 @@ const InternalAvatar: React.ForwardRefRenderFunction<HTMLSpanElement, AvatarProp
[`${prefixCls}-icon`]: !!icon,
},
cssVarCls,
rootCls,
className,
rootClassName,
hashId,

5
components/avatar/group.tsx
View File

@ -61,8 +61,8 @@ const Group: React.FC<GroupProps> = (props) => {
const prefixCls = getPrefixCls('avatar', customizePrefixCls);
const groupPrefixCls = `${prefixCls}-group`;
const cssVarCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls, cssVarCls);
const rootCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
const cls = classNames(
groupPrefixCls,
@ -70,6 +70,7 @@ const Group: React.FC<GroupProps> = (props) => {
[`${groupPrefixCls}-rtl`]: direction === 'rtl',
},
cssVarCls,
rootCls,
className,
rootClassName,
hashId,

3
components/back-top/index.tsx
View File

@ -77,10 +77,11 @@ const BackTop: React.FC<BackTopProps> = (props) => {
const rootPrefixCls = getPrefixCls();
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
const classString = classNames(
hashId,
cssVarCls,
prefixCls,
{
[`${prefixCls}-rtl`]: direction === 'rtl',

5
components/badge/Ribbon.tsx
View File

@ -34,7 +34,8 @@ const Ribbon: React.FC<RibbonProps> = (props) => {
const { getPrefixCls, direction } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('ribbon', customizePrefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const wrapperCls = `${prefixCls}-wrapper`;
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, wrapperCls);
const colorInPreset = isPresetColor(color, false);
const ribbonCls = classNames(
@ -54,7 +55,7 @@ const Ribbon: React.FC<RibbonProps> = (props) => {
cornerColorStyle.color = color;
}
return wrapCSSVar(
<div className={classNames(`${prefixCls}-wrapper`, rootClassName, hashId)}>
<div className={classNames(wrapperCls, rootClassName, hashId, cssVarCls)}>
{children}
<div className={classNames(ribbonCls, hashId)} style={{ ...colorStyle, ...style }}>
<span className={`${prefixCls}-text`}>{text}</span>

3
components/badge/index.tsx
View File

@ -76,7 +76,7 @@ const InternalBadge: React.ForwardRefRenderFunction<HTMLSpanElement, BadgeProps>
const { getPrefixCls, direction, badge } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('badge', customizePrefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
// ================================ Misc ================================
const numberedDisplayCount = (
@ -183,6 +183,7 @@ const InternalBadge: React.ForwardRefRenderFunction<HTMLSpanElement, BadgeProps>
badge?.classNames?.root,
classNames?.root,
hashId,
cssVarCls,
);
// <Badge status="success" />

6
components/badge/style/ribbon.ts
View File

@ -1,9 +1,9 @@
import { unit } from '@ant-design/cssinjs';
import { prepareComponentToken, prepareToken, type BadgeToken } from '.';
import { type BadgeToken, prepareComponentToken, prepareToken } from '.';
import { resetComponent } from '../../style';
import type { GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, genPresetColor } from '../../theme/internal';
import { genPresetColor, genStyleHooks } from '../../theme/internal';
// ============================== Ribbon ==============================
const genRibbonStyle: GenerateStyle<BadgeToken> = (token) => {
@ -75,7 +75,7 @@ const genRibbonStyle: GenerateStyle<BadgeToken> = (token) => {
};
// ============================== Export ==============================
export default genComponentStyleHook(
export default genStyleHooks(
['Badge', 'Ribbon'],
(token) => {
const badgeToken = prepareToken(token);

3
components/breadcrumb/Breadcrumb.tsx
View File

@ -95,7 +95,7 @@ const Breadcrumb = <T extends AnyObject = AnyObject>(props: BreadcrumbProps<T>)
let crumbs: React.ReactNode;
const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
const mergedItems = useItems(items, legacyRoutes);
@ -213,6 +213,7 @@ const Breadcrumb = <T extends AnyObject = AnyObject>(props: BreadcrumbProps<T>)
className,
rootClassName,
hashId,
cssVarCls,
);
const mergedStyle: React.CSSProperties = { ...breadcrumb?.style, ...style };

3
components/button/button.tsx
View File

@ -118,7 +118,7 @@ const InternalButton: React.ForwardRefRenderFunction<
const { getPrefixCls, autoInsertSpaceInButton, direction, button } = useContext(ConfigContext);
const prefixCls = getPrefixCls('btn', customizePrefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
const disabled = useContext(DisabledContext);
const mergedDisabled = customDisabled ?? disabled;
@ -215,6 +215,7 @@ const InternalButton: React.ForwardRefRenderFunction<
const classes = classNames(
prefixCls,
hashId,
cssVarCls,
{
[`${prefixCls}-${shape}`]: shape !== 'default' && shape,
[`${prefixCls}-${type}`]: type,

3
components/calendar/generateCalendar.tsx
View File

@ -119,7 +119,7 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
const prefixCls = getPrefixCls('picker', customizePrefixCls);
const calendarPrefixCls = `${prefixCls}-calendar`;
const [wrapCSSVar, hashId] = useStyle(prefixCls, calendarPrefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, calendarPrefixCls);
const today = generateConfig.getNow();
@ -294,6 +294,7 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
className,
rootClassName,
hashId,
cssVarCls,
)}
style={{ ...calendar?.style, ...style }}
>

3
components/card/Card.tsx
View File

@ -109,7 +109,7 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
}, [children]);
const prefixCls = getPrefixCls('card', customizePrefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
const loadingBlock = (
<Skeleton loading active paragraph={{ rows: 4 }} title={false}>
@ -177,6 +177,7 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
className,
rootClassName,
hashId,
cssVarCls,
);
const mergedStyle: React.CSSProperties = { ...card?.style, ...style };

3
components/carousel/index.tsx
View File

@ -94,7 +94,7 @@ const Carousel = React.forwardRef<CarouselRef, CarouselProps>((props, ref) => {
typeof dots === 'boolean' ? false : dots?.className,
);
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
const className = classNames(
prefixCls,
@ -103,6 +103,7 @@ const Carousel = React.forwardRef<CarouselRef, CarouselProps>((props, ref) => {
[`${prefixCls}-vertical`]: newProps.vertical,
},
hashId,
cssVarCls,
rootClassName,
);

4
components/cascader/Panel.tsx
View File

@ -33,7 +33,7 @@ export default function CascaderPanel(props: CascaderPanelProps) {
);
const rootCls = useCSSVarCls(cascaderPrefixCls);
const [wrapCSSVar, hashId] = useStyle(cascaderPrefixCls, rootCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(cascaderPrefixCls, rootCls);
usePanelStyle(cascaderPrefixCls);
const isRtl = mergedDirection === 'rtl';
@ -56,7 +56,7 @@ export default function CascaderPanel(props: CascaderPanelProps) {
{...props}
checkable={checkable}
prefixCls={cascaderPrefixCls}
className={classNames(className, hashId, rootClassName, rootCls)}
className={classNames(className, hashId, rootClassName, cssVarCls, rootCls)}
notFoundContent={mergedNotFoundContent}
direction={mergedDirection}
expandIcon={mergedExpandIcon}

4
components/cascader/index.tsx
View File

@ -213,7 +213,7 @@ const Cascader = React.forwardRef<CascaderRef, CascaderProps<any>>((props, ref)
const rootPrefixCls = getPrefixCls();
const rootCls = useCSSVarCls(prefixCls);
const [wrapSelectCSSVar, hashId] = useSelectStyle(prefixCls, rootCls);
const [wrapSelectCSSVar, hashId, cssVarCls] = useSelectStyle(prefixCls, rootCls);
const cascaderRootCls = useCSSVarCls(cascaderPrefixCls);
const [wrapCascaderCSSVar] = useStyle(cascaderPrefixCls, cascaderRootCls);
@ -235,6 +235,7 @@ const Cascader = React.forwardRef<CascaderRef, CascaderProps<any>>((props, ref)
rootCls,
cascaderRootCls,
hashId,
cssVarCls,
);
// ==================== Search =====================
@ -318,6 +319,7 @@ const Cascader = React.forwardRef<CascaderRef, CascaderProps<any>>((props, ref)
rootCls,
cascaderRootCls,
hashId,
cssVarCls,
)}
disabled={mergedDisabled}
style={{ ...cascader?.style, ...style }}

3
components/checkbox/Checkbox.tsx
View File

@ -107,7 +107,7 @@ const InternalCheckbox: React.ForwardRefRenderFunction<CheckboxRef, CheckboxProp
const prefixCls = getPrefixCls('checkbox', customizePrefixCls);
const rootCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
const checkboxProps: CheckboxProps = { ...restProps };
if (checkboxGroup && !skipGroup) {
@ -133,6 +133,7 @@ const InternalCheckbox: React.ForwardRefRenderFunction<CheckboxRef, CheckboxProp
checkbox?.className,
className,
rootClassName,
cssVarCls,
rootCls,
hashId,
);

3
components/checkbox/Group.tsx
View File

@ -112,7 +112,7 @@ const InternalGroup: React.ForwardRefRenderFunction<HTMLDivElement, CheckboxGrou
const groupPrefixCls = `${prefixCls}-group`;
const rootCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
const domProps = omit(restProps, ['value', 'disabled']);
@ -153,6 +153,7 @@ const InternalGroup: React.ForwardRefRenderFunction<HTMLDivElement, CheckboxGrou
},
className,
rootClassName,
cssVarCls,
rootCls,
hashId,
);

69
components/checkbox/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -165,6 +165,75 @@ Array [
exports[`renders components/checkbox/demo/controller.tsx extend context correctly 2`] = `[]`;
exports[`renders components/checkbox/demo/custom-line-width.tsx extend context correctly 1`] = `
Array [
<label
class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"
>
<span
class="ant-checkbox ant-wave-target ant-checkbox-checked"
>
<input
checked=""
class="ant-checkbox-input"
type="checkbox"
/>
<span
class="ant-checkbox-inner"
/>
</span>
</label>,
<label
class="ant-checkbox-wrapper"
>
<span
class="ant-checkbox ant-wave-target"
>
<input
class="ant-checkbox-input"
type="checkbox"
/>
<span
class="ant-checkbox-inner"
/>
</span>
</label>,
<label
class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"
>
<span
class="ant-checkbox ant-wave-target ant-checkbox-checked"
>
<input
checked=""
class="ant-checkbox-input"
type="checkbox"
/>
<span
class="ant-checkbox-inner"
/>
</span>
</label>,
<label
class="ant-checkbox-wrapper"
>
<span
class="ant-checkbox ant-wave-target"
>
<input
class="ant-checkbox-input"
type="checkbox"
/>
<span
class="ant-checkbox-inner"
/>
</span>
</label>,
]
`;
exports[`renders components/checkbox/demo/custom-line-width.tsx extend context correctly 2`] = `[]`;
exports[`renders components/checkbox/demo/debug-disable-popover.tsx extend context correctly 1`] = `
<div
style="padding: 56px;"

67
components/checkbox/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -159,6 +159,73 @@ Array [
]
`;
exports[`renders components/checkbox/demo/custom-line-width.tsx correctly 1`] = `
Array [
<label
class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"
>
<span
class="ant-checkbox ant-wave-target ant-checkbox-checked"
>
<input
checked=""
class="ant-checkbox-input"
type="checkbox"
/>
<span
class="ant-checkbox-inner"
/>
</span>
</label>,
<label
class="ant-checkbox-wrapper"
>
<span
class="ant-checkbox ant-wave-target"
>
<input
class="ant-checkbox-input"
type="checkbox"
/>
<span
class="ant-checkbox-inner"
/>
</span>
</label>,
<label
class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"
>
<span
class="ant-checkbox ant-wave-target ant-checkbox-checked"
>
<input
checked=""
class="ant-checkbox-input"
type="checkbox"
/>
<span
class="ant-checkbox-inner"
/>
</span>
</label>,
<label
class="ant-checkbox-wrapper"
>
<span
class="ant-checkbox ant-wave-target"
>
<input
class="ant-checkbox-input"
type="checkbox"
/>
<span
class="ant-checkbox-inner"
/>
</span>
</label>,
]
`;
exports[`renders components/checkbox/demo/debug-disable-popover.tsx correctly 1`] = `
<div
style="padding:56px"

7
components/checkbox/demo/custom-line-width.md Normal file
View File

@ -0,0 +1,7 @@
## zh-CN
测试自定义 lineWidth 的情况：https://github.com/ant-design/ant-design/issues/46307
## en-US
测试自定义 lineWidth 的情况：https://github.com/ant-design/ant-design/issues/46307

24
components/checkbox/demo/custom-line-width.tsx Normal file
View File

@ -0,0 +1,24 @@
import React from 'react';
import { Checkbox, ConfigProvider } from 'antd';
const App: React.FC = () => (
<>
<ConfigProvider
theme={{
cssVar: false,
components: {
Checkbox: {
lineWidth: 6,
},
},
}}
>
<Checkbox checked />
<Checkbox />
</ConfigProvider>
<Checkbox checked />
<Checkbox />
</>
);
export default App;

1
components/checkbox/index.en-US.md
View File

@ -26,6 +26,7 @@ Checkbox component.
<code src="./demo/layout.tsx">Use with Grid</code>
<code src="./demo/debug-line.tsx" debug>Same line</code>
<code src="./demo/debug-disable-popover.tsx" debug>Disabled to show Tooltip</code>
<code src="./demo/custom-line-width.tsx" debug>customize lineWidth</code>
## API

1
components/checkbox/index.zh-CN.md
View File

@ -27,6 +27,7 @@ demo:
<code src="./demo/layout.tsx">布局</code>
<code src="./demo/debug-line.tsx" debug>同行布局</code>
<code src="./demo/debug-disable-popover.tsx" debug>禁用下的 Tooltip</code>
<code src="./demo/custom-line-width.tsx" debug>自定义 lineWidth</code>
## API

5
components/checkbox/style/index.ts
View File

@ -96,9 +96,6 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
// Wrapper > Checkbox > inner
[`${checkboxCls}-inner`]: {
boxSizing: 'border-box',
position: 'relative',
top: 0,
insetInlineStart: 0,
display: 'block',
width: token.checkboxSize,
height: token.checkboxSize,
@ -113,7 +110,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
boxSizing: 'border-box',
position: 'absolute',
top: '50%',
insetInlineStart: '21.5%',
insetInlineStart: '25%',
display: 'table',
width: token.calc(token.checkboxSize).div(14).mul(5).equal(),
height: token.calc(token.checkboxSize).div(14).mul(8).equal(),

3
components/collapse/Collapse.tsx
View File

@ -76,7 +76,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
const mergedSize = useSize((ctx) => customizeSize ?? ctx ?? 'middle');
const prefixCls = getPrefixCls('collapse', customizePrefixCls);
const rootPrefixCls = getPrefixCls();
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
if (process.env.NODE_ENV !== 'production') {
const warning = devUseWarning('Collapse');
@ -126,6 +126,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
className,
rootClassName,
hashId,
cssVarCls,
);
const openMotion: CSSMotionProps = {
...initCollapseMotion(rootPrefixCls),

4
components/color-picker/ColorPicker.tsx
View File

@ -135,9 +135,9 @@ const ColorPicker: CompoundedComponent = (props) => {
// ===================== Style =====================
const mergedSize = useSize(customizeSize);
const rootCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
const rtlCls = { [`${prefixCls}-rtl`]: direction };
const mergeRootCls = classNames(rootClassName, rootCls, rtlCls);
const mergeRootCls = classNames(rootClassName, cssVarCls, rootCls, rtlCls);
const mergeCls = classNames(
getStatusClassNames(prefixCls, contextStatus),
{

5
components/config-provider/hooks/useCSSVarCls.ts
View File

@ -1,5 +1,10 @@
import { useToken } from '../../theme/internal';
/**
* This hook is only for cssVar to add root className for components.
* If root ClassName is needed, this hook could be refactored with `-root`
* @param prefixCls
*/
const useCSSVarCls = (prefixCls: string) => {
const [, , , , cssVar] = useToken();

6
components/date-picker/generatePicker/generateRangePicker.tsx
View File

@ -72,8 +72,8 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
const { format, showTime, picker } = props as any;
const rootPrefixCls = getPrefixCls();
const cssVarCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls, cssVarCls);
const rootCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
const additionalOverrideProps: any = {
...(showTime ? getTimeProps({ format, picker, ...showTime }) : {}),
@ -147,6 +147,7 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
className,
rangePicker?.className,
cssVarCls,
rootCls,
rootClassName,
)}
style={{ ...rangePicker?.style, ...style }}
@ -160,6 +161,7 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
hashId,
popupClassName || dropdownClassName,
cssVarCls,
rootCls,
rootClassName,
)}
popupStyle={{

5
components/date-picker/generatePicker/generateSinglePicker.tsx
View File

@ -80,8 +80,8 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
const innerRef = React.useRef<RCPicker<DateType>>(null);
const { format, showTime } = props as any;
const cssVarCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls, cssVarCls);
const rootCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
useImperativeHandle(ref, () => ({
focus: () => innerRef.current?.focus(),
@ -174,6 +174,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
consumerStyle?.className,
className,
cssVarCls,
rootCls,
rootClassName,
)}
style={{ ...consumerStyle?.style, ...style }}

3
components/descriptions/index.tsx
View File

@ -93,7 +93,7 @@ const Descriptions: React.FC<DescriptionsProps> & CompoundedComponent = (props)
const mergedSize = useSize(customizeSize);
const rows = useRow(mergedColumn, mergedItems);
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
// ======================== Render ========================
const contextValue = React.useMemo(
@ -115,6 +115,7 @@ const Descriptions: React.FC<DescriptionsProps> & CompoundedComponent = (props)
className,
rootClassName,
hashId,
cssVarCls,
)}
style={{ ...descriptions?.style, ...style }}
{...restProps}

3
components/divider/index.tsx
View File

@ -36,7 +36,7 @@ const Divider: React.FC<DividerProps> = (props) => {
} = props;
const prefixCls = getPrefixCls('divider', customizePrefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
const orientationPrefix = orientation.length > 0 ? `-${orientation}` : orientation;
const hasChildren = !!children;
@ -46,6 +46,7 @@ const Divider: React.FC<DividerProps> = (props) => {
prefixCls,
divider?.className,
hashId,
cssVarCls,
`${prefixCls}-${type}`,
{
[`${prefixCls}-with-text`]: hasChildren,

6
components/drawer/index.tsx
View File

@ -72,7 +72,7 @@ const Drawer: React.FC<DrawerProps> & {
const prefixCls = getPrefixCls('drawer', customizePrefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
const getContainer =
// 有可能为 false，所以不能直接判断
@ -87,6 +87,7 @@ const Drawer: React.FC<DrawerProps> & {
},
rootClassName,
hashId,
cssVarCls,
);
// ========================== Warning ===========================
@ -213,13 +214,14 @@ const PurePanel: React.FC<Omit<DrawerPanelProps, 'prefixCls'> & PurePanelInterfa
const prefixCls = getPrefixCls('drawer', customizePrefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
const cls = classNames(
prefixCls,
`${prefixCls}-pure`,
`${prefixCls}-${placement}`,
hashId,
cssVarCls,
className,
);

5
components/dropdown/dropdown.tsx
View File

@ -171,7 +171,7 @@ const Dropdown: CompoundedComponent = (props) => {
const prefixCls = getPrefixCls('dropdown', customizePrefixCls);
const rootCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
const [, token] = useToken();
@ -210,6 +210,7 @@ const Dropdown: CompoundedComponent = (props) => {
overlayClassName,
rootClassName,
hashId,
cssVarCls,
rootCls,
dropdown?.className,
{ [`${prefixCls}-rtl`]: direction === 'rtl' },
@ -253,7 +254,7 @@ const Dropdown: CompoundedComponent = (props) => {
return (
<OverrideProvider
prefixCls={`${prefixCls}-menu`}
rootClassName={rootCls}
rootClassName={cssVarCls}
expandIcon={
<span className={`${prefixCls}-menu-submenu-arrow`}>
<RightOutlined className={`${prefixCls}-menu-submenu-arrow-icon`} />

3
components/empty/index.tsx
View File

@ -45,7 +45,7 @@ const Empty: CompoundedComponent = ({
const { getPrefixCls, direction, empty } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('empty', customizePrefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
const [locale] = useLocale('Empty');
@ -64,6 +64,7 @@ const Empty: CompoundedComponent = ({
<div
className={classNames(
hashId,
cssVarCls,
prefixCls,
empty?.className,
{

3
components/flex/index.tsx
View File

@ -31,7 +31,7 @@ const Flex = React.forwardRef<HTMLElement, FlexProps>((props, ref) => {
const prefixCls = getPrefixCls('flex', customizePrefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
const mergedVertical = vertical ?? ctxFlex?.vertical;
@ -41,6 +41,7 @@ const Flex = React.forwardRef<HTMLElement, FlexProps>((props, ref) => {
ctxFlex?.className,
prefixCls,
hashId,
cssVarCls,
createFlexClassNames(prefixCls, props),
{
[`${prefixCls}-rtl`]: ctxDirection === 'rtl',

3
components/float-button/FloatButton.tsx
View File

@ -39,12 +39,13 @@ const FloatButton = React.forwardRef<FloatButtonElement, FloatButtonProps>((prop
const groupShape = useContext<FloatButtonShape | undefined>(FloatButtonGroupContext);
const prefixCls = getPrefixCls(floatButtonPrefixCls, customizePrefixCls);
const rootCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
const mergeShape = groupShape || shape;
const classString = classNames(
hashId,
cssVarCls,
rootCls,
prefixCls,
className,

4
components/float-button/FloatButtonGroup.tsx
View File

@ -34,10 +34,10 @@ const FloatButtonGroup: React.FC<FloatButtonGroupProps> = (props) => {
const { direction, getPrefixCls } = useContext<ConfigConsumerProps>(ConfigContext);
const prefixCls = getPrefixCls(floatButtonPrefixCls, customizePrefixCls);
const rootCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
const groupPrefixCls = `${prefixCls}-group`;
const groupCls = classNames(groupPrefixCls, hashId, rootCls, className, {
const groupCls = classNames(groupPrefixCls, hashId, cssVarCls, rootCls, className, {
[`${groupPrefixCls}-rtl`]: direction === 'rtl',
[`${groupPrefixCls}-${shape}`]: shape,
[`${groupPrefixCls}-${shape}-shadow`]: !trigger,

13
components/form/ErrorList.tsx
View File

@ -55,8 +55,8 @@ const ErrorList: React.FC<ErrorListProps> = ({
const baseClassName = `${prefixCls}-item-explain`;
const cssVarCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls, cssVarCls);
const rootCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
const collapseMotion: CSSMotionProps = useMemo(() => initCollapseMotion(prefixCls), [prefixCls]);
@ -97,7 +97,14 @@ const ErrorList: React.FC<ErrorListProps> = ({
return (
<div
{...helpProps}
className={classNames(baseClassName, holderClassName, cssVarCls, rootClassName, hashId)}
className={classNames(
baseClassName,
holderClassName,
cssVarCls,
rootCls,
rootClassName,
hashId,
)}
style={holderStyle}
role="alert"
>

5
components/form/Form.tsx
View File

@ -104,8 +104,8 @@ const InternalForm: React.ForwardRefRenderFunction<FormInstance, FormProps> = (p
const prefixCls = getPrefixCls('form', customizePrefixCls);
// Style
const cssVarCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls, cssVarCls);
const rootCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
const formClassName = classNames(
prefixCls,
@ -116,6 +116,7 @@ const InternalForm: React.ForwardRefRenderFunction<FormInstance, FormProps> = (p
[`${prefixCls}-${mergedSize}`]: mergedSize,
},
cssVarCls,
rootCls,
hashId,
contextForm?.className,
className,

6
components/form/FormItem/index.tsx
View File

@ -127,8 +127,8 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea
const prefixCls = getPrefixCls('form', customizePrefixCls);
// Style
const cssVarCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls, cssVarCls);
const rootCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
// ========================= Warn =========================
const warning = devUseWarning('Form.Item');
@ -242,7 +242,7 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea
<ItemHolder
key="row"
{...props}
className={classNames(className, cssVarCls, hashId)}
className={classNames(className, cssVarCls, rootCls, hashId)}
prefixCls={prefixCls}
fieldId={fieldId}
isRequired={isRequired}

3
components/grid/col.tsx
View File

@ -68,7 +68,7 @@ const Col = React.forwardRef<HTMLDivElement, ColProps>((props, ref) => {
const prefixCls = getPrefixCls('col', customizePrefixCls);
const [wrapCSSVar, hashId] = useColStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useColStyle(prefixCls);
let sizeClassObj = {};
sizes.forEach((size) => {
@ -107,6 +107,7 @@ const Col = React.forwardRef<HTMLDivElement, ColProps>((props, ref) => {
className,
sizeClassObj,
hashId,
cssVarCls,
);
const mergedStyle: React.CSSProperties = {};

3
components/grid/row.tsx
View File

@ -147,7 +147,7 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
const prefixCls = getPrefixCls('row', customizePrefixCls);
const [wrapCSSVar, hashId] = useRowStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useRowStyle(prefixCls);
const gutters = getGutter();
const classes = classNames(
@ -160,6 +160,7 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
},
className,
hashId,
cssVarCls,
);
// Add gutter related style

9
components/image/PreviewGroup.tsx
View File

@ -40,7 +40,7 @@ const InternalPreviewGroup: React.FC<GroupConsumerProps> = ({
const rootPrefixCls = getPrefixCls();
const rootCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
const [zIndex] = useZIndex(
'ImagePreview',
@ -52,7 +52,12 @@ const InternalPreviewGroup: React.FC<GroupConsumerProps> = ({
return preview;
}
const _preview = typeof preview === 'object' ? preview : {};
const mergedRootClassName = classNames(hashId, rootCls, _preview.rootClassName ?? '');
const mergedRootClassName = classNames(
hashId,
cssVarCls,
rootCls,
_preview.rootClassName ?? '',
);
return {
..._preview,

4
components/image/index.tsx
View File

@ -38,9 +38,9 @@ const Image: CompositionImage<ImageProps> = (props) => {
const imageLocale = contextLocale.Image || defaultLocale.Image;
// Style
const rootCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
const mergedRootClassName = classNames(rootClassName, hashId, rootCls);
const mergedRootClassName = classNames(rootClassName, hashId, cssVarCls, rootCls);
const mergedClassName = classNames(className, hashId, image?.className);

6
components/input-number/index.tsx
View File

@ -68,8 +68,8 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
const prefixCls = getPrefixCls('input-number', customizePrefixCls);
// Style
const cssVarCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls, cssVarCls);
const rootCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
let upIcon = <UpOutlined className={`${prefixCls}-handler-up-inner`} />;
@ -127,7 +127,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
<RcInputNumber
ref={inputRef}
disabled={mergedDisabled}
className={classNames(cssVarCls, className, rootClassName, compactItemClassnames)}
className={classNames(cssVarCls, rootCls, className, rootClassName, compactItemClassnames)}
upHandler={upIcon}
downHandler={downIcon}
prefixCls={prefixCls}

5
components/input/Input.tsx
View File

@ -111,8 +111,8 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
const inputRef = useRef<InputRef>(null);
// Style
const cssVarCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls, cssVarCls);
const rootCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
// ===================== Compact Item =====================
const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
@ -201,6 +201,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
className,
rootClassName,
cssVarCls,
rootCls,
hashId,
compactItemClassnames,
input?.className,

6
components/input/TextArea.tsx
View File

@ -96,8 +96,8 @@ const TextArea = forwardRef<TextAreaRef, TextAreaProps>((props, ref) => {
}
// ===================== Style =====================
const cssVarCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls, cssVarCls);
const rootCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
const [variant, enableVariantCls] = useVariant(customVariant, bordered, InputVariants);
@ -106,7 +106,7 @@ const TextArea = forwardRef<TextAreaRef, TextAreaProps>((props, ref) => {
{...rest}
disabled={mergedDisabled}
allowClear={mergedAllowClear}
className={classNames(cssVarCls, className, rootClassName)}
className={classNames(cssVarCls, rootCls, className, rootClassName)}
classes={{
affixWrapper: classNames(
`${prefixCls}-textarea-affix-wrapper`,

12
components/layout/layout.tsx
View File

@ -47,13 +47,18 @@ const Basic = React.forwardRef<HTMLDivElement, BasicPropsWithTagName>((props, re
const { getPrefixCls } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('layout', customizePrefixCls);
const [wrapSSR, hashId] = useStyle(prefixCls);
const [wrapSSR, hashId, cssVarCls] = useStyle(prefixCls);
const prefixWithSuffixCls = suffixCls ? `${prefixCls}-${suffixCls}` : prefixCls;
return wrapSSR(
<TagName
className={classNames(customizePrefixCls || prefixWithSuffixCls, className, hashId)}
className={classNames(
customizePrefixCls || prefixWithSuffixCls,
className,
hashId,
cssVarCls,
)}
ref={ref}
{...others}
/>,
@ -83,7 +88,7 @@ const BasicLayout = React.forwardRef<HTMLDivElement, BasicPropsWithTagName>((pro
const mergedHasSider = useHasSider(siders, children, hasSider);
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
const classString = classNames(
prefixCls,
{
@ -94,6 +99,7 @@ const BasicLayout = React.forwardRef<HTMLDivElement, BasicPropsWithTagName>((pro
className,
rootClassName,
hashId,
cssVarCls,
);
const contextValue = React.useMemo(

3
components/list/index.tsx
View File

@ -141,7 +141,7 @@ function List<T>({
const prefixCls = getPrefixCls('list', customizePrefixCls);
// Style
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
let loadingProp = loading;
if (typeof loadingProp === 'boolean') {
@ -183,6 +183,7 @@ function List<T>({
className,
rootClassName,
hashId,
cssVarCls,
);
const paginationProps = extendsObject<PaginationConfig>(

7
components/mentions/index.tsx
View File

@ -156,7 +156,7 @@ const InternalMentions: React.ForwardRefRenderFunction<MentionsRef, MentionProps
// Style
const rootCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
const mergedClassName = classNames(
{
@ -169,6 +169,7 @@ const InternalMentions: React.ForwardRefRenderFunction<MentionsRef, MentionProps
!hasFeedback && className,
rootClassName,
hashId,
cssVarCls,
rootCls,
);
@ -184,11 +185,11 @@ const InternalMentions: React.ForwardRefRenderFunction<MentionsRef, MentionProps
filterOption={mentionsfilterOption}
onFocus={onFocus}
onBlur={onBlur}
dropdownClassName={classNames(popupClassName, rootClassName, hashId, rootCls)}
dropdownClassName={classNames(popupClassName, rootClassName, hashId, cssVarCls, rootCls)}
ref={mergedRef}
options={mergedOptions}
suffix={hasFeedback && feedbackIcon}
classes={{ affixWrapper: classNames(rootCls, hashId, className) }}
classes={{ affixWrapper: classNames(hashId, className, cssVarCls, rootCls) }}
>
{mentionOptions}
</RcMentions>

10
components/menu/menu.tsx
View File

@ -122,7 +122,7 @@ const InternalMenu = forwardRef<RcMenuRef, InternalMenuProps>((props, ref) => {
const prefixCls = getPrefixCls('menu', customizePrefixCls || overrideObj.prefixCls);
const rootCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls, !override);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls, !override);
const menuClassName = classNames(`${prefixCls}-${theme}`, menu?.className, className);
// ====================== Expand Icon ========================
@ -181,7 +181,13 @@ const InternalMenu = forwardRef<RcMenuRef, InternalMenuProps>((props, ref) => {
defaultMotions={defaultMotions}
expandIcon={mergedExpandIcon}
ref={ref}
rootClassName={classNames(rootClassName, hashId, overrideObj.rootClassName, rootCls)}
rootClassName={classNames(
rootClassName,
hashId,
overrideObj.rootClassName,
cssVarCls,
rootCls,
)}
>
{mergedChildren}
</RcMenu>

10
components/message/PurePanel.tsx
View File

@ -48,13 +48,19 @@ const PurePanel: React.FC<PurePanelProps> = (props) => {
const prefixCls = staticPrefixCls || getPrefixCls('message');
const rootCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
return wrapCSSVar(
<Notice
{...restProps}
prefixCls={prefixCls}
className={classNames(className, hashId, `${prefixCls}-notice-pure-panel`, rootCls)}
className={classNames(
className,
hashId,
`${prefixCls}-notice-pure-panel`,
cssVarCls,
rootCls,
)}
eventKey="pure"
duration={null}
content={

8
components/message/useMessage.tsx
View File

@ -19,6 +19,7 @@ import type {
import { PureContent } from './PurePanel';
import useStyle from './style';
import { getMotion, wrapPromiseFn } from './util';
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
const DEFAULT_OFFSET = 8;
const DEFAULT_DURATION = 3;
@ -36,9 +37,12 @@ interface HolderRef extends NotificationAPI {
}
const Wrapper: FC<PropsWithChildren<{ prefixCls: string }>> = ({ children, prefixCls }) => {
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const rootCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
return wrapCSSVar(
<NotificationProvider classNames={{ list: hashId }}>{children}</NotificationProvider>,
<NotificationProvider classNames={{ list: classNames(hashId, cssVarCls, rootCls) }}>
{children}
</NotificationProvider>,
);
};

4
components/modal/Modal.tsx
View File

@ -95,7 +95,7 @@ const Modal: React.FC<ModalProps> = (props) => {
const rootPrefixCls = getPrefixCls();
// Style
const rootCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
const wrapClassNameExtended = classNames(wrapClassName, {
[`${prefixCls}-centered`]: !!centered,
@ -131,7 +131,7 @@ const Modal: React.FC<ModalProps> = (props) => {
zIndex={zIndex}
getContainer={getContainer === undefined ? getContextPopupContainer : getContainer}
prefixCls={prefixCls}
rootClassName={classNames(hashId, rootClassName, rootCls)}
rootClassName={classNames(hashId, rootClassName, cssVarCls, rootCls)}
footer={dialogFooter}
visible={open ?? visible}
mousePosition={restProps.mousePosition ?? mousePosition}

3
components/modal/PurePanel.tsx
View File

@ -37,7 +37,7 @@ const PurePanel: React.FC<PurePanelProps> = (props) => {
const rootPrefixCls = getPrefixCls();
const prefixCls = customizePrefixCls || getPrefixCls('modal');
const rootCls = useCSSVarCls(rootPrefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
const confirmPrefixCls = `${prefixCls}-confirm`;
@ -76,6 +76,7 @@ const PurePanel: React.FC<PurePanelProps> = (props) => {
type && confirmPrefixCls,
type && `${confirmPrefixCls}-${type}`,
className,
cssVarCls,
rootCls,
)}
{...restProps}

6
components/notification/PurePanel.tsx
View File

@ -100,10 +100,12 @@ const PurePanel: React.FC<PurePanelProps> = (props) => {
const noticePrefixCls = `${prefixCls}-notice`;
const rootCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
return wrapCSSVar(
<div className={classNames(`${noticePrefixCls}-pure-panel`, hashId, className, rootCls)}>
<div
className={classNames(`${noticePrefixCls}-pure-panel`, hashId, className, cssVarCls, rootCls)}
>
<PurePanelStyle prefixCls={prefixCls} />
<Notice
{...restProps}

8
components/notification/useNotification.tsx
View File

@ -17,6 +17,7 @@ import { getCloseIcon, PureContent } from './PurePanel';
import useStyle from './style';
import { getMotion, getPlacementStyle } from './util';
import { useToken } from '../theme/internal';
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
const DEFAULT_OFFSET = 24;
const DEFAULT_DURATION = 4.5;
@ -35,9 +36,12 @@ interface HolderRef extends NotificationAPI {
}
const Wrapper: FC<PropsWithChildren<{ prefixCls: string }>> = ({ children, prefixCls }) => {
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const rootCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
return wrapCSSVar(
<NotificationProvider classNames={{ list: hashId }}>{children}</NotificationProvider>,
<NotificationProvider classNames={{ list: classNames(hashId, cssVarCls, rootCls) }}>
{children}
</NotificationProvider>,
);
};

3
components/pagination/Pagination.tsx
View File

@ -57,7 +57,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
const prefixCls = getPrefixCls('pagination', customizePrefixCls);
// Style
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
const mergedShowSizeChanger = showSizeChanger ?? pagination.showSizeChanger;
@ -120,6 +120,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
className,
rootClassName,
hashId,
cssVarCls,
);
const mergedStyle: React.CSSProperties = { ...pagination?.style, ...style };

13
components/popover/PurePanel.tsx
View File

@ -61,13 +61,20 @@ export const RawPurePanel: React.FC<RawPurePanelProps> = (props) => {
};
const PurePanel: React.FC<PurePanelProps> = (props) => {
const { prefixCls: customizePrefixCls, ...restProps } = props;
const { prefixCls: customizePrefixCls, className, ...restProps } = props;
const { getPrefixCls } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('popover', customizePrefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
return wrapCSSVar(<RawPurePanel {...restProps} prefixCls={prefixCls} hashId={hashId} />);
return wrapCSSVar(
<RawPurePanel
{...restProps}
prefixCls={prefixCls}
hashId={hashId}
className={classNames(className, cssVarCls)}
/>,
);
};
export default PurePanel;

4
components/popover/index.tsx
View File

@ -45,10 +45,10 @@ const Popover = React.forwardRef<TooltipRef, PopoverProps>((props, ref) => {
const { getPrefixCls } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('popover', customizePrefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
const rootPrefixCls = getPrefixCls();
const overlayCls = classNames(overlayClassName, hashId);
const overlayCls = classNames(overlayClassName, hashId, cssVarCls);
return wrapCSSVar(
<Tooltip

3
components/progress/progress.tsx
View File

@ -97,7 +97,7 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>((props, ref) =>
progress: progressStyle,
} = React.useContext<ConfigConsumerProps>(ConfigContext);
const prefixCls = getPrefixCls('progress', customizePrefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
const progressInfo = React.useMemo<React.ReactNode>(() => {
if (!showInfo) {
@ -188,6 +188,7 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>((props, ref) =>
className,
rootClassName,
hashId,
cssVarCls,
);
return wrapCSSVar(

4
components/qr-code/index.tsx
View File

@ -35,7 +35,7 @@ const QRCode: React.FC<QRCodeProps> = (props) => {
const { getPrefixCls } = useContext<ConfigConsumerProps>(ConfigContext);
const prefixCls = getPrefixCls('qrcode', customizePrefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
const imageSettings: QRProps['imageSettings'] = {
src: icon,
@ -74,7 +74,7 @@ const QRCode: React.FC<QRCodeProps> = (props) => {
return null;
}
const mergedCls = classNames(prefixCls, className, rootClassName, hashId, {
const mergedCls = classNames(prefixCls, className, rootClassName, hashId, cssVarCls, {
[`${prefixCls}-borderless`]: !bordered,
});

3
components/radio/group.tsx
View File

@ -51,7 +51,7 @@ const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>((props, ref
// Style
const rootCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
let childrenToRender = children;
// 如果存在 options, 优先使用
@ -102,6 +102,7 @@ const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>((props, ref
className,
rootClassName,
hashId,
cssVarCls,
rootCls,
);
return wrapCSSVar(

3
components/radio/radio.tsx
View File

@ -49,7 +49,7 @@ const InternalRadio: React.ForwardRefRenderFunction<RadioRef, RadioProps> = (pro
// Style
const rootCls = useCSSVarCls(radioPrefixCls);
const [wrapCSSVar, hashId] = useStyle(radioPrefixCls, rootCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(radioPrefixCls, rootCls);
const radioProps: RadioProps = { ...restProps };
@ -76,6 +76,7 @@ const InternalRadio: React.ForwardRefRenderFunction<RadioRef, RadioProps> = (pro
className,
rootClassName,
hashId,
cssVarCls,
rootCls,
);

4
components/rate/index.tsx
View File

@ -38,7 +38,7 @@ const Rate = React.forwardRef<RateRef, RateProps>((props, ref) => {
const ratePrefixCls = getPrefixCls('rate', prefixCls);
// Style
const [wrapCSSVar, hashId] = useStyle(ratePrefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(ratePrefixCls);
const mergedStyle: React.CSSProperties = { ...rate?.style, ...style };
@ -48,7 +48,7 @@ const Rate = React.forwardRef<RateRef, RateProps>((props, ref) => {
character={character}
characterRender={characterRender}
{...rest}
className={classNames(className, rootClassName, hashId, rate?.className)}
className={classNames(className, rootClassName, hashId, cssVarCls, rate?.className)}
style={mergedStyle}
prefixCls={ratePrefixCls}
direction={direction}

3
components/result/index.tsx
View File

@ -125,7 +125,7 @@ const Result: ResultType = ({
const prefixCls = getPrefixCls('result', customizePrefixCls);
// Style
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
const className = classNames(
prefixCls,
@ -135,6 +135,7 @@ const Result: ResultType = ({
rootClassName,
{ [`${prefixCls}-rtl`]: direction === 'rtl' },
hashId,
cssVarCls,
);
const mergedStyle: React.CSSProperties = { ...result?.style, ...style };

3
components/segmented/index.tsx
View File

@ -57,7 +57,7 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>((props, ref)
const { getPrefixCls, direction, segmented } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('segmented', customizePrefixCls);
// Style
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
// ===================== Size =====================
const mergedSize = useSize(customSize);
@ -93,6 +93,7 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>((props, ref)
[`${prefixCls}-lg`]: mergedSize === 'large',
},
hashId,
cssVarCls,
);
const mergedStyle: React.CSSProperties = { ...segmented?.style, ...style };

4
components/select/index.tsx
View File

@ -135,7 +135,7 @@ const InternalSelect = <
const [variant, enableVariantCls] = useVariants(customizeVariant, bordered, SelectVariants);
const rootCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
const mode = React.useMemo(() => {
const { mode: m } = props as InternalSelectProps<OptionType>;
@ -200,6 +200,7 @@ const InternalSelect = <
[`${prefixCls}-dropdown-${direction}`]: direction === 'rtl',
},
rootClassName,
cssVarCls,
rootCls,
hashId,
);
@ -223,6 +224,7 @@ const InternalSelect = <
select?.className,
className,
rootClassName,
cssVarCls,
rootCls,
hashId,
);

3
components/skeleton/Avatar.tsx
View File

@ -21,7 +21,7 @@ const SkeletonAvatar: React.FC<AvatarProps> = (props) => {
} = props;
const { getPrefixCls } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
const otherProps = omit(props, ['prefixCls', 'className']);
const cls = classNames(
@ -33,6 +33,7 @@ const SkeletonAvatar: React.FC<AvatarProps> = (props) => {
className,
rootClassName,
hashId,
cssVarCls,
);
return wrapCSSVar(

3
components/skeleton/Button.tsx
View File

@ -23,7 +23,7 @@ const SkeletonButton: React.FC<SkeletonButtonProps> = (props) => {
} = props;
const { getPrefixCls } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
const otherProps = omit(props, ['prefixCls']);
const cls = classNames(
@ -36,6 +36,7 @@ const SkeletonButton: React.FC<SkeletonButtonProps> = (props) => {
className,
rootClassName,
hashId,
cssVarCls,
);
return wrapCSSVar(

3
components/skeleton/Image.tsx
View File

@ -13,7 +13,7 @@ const SkeletonImage: React.FC<SkeletonImageProps> = (props) => {
const { prefixCls: customizePrefixCls, className, rootClassName, style, active } = props;
const { getPrefixCls } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
const cls = classNames(
prefixCls,
`${prefixCls}-element`,
@ -23,6 +23,7 @@ const SkeletonImage: React.FC<SkeletonImageProps> = (props) => {
className,
rootClassName,
hashId,
cssVarCls,
);
return wrapCSSVar(

3
components/skeleton/Input.tsx
View File

@ -23,7 +23,7 @@ const SkeletonInput: React.FC<SkeletonInputProps> = (props) => {
} = props;
const { getPrefixCls } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
const otherProps = omit(props, ['prefixCls']);
const cls = classNames(
@ -36,6 +36,7 @@ const SkeletonInput: React.FC<SkeletonInputProps> = (props) => {
className,
rootClassName,
hashId,
cssVarCls,
);
return wrapCSSVar(

3
components/skeleton/Node.tsx
View File

@ -21,7 +21,7 @@ const SkeletonNode: React.FC<SkeletonNodeProps> = (props) => {
} = props;
const { getPrefixCls } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
const cls = classNames(
prefixCls,
@ -32,6 +32,7 @@ const SkeletonNode: React.FC<SkeletonNodeProps> = (props) => {
hashId,
className,
rootClassName,
cssVarCls,
);
const content = children ?? <DotChartOutlined />;

3
components/skeleton/Skeleton.tsx
View File

@ -103,7 +103,7 @@ const Skeleton: React.FC<SkeletonProps> & CompoundedComponent = (props) => {
const { getPrefixCls, direction, skeleton } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
if (loading || !('loading' in props)) {
const hasAvatar = !!avatar;
@ -172,6 +172,7 @@ const Skeleton: React.FC<SkeletonProps> & CompoundedComponent = (props) => {
className,
rootClassName,
hashId,
cssVarCls,
);
return wrapCSSVar(

3
components/slider/index.tsx
View File

@ -162,7 +162,7 @@ const Slider = React.forwardRef<SliderRef, SliderSingleProps | SliderRangeProps>
const prefixCls = getPrefixCls('slider', customizePrefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
const cls = classNames(
className,
@ -172,6 +172,7 @@ const Slider = React.forwardRef<SliderRef, SliderSingleProps | SliderRangeProps>
[`${prefixCls}-rtl`]: direction === 'rtl',
},
hashId,
cssVarCls,
);
// make reverse default on rtl direction

3
components/space/index.tsx
View File

@ -63,7 +63,7 @@ const Space = React.forwardRef<HTMLDivElement, SpaceProps>((props, ref) => {
const mergedAlign = align === undefined && direction === 'horizontal' ? 'center' : align;
const prefixCls = getPrefixCls('space', customizePrefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
const cls = classNames(
prefixCls,
@ -78,6 +78,7 @@ const Space = React.forwardRef<HTMLDivElement, SpaceProps>((props, ref) => {
},
className,
rootClassName,
cssVarCls,
);
const itemClassName = classNames(

53
components/spin/index.tsx
View File

@ -28,19 +28,14 @@ export interface SpinProps {
fullscreen?: boolean;
}
export interface SpinClassProps extends SpinProps {
hashId: string;
spinPrefixCls: string;
}
export type SpinFCType = React.FC<SpinProps> & {
export type SpinType = React.FC<SpinProps> & {
setDefaultIndicator: (indicator: React.ReactNode) => void;
};
// Render indicator
let defaultIndicator: React.ReactNode = null;
function renderIndicator(prefixCls: string, props: SpinClassProps): React.ReactNode {
function renderIndicator(prefixCls: string, props: SpinProps): React.ReactNode {
const { indicator } = props;
const dotClassName = `${prefixCls}-dot`;
@ -75,9 +70,9 @@ function shouldDelay(spinning?: boolean, delay?: number): boolean {
return !!spinning && !!delay && !isNaN(Number(delay));
}
const Spin: React.FC<SpinClassProps> = (props) => {
const Spin: SpinType = (props) => {
const {
spinPrefixCls: prefixCls,
prefixCls: customizePrefixCls,
spinning: customSpinning = true,
delay = 0,
className,
@ -87,11 +82,16 @@ const Spin: React.FC<SpinClassProps> = (props) => {
wrapperClassName,
style,
children,
hashId,
fullscreen,
...restProps
} = props;
const { getPrefixCls } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('spin', customizePrefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
const [spinning, setSpinning] = React.useState<boolean>(
() => customSpinning && !shouldDelay(customSpinning, delay),
);
@ -138,6 +138,7 @@ const Spin: React.FC<SpinClassProps> = (props) => {
className,
rootClassName,
hashId,
cssVarCls,
);
const containerClassName = classNames(`${prefixCls}-container`, {
@ -145,7 +146,7 @@ const Spin: React.FC<SpinClassProps> = (props) => {
});
// fix https://fb.me/react-unknown-prop
const divProps = omit(restProps, ['indicator', 'prefixCls']);
const divProps = omit(restProps, ['indicator']);
const mergedStyle: React.CSSProperties = { ...spin?.style, ...style };
@ -165,43 +166,27 @@ const Spin: React.FC<SpinClassProps> = (props) => {
);
if (isNestedPattern) {
return (
return wrapCSSVar(
<div
{...divProps}
className={classNames(`${prefixCls}-nested-loading`, wrapperClassName, hashId)}
className={classNames(`${prefixCls}-nested-loading`, wrapperClassName, hashId, cssVarCls)}
>
{spinning && <div key="loading">{spinElement}</div>}
<div className={containerClassName} key="container">
{children}
</div>
</div>
</div>,
);
}
return spinElement;
return wrapCSSVar(spinElement);
};
const SpinFC: SpinFCType = (props) => {
const { prefixCls: customizePrefixCls } = props;
const { getPrefixCls } = React.useContext(ConfigContext);
const spinPrefixCls = getPrefixCls('spin', customizePrefixCls);
const [wrapCSSVar, hashId] = useStyle(spinPrefixCls);
const spinClassProps: SpinClassProps = {
...props,
spinPrefixCls,
hashId,
};
return wrapCSSVar(<Spin {...spinClassProps} />);
};
SpinFC.setDefaultIndicator = (indicator: React.ReactNode) => {
Spin.setDefaultIndicator = (indicator: React.ReactNode) => {
defaultIndicator = indicator;
};
if (process.env.NODE_ENV !== 'production') {
SpinFC.displayName = 'Spin';
Spin.displayName = 'Spin';
}
export default SpinFC;
export default Spin;

3
components/statistic/Statistic.tsx
View File

@ -47,7 +47,7 @@ const Statistic: React.FC<StatisticProps> = (props) => {
const prefixCls = getPrefixCls('statistic', customizePrefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
const valueNode: React.ReactNode = (
<StatisticNumber
@ -68,6 +68,7 @@ const Statistic: React.FC<StatisticProps> = (props) => {
className,
rootClassName,
hashId,
cssVarCls,
);
return wrapCSSVar(

3
components/steps/index.tsx
View File

@ -79,7 +79,7 @@ const Steps: CompoundedComponent = (props) => {
const prefixCls = getPrefixCls('steps', props.prefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
const isInline = props.type === 'inline';
const iconPrefix = getPrefixCls('', props.iconPrefix);
@ -97,6 +97,7 @@ const Steps: CompoundedComponent = (props) => {
className,
rootClassName,
hashId,
cssVarCls,
);
const icons = {
finish: <CheckOutlined className={`${prefixCls}-finish-icon`} />,

3
components/switch/index.tsx
View File

@ -91,7 +91,7 @@ const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>((props, ref) =>
);
// Style
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
const mergedSize = useSize(customizeSize);
@ -105,6 +105,7 @@ const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>((props, ref) =>
className,
rootClassName,
hashId,
cssVarCls,
);
const mergedStyle: React.CSSProperties = { ...SWITCH?.style, ...style };

4
components/table/InternalTable.tsx
View File

@ -204,7 +204,7 @@ const InternalTable = <RecordType extends AnyObject = AnyObject>(
const [, token] = useToken();
const rootCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
const mergedExpandable: ExpandableConfig<RecordType> = {
childrenColumnName: legacyChildrenColumnName,
@ -544,6 +544,7 @@ const InternalTable = <RecordType extends AnyObject = AnyObject>(
}
const wrapperClassNames = classNames(
cssVarCls,
rootCls,
`${prefixCls}-wrapper`,
table?.className,
@ -606,6 +607,7 @@ const InternalTable = <RecordType extends AnyObject = AnyObject>(
[`${prefixCls}-bordered`]: bordered,
[`${prefixCls}-empty`]: rawData.length === 0,
},
cssVarCls,
rootCls,
hashId,
)}

5
components/tabs/index.tsx
View File

@ -55,7 +55,7 @@ const Tabs: React.FC<TabsProps> & { TabPane: typeof TabPane } = (props) => {
const { direction, tabs, getPrefixCls, getPopupContainer } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('tabs', customizePrefixCls);
const rootCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
let editable: EditableConfig | undefined;
if (type === 'editable-card') {
@ -106,9 +106,10 @@ const Tabs: React.FC<TabsProps> & { TabPane: typeof TabPane } = (props) => {
className,
rootClassName,
hashId,
cssVarCls,
rootCls,
)}
popupClassName={classNames(popupClassName, hashId, rootCls)}
popupClassName={classNames(popupClassName, hashId, cssVarCls, rootCls)}
style={mergedStyle}
editable={editable}
moreIcon={moreIcon}

3
components/tag/CheckableTag.tsx
View File

@ -38,7 +38,7 @@ const CheckableTag = React.forwardRef<HTMLSpanElement, CheckableTagProps>((props
const prefixCls = getPrefixCls('tag', customizePrefixCls);
// Style
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
const cls = classNames(
prefixCls,
@ -49,6 +49,7 @@ const CheckableTag = React.forwardRef<HTMLSpanElement, CheckableTagProps>((props
tag?.className,
className,
hashId,
cssVarCls,
);
return wrapCSSVar(

3
components/tag/index.tsx
View File

@ -79,7 +79,7 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
};
const prefixCls = getPrefixCls('tag', customizePrefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
// Style
const tagClassName = classNames(
@ -95,6 +95,7 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
className,
rootClassName,
hashId,
cssVarCls,
);
const handleCloseClick = (e: React.MouseEvent<HTMLElement>) => {

36
components/theme/util/genComponentStyleHook.tsx
View File

@ -3,7 +3,6 @@ import type { ComponentType, FC, ReactElement } from 'react';
import React, { useContext } from 'react';
import type { CSSInterpolation } from '@ant-design/cssinjs';
import { token2CSSVar, useCSSVarRegister, useStyleRegister } from '@ant-design/cssinjs';
import classNames from 'classnames';
import { warning } from 'rc-util';
import { ConfigContext } from '../../config-provider/context';
@ -258,7 +257,7 @@ export default function genComponentStyleHook<C extends OverrideComponent>(
},
);
return [wrapSSR, classNames(hashId, cssVar?.key)];
return [wrapSSR, hashId];
};
}
@ -364,22 +363,25 @@ const genCSSVarRegister = <C extends OverrideComponent>(
const useCSSVar = (rootCls: string) => {
const [, , , , cssVar] = useToken();
return (node: ReactElement): ReactElement =>
injectStyle && cssVar ? (
<>
<CSSVarRegister rootCls={rootCls} cssVar={cssVar} component={component} />
{node}
</>
) : (
node
);
return [
(node: ReactElement): ReactElement =>
injectStyle && cssVar ? (
<>
<CSSVarRegister rootCls={rootCls} cssVar={cssVar} component={component} />
{node}
</>
) : (
node
),
cssVar?.key,
] as const;
};
return useCSSVar;
};
export const genStyleHooks = <C extends OverrideComponent>(
component: C,
component: C | [C, string],
styleFn: GenStyleFn<C>,
getDefaultToken?: GetDefaultToken<C>,
options?: {
@ -414,12 +416,16 @@ export const genStyleHooks = <C extends OverrideComponent>(
) => {
const useStyle = genComponentStyleHook(component, styleFn, getDefaultToken, options);
const useCSSVar = genCSSVarRegister(component, getDefaultToken, options);
const useCSSVar = genCSSVarRegister(
Array.isArray(component) ? component[0] : component,
getDefaultToken,
options,
);
return (prefixCls: string, rootCls: string = prefixCls) => {
const [, hashId] = useStyle(prefixCls);
const wrapCSSVar = useCSSVar(rootCls);
const [wrapCSSVar, cssVarCls] = useCSSVar(rootCls);
return [wrapCSSVar, hashId] as const;
return [wrapCSSVar, hashId, cssVarCls] as const;
};
};

4
components/timeline/Timeline.tsx
View File

@ -43,14 +43,14 @@ const Timeline: CompoundedComponent = (props) => {
// Style
const rootCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
const mergedItems: TimelineItemProps[] = useItems(items, children);
return wrapCSSVar(
<TimelineItemList
{...restProps}
className={classNames(timeline?.className, className, rootCls)}
className={classNames(timeline?.className, className, cssVarCls, rootCls)}
style={{ ...timeline?.style, ...style }}
prefixCls={prefixCls}
direction={direction}

3
components/tooltip/PurePanel.tsx
View File

@ -21,7 +21,7 @@ const PurePanel: React.FC<PurePanelProps> = (props) => {
const { getPrefixCls } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('tooltip', customizePrefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
// Color
const colorInfo = parseColor(prefixCls, color);
@ -35,6 +35,7 @@ const PurePanel: React.FC<PurePanelProps> = (props) => {
const cls = classNames(
hashId,
cssVarCls,
prefixCls,
`${prefixCls}-pure`,
`${prefixCls}-placement-${placement}`,

3
components/tooltip/index.tsx
View File

@ -274,7 +274,7 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
: childProps.className;
// Style
const [wrapCSSVar, hashId] = useStyle(prefixCls, !injectFromPopover);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, !injectFromPopover);
// Color
const colorInfo = parseColor(prefixCls, color);
@ -292,6 +292,7 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
colorInfo.className,
rootClassName,
hashId,
cssVarCls,
);
// ============================ zIndex ============================

9
components/tour/PurePanel.tsx
View File

@ -23,13 +23,18 @@ const PurePanel: React.FC<PurePanelProps> = (props) => {
const { getPrefixCls } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('tour', customizePrefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
return wrapCSSVar(
<PopoverRawPurePanel
prefixCls={prefixCls}
hashId={hashId}
className={classNames(className, `${prefixCls}-pure`, type && `${prefixCls}-${type}`)}
className={classNames(
className,
`${prefixCls}-pure`,
type && `${prefixCls}-${type}`,
cssVarCls,
)}
style={style}
>
<TourPanel stepProps={{ ...restProps, prefixCls, total }} current={current} type={type} />

3
components/tour/index.tsx
View File

@ -26,7 +26,7 @@ const Tour: React.FC<TourProps> & { _InternalPanelDoNotUseOrYouWillBeFired: type
} = props;
const { getPrefixCls, direction } = useContext<ConfigConsumerProps>(ConfigContext);
const prefixCls = getPrefixCls('tour', customizePrefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
const [, token] = useToken();
const mergedSteps = useMemo(
@ -54,6 +54,7 @@ const Tour: React.FC<TourProps> & { _InternalPanelDoNotUseOrYouWillBeFired: type
[`${prefixCls}-rtl`]: direction === 'rtl',
},
hashId,
cssVarCls,
rootClassName,
);

3
components/transfer/index.tsx
View File

@ -151,7 +151,7 @@ const Transfer = <RecordType extends TransferItem = TransferItem>(
} = useContext<ConfigConsumerProps>(ConfigContext);
const prefixCls = getPrefixCls('transfer', customizePrefixCls);
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
// Fill record with `key`
const [mergedDataSource, leftDataSource, rightDataSource] = useData(
@ -411,6 +411,7 @@ const Transfer = <RecordType extends TransferItem = TransferItem>(
className,
rootClassName,
hashId,
cssVarCls,
);
const [contextLocale] = useLocale('Transfer', defaultLocale.Transfer);

4
components/tree-select/index.tsx
View File

@ -154,7 +154,7 @@ const InternalTreeSelect = <
const rootCls = useCSSVarCls(prefixCls);
const treeSelectRootCls = useCSSVarCls(treeSelectPrefixCls);
const [wrapCSSVar, hashId] = useSelectStyle(prefixCls, rootCls);
const [wrapCSSVar, hashId, cssVarCls] = useSelectStyle(prefixCls, rootCls);
const [treeSelectWrapCSSVar] = useStyle(treeSelectPrefixCls, treePrefixCls, treeSelectRootCls);
const mergedDropdownClassName = classNames(
@ -164,6 +164,7 @@ const InternalTreeSelect = <
[`${treeSelectPrefixCls}-dropdown-rtl`]: direction === 'rtl',
},
rootClassName,
cssVarCls,
rootCls,
treeSelectRootCls,
hashId,
@ -243,6 +244,7 @@ const InternalTreeSelect = <
compactItemClassnames,
className,
rootClassName,
cssVarCls,
rootCls,
treeSelectRootCls,
hashId,

3
components/tree/Tree.tsx
View File

@ -193,7 +193,7 @@ const Tree = React.forwardRef<RcTree, TreeProps>((props, ref) => {
dropIndicatorRender,
};
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
const draggableConfig = React.useMemo(() => {
if (!draggable) {
@ -248,6 +248,7 @@ const Tree = React.forwardRef<RcTree, TreeProps>((props, ref) => {
tree?.className,
className,
hashId,
cssVarCls,
)}
direction={direction}
checkable={checkable ? <span className={`${prefixCls}-checkbox-inner`} /> : checkable}

3
components/typography/Editable.tsx
View File

@ -115,7 +115,7 @@ const Editable: React.FC<EditableProps> = (props) => {
const textClassName = component ? `${prefixCls}-${component}` : '';
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
const textAreaClassName = classNames(
prefixCls,
@ -126,6 +126,7 @@ const Editable: React.FC<EditableProps> = (props) => {
className,
textClassName,
hashId,
cssVarCls,
);
return wrapCSSVar(

3
components/typography/Typography.tsx
View File

@ -64,7 +64,7 @@ const Typography = React.forwardRef<
const prefixCls = getPrefixCls('typography', customizePrefixCls);
// Style
const [wrapCSSVar, hashId] = useStyle(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
const componentClassName = classNames(
prefixCls,
@ -75,6 +75,7 @@ const Typography = React.forwardRef<
className,
rootClassName,
hashId,
cssVarCls,
);
const mergedStyle: React.CSSProperties = { ...typography?.style, ...style };

20
components/upload/Upload.tsx
View File

@ -364,7 +364,7 @@ const InternalUpload: React.ForwardRefRenderFunction<UploadRef, UploadProps> = (
}
const wrapperCls = `${prefixCls}-wrapper`;
const [wrapCSSVar, hashId] = useStyle(prefixCls, wrapperCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, wrapperCls);
const [contextLocale] = useLocale('Upload', defaultLocale.Upload);
@ -412,11 +412,19 @@ const InternalUpload: React.ForwardRefRenderFunction<UploadRef, UploadProps> = (
);
};
const mergedCls = classNames(wrapperCls, className, rootClassName, hashId, ctxUpload?.className, {
[`${prefixCls}-rtl`]: direction === 'rtl',
[`${prefixCls}-picture-card-wrapper`]: listType === 'picture-card',
[`${prefixCls}-picture-circle-wrapper`]: listType === 'picture-circle',
});
const mergedCls = classNames(
wrapperCls,
className,
rootClassName,
hashId,
cssVarCls,
ctxUpload?.className,
{
[`${prefixCls}-rtl`]: direction === 'rtl',
[`${prefixCls}-picture-card-wrapper`]: listType === 'picture-card',
[`${prefixCls}-picture-circle-wrapper`]: listType === 'picture-circle',
},
);
const mergedStyle: React.CSSProperties = { ...ctxUpload?.style, ...style };

4
scripts/visual-regression/build.ts
View File

@ -140,14 +140,14 @@ function generateReport(
const htmlReportLink = `${publicPath}/visualRegressionReport/report.html`;
const addonFullReportDesc = `\n\nToo many visual-regression diffs found, please check [Full Report](${htmlReportLink}) for details`;
const addonFullReportDesc = `\n\nToo many visual-regression diffs found, please check <a href="${htmlReportLink}" target="_blank">Full Report</a> for details`;
// github action pr comment has limit of 65536 4-byte unicode characters
const limit = 65536 - addonFullReportDesc.length;
let reportMdStr = `
${commonHeader}
> [View Full Report](${htmlReportLink})\n
> <a href="${htmlReportLink}" target="_blank">View Full Report</a> \n
------------------------
| image name | expected | actual | diff |
| --- | --- | --- | --- |