Skip to content

update destroyTooltipOnHide to destroyOnHidden #495

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: master
Choose a base branch
from

Conversation

li-jia-nan
Copy link
Member

@li-jia-nan li-jia-nan commented May 18, 2025

Summary by CodeRabbit

  • 新功能

    • 新增 Vercel 部署配置文件,指定使用 umijs 框架。
    • 构建输出目录现可自定义。
  • 文档

    • README 中 Tooltip 组件属性表优化格式,属性名与代码保持一致,相关描述更新。
    • 示例文档代码增加类型标注,提升可读性和类型安全性。
  • 重构

    • Tooltip 组件属性 destroyTooltipOnHide 重命名为 destroyOnHidden,相关文档、示例和测试同步更新。
    • Tooltip 组件和 Popup 组件的声明方式优化,提升类型安全和可维护性。
  • 依赖升级

    • React 及相关依赖升级至 19.x,类型定义同步更新,提升兼容性。
  • 杂项

    • .gitignore 文件优化,新增 pnpm-lock.yaml 忽略规则。
    • 删除旧的 now.json 部署配置文件。
    • 新增 GitHub Actions 工作流,实现文档自动构建和部署至 GitHub Pages。

Copy link

vercel bot commented May 18, 2025

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

Name Status Preview Comments Updated (UTC)
tooltip ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 19, 2025 5:03am

Copy link

coderabbitai bot commented May 18, 2025

"""

Walkthrough

本次变更主要包括对 Tooltip 组件及其相关示例的类型注解优化、属性命名统一(destroyTooltipOnHide 重命名为 destroyOnHidden)、依赖升级(React 及类型相关包)、构建与部署配置调整(新增 Vercel 配置、删除 now.json、更新 .dumirc.ts 输出路径)、文档和测试同步更新。

Changes

文件/路径分组 变更摘要
.dumirc.ts 配置新增 outputPath: '.doc',指定自定义输出目录。
.gitignore 新增忽略 pnpm-lock.yaml,移除 .env.local 行尾空格,文件末尾添加换行。
README.md Tooltip 属性表格式优化,属性名 destroyTooltipOnHide 改为 destroyOnHidden,部分描述格式微调。
docs/examples/arrowContent.tsx
docs/examples/placement.tsx
docs/examples/showArrow.tsx
docs/examples/point.tsx
显式添加 TypeScript 类型注解,组件声明统一为 React.FC,样式对象类型明确为 React.CSSProperties
docs/examples/formError.tsx handleChange 方法参数类型明确为 React.ChangeEvent<HTMLInputElement>,方法体简化为单行。
docs/examples/onVisibleChange.tsx preventDefaultonVisibleChange 方法参数类型明确,setState 调用简化。
docs/examples/simple.tsx 组件及状态属性、事件处理、渲染、传递属性等,destroyTooltipOnHide 全部重命名为 destroyOnHidden
now.json 删除部署配置文件 now.json。
package.json 升级 React 及相关类型依赖,新增 @types/nodedocs:deploy 脚本先构建后部署,peerDependencies 升级 React 版本要求。
src/Popup.tsx Popup 组件由默认导出函数重构为命名常量 React.FC<ContentProps>,导出方式调整,props 解构格式优化。
src/Tooltip.tsx 组件重构为内联 React.forwardRef,属性 destroyTooltipOnHide 统一重命名为 destroyOnHidden,事件处理属性命名同步调整。
tests/index.test.tsx 测试用例中 destroyTooltipOnHide 全部更名为 destroyOnHidden,console.error mock 格式微调。
vercel.json 新增 Vercel 部署配置文件,指定框架为 "umijs"。
.github/workflows/site-deploy.yml 新增 GitHub Actions 工作流,用于在标签推送时构建并部署网站到 GitHub Pages。

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Tooltip
    participant Trigger
    participant Popup

    User->>Tooltip: 传递 destroyOnHidden 属性
    Tooltip->>Trigger: 传递 autoDestroy={destroyOnHidden}
    Trigger->>Popup: 控制弹层显示/销毁
    User->>Tooltip: 触发 onOpenChange/afterOpenChange 事件
    Tooltip->>Trigger: 事件重命名同步传递
Loading

Suggested reviewers

  • zombieJ

Poem

代码如风轻轻吹,
Tooltip 属性换新衣。
类型注解更严谨,
部署脚本焕活力。
兔子挥爪庆更新,
🌱新版本,跃然生!
"""

