feat(input): update icon #2711
feat(input): update icon #2711
Conversation
Walkthrough该拉取请求对多个组件进行了修改，主要集中在简化条件渲染逻辑。 Changes
Possibly related PRs
Suggested labels
Suggested reviewers
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? 🪧 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 (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## V3.0 #2711 +/- ##
=======================================
Coverage 83.95% 83.95%
=======================================
Files 221 221
Lines 17842 17842
Branches 2675 2675
=======================================
Hits 14980 14980
Misses 2857 2857
Partials 5 5 ☔ View full report in Codecov by Sentry. |
![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
🧹 Outside diff range and nitpick comments (6)
src/packages/input/demos/taro/demo6.tsx (1)
15-15: 直接使用Close组件作为clearIcon是个好的改进移除了平台相关的条件判断，使代码更加简洁直观。这种改变：
- 降低了代码复杂度
- 提高了可维护性
- 使组件行为更加一致和可预测
建议考虑添加注释说明自定义图标的使用场景，例如：
<Input clearable - clearIcon={<Close />} + // 使用自定义清除图标替代默认图标 + clearIcon={<Close />} placeholder="显示清除图标" placeholderTextColor="#757575" />src/packages/input/input.scss (1)
51-53: 建议优化清除图标的样式控制为了更精确地控制清除图标的布局和尺寸，建议考虑添加以下属性：
.nut-input-clear { flex: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + min-width: 16px; /* 确保图标最小尺寸 */ }src/packages/input/demos/taro/demo13.tsx (3)
19-19: 建议为 Tips 图标添加提示信息Tips 图标应该向用户传达某些信息，建议添加 tooltip 或其他提示性内容来提高用户体验。
- <Tips style={{ marginLeft: pxTransform(10) }} /> + <Tips + style={{ marginLeft: pxTransform(10) }} + onClick={() => { + // 显示提示信息 + }} + />
Line range hint
21-24: 建议增强输入框的可访问性和验证功能当前输入框缺少必要的验证和可访问性属性。
<Input placeholder="请输入短信验证码" placeholderTextColor="#757575" + type="number" + maxLength={6} + aria-label="短信验证码输入框" + pattern="[0-9]*" + inputMode="numeric" style={{ '--nutui-input-padding': '10px' }} />
Line range hint
19-38: 建议完善验证码功能的状态管理组件缺少验证码倒计时和输入值验证的状态管理。
建议：
- 添加验证码输入值的状态管理
- 实现发送验证码按钮的倒计时功能
- 添加验证码验证逻辑
您需要我帮您实现这些功能吗？我可以为您创建一个包含完整状态管理的示例。
src/packages/input/demos/taro/demo9.tsx (1)
37-40: 代码简化改动符合预期！移除 harmonyAndRn() 条件检查简化了代码逻辑，使组件更易于维护。
不过建议为切换密码可见性的按钮添加无障碍支持。
<View style={{ display: 'flex', marginRight: pxTransform(10), alignItems: 'center', }} + role="button" + aria-label={inputType === 'text' ? '隐藏密码' : '显示密码'} onClick={() => setInputType(inputType === 'text' ? 'password' : 'text') } >
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (5)
src/packages/input/demos/taro/demo13.tsx(1 hunks)src/packages/input/demos/taro/demo6.tsx(1 hunks)src/packages/input/demos/taro/demo9.tsx(1 hunks)src/packages/input/input.scss(1 hunks)src/packages/input/input.taro.tsx(2 hunks)
🔇 Additional comments (4)
src/packages/input/demos/taro/demo6.tsx (1)
Line range hint 1-21: 代码结构清晰，示例实现合理！
该演示组件通过两个示例很好地展示了Input组件的清除功能：
- 使用默认清除图标
- 使用自定义清除图标
这种结构使开发者能够清楚地理解不同使用场景。
src/packages/input/input.scss (1)
51-53: 新增的清除图标样式符合规范！
新增的 .nut-input-clear 类通过 flex: 0 确保了清除图标不会在 flex 容器中伸缩，这与组件的设计意图相符。
src/packages/input/input.taro.tsx (2)
263-263: 清除图标渲染逻辑优化得当
移除了 harmonyAndRn() 检查，简化了条件渲染逻辑，使代码更加清晰和易于维护。当未提供 clearIcon 时，默认使用 MaskClose 组件是个不错的选择。
243-243: 优化了输入事件值的获取逻辑
修改后的事件处理逻辑更符合 Taro 框架的标准实践，优先使用 e.detail 获取输入值。
运行以下脚本验证其他输入组件是否需要类似优化：
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
Tips组件，简化了控制逻辑。.nut-input-clear，提供新的样式选项。改进
Input组件中清除图标的渲染逻辑。