Skip to content

feat(dialog): close和cancel各司其职#3282

Merged
oasis-cloud merged 3 commits intojdf2e:feat_v3.xfrom
xiaoyatong:fix3/dialog0626
Jun 27, 2025
Merged

feat(dialog): close和cancel各司其职#3282
oasis-cloud merged 3 commits intojdf2e:feat_v3.xfrom
xiaoyatong:fix3/dialog0626

Conversation

@xiaoyatong
Copy link
Collaborator

@xiaoyatong xiaoyatong commented Jun 26, 2025

🤔 这个变动的性质是?

  • 新特性提交
  • 日常 bug 修复
  • 站点、文档改进
  • 演示代码改进
  • 组件样式/交互改进
  • TypeScript 定义更新
  • 包体积优化
  • 性能优化
  • 功能增强
  • 国际化改进
  • 重构
  • 代码风格优化
  • 测试用例
  • 分支合并
  • 其他改动(是关于什么的改动?)

🔗 相关 Issue

💡 需求背景和解决方案

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项⚠️

  • 文档已补充或无须补充
  • 代码演示已提供或无须提供
  • TypeScript 定义已补充或无须补充
  • fork仓库代码是否为最新避免文件冲突
  • Files changed 没有 package.json lock 等无关文件

Summary by CodeRabbit

  • 新功能
    • 取消按钮和关闭图标的行为现在已区分:取消按钮仅触发取消相关回调,关闭图标仅触发关闭相关回调。
  • 优化
    • 对话框事件处理逻辑更清晰,提升了用户操作的可预测性和一致性。
  • 文档
    • 示例中更新了事件处理方式,便于理解各自的触发效果。

@github-actions github-actions bot added action:review This PR needs more reviews (less than 2 approvals) 3.x Target branch 3.x labels Jun 26, 2025
@xiaoyatong xiaoyatong linked an issue Jun 26, 2025 that may be closed by this pull request
@coderabbitai
Copy link

coderabbitai bot commented Jun 26, 2025

"""

Walkthrough

此次更改主要调整了 Dialog 组件在取消与关闭操作时的回调触发逻辑。取消按钮和关闭图标现在分别只触发各自相关的回调,二者行为被彻底解耦。同时,相关演示文件也同步调整了事件处理方式。

Changes

文件/分组 变更摘要
src/packages/dialog/demos/h5/demo2.tsx 将 onCancel 的箭头函数由简写形式改为代码块形式,功能无变化。
src/packages/dialog/demos/h5/demo6.tsx 第一组 Dialog 的 onCancel 拆分为 onClose 和 onCancel,各自独立处理不同逻辑。
src/packages/dialog/dialog.taro.tsx
src/packages/dialog/dialog.tsx
handleCancel 只处理取消相关回调(beforeCancel, onCancel),关闭图标事件重命名为 handleClose,仅处理关闭相关回调(beforeClose, onClose),两者完全分离。覆盖层点击事件调用 onCancel,移除对 onClose 的调用。
src/packages/dialog/test/dialog.spec.tsx 测试中将对取消按钮的回调断言由 onClose 改为 onCancel,关闭图标断言仅保留 onClose。

Suggested reviewers

  • irisSong
  • oasis-cloud

Poem

小兔挥笔庆新篇,
弹窗取消与关闭分明现。
按钮归按钮,图标归图标,
回调各自走,逻辑不再缠。
代码如春风,清晰又自然!
🐇✨
"""


📜 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 ad1dd57 and 70860ad.

📒 Files selected for processing (2)
  • src/packages/dialog/dialog.taro.tsx (1 hunks)
  • src/packages/dialog/dialog.tsx (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
  • src/packages/dialog/dialog.tsx
  • src/packages/dialog/dialog.taro.tsx
⏰ Context from checks skipped due to timeout of 90000ms (2)
  • GitHub Check: build
  • GitHub Check: test
✨ 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
🪧 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 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.

@xiaoyatong xiaoyatong requested a review from oasis-cloud June 26, 2025 07:04
@pull-request-size pull-request-size bot added size/M and removed size/S labels Jun 26, 2025
@codecov
Copy link

codecov bot commented Jun 26, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 87.79%. Comparing base (5b7eb80) to head (ad1dd57).

Additional details and impacted files
@@              Coverage Diff              @@
##           feat_v3.x    #3282      +/-   ##
=============================================
- Coverage      87.79%   87.79%   -0.01%     
=============================================
  Files            290      290              
  Lines          19089    19085       -4     
  Branches        2939     2936       -3     
=============================================
- Hits           16760    16756       -4     
  Misses          2324     2324              
  Partials           5        5              

☔ 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

🧹 Nitpick comments (2)
src/packages/dialog/__test__/dialog.spec.tsx (2)

98-119: 关闭图标测试保持正确的回调检验

测试正确地验证了点击关闭图标只触发 onClose 回调,体现了关闭图标与取消按钮行为的解耦。虽然测试中同时声明了 onCancelonClose,但只检验 onClose 被调用是正确的。

建议:可以考虑添加显式断言来确保 onCancel 未被调用,以更明确地验证行为分离:

  fireEvent.click(closeBtn)
  expect(onClose).toBeCalled()
+ expect(onCancel).not.toBeCalled()

6-32: 建议补充beforeCancel回调的测试覆盖

当前测试只验证了 onCancel 回调,根据AI摘要提到取消按钮现在会触发 beforeCancelonCancel。建议添加对 beforeCancel 回调的测试以确保完整的功能覆盖。

 test('show dialog base info display ', async () => {
   const onCancel = vi.fn()
+  const beforeCancel = vi.fn()
   const { container } = render(
-    <Dialog title="title" data-testid="test" visible onCancel={onCancel}>
+    <Dialog title="title" data-testid="test" visible onCancel={onCancel} beforeCancel={beforeCancel}>
       <div>content</div>
     </Dialog>
   )
   
   // ... 其他测试代码 ...
   
   fireEvent.click(footerCancelEle)
   expect(onCancel).toBeCalled()
+  expect(beforeCancel).toBeCalled()
 })
📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between 5513363 and ad1dd57.

📒 Files selected for processing (1)
  • src/packages/dialog/__test__/dialog.spec.tsx (2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
  • GitHub Check: test
🔇 Additional comments (1)
src/packages/dialog/__test__/dialog.spec.tsx (1)

7-31: 测试逻辑更新符合组件行为分离的设计

测试正确地将取消按钮的测试从使用 onClose 改为使用 onCancel,这与组件中取消和关闭操作分离的设计目标一致。测试逻辑准确地验证了点击取消按钮只触发 onCancel 回调。

@oasis-cloud oasis-cloud merged commit 1bdfbad into jdf2e:feat_v3.x Jun 27, 2025
5 of 6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

3.x Target branch 3.x action:review This PR needs more reviews (less than 2 approvals) size/M

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Dialog的onCancel任何情况关闭弹窗都会触发

2 participants