Skip to content

[codex] support preview mask closable#506

Merged
afc163 merged 1 commit intoreact-component:masterfrom
QDyanbing:codex/preview-closable
Apr 8, 2026
Merged

[codex] support preview mask closable#506
afc163 merged 1 commit intoreact-component:masterfrom
QDyanbing:codex/preview-closable

Conversation

@QDyanbing
Copy link
Copy Markdown
Contributor

@QDyanbing QDyanbing commented Apr 8, 2026

变更内容

  • 为 preview 增加 maskClosable 配置,默认保持为 true
  • maskClosable={false} 时,点击预览遮罩不再触发关闭
  • 补充对应测试与 README 文档说明

变更原因

当前 rc-image 只支持通过 closeIcon 控制关闭按钮展示,但遮罩点击始终会直接触发 onClose
这会导致上层即使已经计算出 mask 的 closable 语义,也无法真正控制预览遮罩的关闭行为。

影响说明

  • maskClosable 只影响遮罩点击关闭行为
  • 右上角关闭按钮行为保持不变
  • Esc 关闭行为保持不变
  • 为 antd 上层继续透传 mask.closable 提供底层能力

验证

  • npm run tsc
  • npm test

Related: ant-design/ant-design#57606

Summary by CodeRabbit

发布说明

  • 新功能

    • 添加 maskClosable 配置选项(默认启用),用于控制点击遮罩层是否关闭预览窗口。
  • 文档

    • 更新了预览配置选项文档,说明新增 maskClosable 参数。
  • 测试

    • 添加测试用例验证遮罩可关闭选项的行为。

@vercel
Copy link
Copy Markdown

vercel bot commented Apr 8, 2026

@QDyanbing is attempting to deploy a commit to the React Component Team on Vercel.

A member of the Team first needs to authorize it.

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Apr 8, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 504bc9eb-8ef9-4953-aa4b-f114635d1112

📥 Commits

Reviewing files that changed from the base of the PR and between 8514cd1 and e05f286.

📒 Files selected for processing (3)
  • README.md
  • src/Preview/index.tsx
  • tests/preview.test.tsx

功能演示

本次变更为预览配置中添加了新的 maskClosable 布尔选项(默认值为 true),用于控制点击遮罩背景时是否关闭预览。修改包括文档更新、组件逻辑调整和相应测试用例。

变更详情

组件/文件 摘要
文档更新
README.md
PreviewTypePreviewGroupType 添加了 maskClosable 选项文档,说明其默认值为 true 及其功能。
核心逻辑
src/Preview/index.tsx
InternalPreviewConfig 接口中新增可选属性 maskClosable?: boolean,并修改遮罩层点击处理器使其根据该选项有条件地触发 onClose 回调。
测试用例
tests/preview.test.tsx
新增测试用例验证当 maskClosable: false 时,点击遮罩不会触发 onOpenChange 回调,但点击关闭按钮仍可正常关闭预览。

代码审查工作量评估

🎯 2 (Simple) | ⏱️ ~10 minutes

相关拉取请求

建议审阅者

  • zombieJ
  • yoyo837

庆祝诗

🐰 遮罩点击变可控,
背景静止不关闭,
用户体验更灵活,
预览就像听话的小兔,
一切尽在掌握中!✨

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 标题清晰地总结了主要变更:为预览功能添加了 maskClosable 配置,这正是本次变更的核心内容。
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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

Comment @coderabbitai help to get the list of available commands and usage tips.

@QDyanbing QDyanbing marked this pull request as ready for review April 8, 2026 08:40
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

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

Code Review

This pull request introduces the maskClosable property to the Preview component, allowing users to control whether clicking the mask closes the preview. The property defaults to true and has been integrated into the component's logic, documented in the README, and verified with a new test case. I have no feedback to provide.

@codecov
Copy link
Copy Markdown

codecov bot commented Apr 8, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.44%. Comparing base (8514cd1) to head (e05f286).
⚠️ Report is 1 commits behind head on master.

Additional details and impacted files
@@           Coverage Diff           @@
##           master     #506   +/-   ##
=======================================
  Coverage   99.44%   99.44%           
=======================================
  Files          17       17           
  Lines         538      540    +2     
  Branches      161      164    +3     
=======================================
+ Hits          535      537    +2     
  Misses          3        3           

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

@afc163 afc163 merged commit f6ffd6b into react-component:master Apr 8, 2026
6 of 7 checks passed
@QDyanbing QDyanbing deleted the codex/preview-closable branch April 8, 2026 09:19
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.

2 participants