fix: autofocus input from dialog no effect
🤔 这个变动的性质是?
- [ ] 新特性提交
- [x] 日常 bug 修复
- [ ] 站点、文档改进
- [ ] 演示代码改进
- [ ] 组件样式/交互改进
- [ ] TypeScript 定义更新
- [ ] 包体积优化
- [ ] 性能优化
- [ ] 功能增强
- [ ] 国际化改进
- [ ] 重构
- [ ] 代码风格优化
- [ ] 测试用例
- [ ] 分支合并
- [ ] 工作流程
- [ ] 其他改动(是关于什么的改动?)
🔗 相关 Issue
💡 需求背景和解决方案
- 问题: 用dialog包裹的input,input的autofocus是失效的
- 解决方案: 进入input组件时判断autofocus,如果是true强制聚焦input
📝 更新日志
| 语言 | 更新描述 |
|---|---|
| 🇺🇸 英文 | autoFocus can be focused by default in the Input component wrapped by Dialog and other similar components |
| 🇨🇳 中文 | autoFocus 在Dialog等类似的组件包裹的Input组件中能够默认聚焦 |
☑️ 请求合并前的自查清单
⚠️ 请自检并全部勾选全部选项。⚠️
- [x] 文档已补充或无须补充
- [x] 代码演示已提供或无须提供
- [x] TypeScript 定义已补充或无须补充
- [x] Changelog 已提供或无须提供
🚀 概述
copilot:summary
🔍 实现细节
copilot:walkthrough
Summary by CodeRabbit
-
新功能
- 引入了对话框组件的样式,提供更好的布局、外观和动画效果。
- 新增了一个示例组件,展示了输入框的自动聚焦功能。
-
文档
- 新增了“AutoFocus”文档,包含示例代码和导航链接。
-
依赖更新
- 在项目中添加了新的依赖项“rc-dialog”。
Codecov Report
Attention: Patch coverage is 66.66667% with 1 line in your changes missing coverage. Please review.
Project coverage is 92.00%. Comparing base (
c0dd6ed) to head (6379138). Report is 1 commits behind head on master.
| Files with missing lines | Patch % | Lines |
|---|---|---|
| src/Input.tsx | 66.66% | 1 Missing :warning: |
Additional details and impacted files
@@ Coverage Diff @@
## master #43 +/- ##
==========================================
- Coverage 92.34% 92.00% -0.35%
==========================================
Files 5 5
Lines 222 225 +3
Branches 79 80 +1
==========================================
+ Hits 205 207 +2
- Misses 17 18 +1
:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.
Walkthrough
此次更改引入了一个新的对话框组件样式文件 assets/autofocus.less,该文件定义了对话框的布局、外观和动画效果。同时,assets/index.less 文件添加了对新样式文件的导入。文档部分新增了 docs/demo/autofocus.md 文件,提供了对话框的演示文档,并在 docs/examples/autofocus.tsx 中添加了一个新的 React 组件 Demo,展示了如何在输入框和对话框中使用 autoFocus 属性。此外,package.json 文件更新了依赖项,添加了 rc-dialog 作为开发依赖。
Changes
| 文件路径 | 更改摘要 |
|---|---|
| assets/autofocus.less | 新增对话框组件样式,包括 .rc-dialog 及其嵌套类,定义动画效果和媒体查询。 |
| assets/index.less | 添加导入语句 @import './autofocus.less';。 |
| docs/demo/autofocus.md | 新增文档文件 "AutoFocus",包含导航条目和代码片段引用。 |
| docs/examples/autofocus.tsx | 新增 React 组件 Demo,演示 autoFocus 属性在输入框和对话框中的使用。 |
| package.json | 添加新依赖 "rc-dialog": "^9.1.0" 到 devDependencies。 |
| src/Input.tsx | 新增 useEffect 钩子以在 autoFocus 属性为真时触发焦点功能。 |
Poem
在草地上跳跃的小兔子,
新样式如花开,真美丽。
对话框里聚焦如星,
互动体验更欢喜。
代码中舞动新气息,
让我们一起欢庆这次更新的奇迹! 🐇✨
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?
🪧 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. -
Generate unit testing code for this file. -
Open a follow-up GitHub issue for this discussion.
-
- Files and specific lines of code (under the "Files changed" tab): Tag
@coderabbitaiin a new review comment at the desired location with your query. Examples:-
@coderabbitai generate unit testing code for this file. -
@coderabbitai modularize this function.
-
- PR comments: Tag
@coderabbitaiin 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 generate unit testing code. -
@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.
-
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 pauseto pause the reviews on a PR. -
@coderabbitai resumeto resume the paused reviews. -
@coderabbitai reviewto trigger an incremental review. This is useful when automatic reviews are disabled for the repository. -
@coderabbitai full reviewto do a full review from scratch and review all the files again. -
@coderabbitai summaryto regenerate the summary of the PR. -
@coderabbitai resolveresolve all the CodeRabbit review comments. -
@coderabbitai configurationto show the current CodeRabbit configuration for the repository. -
@coderabbitai helpto get help.
Other keywords and placeholders
- Add
@coderabbitai ignoreanywhere in the PR description to prevent this PR from being reviewed. - Add
@coderabbitai summaryto generate the high-level summary at a specific location in the PR description. - Add
@coderabbitaianywhere in the PR title to generate the title automatically.
CodeRabbit Configuration File (.coderabbit.yaml)
- You can programmatically configure CodeRabbit by adding a
.coderabbit.yamlfile 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.