Skip to content

chore: add css var for calc #577

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 19, 2025
Merged

chore: add css var for calc #577

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4499522
chore: add css var for calc
zombieJ Sep 19, 2025
aebf0f5
chore: fix ts
zombieJ Sep 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions src/UniqueProvider/UniqueBody.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import useOffsetStyle from '../hooks/useOffsetStyle';
import classNames from 'classnames';
import CSSMotion from '@rc-component/motion';
import type { CSSMotionProps } from '@rc-component/motion';
import type { AlignType } from '../interface';
import type { AlignType, ArrowPos } from '../interface';

export interface UniqueBodyProps {
prefixCls: string; // ${prefixCls}-unique-body
Expand All @@ -15,6 +15,7 @@ export interface UniqueBodyProps {
offsetB: number;
offsetX: number;
offsetY: number;
arrowPos?: ArrowPos;
popupSize?: { width: number; height: number };
motion?: CSSMotionProps;
uniqueBgClassName?: string;
Expand All @@ -32,6 +33,7 @@ const UniqueBody = (props: UniqueBodyProps) => {
offsetB,
offsetX,
offsetY,
arrowPos,
popupSize,
motion,
uniqueBgClassName,
Expand Down Expand Up @@ -84,11 +86,13 @@ const UniqueBody = (props: UniqueBodyProps) => {
<div
className={cls}
style={{
'--arrow-x': `${arrowPos?.x || 0}px`,
'--arrow-y': `${arrowPos?.y || 0}px`,
Comment on lines +89 to +90
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

建议使用空值合并操作符（??）代替逻辑或操作符（||），以更明确地处理 null 和 undefined 的情况。当 arrowPos.x 或 arrowPos.y 的值为 0 时，|| 和 ?? 的行为一致，但 ?? 能更清晰地表达“仅在值为 null 或 undefined 时提供默认值”的意图，这是更健壮的做法。

Suggested change
'--arrow-x': `${arrowPos?.x || 0}px`,
'--arrow-y': `${arrowPos?.y || 0}px`,
'--arrow-x': `${arrowPos?.x ?? 0}px`,
'--arrow-y': `${arrowPos?.y ?? 0}px`,

...offsetStyle,
...sizeStyle,
...motionStyle,
...uniqueBgStyle,
}}
} as React.CSSProperties}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

使用 as React.CSSProperties 类型断言来支持 CSS 自定义属性虽然可行，但它会削弱类型安全。一个更佳的实践是使用模块扩展（module augmentation）来为 React.CSSProperties 接口添加自定义属性的类型定义。这样可以在整个项目中安全地使用这些属性，而无需每次都进行类型断言。

你可以在项目中创建一个 .d.ts 类型声明文件（例如 react.d.ts），并添加以下内容：

import 'react';

declare module 'react' {
  interface CSSProperties {
    '--arrow-x'?: string;
    '--arrow-y'?: string;
  }
}

应用此更改后，就可以移除此处的 as React.CSSProperties 类型断言了。

/>
);
}}
Expand Down
4 changes: 4 additions & 0 deletions src/UniqueProvider/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,6 +214,10 @@ const UniqueProvider = ({ children }: UniqueProviderProps) => {
offsetB={offsetB}
offsetX={offsetX}
offsetY={offsetY}
arrowPos={{
x: arrowX,
y: arrowY,
}}
popupSize={popupSize}
motion={options.popupMotion}
uniqueBgClassName={classNames(
Expand Down
7 changes: 7 additions & 0 deletions tests/unique.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -236,6 +236,7 @@ describe('Trigger.Unique', () => {
},
},
}}
arrow
>
<div className="target">click me</div>
</Trigger>
Expand All @@ -246,5 +247,11 @@ describe('Trigger.Unique', () => {
expect(document.querySelector('.rc-trigger-popup-unique-body')).toHaveClass(
'bamboo',
);

// Check that arrow position CSS variables are set
const uniqueBody = document.querySelector('.rc-trigger-popup-unique-body');
const computedStyle = getComputedStyle(uniqueBody);
expect(computedStyle.getPropertyValue('--arrow-x')).not.toBe('');
expect(computedStyle.getPropertyValue('--arrow-y')).not.toBe('');
Comment on lines +254 to +255
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

当前的测试断言 not.toBe('') 只能验证 CSS 变量已被设置，但不够健壮。例如，如果值是 0px（默认值），测试也会通过。为了使测试更精确，建议使用正则表达式来验证值的格式是否为有效的像素值。这可以确保不仅设置了变量，而且其值符合预期格式。

Suggested change
expect(computedStyle.getPropertyValue('--arrow-x')).not.toBe('');
expect(computedStyle.getPropertyValue('--arrow-y')).not.toBe('');
expect(computedStyle.getPropertyValue('--arrow-x')).toMatch(/-?\d+(\.\d+)?px/);
expect(computedStyle.getPropertyValue('--arrow-y')).toMatch(/-?\d+(\.\d+)?px/);

});
});
Loading