fix: scroll logic

[zombieJ]

follow up #1231

UI 相关测试总是很蛋疼，模拟也不会有实际效果。

发完得去浏览器实际验证一下

ref ant-design/ant-design#53085

Summary by CodeRabbit

• Chores

  • 调整了测试流程配置，采用更新后的测试策略，以提升整体稳定性。

• New Features

  • 优化了粘性滚动条组件，改进了父元素识别方式，增强了兼容性，使滚动行为在复杂布局中更为流畅。

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
table	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 6, 2025 2:34pm

[coderabbitai]

Walkthrough

此次变更更新了两个部分。首先，工作流配置文件中的测试作业引用由 test.yml 更换为 test-npm.yml。其次，StickyScrollBar 组件中新增了对 getDOM 函数的引用，并调整了父元素获取方式，将 scrollParents 的类型扩展为支持 HTMLElement 与 SVGElement。总体上，这些更新调整了 CI 流程与组件的 DOM 处理逻辑。

Changes

文件	变更摘要
.github/workflows/main.yml	更新测试作业引用，将原使用的 test.yml 替换为 test-npm.yml
src/stickyScrollBar.tsx	新增 getDOM 导入；修改父元素获取方式，并扩展 scrollParents 类型支持 HTML 与 SVG

Sequence Diagram(s)

sequenceDiagram
    participant Dev as 开发者
    participant GH as GitHub Actions
    participant Test as test-npm.yml 流程
    Dev->>GH: 提交代码
    GH->>Test: 触发测试作业
    Test-->>GH: 返回测试结果
    GH-->>Dev: 汇报测试结果

Loading

sequenceDiagram
    participant Comp as StickyScrollBar 组件
    participant Ref as scrollBodyRef
    participant DOM as getDOM 函数
    Comp->>Ref: 访问 scrollBodyRef.current
    Comp->>DOM: 调用 getDOM(scrollBodyRef.current)
    DOM-->>Comp: 返回父元素 (HTMLElement 或 SVGElement)

Loading

Poem

我是快乐的小兔子，在代码中奔跳，
工作流换新歌，测试节奏在跳动，
滚动条穿越 HTML 与 SVG 架起奇妙桥，
getDOM 施展魔法，父元素显现从容，
代码花园里，每个变更都是春天的微风。

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.

src/stickyScrollBar.tsx

Oops! Something went wrong! :(

ESLint: 8.57.1

ESLint couldn't find the config "prettier" to extend from. Please check that the name of the config is correct.

The config "prettier" was referenced from the config file in "/.eslintrc.js".

If you still have problems, please stop by https://eslint.org/chat/help to chat with the team.

---

📜 Recent review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between d218893 and fecd687.

📒 Files selected for processing (2)

• .github/workflows/main.yml (1 hunks)
• src/stickyScrollBar.tsx (2 hunks)

🔇 Additional comments (3)

src/stickyScrollBar.tsx (2)

9-9: 引入 getDOM 函数增强 DOM 元素处理能力

导入 getDOM 函数是一个良好的改进，它能够提供更健壮的方式来从 React refs 中获取实际 DOM 元素。

---

157-158: 扩展了滚动父元素的类型支持并优化了元素获取方式

这个变更有两个重要的改进：

1. 扩展了 scrollParents 类型从 HTMLElement[] 到 (HTMLElement | SVGElement)[]，使组件能够支持 SVG 元素作为滚动父元素
2. 使用 getDOM 函数获取 DOM 元素，而不是直接使用 ref 的 current 属性

这些变更提高了组件的兼容性和健壮性，特别是在处理不同类型的 DOM 元素时。

.github/workflows/main.yml (1)

5-5:

✅ Verification successful

更新工作流配置以使用 test-npm.yml

将测试工作流引用从 test.yml 更改为 test-npm.yml，这可能表明测试策略或环境发生了调整，以更好地满足项目的 npm 特定测试需求。

确保团队成员了解此变更可能对 CI/CD 流程带来的影响。

---

🏁 Script executed:

#!/bin/bash
# 检查 react-component/rc-test 仓库中 test-npm.yml 与 test.yml 的差异
gh repo clone react-component/rc-test /tmp/rc-test || cd /tmp/rc-test && git pull
cd /tmp/rc-test
if [ -f .github/workflows/test-npm.yml ] && [ -f .github/workflows/test.yml ]; then
  echo "两个工作流文件的差异:"
  diff -u .github/workflows/test.yml .github/workflows/test-npm.yml
else
  echo "无法找到一个或两个工作流文件"
  ls -la .github/workflows/
fi

Length of output: 1860

---

更新工作流配置：确认使用 test-npm.yml 替换 test.yml

经过验证，我们在 react-component/rc-test 仓库中对比了 test.yml 与 test-npm.yml，结果显示新的 test-npm.yml 文件已将原先基于 Bun 的命令（如 bun i、bun run lint 等）替换为 npm 相关命令（npm i --legacy-peer-deps、npm run lint 等），这符合针对 npm 测试需求做出的调整。

请注意以下几点：

• 文件引用更新：在 .github/workflows/main.yml 第5行，工作流引用已从 test.yml 更换为 test-npm.yml。
• 命令变更：新工作流中移除了 Bun 相关命令，改用 npm 来安装依赖、运行打包与测试流程。
• CI/CD 影响：团队成员请确认该变更对 CI/CD 流程的影响，并确保在目标环境中一切运行正常。

✨ Finishing Touches

• 📝 Generate Docstrings

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 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]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 97.77%. Comparing base (d218893) to head (fecd687).
Report is 1 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #1239   +/-   ##
=======================================
  Coverage   97.77%   97.77%           
=======================================
  Files          76       76           
  Lines        7453     7454    +1     
  Branches     1132     1132           
=======================================
+ Hits         7287     7288    +1     
  Misses        160      160           
  Partials        6        6           

☔ 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.