feat(number-keyboard): support popup mask and maskStyle #6942
Conversation
dosubot
bot
added
the
size:S
|
|
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. 📝 WalkthroughWalkthrough为 NumberKeyboard 组件新增对 Popup 的 mask 与 maskStyle 属性的支持；将这些属性透传给内部 Popup；同步更新中英文文档说明。 Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant NumberKeyboard
participant Popup
User->>NumberKeyboard: open/show with props { mask, maskStyle, ... }
Note right of NumberKeyboard: 解析并透传 Popup 相关属性
NumberKeyboard->>Popup: render({ mask, maskStyle, ... })
alt mask=true
Popup-->>User: 显示带遮罩的键盘
else mask=false
Popup-->>User: 显示无遮罩的键盘
end
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Assessment against linked issues
Assessment against linked issues: Out-of-scope changes（无） Suggested labels
Suggested reviewers
Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ Finishing Touches
🧪 Generate 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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @Meet-student, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!
This pull request introduces new customization options for the NumberKeyboard component, allowing developers to control the visibility and styling of the overlay mask when the keyboard is displayed as a popup.
Highlights
- Enhanced Popup Customization: The NumberKeyboard component now supports
maskandmaskStyleproperties, enabling control over the popup's overlay. - Prop Integration: The new
maskandmaskStyleprops are seamlessly integrated and passed down to the internalPopupcomponent used by the number keyboard. - Documentation Update: The English and Chinese documentation for the NumberKeyboard component has been updated to reflect the newly supported
maskandmaskStyleattributes inherited from the Popup component.
Using Gemini Code Assist
The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.
Invoking Gemini
You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
Customization
To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.
Limitations & Feedback
Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.
You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.
Footnotes
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
There was a problem hiding this comment.
Code Review
This pull request adds support for mask and maskStyle properties to the NumberKeyboard component, which is a great enhancement. The implementation is solid. I have a couple of minor suggestions to improve documentation readability and code consistency.
commit: |
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #6942 +/- ##
=======================================
Coverage 92.90% 92.90%
=======================================
Files 336 336
Lines 7334 7334
Branches 1847 1857 +10
=======================================
Hits 6814 6814
Misses 484 484
Partials 36 36 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
src/components/number-keyboard/number-keyboard.tsx (1)
36-38: 默认为何未显式维持 mask=false？当前实现会引入破坏性变更此前组件内部对 Popup 是固定
mask={false}。本次改动改为透传mask，但defaultProps中未设置默认值，导致当用户未传入mask时，传给 Popup 的值为undefined，Popup 会回退到自身默认（通常为true）。这会让既有使用在不改代码的情况下从“无遮罩”变成“有遮罩”，属于不期望的行为变更。建议显式将默认值设回
false以保持向后兼容。你也可以在文档处补充一句“NumberKeyboard 默认不展示遮罩（mask=false）”。首选修复（推荐在 defaultProps 里统一管理默认值）：
@@ const defaultProps = { defaultVisible: false, randomOrder: false, showCloseButton: true, confirmText: null, closeOnConfirm: true, safeArea: true, destroyOnClose: false, forceRender: false, + mask: false, }备选修复（若暂不调整 defaultProps）：
@@ - mask={mask} + mask={mask ?? false}Also applies to: 63-65, 216-218
🧹 Nitpick comments (1)
src/components/number-keyboard/index.en.md (1)
45-45: 英文措辞微调：attributes → props（与 React 术语更一致）建议将 “attributes” 改为 “props”，与文档其它处 “Props” 标题更统一，也更贴近 React 语境。
-In addition, the following attributes of [Popup](/components/popup) are supported: `stopPropagation`, `mask`, `maskStyle` +In addition, the following props from [Popup](/components/popup) are supported: `stopPropagation`, `mask`, `maskStyle`
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (3)
src/components/number-keyboard/index.en.md(1 hunks)src/components/number-keyboard/index.zh.md(1 hunks)src/components/number-keyboard/number-keyboard.tsx(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: size
- GitHub Check: check
🔇 Additional comments (2)
src/components/number-keyboard/index.zh.md (1)
45-45: 文档更新清晰可读，格式一致已按建议使用逗号分隔并用反引号包裹属性名，和英文版保持一致，👍。
src/components/number-keyboard/number-keyboard.tsx (1)
212-218: 请确认 NumberKeyboard 点击遮罩时的关闭行为当前 NumberKeyboard 直接使用了 Popup 的默认配置，而默认的
closeOnMaskClick为false，因此点击遮罩既不会触发关闭，也不会透出任何回调。请根据产品预期在组件层面明确以下任一方案：• 方案 A：保持默认（点击遮罩不关闭），并显式标注
<Popup visible={visible} getContainer={getContainer} mask={mask} maskStyle={maskStyle} + closeOnMaskClick={false} // 默认值，保持点击遮罩不关闭 afterClose={props.afterClose} … />• 方案 B：开放可配置项，由使用方决定遮罩点击行为
export type NumberKeyboardProps = { … } & Pick< PopupProps, | 'stopPropagation' | 'mask' | 'maskStyle' + | 'closeOnMaskClick' + | 'onMaskClick' > & NativeProps<'--adm-safe-area-multiple'><Popup visible={visible} getContainer={getContainer} mask={mask} maskStyle={maskStyle} stopPropagation={props.stopPropagation} + closeOnMaskClick={props.closeOnMaskClick} + onMaskClick={props.onMaskClick} afterClose={props.afterClose} … />请结合产品文档或设计稿，确认 NumberKeyboard 在有遮罩时的点击期望行为，并在组件中做相应调整。
Summary by CodeRabbit
新功能
文档