fix: DOMRect value issues #481
Conversation
Walkthrough此次更改增强了 Changes
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- src/hooks/useAlign.ts (1 hunks)
Additional comments not posted (3)
src/hooks/useAlign.ts (3)
216-217: 改进了代码的健壮性
targetRect的x和y属性现在使用了回退值。这确保了如果rect.x或rect.y未定义，将使用rect.left或rect.top。这提高了代码的健壮性。代码更改已批准。
223-224: 改进了代码的健壮性
popupRect的x和y属性现在使用了回退值。这确保了如果popupRect.x或popupRect.y未定义，将使用popupRect.left或popupRect.top。这提高了代码的健壮性。代码更改已批准。
216-217: 整体更改已批准这些更改提高了坐标检索的可靠性，这对于在 UI 中正确对齐元素至关重要。
代码更改已批准。
Also applies to: 223-224
|
加个用例？ |
复制了一个之前align的 改了里面的 |
|
就只针对这个场景写个用例即可 |
There was a problem hiding this comment.
Actionable comments posted: 1
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- tests/rect.test.tsx (1 hunks)
Additional context used
Biome
tests/rect.test.tsx
[error] 9-14: Do not export from a test file.
(lint/suspicious/noExportsInTest)
Additional comments not posted (10)
tests/rect.test.tsx (10)
16-46: 设置代码看起来不错。这些设置确保了测试中元素的尺寸和位置值的一致性。
48-62: 每个测试的设置和清理代码看起来不错。这些设置和清理代码确保了测试的隔离性。
64-110: 测试用例not show看起来不错。这个测试用例检查了可见性和事件监听器的行为，覆盖了必要的场景。
112-137: 测试用例resize align看起来不错。这个测试用例检查了在调整大小时的对齐行为，覆盖了必要的场景。
139-159: 测试用例placement is higher than popupAlign看起来不错。这个测试用例检查了 placement 优先于 popupAlign 的情况，覆盖了必要的场景。
161-196: 测试用例invisible should not align看起来不错。这个测试用例检查了当目标不可见时不进行对齐的情况，覆盖了必要的场景。
198-225: 测试用例align should merge into placement看起来不错。这个测试用例检查了对齐合并到 placement 的情况，覆盖了必要的场景。
227-248: 测试用例targetOffset support ptg看起来不错。这个测试用例检查了百分比 targetOffset 的支持情况，覆盖了必要的场景。
250-271: 测试用例support dynamicInset看起来不错。这个测试用例检查了 dynamicInset 的支持情况，覆盖了必要的场景。
273-296: 测试用例round when decimal precision看起来不错。这个测试用例检查了处理小数精度时的舍入行为，覆盖了必要的场景。
|
ci 挂了 |
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (6)
- src/hooks/useAlign.ts (2 hunks)
- tests/align.test.tsx (1 hunks)
- tests/arrow.test.jsx (1 hunks)
- tests/flip-visibleFirst.test.tsx (2 hunks)
- tests/flip.test.tsx (5 hunks)
- tests/flipShift.test.tsx (2 hunks)
Files skipped from review as they are similar to previous changes (1)
- src/hooks/useAlign.ts
Additional comments not posted (8)
tests/arrow.test.jsx (1)
56-57: 增加了left和top属性在测试用例中增加了
left和top属性，与现有的x和y值对齐，这可能会提高测试的全面性。请确保这些属性在测试中被正确使用，并且没有引入任何不一致。代码更改已被批准。
运行以下脚本以验证
left和top在测试中的使用情况：tests/flipShift.test.tsx (1)
88-89: 增加了left和top属性在测试用例中增加了
left和top属性，与现有的x和y值对齐，这可能会提高测试的全面性。请确保这些属性在测试中被正确使用，并且没有引入任何不一致。代码更改已被批准。
运行以下脚本以验证
left和top在测试中的使用情况：tests/align.test.tsx (1)
29-30: 增加了left和top属性在测试用例中增加了
left和top属性，与现有的x和y值对齐，这可能会提高测试的全面性。请确保这些属性在测试中被正确使用，并且没有引入任何不一致。代码更改已被批准。
运行以下脚本以验证
left和top在测试中的使用情况：Verification successful
left和top属性的使用已验证在测试文件中，
left和top属性被用于对象属性、样式属性以及测试描述中，表明它们在测试中被正确使用。这些属性与定位逻辑一致，符合测试的目标。
- 确认
left和top在测试用例中被正确使用。Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # 描述：验证测试中 `left` 和 `top` 的使用情况。 # 测试：搜索函数使用情况。预期：只有新签名的出现。 rg --type typescript -A 5 $'left' $'top'Length of output: 71
Script:
#!/bin/bash # 描述：验证测试中 `left` 和 `top` 的使用情况。 # 测试：搜索 `left` 和 `top` 在 .tsx 文件中的使用情况。 rg --type tsx -A 5 'left' | rg 'top'Length of output: 62
Script:
#!/bin/bash # 描述：验证测试中 `left` 和 `top` 的使用情况。 # 使用 fd 查找 .tsx 文件，然后使用 rg 搜索 `left` 和 `top`。 fd --extension tsx --exec rg 'left' | rg 'top'Length of output: 408
tests/flip-visibleFirst.test.tsx (3)
59-60: 批准添加left和top属性。添加
left和top属性有助于提高位置计算的精确性。建议验证这些属性在不同浏览器中的一致性。
68-69: 批准添加left和top属性。添加
left和top属性有助于提高位置计算的精确性。建议验证这些属性在不同浏览器中的一致性。
77-78: 批准添加left和top属性。添加
left和top属性有助于提高位置计算的精确性。建议验证这些属性在不同浏览器中的一致性。tests/flip.test.tsx (2)
61-62: 批准添加left和top属性。添加
left和top属性有助于提高位置计算的精确性。建议验证这些属性在不同浏览器中的一致性。
70-71: 批准添加left和top属性。添加
left和top属性有助于提高位置计算的精确性。建议验证这些属性在不同浏览器中的一致性。
改了一下 给其他的测试用例也补充了top 和 left的值 应该可以跑过了 |
src/hooks/useAlign.ts
Outdated
| @@ -212,6 +212,8 @@ export default function useAlign( | |||
| }; | |||
| } else { | |||
| const rect = target.getBoundingClientRect(); | |||
| rect.x = rect.x || rect.left; | |||
| rect.y = rect.y || rect.top | |||
There was a problem hiding this comment.
| rect.y = rect.y || rect.top | |
| rect.y = rect.y ?? rect.top; |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #481 +/- ##
==========================================
+ Coverage 97.71% 97.72% +0.01%
==========================================
Files 13 13
Lines 787 791 +4
Branches 234 238 +4
==========================================
+ Hits 769 773 +4
Misses 18 18 ☔ View full report in Codecov by Sentry. |
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| @@ -212,6 +212,8 @@ | |||
| }; | |||
| } else { | |||
| const rect = target.getBoundingClientRect(); | |||
| rect.x = rect.x ?? rect.left; | |||
| rect.y = rect.y ?? rect.top | |||
Check notice
Code scanning / CodeQL
Semicolon insertion Note
|
@afc163 没参与过antd的贡献 求问这个改动预计啥时候能更新到antd里呀 |
|
我去催个发布 |
兼容
getBoundingClientRect取值逻辑Summary by CodeRabbit
Trigger组件的单元测试，验证其在不同事件下的对齐和可见性行为。