fix: 修复 Popover.Confirm 的弹出容器的宽度在Table中有可能显示较窄的问题
#736
Conversation
Walkthrough此次更改主要包括三个部分： Changes
Possibly related PRs
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: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (3)
- package.json (1 hunks)
- packages/hooks/src/utils/position.ts (1 hunks)
- packages/shineout/src/popover/doc/changelog.cn.md (1 hunks)
✅ Files skipped from review due to trivial changes (1)
- package.json
🧰 Additional context used
🔇 Additional comments (1)
packages/shineout/src/popover/__doc__/changelog.cn.md (1)
1-5: 更改日志条目格式正确，内容清晰。新的更改日志条目格式正确，包含了所有必要的信息。bug 修复的描述简洁明了，PR 编号引用正确，日期格式也符合要求。
值得注意的是，此版本号为 beta 版本（3.4.4-beta.8）。如果这是有意为之，那么一切正常。但如果这不是预期的版本号，可能需要进行调整。
请运行以下脚本来验证版本号的一致性：
✅ Verification successful
版本号验证通过，package.json 中的版本号与更改日志中的版本号一致。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # 描述：验证 package.json 中的版本号是否与更改日志一致 # 测试：查找 package.json 中的版本号。预期：应与更改日志中的版本号匹配。 jq -r '.version' package.jsonLength of output: 42
| // TODO: 暂时移除，另考虑方案 | ||
| // 如果渲染了弹出内容，则根据弹出内容宽度计算是否自动调整位置 | ||
| if (popupRect) { | ||
| if (popupRect?.width / 2 > rect.left) { | ||
| position += '-left'; | ||
| } | ||
| if (popupRect?.width / 2 > windowWidth - rect.right) { | ||
| position += '-right'; | ||
| } | ||
| } else { | ||
| // 兜底计算 | ||
| if (horizontalPoint > windowWidth * 0.6) { | ||
| position += '-right'; | ||
| } else if (horizontalPoint < windowWidth * 0.4) { | ||
| position += '-left'; | ||
| } | ||
| // if (popupRect && popupRect?.width) { | ||
| // if (popupRect?.width / 2 > rect.left) { | ||
| // position += '-left'; | ||
| // } | ||
| // if (popupRect?.width / 2 > windowWidth - rect.right) { | ||
| // position += '-right'; | ||
| // } | ||
| // } else { | ||
| // 兜底计算 | ||
| if (horizontalPoint > windowWidth * 0.6) { | ||
| position += '-right'; | ||
| } else if (horizontalPoint < windowWidth * 0.4) { | ||
| position += '-left'; | ||
| } | ||
| // } |
There was a problem hiding this comment.
需要重新考虑弹出框定位逻辑
-
移除基于弹出内容宽度的定位逻辑可能会影响某些场景下弹出框的准确定位。特别是在弹出内容较宽的情况下，可能会导致显示不完整或位置不合理的问题。
-
TODO 注释表明正在考虑替代方案。建议尽快确定新的解决方案，以确保弹出框在各种情况下都能正确定位。在实现新方案之前，可以考虑添加一个 FIXME 注释，以便跟踪这个待解决的问题。
-
当前的兜底计算逻辑相对简单，可能无法处理所有用例。建议增强fallback逻辑，考虑更多因素，如：
- 弹出内容的预估宽度
- 目标元素的大小和位置
- 可用的屏幕空间
建议：
- 制定清晰的计划来解决这个定位问题，可能需要重新设计定位算法。
- 在实现新方案之前，可以添加日志或警告，以便在生产环境中监控可能出现的定位问题。
- 考虑添加配置选项，允许用户在需要时手动指定弹出框的首选位置。
您是否需要我协助设计新的定位算法或创建相关的GitHub issue来跟踪这个问题？
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (3)
packages/shineout/src/textarea/__test__/textarea.spec.tsx (3)
163-164: 添加了有用的注释解释添加解释性注释是个好做法，它有助于其他开发者理解为什么使用
document.querySelector。建议：考虑将注释翻译成英文，以保持代码库的语言一致性，除非项目规范特别要求使用中文注释。
您是否需要我协助将注释翻译成英文？
168-169: 更新了错误状态的测试逻辑和注释这个更改正确地反映了组件行为的变化。使用
document.querySelectorAll确保了即使信息元素被渲染到其他位置，测试也能正确验证其不存在。建议：
- 为保持一致性，考虑将所有注释翻译成英文。
- 可以稍微调整测试描述，使其更明确地表达现在是在整个文档范围内检查，而不仅仅是在容器内。
如果需要，我可以协助您改进这些注释和测试描述。
182-183: 更新了元素查询方法和选择器这些更改正确反映了组件结构的变化：
- 第182-183行：使用
container.querySelectorAll确保在容器内查找元素，与之前的更改保持一致。- 第199-200行：新的选择器更具体地定位了错误消息元素，反映了可能的弹出框结构变化。
建议：为保持一致性，考虑在第199-200行也使用
container.querySelector而不是隐式的document.querySelector。这样可以确保测试的范围始终限定在组件的直接容器内。如果您需要，我可以提供具体的代码修改建议。
Also applies to: 199-200
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
- packages/shineout/src/textarea/test/textarea.spec.tsx (4 hunks)
🧰 Additional context used
🔇 Additional comments (1)
packages/shineout/src/textarea/__test__/textarea.spec.tsx (1)
154-155: 更新了信息元素的查询方法这个更改看起来是正确的。通过使用
document.querySelectorAll而不是container.querySelectorAll，测试现在能够检测到可能被渲染在组件直接容器之外的信息元素。这种变化表明组件的实现可能已经改变，将信息元素渲染到了更高的 DOM 层级。
Types of changes
Changelog
Popover.Confirm的弹出容器的宽度在Table中有可能显示较窄的问题Summary by CodeRabbit
新功能
3.4.4-beta.8。Popover.Confirm组件的修复信息。错误修复
Popover.Confirm弹出容器宽度过窄的问题。Popover可见性的问题。测试
Textarea组件的测试，以反映新的信息和错误显示逻辑。