fix(Bubble.List): change scroll observer of Bubble.List #1690
Conversation
|
|
Bundle ReportChanges will increase total bundle size by 1.25MB (66.43%) ⬆️
Affected Assets, Files, and Routes:view changes for bundle: antdx-array-pushAssets Changed:
view changes for bundle: x-markdown-array-pushAssets Changed:
|
Summary of ChangesHello @anxLiang, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly enhances the Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. 📝 WalkthroughWalkthrough该 PR 为 BubbleList 引入独立的内容容器 Changes
Sequence DiagramsequenceDiagram
participant BubbleList as BubbleList<br/>Component
participant useScroll as useCompatibleScroll<br/>Hook
participant RO as ResizeObserver
participant ScrollDom as Scroll<br/>Container
participant ContentDom as ScrollContent<br/>Container
BubbleList->>BubbleList: 获取 scrollBoxDom 和 scrollContentDom 引用
BubbleList->>useScroll: 调用 useCompatibleScroll(scrollDom, contentDom)
useScroll->>useScroll: 校验 scrollDom 与 contentDom 是否存在
alt 任一 DOM 不存在
useScroll-->>BubbleList: 提前返回（无 observers）
else 都存在
useScroll->>RO: 创建 ResizeObserver 并监听 ContentDom
useScroll->>ScrollDom: 在 ScrollDom 中插入哨兵元素（IntersectionObserver 关联）
ContentDom->>RO: 内容高度发生变化（展开/折叠）
RO->>useScroll: 触发 resize 回调
useScroll->>useScroll: 计算是否处于底部并决定是否 scrollTo
alt 处于底部
useScroll->>ScrollDom: 执行 scrollTo 保持底部
else 非底部
useScroll->>ScrollDom: 保持当前滚动位置
end
useScroll-->>BubbleList: 返回滚动控制接口
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #1690 +/- ##
=======================================
Coverage 97.32% 97.32%
=======================================
Files 144 144
Lines 4565 4568 +3
Branches 1271 1265 -6
=======================================
+ Hits 4443 4446 +3
Misses 120 120
Partials 2 2 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Code Review
The pull request refactors the scroll observation mechanism in Bubble.List to use a ResizeObserver on a dedicated content div (scrollContentDom) instead of a MutationObserver on the main scroll container (scrollBoxDom). This change enhances the accuracy and efficiency of detecting content size changes for scroll locking, particularly in column-reverse layouts. Associated test files and styling have been updated to reflect these changes, ensuring consistency across the component. The removal of explicit data reversal logic (.reverse()) suggests that the visual order is now primarily managed by CSS flex-direction: column-reverse, simplifying the rendering process.
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/x/components/bubble/__tests__/list.test.tsx (1)
140-146: 测试注释与实际逻辑不符Line 144-145 的注释标注都是
// user role，但实际上mockItems中item1是 user，item2是 ai。建议修正注释以避免维护时产生困惑。💡 建议修正注释
it('should support empty role', () => { const { container } = render(<BubbleList items={mockItems} />); const bubbles = container.querySelectorAll('.ant-bubble'); - expect(bubbles[1]).toHaveClass('ant-bubble-start'); // user role - expect(bubbles[0]).toHaveClass('ant-bubble-start'); // ai role + expect(bubbles[1]).toHaveClass('ant-bubble-start'); // ai role (item2) + expect(bubbles[0]).toHaveClass('ant-bubble-start'); // user role (item1) });
🧹 Nitpick comments (3)
packages/x/components/bubble/hooks/useCompatibleScroll.ts (2)
107-108:handleScroll依赖数组中scrollDom未被使用
handleScroll的依赖数组包含scrollDom，但函数体内通过e.target获取元素，实际上并未使用scrollDom。建议移除该依赖或添加注释说明保留原因。♻️ 建议修改
const handleScroll = useCallback( (e: Event) => { const target = e.target as HTMLElement; if (!isReverse(target)) return; const { scrollTop, scrollHeight } = target; // 倒序， top 在变化，但 bottom 固定 lockedScrollBottomPos.current = scrollHeight + scrollTop; // 检测并恢复自然触发状态 if (callOnScrollNotNative.current) { callOnScrollNotNative.current = false; return; } if (scrolling.current) { clearTimeout(scrolling.current); } setTimer(); }, - [scrollDom], + [setTimer], );
52-66: ResizeObserver 回调中scrollDom检查位置可优化在 ResizeObserver 回调中，Line 53 检查
!scrollDom后提前返回，但 Line 66 调用enforceScrollLock()时该函数内部使用了非空断言scrollDom!。虽然当前逻辑上是安全的，但建议将scrollDom检查提前到回调开头，确保后续所有操作都在有效 DOM 上执行。packages/x/components/bubble/BubbleList.tsx (1)
195-195: 移除注释掉的代码Line 195 的注释代码
// const renderData = autoScroll ? [...items].reverse() : items;应该删除。如果保留是为了记录历史实现，建议使用 git 历史而非代码注释。♻️ 建议修改
- // const renderData = autoScroll ? [...items].reverse() : items; - // ============================ Render ============================
size-limit report 📦
|
Deploying ant-design-x with
|
| Latest commit: |
526fd55
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://564929f5.ant-design-x.pages.dev |
| Branch Preview URL: | https://fix-bubblelist.ant-design-x.pages.dev |
中文版模板 / Chinese template
🤔 This is a ...
🔗 Related Issues
fix #1684
💡 Background and Solution
📝 Change Log
Summary by CodeRabbit
发行说明
新增功能
性能改进
样式优化
修复
✏️ Tip: You can customize this high-level summary in your review settings.