feat: support allowClear

[BadMooncc]

English Template / 英文模板

🤔 这个变动的性质是？

• [ ] 🆕 新特性提交
• [ ] 🐞 Bug 修复
• [ ] 📝 站点、文档改进
• [ ] 📽️ 演示代码改进
• [ ] 💄 组件样式/交互改进
• [ ] 🤖 TypeScript 定义更新
• [ ] 📦 包体积优化
• [ ] ⚡️ 性能优化
• [x] ⭐️ 功能增强
• [ ] 🌐 国际化改进
• [ ] 🛠 重构
• [ ] 🎨 代码风格优化
• [ ] ✅ 测试用例
• [ ] 🔀 分支合并
• [ ] ⏩ 工作流程
• [ ] ⌨️ 无障碍改进
• [ ] ❓ 其他改动（是关于什么的改动？）

🔗 相关 Issue

1. 描述相关需求的来源，如相关的 issue 讨论链接。
2. close #50885

💡 需求背景和解决方案

1. inputNumber新增allowClear功能。
2. allowClear: boolean | { clearValue: number | string } ;onClear: () => void。
3. 

📝 更新日志

• 郑重地阅读 如何维护更新日志
• 描述改动对开发者有哪些影响，而非解决方式
• 可参考：https://ant.design/changelog-cn

语言	更新描述
🇺🇸 英文	The InputNumber component supports the allowClear and onClear methods.
🇨🇳 中文	InputNumber支持allowClear和onClear方法

Summary by CodeRabbit

发布说明

• 新功能

  • InputNumber 组件新增清除功能，可通过 allowClear 启用，支持自定义清除后值（clearValue），并新增 onClear 事件回调。

• 样式

  • 为清除按钮及其隐藏态添加了样式，改善显示与交互一致性。

• 文档

  • API 文档补充了 allowClear 与 onClear 的说明，并新增示例演示用法。

• 测试

  • 新增 allowClear 相关测试，覆盖显示、交互、清除行为与事件触发。

[vercel[bot]]

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

A member of the Team first needs to authorize it.

[coderabbitai[bot]]

[!NOTE]

Other AI code review bot(s) detected

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

Walkthrough

为 InputNumber 增加 allowClear 清空功能：新增组件属性与回调、清空按钮 UI 与样式、示例、文档与测试，点击清空时通过 allowClear.clearValue 或 undefined 更新值并触发 onClear。（≤50 字）

Changes

内聚体 / 文件(s)	变更摘要
样式扩展 assets/index.less	添加 .rc-input-number-clear-icon 与 .rc-input-number-clear-icon-hidden 两个 CSS 类，用于清空按钮的基础样式与隐藏状态。
API 文档更新 docs/api.md	在 InputNumber API 中新增 `allowClear: boolean
演示代码 docs/demo/allow-clear.tsx	新增演示文件，展示带前缀 "¥"、后缀 "RMB" 与 allowClear 配置的 InputNumber 示例。
文档索引 docs/example.md	在文档示例中插入 "allow-clear" 小节并引用 ./demo/allow-clear.tsx 示例。
核心实现 src/InputNumber.tsx	在组件 props 中新增 allowClear 与 onClear，渲染清空按钮并在点击时读取 allowClear.clearValue（或使用 undefined）调用 triggerValueUpdate，并触发 onClear；处理 disabled/readOnly 与 suffix 的显示逻辑。
功能测试 tests/allowClear.test.tsx	新增测试套件，覆盖清空图标渲染/隐藏、点击清空行为（默认/null/指定 clearValue/0/字符串模式）、onChange 与 onClear 触发、后缀交互及 defaultValue 场景。

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant UI as InputNumber UI
    participant Comp as InputNumber Component
    participant Props as Props Handler

    User->>UI: 点击清空按钮
    activate UI
    UI->>Comp: onClear 按钮点击事件
    activate Comp

    alt 有 onClear 回调
        Comp->>Props: 调用 onClear()
        Note right of Props `#D3F9D8`: 可选回调触发
    end

    Comp->>Comp: 读取 allowClear.clearValue 或 使用 undefined
    Comp->>Comp: 调用 triggerValueUpdate(clearValue)
    Comp->>UI: 更新显示值（空或指定值）

    deactivate Comp
    deactivate UI

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 分钟

