fix(inputnumber): 适配RN和鸿蒙，加减按钮icon在RN和鸿蒙暂不展示#2353
fix(inputnumber): 适配RN和鸿蒙，加减按钮icon在RN和鸿蒙暂不展示#2353xiaoyatong merged 15 commits intojdf2e:dev-harmonyfrom
Conversation
Walkthrough这次更新主要涉及多个文件中的 Changes
Poem
Recent review detailsConfiguration used: CodeRabbit UI Files selected for processing (2)
Files skipped from review as they are similar to previous changes (1)
Additional context usedBiome
Additional comments not posted (2)
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 as PR comments)
Additionally, you can add CodeRabbit Configration 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: 5
Outside diff range and nitpick comments (3)
src/packages/inputnumber/demos/taro/demo9.tsx (1)
61-68: 注意，Toast组件已被注释掉。如果这是临时的改动，请添加 TODO 或 FIXME 标记以便未来跟踪。src/packages/inputnumber/demo.taro.tsx (1)
67-108: 代码整体看起来很整洁，但建议在每个示例之间添加一些注释，以提高代码的可读性和可维护性。src/packages/inputnumber/inputnumber.taro.tsx (1)
224-263: 在鸿蒙和React Native平台上隐藏加减按钮是符合PR目标的。但是，建议添加相关注释说明为什么在这些平台上需要隐藏这些按钮，以便其他开发者理解背景。
| @@ -1 +1 @@ | |||
| exports = module.exports = ["cell","cellgroup","overlay","button","switch","countdown","empty","price","tag","layout","row","col","space","grid","griditem","divider","image","resultpage","notify","pagination","swiper","textarea","indicator","hoverbutton","safearea","hoverbuttonitem"]; No newline at end of file | |||
| exports = module.exports = ["cell","cellgroup","overlay","button","switch","countdown","empty","price","tag","layout","row","col","space","grid","griditem","divider","image","resultpage","notify","pagination","swiper","textarea","indicator","hoverbutton","safearea","hoverbuttonitem", 'inputnumber']; | |||
There was a problem hiding this comment.
避免直接对全局变量进行赋值，这可能会覆盖重要的功能或导致意外行为。
- exports = module.exports = ["cell","cellgroup","overlay","button","switch","countdown","empty","price","tag","layout","row","col","space","grid","griditem","divider","image","resultpage","notify","pagination","swiper","textarea","indicator","hoverbutton","safearea","hoverbuttonitem", 'inputnumber'];
+ module.exports = ["cell","cellgroup","overlay","button","switch","countdown","empty","price","tag","layout","row","col","space","grid","griditem","divider","image","resultpage","notify","pagination","swiper","textarea","indicator","hoverbutton","safearea","hoverbuttonitem", 'inputnumber'];Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| exports = module.exports = ["cell","cellgroup","overlay","button","switch","countdown","empty","price","tag","layout","row","col","space","grid","griditem","divider","image","resultpage","notify","pagination","swiper","textarea","indicator","hoverbutton","safearea","hoverbuttonitem", 'inputnumber']; | |
| module.exports = ["cell","cellgroup","overlay","button","switch","countdown","empty","price","tag","layout","row","col","space","grid","griditem","divider","image","resultpage","notify","pagination","swiper","textarea","indicator","hoverbutton","safearea","hoverbuttonitem", 'inputnumber']; |
Tools
Biome
[error] 1-1: A global variable should not be reassigned. (lint/suspicious/noGlobalAssign)
Assigning to a global variable can override essential functionality.
| <div className={`${classPrefix}-minus`} onClick={handleReduce}> | ||
| <Minus | ||
| className={classNames('nut-inputnumber-icon icon-minus', { | ||
| [`${classPrefix}-icon-disabled`]: shadowValue === min || disabled, | ||
| })} | ||
| className={classNames( |
There was a problem hiding this comment.
对于鼠标事件触发的操作，应该添加对应的键盘事件处理，以支持键盘导航，提高无障碍访问性。
+ onKeyUp={handleReduce}
+ onKeyUp={handlePlus}Also applies to: 242-244
Tools
Biome
[error] 217-219: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event. (lint/a11y/useKeyWithClickEvents)
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
| background-color: gray; | ||
| /* #endif */ | ||
| /* #ifndef rn harmony */ | ||
| background-color: transparent; | ||
| /* #endif */ |
There was a problem hiding this comment.
在 HarmonyOS 和 React Native 平台上，为 .nut-inputnumber-minus 类设置灰色背景。请确认这种颜色选择符合设计规范。
| background-color: gray; | ||
| /* #endif */ | ||
| /* #ifndef rn harmony */ | ||
| background-color: transparent; | ||
| /* #endif */ |
There was a problem hiding this comment.
与上面的评论类似，这里也为 HarmonyOS 和 React Native 平台上的 .nut-inputnumber-add 类设置了灰色背景。同样，请验证这是否符合设计要求。
| /* #ifdef rn harmony */ | ||
| background-color: gray; | ||
| /* #endif */ | ||
| /* #ifndef rn harmony */ | ||
| background-color: $inputnumber-button-background-color; | ||
| /* #endif */ |
There was a problem hiding this comment.
在 HarmonyOS 和 React Native 平台上，为按钮设置灰色背景。这是一个重要的视觉调整，请确保它与设计规范一致。
xiaoyatong
left a comment
xiaoyatong
left a comment
There was a problem hiding this comment.
+- 符号 可以使用 Text 标签，做兜底逻辑~~
| min: number | string | ||
| max: number | string | ||
| type?: Extract<InputProps['type'], 'number' | 'digit'> | ||
| type?: Extract<InputProps['type'], 'text'> |
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range and nitpick comments (1)
packages/nutui-taro-demo-rn/scripts/taro/adapted.js (1)
Line range hint
1-1: 请注意，这里直接对全局变量进行赋值可能会覆盖重要功能或导致不预期的行为。建议使用更安全的方法来定义模块导出。- exports = module.exports = [...] + module.exports = [...]
There was a problem hiding this comment.
Actionable comments posted: 2
Outside diff range and nitpick comments (1)
src/packages/inputnumber/inputnumber.taro.tsx (1)
Line range hint
218-218: 静态分析工具提示：建议使用可选链。这可以进一步简化代码。- onChange?.(parseFloat(valueStr || '0').toFixed(digits) as any, e) + onChange?.(parseFloat(valueStr || '0').toFixed(digits) as any, e)
| const handleBlur = (e: any) => { | ||
| setFocused(false) |
There was a problem hiding this comment.
静态分析工具提示：建议使用可选链。这可以提高代码的安全性和可读性。
- onBlur && onBlur(e)
+ onBlur?.(e)Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const handleBlur = (e: any) => { | |
| setFocused(false) | |
| const handleBlur = (e: any) => { | |
| setFocused(false) | |
| onBlur?.(e) |
Tools
Biome
[error] 214-215: Change to an optional chain. (lint/complexity/useOptionalChain)
Unsafe fix: Change to an optional chain.
| nutuiInputnumberInputMargin: '0 2px', | ||
| } | ||
|
|
||
| const isRnAndHarmony = harmonyAndRn() |
There was a problem hiding this comment.
添加了 isRnAndHarmony 变量用于存储环境检测结果，但在此文件中似乎未使用此变量。建议移除或者利用此变量进行条件渲染以适应不同环境。
| } | ||
| } | ||
| const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => { | ||
| const handleFocus = (e: any) => { |
There was a problem hiding this comment.
建议使用可选链来优化代码的可读性和安全性。
- onFocus && onFocus(e)
+ onFocus?.(e)
- onBlur && onBlur(e)
+ onBlur?.(e)Also applies to: 219-219
| const handleInputChange = (e: any) => { | ||
| if (!focused && isHarmony) return |
There was a problem hiding this comment.
处理 HarmonyOS 平台时，输入变化的逻辑似乎被过早地终止了。这可能会导致在 HarmonyOS 上无法正确处理输入变化。
- if (!focused && isHarmony) return
+ if (!focused && isHarmony) {
+ // 可以在这里添加特定的逻辑处理
+ }Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const handleInputChange = (e: any) => { | |
| if (!focused && isHarmony) return | |
| const handleInputChange = (e: any) => { | |
| if (!focused && isHarmony) { | |
| // 可以在这里添加特定的逻辑处理 | |
| } |
2 participants
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
样式
重构
InputNumber组件包裹在Cell组件内，改善布局结构。