添加inputNumber组件的全选中文本可配置 #2642
添加inputNumber组件的全选中文本可配置 #2642
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 (
|
![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 (7)
src/packages/inputnumber/demos/h5/demo10.tsx (1)
5-5:InputNumber组件的使用恰当，但建议添加更多说明。
InputNumber组件的使用正确展示了新的select属性。然而，为了增强代码的可读性和可维护性，建议添加注释来解释select={false}的作用。建议添加如下注释：
- return <InputNumber defaultValue={1} allowEmpty select={false} /> + // select={false} 禁用输入框获得焦点时自动全选文本的行为 + return <InputNumber defaultValue={1} allowEmpty select={false} />src/packages/inputnumber/demos/taro/demo10.tsx (1)
4-6: 组件定义正确，但可以稍微改进一下可读性。Demo10 组件的定义和实现都是正确的。它展示了如何使用 InputNumber 组件并禁用文本选择功能，这符合 PR 的目标。
为了提高可读性，建议将 props 分行显示：
-const Demo10 = () => { - return <InputNumber defaultValue={1} allowEmpty select={false} /> -} +const Demo10 = () => { + return ( + <InputNumber + defaultValue={1} + allowEmpty + select={false} + /> + ) +}这样可以使每个 prop 更容易阅读和维护。
src/packages/inputnumber/demo.tsx (1)
30-30: 翻译看起来正确，但可以稍作改进。新功能的翻译已经添加到所有三种语言中，这很好。然而，中文翻译可以稍作调整以更准确地表达功能。
建议将中文翻译略作修改：
- '5b7286d1': '支持取消全选中文本', + '5b7286d1': '支持取消文本全选',这样的表述更加清晰和自然。
Also applies to: 45-45, 60-60
src/packages/inputnumber/demo.taro.tsx (2)
33-33: 翻译添加正确，建议小改进。新功能的翻译已正确添加到所有三种语言中。翻译键 '5b7286d1' 使用一致，翻译内容也准确描述了新功能。
建议：考虑使用更具描述性的翻译键，如 'cancel_text_selection' 或 'disable_auto_text_selection'，以提高代码的可读性和可维护性。
Also applies to: 48-48, 63-63
112-115: Demo10 渲染正确，建议小改进以保持一致性。新的 Demo10 组件已正确添加到组件的末尾，遵循了其他演示的模式。标题使用了正确的翻译键，并且 Demo10 组件被包裹在 Cell 组件中，与大多数其他演示保持一致。
建议：为了与其他演示保持完全一致，考虑在 Demo10 的 Cell 组件之前添加一个空行。这将提高代码的可读性。
src/packages/inputnumber/doc.en-US.md (1)
125-125: 新属性select添加正确，建议稍作改进
select属性的添加很好地支持了新的"取消全选文本"功能。描述简洁明了，类型和默认值设置合理。为了更清晰，建议稍微扩展描述：- | select | Support deselect all text | `boolean` | `true` | + | select | Whether to automatically select all text when focused | `boolean` | `true` |这样可以更准确地描述该属性的作用。
src/packages/inputnumber/inputnumber.tsx (1)
88-91:useEffect钩子的修改实现了可配置的文本选择行为修改后的
useEffect钩子正确地实现了可配置的文本选择行为。将select添加到依赖数组中确保了当select属性变化时会重新执行效果。建议优化：考虑将条件判断提取到一个单独的变量中，以提高可读性：
const shouldSelectText = select && focused; if (shouldSelectText) { inputRef.current?.select?.() }这样可以使代码的意图更加清晰。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (8)
- src/packages/inputnumber/demo.taro.tsx (5 hunks)
- src/packages/inputnumber/demo.tsx (5 hunks)
- src/packages/inputnumber/demos/h5/demo10.tsx (1 hunks)
- src/packages/inputnumber/demos/taro/demo10.tsx (1 hunks)
- src/packages/inputnumber/doc.en-US.md (1 hunks)
- src/packages/inputnumber/doc.md (1 hunks)
- src/packages/inputnumber/inputnumber.taro.tsx (4 hunks)
- src/packages/inputnumber/inputnumber.tsx (4 hunks)
🧰 Additional context used
🪛 LanguageTool
src/packages/inputnumber/doc.en-US.md
[grammar] ~101-~101: There seems to be a noun/verb agreement error. Did you mean “deselects” or “deselected”?
Context: ...mo9.tsx'> ::: ### support deselect all text :::demo <CodeBlock src='h5/d...(SINGULAR_NOUN_VERB_AGREEMENT)
src/packages/inputnumber/doc.md
[locale-violation] ~142-~142: 'input' é un xenismo. É preferíbel dicir "entrada"
Context: ...-- | --- | --- | | --nutui-inputnumber-input-width | 数字输入框中input的宽度 |40px| | --...(GL_BARBARISM_REPLACE)
[locale-violation] ~143-~143: 'input' é un xenismo. É preferíbel dicir "entrada"
Context: ...ut的宽度 |40px| | --nutui-inputnumber-input-height | 数字输入框中input的高度 |24px| | -...(GL_BARBARISM_REPLACE)
[locale-violation] ~144-~144: 'input' é un xenismo. É preferíbel dicir "entrada"
Context: ...ut的高度 |24px| | --nutui-inputnumber-input-background-color | 数字输入框中input的背景颜色 | `...(GL_BARBARISM_REPLACE)
[locale-violation] ~144-~144: 'background' é un xenismo. É preferíbel dicir "formación de base"
Context: ...|24px| | --nutui-inputnumber-input-background-color | 数字输入框中input的背景颜色 | `$color-back...(GL_BARBARISM_REPLACE)
[locale-violation] ~144-~144: 'background' é un xenismo. É preferíbel dicir "formación de base"
Context: ...t-background-color | 数字输入框中input的背景颜色 |$color-background| | --nutui-inputnumber-input-font-co...(GL_BARBARISM_REPLACE)
[locale-violation] ~145-~145: 'input' é un xenismo. É preferíbel dicir "entrada"
Context: ...or-background| | \--nutui-inputnumber-input-font-color | 数字输入框中input的字号颜色 |$color...(GL_BARBARISM_REPLACE)
[locale-violation] ~146-~146: 'input' é un xenismo. É preferíbel dicir "entrada"
Context: ...$color-title| | --nutui-inputnumber-input-font-size | 数字输入框中input的字号大小 |14px|...(GL_BARBARISM_REPLACE)
[locale-violation] ~147-~147: 'input' é un xenismo. É preferíbel dicir "entrada"
Context: ...的字号大小 |14px| | --nutui-inputnumber-input-border | 数字输入框中input的border值 |0| | ...(GL_BARBARISM_REPLACE)
[locale-violation] ~148-~148: 'input' é un xenismo. É preferíbel dicir "entrada"
Context: ...的border值 |0| | --nutui-inputnumber-input-border-radius | 数字输入框中input的圆角 |6px...(GL_BARBARISM_REPLACE)
[locale-violation] ~149-~149: 'input' é un xenismo. É preferíbel dicir "entrada"
Context: ...put的圆角 |6px| | --nutui-inputnumber-input-margin | 数字输入框中input的margin值 |0| | ...(GL_BARBARISM_REPLACE)
[locale-violation] ~153-~153: 'background' é un xenismo. É preferíbel dicir "formación de base"
Context: ...30px| | --nutui-inputnumber-button-background-color | 数字输入框左右按钮的背景色 |transparent|...(GL_BARBARISM_REPLACE)
🪛 Markdownlint
src/packages/inputnumber/doc.en-US.md
138-138: null
Link fragments should be valid(MD051, link-fragments)
src/packages/inputnumber/doc.md
138-138: null
Link fragments should be valid(MD051, link-fragments)
🔇 Additional comments (18)
src/packages/inputnumber/demos/h5/demo10.tsx (1)
1-7: 代码实现简洁明了，符合PR目标。该组件的实现简单直接，展示了如何使用
InputNumber组件的新功能。代码结构清晰，遵循了React的最佳实践。src/packages/inputnumber/demos/taro/demo10.tsx (2)
1-2: 导入语句看起来没有问题。React 和 InputNumber 组件的导入都是正确的，并且都在组件中使用了。
7-7: 默认导出语句正确。Demo10 组件作为默认导出是正确的，这样可以方便在其他文件中导入和使用该组件。
src/packages/inputnumber/demo.tsx (3)
13-13: 导入语句看起来没有问题。新的 Demo10 组件的导入与其他演示组件的导入模式一致，路径也符合预期。
108-111: Demo10 的渲染结构正确。新添加的 Demo10 组件的渲染结构与文件中其他演示组件的渲染方式一致。使用 Cell 组件包裹 Demo10 是个好做法，保持了一致性。标题正确使用了新添加的翻译文本。
Line range hint
1-116: 总体评审结果：代码变更符合预期且实现正确。
- 新的 Demo10 组件已正确导入和集成到现有结构中。
- 所有必要的翻译都已添加，尽管中文翻译可以稍作改进以提高清晰度。
- Demo10 的渲染结构与文件中其他演示保持一致。
这些更改很好地实现了 PR 的目标，即添加一个新的演示来展示"取消全选文本"的功能。代码结构清晰，易于理解和维护。
src/packages/inputnumber/demo.taro.tsx (2)
16-16: 导入语句看起来没有问题。新的 Demo10 组件的导入语句格式正确，并且与其他演示组件的导入保持一致。
16-16: 总体评价：代码变更实现良好，与现有结构保持一致。此次更新成功地将新的 Demo10 组件集成到了 InputNumber 演示中。主要变更包括：
- 正确导入了新的 Demo10 组件
- 为新功能添加了适当的翻译
- 在组件中正确渲染了 Demo10
这些更改增强了 InputNumber 组件的功能，提供了"取消全选文本"的演示。代码结构清晰，易于理解和维护。
建议考虑之前提到的小改进，以进一步提高代码质量和一致性。
Also applies to: 33-33, 48-48, 63-63, 112-115
src/packages/inputnumber/doc.md (3)
101-107: 新功能部分添加得当新增的"支持取消文本全选中"部分很好地补充了组件的功能说明。这个新特性的文档放置得当，并且保持了与其他部分一致的格式。
125-125: 属性表更新准确新增的
select属性在属性表中描述清晰，类型和默认值的说明与其他属性保持一致。这个更新很好地补充了新功能的技术细节。
1-156: 文档结构良好，保持一致性整个文档结构清晰，各部分格式统一，新增内容与现有内容融合得当。文档的可读性和一致性都很好，没有发现明显的问题或需要改进的地方。
🧰 Tools
🪛 LanguageTool
[locale-violation] ~142-~142: 'input' é un xenismo. É preferíbel dicir "entrada"
Context: ...-- | --- | --- | | --nutui-inputnumber-input-width | 数字输入框中input的宽度 |40px| | --...(GL_BARBARISM_REPLACE)
[locale-violation] ~143-~143: 'input' é un xenismo. É preferíbel dicir "entrada"
Context: ...ut的宽度 |40px| | --nutui-inputnumber-input-height | 数字输入框中input的高度 |24px| | -...(GL_BARBARISM_REPLACE)
[locale-violation] ~144-~144: 'input' é un xenismo. É preferíbel dicir "entrada"
Context: ...ut的高度 |24px| | --nutui-inputnumber-input-background-color | 数字输入框中input的背景颜色 | `...(GL_BARBARISM_REPLACE)
[locale-violation] ~144-~144: 'background' é un xenismo. É preferíbel dicir "formación de base"
Context: ...|24px| | --nutui-inputnumber-input-background-color | 数字输入框中input的背景颜色 | `$color-back...(GL_BARBARISM_REPLACE)
[locale-violation] ~144-~144: 'background' é un xenismo. É preferíbel dicir "formación de base"
Context: ...t-background-color | 数字输入框中input的背景颜色 |$color-background| | --nutui-inputnumber-input-font-co...(GL_BARBARISM_REPLACE)
[locale-violation] ~145-~145: 'input' é un xenismo. É preferíbel dicir "entrada"
Context: ...or-background| | \--nutui-inputnumber-input-font-color | 数字输入框中input的字号颜色 |$color...(GL_BARBARISM_REPLACE)
[locale-violation] ~146-~146: 'input' é un xenismo. É preferíbel dicir "entrada"
Context: ...$color-title| | --nutui-inputnumber-input-font-size | 数字输入框中input的字号大小 |14px|...(GL_BARBARISM_REPLACE)
[locale-violation] ~147-~147: 'input' é un xenismo. É preferíbel dicir "entrada"
Context: ...的字号大小 |14px| | --nutui-inputnumber-input-border | 数字输入框中input的border值 |0| | ...(GL_BARBARISM_REPLACE)
[locale-violation] ~148-~148: 'input' é un xenismo. É preferíbel dicir "entrada"
Context: ...的border值 |0| | --nutui-inputnumber-input-border-radius | 数字输入框中input的圆角 |6px...(GL_BARBARISM_REPLACE)
[locale-violation] ~149-~149: 'input' é un xenismo. É preferíbel dicir "entrada"
Context: ...put的圆角 |6px| | --nutui-inputnumber-input-margin | 数字输入框中input的margin值 |0| | ...(GL_BARBARISM_REPLACE)
[locale-violation] ~153-~153: 'background' é un xenismo. É preferíbel dicir "formación de base"
Context: ...30px| | --nutui-inputnumber-button-background-color | 数字输入框左右按钮的背景色 |transparent|...(GL_BARBARISM_REPLACE)
🪛 Markdownlint
138-138: null
Link fragments should be valid(MD051, link-fragments)
src/packages/inputnumber/doc.en-US.md (2)
101-107: 新功能演示部分添加得当这个新增的"支持取消全选文本"演示部分很好地展示了新功能，并且与文档的整体结构保持一致。这个添加符合PR的目标，为用户提供了有价值的信息。
🧰 Tools
🪛 LanguageTool
[grammar] ~101-~101: There seems to be a noun/verb agreement error. Did you mean “deselects” or “deselected”?
Context: ...mo9.tsx'> ::: ### support deselect all text :::demo <CodeBlock src='h5/d...(SINGULAR_NOUN_VERB_AGREEMENT)
1-156: 文档更新总体评价整体而言，这次文档更新很好地集成了新的"取消全选文本"功能：
- 新增了相应的演示部分，展示了功能的使用方法。
- 在属性表中添加了
select属性，提供了清晰的配置选项。- 文档结构保持一致，易于理解和使用。
这些更改准确反映了PR的目标，提高了组件的可用性和灵活性。
🧰 Tools
🪛 LanguageTool
[grammar] ~101-~101: There seems to be a noun/verb agreement error. Did you mean “deselects” or “deselected”?
Context: ...mo9.tsx'> ::: ### support deselect all text :::demo <CodeBlock src='h5/d...(SINGULAR_NOUN_VERB_AGREEMENT)
🪛 Markdownlint
138-138: null
Link fragments should be valid(MD051, link-fragments)
src/packages/inputnumber/inputnumber.tsx (2)
24-24: 新属性select添加正确
select属性的添加符合PR的目标，使文本选择行为可配置。布尔类型的选择适合这种开关特性。
47-47:defaultProps中select属性的默认值设置合理将
select的默认值设置为true保持了与现有行为的向后兼容性，这是一个很好的做法。它确保了现有的实现不会受到影响，同时为需要禁用文本选择的用户提供了选项。src/packages/inputnumber/inputnumber.taro.tsx (3)
26-26: 新属性select增强了组件的可配置性这个新增的
select属性为 InputNumber 组件提供了更灵活的文本选择控制。这是一个很好的改进，允许开发者根据需要自定义输入框的选择行为。
50-50:select属性的默认值设置合理将
select属性的默认值设置为true是一个明智的选择。这样可以保持与现有行为的向后兼容性，同时为需要禁用自动选择的用户提供了选项。
92-95: useEffect 钩子的修改正确实现了select属性的功能这个修改很好地实现了
select属性的功能：
- 条件语句
if (select && focused)确保只有在select为 true 且输入框获得焦点时才选中文本。- 将
select添加到依赖数组中确保了当select属性变化时，效果会重新运行。这个实现符合 React 的最佳实践，很好地集成了新功能。
|
选中的交互主要是为了方便输入。去掉选中后，有些系统的光标位置表现不对，并不能将光标放到文本最后。在输入的时候，还需要调整光标位置，或删除输入框中的文本后输入。整个交互流程比较长。 |
|
* feat: 添加全选配置 * feat: select
🤔 这个变动的性质是？
🔗 相关 Issue
inputNumber在h5页面上获取焦点之后会默认全选中输入框中的值
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
Demo10演示组件，展示“支持取消全选文本”功能。InputNumber组件新增select属性，允许用户控制文本选择行为，默认值为true。文档更新
InputNumber组件的文档，新增关于select属性的说明及演示。