• 重点检查：
  • src/InputNumber.tsx 中调用 triggerValueUpdate 的边界条件与与现有更新流程的兼容性。
  • 测试对 0、undefined、字符串模式和 defaultValue 的断言是否充分且无歧义。
  • 新增 CSS 类在不同样式上下文（有 suffix / disabled / readOnly）下的布局表现与命名一致性。

Suggested reviewers

• zombieJ

Poem

🐰 轻触一符去尘踪，
数字归空月光中，
allowClear 随意放，onClear 轻声问，
测试为伴路更稳，
小红点下笑声融 ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	拉取请求标题明确描述了主要更改：向 InputNumber 组件添加 allowClear 功能支持，与整个变更集的核心目标完全相关。
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• [ ] 📝 Generate docstrings

🧪 Generate unit tests (beta)

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment

---

📜 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 fb8f5eac616056ced4e6e7faf2285f1346e3d93b and a92d79986e16f62c93b581498f47c5af4d991873.

📒 Files selected for processing (6)

• assets/index.less (1 hunks)
• docs/api.md (2 hunks)
• docs/demo/allow-clear.tsx (1 hunks)
• docs/example.md (1 hunks)
• src/InputNumber.tsx (5 hunks)
• tests/allowClear.test.tsx (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (5)

• src/InputNumber.tsx
• tests/allowClear.test.tsx
• assets/index.less
• docs/api.md
• docs/demo/allow-clear.tsx

🔇 Additional comments (1)

docs/example.md (1)

16-18: 文档结构保持一致。

新增的 allow-clear 示例章节遵循现有文档格式规范，与其他示例条目保持一致，引用路径正确。

[!TIP]

📝 Customizable high-level summaries are now available in beta!

You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.

• Provide your own instructions using the high_level_summary_instructions setting.
• Format the summary however you like (bullet lists, tables, multi-section layouts, contributor stats, etc.).
• Use high_level_summary_in_walkthrough to move the summary from the description to the walkthrough section.

Example instruction:

"Divide the high-level summary into five sections:

1. 📝 Description — Summarize the main change in 50–60 words, explaining what was done.
2. 📓 References — List relevant issues, discussions, documentation, or related PRs.
3. 📦 Dependencies & Requirements — Mention any new/updated dependencies, environment variable changes, or configuration updates.
4. 📊 Contributor Summary — Include a Markdown table showing contributions: | Contributor | Lines Added | Lines Removed | Files Changed |
5. ✔️ Additional Notes — Add any extra reviewer context. Keep each section concise (under 200 words) and use bullet or numbered lists for clarity."

Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later.

---

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

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

[gemini-code-assist[bot]]

Summary of Changes

Hello @BadMooncc, I'm Gemini Code Assist[^1]! 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 a new allowClear feature to the InputNumber component, significantly improving user experience by adding a clear button to reset the input's value. The feature is highly configurable, allowing for custom clear values and providing an onClear callback for additional control. The implementation includes updates to the component's core logic, styling, comprehensive documentation, a new interactive demo, and a robust suite of unit tests to ensure reliability.

Highlights

• New Feature: allowClear Prop: The InputNumber component now supports an allowClear prop, enabling users to easily clear the input's current value. This enhances usability by providing a quick way to reset the input.
• Customizable Clear Value: The allowClear prop can be configured as a boolean (clearing to null) or an object { clearValue: number | string }, allowing developers to specify a custom value that the input should reset to when the clear button is clicked.
• onClear Callback: A new onClear callback prop has been introduced. This function is triggered when the user clicks the clear button, providing a convenient hook for executing custom logic or side effects upon clearing the input.
• Styling and Conditional Visibility: Dedicated CSS classes (-clear-icon, -clear-icon-hidden, -clear-icon-has-suffix) have been added to style the clear button. Its visibility is dynamically managed, appearing only when the input has a value and is not disabled or read-only, and adjusting its position if a suffix is present.
• Comprehensive Testing and Documentation: Extensive unit tests have been added to cover various scenarios for the allowClear functionality, including different clearValue types, disabled/readOnly states, and onClear callback invocation. The API documentation and a new demo have also been updated to reflect these changes.

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 by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

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 pull request 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 :thumbsup: and :thumbsdown: 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.

[^1]: 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.