Skip to content

fix: panel not follow when scroll is visible#76

Merged
zombieJ merged 3 commits intoreact-component:masterfrom
yellowryan:overflow-scroll
Mar 12, 2025
Merged

fix: panel not follow when scroll is visible#76
zombieJ merged 3 commits intoreact-component:masterfrom
yellowryan:overflow-scroll

Conversation

@yellowryan
Copy link
Contributor

@yellowryan yellowryan commented Mar 8, 2025

Fixed ant-design#53071

Summary by CodeRabbit

  • 新功能
    • 新增页面滚动事件响应,当用户滚动页面时,目标内容的位置会自动更新,提供更加灵敏和流畅的交互体验。优化机制确保页面在滚动时能够精准调整布局,同时在组件状态变化或卸载时自动清除相关监听,进一步提升了整体性能。
  • 测试
    • Tour 组件的测试中新增了一个测试用例,验证窗口滚动时目标占位符位置的更新,确保组件在滚动事件下的行为正确。

@vercel
Copy link

vercel bot commented Mar 8, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
tour ✅ Ready (Inspect) Visit Preview 💬 Add feedback Mar 11, 2025 1:34pm

@coderabbitai
Copy link

coderabbitai bot commented Mar 8, 2025

Walkthrough

src/hooks/useTarget.ts 中加入了对 scroll 事件的新监听器。现注册 updatePos 作为回调函数,以便在页面滚动时更新目标元素的位置。同时,在 useLayoutEffect 的清理函数中移除该事件监听器,以防止内存泄漏。代码中添加了注释,说明当 document.body.style.overflowvisible 时触发此逻辑更新。此外,在 tests/index.test.tsx 中新增了测试用例,以验证 Tour 组件在滚动时的行为,并在 tests/utils.ts 中添加了 scrollWindow 函数以支持窗口滚动。

Changes

文件 更改描述
src/hooks/useTarget.ts 添加对 scroll 事件的监听,调用 updatePos 更新目标位置;在 useLayoutEffect 的清理中移除此监听器;增加相关注释
tests/index.test.tsx 新增测试用例以验证 Tour 组件在窗口滚动时的位置更新;更新导入语句以包含 scrollWindow 函数
tests/utils.ts 添加 scrollWindow 函数以支持窗口滚动并触发 scroll 事件

Sequence Diagram(s)

sequenceDiagram
    participant 组件 as Component
    participant 窗口 as Window
    participant Hook as useTarget钩子
    participant update as updatePos函数

    组件->>Hook: 初始化组件
    Hook->>窗口: 注册 scroll 事件监听器
    窗口->>update: scroll事件发生
    update-->>Hook: 更新目标元素位置
    组件-->>Hook: 组件卸载
    Hook->>窗口: 移除 scroll 事件监听器
Loading

Poem

我是一只跳跃的小兔子,
在代码林间欢喜追寻。
Scroll 轻拂如微风,
更新函数闪烁晶莹。
清理后空灵如月,
代码花开满天馨!

Warning

There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

tests/index.test.tsx

Oops! Something went wrong! :(

ESLint: 7.32.0

ESLint couldn't find the plugin "eslint-plugin-react".

(The package "eslint-plugin-react" was not found when loaded as a Node module from the directory "".)

It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:

npm install eslint-plugin-react@latest --save-dev

The plugin "eslint-plugin-react" was referenced from the config file in ".eslintrc.js » /node_modules/.pnpm/@umijs+fabric@2.14.1/node_modules/@umijs/fabric/dist/eslint.js".

If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.

tests/utils.ts

Oops! Something went wrong! :(

ESLint: 7.32.0

ESLint couldn't find the plugin "eslint-plugin-react".

(The package "eslint-plugin-react" was not found when loaded as a Node module from the directory "".)

It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:

npm install eslint-plugin-react@latest --save-dev

The plugin "eslint-plugin-react" was referenced from the config file in ".eslintrc.js » /node_modules/.pnpm/@umijs+fabric@2.14.1/node_modules/@umijs/fabric/dist/eslint.js".

If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.

✨ Finishing Touches
  • 📝 Generate Docstrings

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@codecov
Copy link

codecov bot commented Mar 9, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 99.04%. Comparing base (9f65afb) to head (7e99bd2).
Report is 1 commits behind head on master.

Additional details and impacted files
@@            Coverage Diff             @@
##           master      #76      +/-   ##
==========================================
+ Coverage   99.01%   99.04%   +0.02%     
==========================================
  Files           9        9              
  Lines         204      209       +5     
  Branches       94       95       +1     
==========================================
+ Hits          202      207       +5     
  Misses          2        2              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@dengfuping dengfuping requested a review from zombieJ March 10, 2025 13:06
Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 0

🧹 Nitpick comments (1)
tests/utils.ts (1)

10-13: 实现的 scrollWindow 工具函数结构清晰

函数实现简洁有效,提供了在测试场景中模拟窗口滚动的功能。

不过,建议在行尾添加分号以保持代码风格一致性:

 export const scrollWindow = (x: number, y: number) => {
     window.scrollTo(x, y);
-    window.dispatchEvent(new Event('scroll'))
+    window.dispatchEvent(new Event('scroll'));
 }
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 01ca31b and 7e99bd2.

⛔ Files ignored due to path filters (1)
  • tests/__snapshots__/index.test.tsx.snap is excluded by !**/*.snap
📒 Files selected for processing (2)
  • tests/index.test.tsx (2 hunks)
  • tests/utils.ts (1 hunks)
🔇 Additional comments (1)
tests/index.test.tsx (1)

1229-1291: 测试用例实现完善,验证了滚动时面板位置更新功能

测试用例结构良好,完整验证了滚动时 Tour 组件能够正确更新目标元素位置的功能:

  1. 首先设置初始位置并验证初始样式
  2. 触发滚动并检查位置是否正确更新
  3. 最后执行适当的清理操作

这个测试用例很好地覆盖了修复的功能点,确保当页面滚动时 Tour 组件能够跟随目标元素的位置变化。

@zombieJ zombieJ merged commit 8e6f526 into react-component:master Mar 12, 2025
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Tour doesn't fixed to target when document.body is scrollable

2 participants