✨ Finishing Touches
🧪 Generate Unit Tests
  • Create PR with Unit Tests
  • Commit Unit Tests in branch update-api
  • Post Copyable Unit Tests in Comment

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
🪧 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.
    • Explain this complex logic.
    • 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 explain this code block.
    • @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 explain its main purpose.
    • @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.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

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 generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai generate unit tests to generate unit tests 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.

Copy link

socket-security bot commented May 18, 2025

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff Package Supply Chain
Security
Vulnerability Quality Maintenance License
Updated@​types/​react-dom@​18.3.7 ⏵ 19.1.510010072 -195100
Updated@​types/​react@​18.3.21 ⏵ 19.1.4100 +110078 +195100
Updated@​testing-library/​react@​14.3.1 ⏵ 16.3.09910010089100

View full report

Copy link

codecov bot commented May 18, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (1f6f3c2) to head (e351c6b).

Additional details and impacted files
@@            Coverage Diff            @@
##            master      #495   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files            3         3           
  Lines           33        33           
  Branches        12        12           
=========================================
  Hits            33        33           

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

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

🔭 Outside diff range comments (1)
docs/examples/formError.tsx (1)

11-14: 🛠️ Refactor suggestion

为组件添加泛型以明确 Props 和 State 类型
当前使用 as TestState 进行断言,但未在 Component 泛型中声明 state 类型,建议改为:

class Test extends Component<{}, TestState> {
  state: TestState = {
    visible: false,
  };
  // ...
}
🧹 Nitpick comments (2)
tests/index.test.tsx (1)

157-158: 建议移除冗余属性showArrow 系列测试中添加 destroyOnHidden 并不影响箭头渲染逻辑,建议移除以保持测试简洁。

Also applies to: 171-172, 186-187, 204-205

src/Tooltip.tsx (1)

119-119: 类型断言使用

React.cloneElement 中添加了显式的类型断言 as any,确保类型兼容性。不过,过度使用 any 类型会降低类型安全性,建议考虑使用更具体的类型。

可以考虑使用更精确的类型而不是 any,例如:

-return React.cloneElement<any>(children, childProps) as any;
+return React.cloneElement<React.ReactElement>(children, childProps);
📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between 1f6f3c2 and e8f563c.

📒 Files selected for processing (16)
  • .dumirc.ts (1 hunks)
  • .gitignore (1 hunks)
  • README.md (1 hunks)
  • docs/examples/arrowContent.tsx (1 hunks)
  • docs/examples/formError.tsx (1 hunks)
  • docs/examples/onVisibleChange.tsx (2 hunks)
  • docs/examples/placement.tsx (2 hunks)
  • docs/examples/point.tsx (1 hunks)
  • docs/examples/showArrow.tsx (1 hunks)
  • docs/examples/simple.tsx (5 hunks)
  • now.json (0 hunks)
  • package.json (3 hunks)
  • src/Popup.tsx (2 hunks)
  • src/Tooltip.tsx (8 hunks)
  • tests/index.test.tsx (7 hunks)
  • vercel.json (1 hunks)
💤 Files with no reviewable changes (1)
  • now.json
🔇 Additional comments (40)
.dumirc.ts (1)

21-21: outputPath 配置已添加:将文档构建产物输出至 .doc 目录,符合 Dumi 的自定义输出需求,与整体部署流程保持一致。

.gitignore (3)

33-33: 忽略 pnpm-lock.yaml:项目使用 pnpm 时应忽略对应锁定文件,与其他包管理工具保持一致。


39-39: 移除 .env.local 后多余空格:清理无意义字符,提升 .gitignore 可读性。


45-45: 忽略 bun.lockb:新增 Bun 包管理器锁文件的忽略规则,适配更多包管理环境。

vercel.json (1)

1-3: 添加 Vercel 部署配置文件:新建 vercel.json 并指定 frameworkumijs,替换原有 now.json,部署配置准确无误。

docs/examples/point.tsx (1)

