feat: add a new parameter for onStep & update api-docs #701
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough本次提交对 InputNumber 组件的文档、实现、演示以及测试用例进行了更新。文档中新增了 Changes
Sequence Diagram(s)sequenceDiagram
participant U as 用户
participant I as InputNumber 组件
participant F as 内部 onInternalStep
participant C as onStep 回调
U->>I: 用户触发（键盘/滚轮）
I->>F: 调用 onInternalStep(up, emitter)
F->>C: 传入当前值及 {offset, type, emitter}
sequenceDiagram
participant D as 演示组件
participant I as InputNumber 组件
participant H as 事件处理函数
D->>I: 传入 onChange 与 onStep 处理函数
I->>H: 根据用户交互调用 onStep (含emitter 信息)
H-->>D: 更新组件状态（value 与 emitter）
Possibly related PRs
Suggested reviewers
Poem
Tip 🌐 Web search-backed reviews and chat
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? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![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
🧹 Nitpick comments (4)
docs/demo/on-step.tsx (1)
6-46: 代码实现清晰，展示了新功能的用法。示例组件很好地展示了如何使用
emitter参数来区分不同的输入来源。不过建议添加以下改进：
- 为不同的输入来源添加国际化支持
- 添加更多的用例来展示实际应用场景
- setEmitter(`interface buttons (${info.type})`); + setEmitter(t(`input.source.interface.${info.type}`)); - setEmitter(`keyboard (${info.type})`); + setEmitter(t(`input.source.keyboard.${info.type}`)); - setEmitter(`mouse wheel (${info.type})`); + setEmitter(t(`input.source.wheel.${info.type}`));tests/click.test.tsx (1)
26-26: 测试用例已正确更新。测试用例已经正确地验证了新增的
emitter参数：
- 更新了
testInputNumber函数签名- 添加了对
emitter参数的断言- 为不同的输入来源（handler、keyboard）添加了相应的测试
建议添加以下测试场景：
- 鼠标滚轮事件的测试用例
- 边界情况的测试，如快速切换不同输入来源
Also applies to: 40-40, 46-48, 188-189, 206-207
src/InputNumber.tsx (1)
435-458: 处理逻辑正确实现。
onInternalStep函数已正确实现了emitter参数的处理：
- 正确接收并传递 emitter 参数
- 保持了原有的步进逻辑不变
建议添加以下改进：
- 考虑添加防抖处理，特别是对于滚轮事件
- 添加输入源切换的过渡处理
+const debouncedOnStep = debounce((value, info) => { + onStep?.(value, info); +}, 100); -onStep?.(getDecimalValue(stringMode, updatedValue), { +debouncedOnStep(getDecimalValue(stringMode, updatedValue), { offset: shiftKeyRef.current ? getDecupleSteps(step) : step, type: up ? 'up' : 'down', emitter, });docs/api.md (1)
83-84: 格式调整：readOnly属性说明
此次对readOnly属性的描述进行了格式上的微调，确保说明更加清晰、简洁。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
docs/api.md(2 hunks)docs/demo/on-step.tsx(1 hunks)docs/example.md(1 hunks)src/InputNumber.tsx(5 hunks)src/StepHandler.tsx(2 hunks)tests/click.test.tsx(6 hunks)
✅ Files skipped from review due to trivial changes (1)
- docs/example.md
🔇 Additional comments (6)
src/StepHandler.tsx (2)
23-23: 接口定义更新正确。
onStep回调函数的签名已正确更新，包含了emitter参数。
51-51: 正确传递了 emitter 参数。在
onStepMouseDown函数中正确地传递了'handler'作为 emitter 参数。Also applies to: 55-55
src/InputNumber.tsx (2)
102-102: 接口定义完善。
onStep回调函数的类型定义已正确更新，包含了emitter参数。
515-515: 事件处理正确。键盘和滚轮事件处理已正确集成
emitter参数。Also applies to: 530-530
docs/api.md (2)
85-90: 新增changeOnWheel属性说明
已正确添加changeOnWheel属性，类型为 Boolean，默认值为 false，并且说明明确指出该属性允许通过鼠标滚轮来调整数值。
145-150: 更新onStep回调签名说明
这里新增了onStep属性，并在其回调参数中加入了emitter参数。不过目前emitter的可能取值为'handler' | 'keydown' | 'wheel'，而 PR 目标中提到的取值应为'handler' | 'keyboard' | 'wheel'。请确认这两者是否一致，如有需要建议修改以保证文档与实现一致。
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #701 +/- ##
=======================================
Coverage 95.95% 95.95%
=======================================
Files 6 6
Lines 297 297
Branches 78 78
=======================================
Hits 285 285
Misses 12 12 ☔ View full report in Codecov by Sentry. |
| <td>Called when an element gets focus</td> | ||
| </tr> | ||
| <tr> | ||
| <td>onStep</td> |
There was a problem hiding this comment.
Yes, I was tasked with making a request to the server by clicking the arrows and not committing to setting values in the input field. And when entering a value it is through the input field to set it. Accordingly, I track the source of input via onStep and if an arrow was pressed, I forbid onChange to set the value.
2 participants
My telecom company's products use this library in many parts of the application. I needed to separate the logic of entering a value into an input field from the arrows in the interface, from the arrows on the keyboard and from the mouse wheel.
The first thing I discovered was that there was no description of the onStep and changeOnWheel properties in the documentation. I have added these fixes to the document.
The second thing is that I was able to solve my problem without library edits, but the solution looks overhead. By examining the library source code, I found that in the second argument info of the onStep callback, you can add an emitter property: 'handler' | 'keyboard' | 'wheel' that will output what onStep was called with. For example: keyboard, mouse wheel, arrow buttons in the interface.
I think this function will be useful for more than just me, so I'm opening this pull-request. Have a nice day everyone!
Summary by CodeRabbit
新功能
文档更新
测试