feat(spinner): support spinner type #721
Conversation
|
@guoyunhe is attempting to deploy a commit to the React Component Team on Vercel. A member of the Team first needs to authorize it. |
Summary of ChangesHello @guoyunhe, 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! 此拉取请求为 InputNumber 组件引入了一个新的 'spinner' 类型。这个新类型通过将增减按钮分别放置在输入框的两侧，提供了一种直观的用户体验，特别适用于需要快速调整数值的场景，例如电商网站中的商品数量选择。此更改涉及组件属性的扩展、渲染逻辑的调整以及相应样式的添加，以确保新功能能够无缝集成并正确显示。 Highlights
Using Gemini Code AssistThe 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
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 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
|
|
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. Walkthrough为 InputNumber 添加了新的 type 属性（'input' | 'spinner'），引入 spinner 模式的渲染与样式；为 StepHandler 增加可选隐藏控制项（ Changes
Sequence Diagram(s)sequenceDiagram
participant User as 用户
participant InputNumber as InputNumber
participant Internal as InternalInputNumber
participant StepHandler as StepHandler
rect #E8F8FF
User->>InputNumber: 渲染(type='spinner')
InputNumber->>Internal: 传递 props + type，className += -type-spinner
end
rect #F7F7F7
Internal->>StepHandler: 在前/后渲染 spinner 专用 StepHandler（传入 upHidden/downHidden）
Note right of StepHandler: 根据 upHidden/downHidden 决定是否渲染按钮
end
User->>StepHandler: 点击增/减
StepHandler->>Internal: 触发 onStep / onStepMouseDown
Internal->>InputNumber: 更新值并触发 onChange
InputNumber->>User: 返回更新后的数值
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 分钟 Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
你好，感谢你的贡献。本次 PR 新增了 spinner 类型的 InputNumber 组件，将增减按钮分别置于输入框两侧，功能实现良好。代码整体结构清晰，但在一些细节上还有可以改进的地方。我主要提出了三点建议：
- 在
InputNumber.tsx中，spinner类型没有遵循controls属性的控制，导致即使controls={false}按钮依然会显示。 - 在
spinner.tsx示例文件中，onChange事件处理器的类型定义不完整，当开启stringMode时可能导致类型错误。 - 在
index.less样式文件中，颜色值#d9d9d9多次硬编码，建议提取为变量以方便维护。
请查看具体的代码审查评论。
guoyunhe
force-pushed
the
type-spinner
branch
from
862c9bb to
d5a3e4b
Compare
![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 (1)
src/InputNumber.tsx (1)
624-632: spinner 模式实现正确，但可考虑优化代码复用。spinner 模式的双 StepHandler 布局（左侧减号、右侧加号）实现了预期的数量选择器 UX。注意到之前的审查意见关于
controls属性检查的建议已经得到落实（两处都有controls &&判断）。不过，两个 StepHandler 块的代码存在一定的重复。
可选优化建议：可以考虑提取一个辅助函数来减少重复代码，例如：
+ const renderSpinnerHandler = (position: 'left' | 'right') => { + const isLeft = position === 'left'; + return ( + <StepHandler + prefixCls={prefixCls} + {...(isLeft ? { downNode: downHandler } : { upNode: upHandler })} + {...(isLeft ? { downDisabled } : { upDisabled })} + {...(isLeft ? { upHidden: true } : { downHidden: true })} + onStep={onInternalStep} + /> + ); + }; + - {type === 'spinner' && controls && ( - <StepHandler - prefixCls={prefixCls} - downNode={downHandler} - downDisabled={downDisabled} - upHidden - onStep={onInternalStep} - /> - )} + {type === 'spinner' && controls && renderSpinnerHandler('left')} <div className={`${inputClassName}-wrap`}> {/* ... input ... */} </div> - {type === 'spinner' && controls && ( - <StepHandler - prefixCls={prefixCls} - upNode={upHandler} - upDisabled={upDisabled} - downHidden - onStep={onInternalStep} - /> - )} + {type === 'spinner' && controls && renderSpinnerHandler('right')}Also applies to: 652-660
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
assets/index.less(1 hunks)docs/demo/spinner.tsx(1 hunks)docs/example.md(1 hunks)src/InputNumber.tsx(7 hunks)src/StepHandler.tsx(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- assets/index.less
- docs/demo/spinner.tsx
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2024-09-29T06:18:11.993Z
Learnt from: bombillazo
PR: react-component/input-number#644
File: src/InputNumber.tsx:173-174
Timestamp: 2024-09-29T06:18:11.993Z
Learning: In `src/InputNumber.tsx`, within the `InternalInputNumber` component, the state variables `prevValueRef` and `inputValueRef` are typed as `string | number` to maintain consistency with existing code.
Applied to files:
src/InputNumber.tsx
🧬 Code graph analysis (1)
src/InputNumber.tsx (1)
src/StepHandler.tsx (1)
StepHandler(28-134)
🔇 Additional comments (6)
src/StepHandler.tsx (2)
22-24: 新增的隐藏控制属性实现合理。
upHidden和downHidden属性为条件渲染提供了清晰的控制方式，支持 spinner 模式的独立按钮布局需求。
105-131: 条件渲染逻辑正确。使用
!upHidden和!downHidden进行条件渲染的实现清晰且符合预期，disabled 状态的处理也保持了一致性。docs/example.md (1)
55-58: LGTM！新增的 spinner 演示文档入口与现有格式保持一致。
src/InputNumber.tsx (3)
66-67: 新增的 type 属性设计合理。
type?: 'input' | 'spinner'提供了清晰的模式选择，类型定义准确。
613-622: 现有输入模式的条件渲染处理正确。为原有的 input 模式添加条件判断保持了向后兼容性，逻辑清晰。
668-668: type 属性的默认值和传递处理正确。
type = 'input'的默认值确保了向后兼容性，className 和 props 的传递也都正确实现。Also applies to: 703-703, 724-724
guoyunhe
force-pushed
the
type-spinner
branch
from
d5a3e4b to
fda11c6
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/InputNumber.tsx (1)
66-67: 可选：为 type 属性添加 JSDoc 注释。建议为新增的
type属性添加 JSDoc 注释，说明'input'和'spinner'两种模式的区别和使用场景，以提升开发者体验。例如：
+ /** + * 输入框类型 + * - 'input': 默认模式，步进按钮在右侧垂直排列 + * - 'spinner': 数量选择器模式，减少按钮在左侧，增加按钮在右侧 + */ type?: 'input' | 'spinner';
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
assets/index.less(1 hunks)docs/demo/spinner.tsx(1 hunks)docs/example.md(1 hunks)src/InputNumber.tsx(9 hunks)src/StepHandler.tsx(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- src/StepHandler.tsx
- docs/demo/spinner.tsx
- docs/example.md
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2024-09-29T06:18:11.993Z
Learnt from: bombillazo
PR: react-component/input-number#644
File: src/InputNumber.tsx:173-174
Timestamp: 2024-09-29T06:18:11.993Z
Learning: In `src/InputNumber.tsx`, within the `InternalInputNumber` component, the state variables `prevValueRef` and `inputValueRef` are typed as `string | number` to maintain consistency with existing code.
Applied to files:
src/InputNumber.tsx
🧬 Code graph analysis (1)
src/InputNumber.tsx (1)
src/StepHandler.tsx (1)
StepHandler(28-134)
🔇 Additional comments (5)
src/InputNumber.tsx (4)
89-90: LGTM！新增的
spinnerUpHandler和spinnerDownHandler属性设计合理，与现有的upHandler/downHandler保持了一致的命名模式，为 spinner 模式提供了独立的自定义能力。
617-664: LGTM！条件渲染逻辑实现正确：
type === 'input'模式：在输入框右侧渲染包含上下按钮的步进控件type === 'spinner'模式：在输入框左右两侧分别渲染减少和增加按钮所有三处
StepHandler的渲染都正确地检查了controls属性，确保在controls={false}时能正确隐藏按钮。降级逻辑（spinnerDownHandler || downHandler和spinnerUpHandler || upHandler）也为向后兼容提供了良好支持。
707-707: LGTM！通过
${prefixCls}-type-${type}为不同类型添加专属类名，与assets/index.less中的样式规则正确对应，实现了类型样式的隔离。
672-672: LGTM！为
type设置默认值'input'确保了向后兼容性，现有代码无需修改即可继续使用默认的输入框模式。assets/index.less (1)
137-160: LGTM！spinner 类型的样式实现正确：
- 使用
display: inline-flex和align-items: center实现了左右按钮布局- 通过调整
border-left/border-right和高度样式，使增减按钮分别显示在输入框两侧- 样式规则与
src/InputNumber.tsx中的条件渲染逻辑配合良好，实现了预期的数量选择器 UX
guoyunhe
force-pushed
the
type-spinner
branch
from
fda11c6 to
d6cec40
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
assets/index.less (1)
137-160: Spinner 样式布局合理样式规则正确实现了 spinner 类型的横向布局，包括 flex 容器设置、固定宽度的按钮区域以及适当的边框调整。
需要注意的是，第 153 行和第 158 行继续使用了硬编码的颜色值
#d9d9d9。如之前评审中所提到的，建议将该颜色提取为 Less 变量以提高可维护性，不过这可以作为后续重构任务处理。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
assets/index.less(1 hunks)docs/demo/spinner.tsx(1 hunks)docs/example.md(1 hunks)src/InputNumber.tsx(7 hunks)src/StepHandler.tsx(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- docs/demo/spinner.tsx
- src/StepHandler.tsx
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2024-09-29T06:18:11.993Z
Learnt from: bombillazo
PR: react-component/input-number#644
File: src/InputNumber.tsx:173-174
Timestamp: 2024-09-29T06:18:11.993Z
Learning: In `src/InputNumber.tsx`, within the `InternalInputNumber` component, the state variables `prevValueRef` and `inputValueRef` are typed as `string | number` to maintain consistency with existing code.
Applied to files:
src/InputNumber.tsx
🧬 Code graph analysis (1)
src/InputNumber.tsx (1)
src/StepHandler.tsx (1)
StepHandler(28-134)
🔇 Additional comments (8)
src/InputNumber.tsx (7)
66-67: 类型定义清晰，向后兼容新增的
type属性使用了明确的联合类型，保持了 API 的类型安全性，且作为可选属性不会破坏现有代码。
613-622: 输入模式渲染逻辑正确正确检查了
type和controls属性，保持了原有输入模式的行为。
624-632: Spinner 模式左侧按钮渲染正确正确使用
upHidden属性隐藏上方按钮，仅显示减量按钮。同时也正确检查了controls属性，符合预期行为。
652-660: Spinner 模式右侧按钮渲染正确正确使用
downHidden属性隐藏下方按钮，仅显示增量按钮。与左侧按钮配合，实现了完整的 spinner 布局。
668-668: 默认值确保向后兼容将
type默认设置为'input'保证了现有代码无需修改即可继续工作。
703-703: 类名动态包含类型信息在 className 中包含
type-${type}后缀，为不同类型提供了独立的样式命名空间，便于 CSS 针对性定制。
724-724: 属性正确传递至内部组件
type属性正确传递给InternalInputNumber，确保了内部渲染逻辑能够访问到该配置。docs/example.md (1)
55-58: 文档更新清晰简洁新增的 spinner 示例章节格式与现有示例保持一致，便于用户查找和使用。
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
2 participants
新增 spinner 类型，增减按钮分别放到左右两侧，以实现类似于淘宝加购数量的效果：
Summary by CodeRabbit