7-8: 明确组件类型及初始化 ref:将 Test 声明为 React.FC 并将 scrollRef 初始值设为 null,提升类型安全,与其他示例保持一致。

tests/index.test.tsx (3)

96-96: 更新 describe 名称:将测试集从 destroyTooltipOnHide 重命名为 destroyOnHidden,保持与组件属性一致。


123-123: 添加 destroyOnHidden 属性测试:在相应用例中加入该属性,验证隐藏后销毁行为符合预期。


324-324: 抑制并恢复 console.error 输出:通过 jest.spyOn@ts-expect-error 注解,确保多子节点测试不会产生干扰日志并通过 TS 编译。

Also applies to: 329-329

docs/examples/formError.tsx (1)

22-23: 类型注解增强已正确应用
handleChange 方法已添加 React.ChangeEvent<HTMLInputElement> 类型注解,逻辑简洁且符合预期。

docs/examples/showArrow.tsx (3)

7-15: styles 常量已正确使用 React.CSSProperties 类型注解
显式声明了样式对象的类型,有助于类型安全和代码可读性。


17-20: rowStyle 常量已正确使用 React.CSSProperties 类型注解
对布局样式添加类型注解,保持了与其他示例的一致性。


21-22: Test 组件声明为 React.FC
显式使用 React.FC 声明函数组件,符合本次 PR 的组件声明规范。

docs/examples/placement.tsx (3)

8-16: styles 常量已正确使用 React.CSSProperties 类型注解
显式声明了样式对象的类型,与全局示例保持一致。


18-20: rowStyle 常量已正确使用 React.CSSProperties 类型注解
添加类型注解后更易于维护和阅读。


22-23: Test 组件声明为 React.FC
函数组件显式标注为 React.FC,与其他示例统一。

README.md (1)

75-97: API 文档中的 destroyTooltipOnHide 已成功重命名为 destroyOnHidden
Props 表格已更新,确保无旧属性残留,并对默认值和描述进行了校对。

src/Popup.tsx (1)

14-23: 已将 Popup 组件统一声明为 React.FC<ContentProps> 并完成 props 解构
组件声明风格与示例文件一致,解构方式也更清晰可读。

docs/examples/simple.tsx (5)

10-10: 类型接口中的属性名称已更新

TestState 接口中的属性名从 destroyTooltipOnHide 更改为 destroyOnHidden,这与组件 API 的变更保持一致。修改后的命名更简洁且语义明确。


22-22: 状态初始化中的属性名称已更新

组件状态初始化中的属性名已从 destroyTooltipOnHide 更改为 destroyOnHidden,确保了与接口定义的一致性。


98-98: setState 调用中的属性名称已更新

onDestroyChange 方法中 setState 调用的属性名已从 destroyTooltipOnHide 更改为 destroyOnHidden,保持了整个组件中命名的一致性。


140-140: UI 标签文本已更新

界面中显示的标签文本已从 destroyTooltipOnHide 更改为 destroyOnHidden,确保了 UI 与代码的一致性。


212-212: Tooltip 组件属性名称已更新

传递给 Tooltip 组件的属性名已从 destroyTooltipOnHide 更改为 destroyOnHidden,完成了整个文件中命名的统一更新。

docs/examples/onVisibleChange.tsx (2)

5-5: 增加了明确的事件参数类型注解

preventDefault 函数的事件参数添加了明确的 TypeScript 类型注解 React.MouseEvent<HTMLAnchorElement, MouseEvent>,提高了代码的类型安全性。


19-20: 改进了 onVisibleChange 方法的类型安全性和代码简洁性

  1. visible 参数添加了明确的 boolean 类型注解
  2. 简化了 setState 调用,使用了更简洁的对象简写语法

这些改进提高了代码的可读性和类型安全性。

package.json (4)

34-34: 改进了文档部署脚本

docs:deploy 脚本现在会先运行 docs:build 再进行部署,确保部署前已生成最新的文档。


51-56: 更新了测试库和类型定义依赖

  1. 升级了 @testing-library/react^16.3.0
  2. 添加了 @types/node 依赖
  3. 将 React 相关类型更新到 v19 版本

这些更新使项目与 React 19 兼容,并提供了更好的类型支持。


65-66: 升级 React 依赖到 v19

将 React 和 ReactDOM 的开发依赖从 v18 升级到了 v19,与前面的类型定义更新保持一致。

请确认项目中的所有组件和功能在 React 19 下都能正常工作,特别是那些依赖于可能在 React 19 中改变或废弃的 API 的部分。


70-71: 更新了 React 的 peer 依赖要求

将 React 和 ReactDOM 的 peer 依赖从 >=16.9.0 提高到 >=18.0.0,这意味着使用此组件库的项目至少需要 React 18。

请确认这个变更是有意为之的,因为它可能影响一些尚未升级到 React 18 的项目。您可能需要在发布说明中特别提醒这一点。

docs/examples/arrowContent.tsx (3)

7-15: 为样式对象添加了明确的类型注解

styles 常量添加了明确的 React.CSSProperties 类型注解,并移除了之前的类型断言,使代码更加清晰和类型安全。


17-19: 为 rowStyle 添加了明确的类型注解

rowStyle 常量添加了明确的 React.CSSProperties 类型注解,与 styles 常量的类型处理保持一致。


21-21: 为组件添加了明确的 React.FC 类型

Test 组件显式标注为 React 函数组件类型 React.FC,提高了代码的类型安全性和可读性。

src/Tooltip.tsx (8)

7-7: 导入语句调整得当

移除了不再需要的 forwardRef 导入,并保留了所需的 useImperativeHandleuseRef hooks。此变更使导入语句更加精简。


38-38: 属性命名更加一致

destroyTooltipOnHide 更改为 destroyOnHidden,使命名风格与组件库其他部分保持一致,提高了 API 的一致性。


62-62: 组件声明方式优化

直接使用 React.forwardRef 声明组件,而不是先定义函数再包装,使代码更加简洁清晰。


76-76: 属性默认值同步更新

将默认属性名称从 destroyTooltipOnHide 更新为 destroyOnHidden,保持与接口变更的一致性。


95-95: 代码格式优化

restProps 展开后添加空行,提高了代码的可读性。


133-134: 事件处理器命名更新

onPopupVisibleChangeafterPopupVisibleChange 更新为 onOpenChangeafterOpenChange,使命名更加清晰简洁,并与底层 Trigger 组件保持一致。


137-137: 属性名称同步更新

autoDestroy 的值来源从 destroyTooltipOnHide 更新为 destroyOnHidden,确保了组件内部保持一致性。


147-149: 组件导出格式优化

闭合括号与导出语句分开,提高了代码的可读性。

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: 3

🧹 Nitpick comments (3)
.github/workflows/site-deploy.yml (3)

3-7: 建议限定标签触发模式
当前 on.push.tags: ['*'] 会对所有标签进行部署,可能引发误触。建议使用严格的语义版本格式(例如 v*.*.*),以只对发布版本的标签触发构建。


23-25: 确认生成 package-lock.json 步骤的必要性
如果仓库已包含 package-lock.jsonnpm i --package-lock-only --ignore-scripts 这一步只是重新生成锁文件,可考虑移除以加快 CI;如因特殊需求保留,请在注释中说明原因。


32-33: 升级 peaceiris/actions-gh-pages Action 版本(可选)
建议将 peaceiris/actions-gh-pages@v3 升级到最新的 @v4 版本,以获取新功能和安全修复:

-        uses: peaceiris/actions-gh-pages@v3
+        uses: peaceiris/actions-gh-pages@v4
🧰 Tools
🪛 actionlint (1.7.7)

33-33: the runner of "peaceiris/actions-gh-pages@v3" action is too old to run on GitHub Actions. update the action's version to fix this issue

(action)

📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between e8f563c and ed1dafa.

📒 Files selected for processing (1)
  • .github/workflows/site-deploy.yml (1 hunks)
🧰 Additional context used
🪛 actionlint (1.7.7)
.github/workflows/site-deploy.yml

16-16: the runner of "actions/checkout@v3" action is too old to run on GitHub Actions. update the action's version to fix this issue

(action)


19-19: the runner of "actions/setup-node@v1" action is too old to run on GitHub Actions. update the action's version to fix this issue

(action)


33-33: the runner of "peaceiris/actions-gh-pages@v3" action is too old to run on GitHub Actions. update the action's version to fix this issue

(action)

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.

1 participant