feat: textarea v15 #2887
feat: textarea v15 #2887
Conversation
概述演练此次更新主要针对 NutUI React 的 TextArea 组件进行了全面升级。更新包括引入新的属性（ 变更
建议审阅者
可能相关的 PR
诗歌
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 ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #2887 +/- ##
==========================================
Coverage 85.84% 85.84%
==========================================
Files 271 271
Lines 18427 18434 +7
Branches 2726 2731 +5
==========================================
+ Hits 15818 15825 +7
Misses 2604 2604
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
🧹 Nitpick comments (10)
src/packages/textarea/demos/h5/demo5.tsx (1)
11-11: 新属性“type=container”与自定义主题配合使用可增强样式灵活性。
此处配置可行，但建议在文档或示例注释中说明“container”与“plain”的区别，让使用者更好地理解不同的渲染效果。src/packages/textarea/demos/h5/demo1.tsx (2)
6-12: 第一个 TextArea 逻辑正常，但可在注释或文档中说明示例用法。
- 建议在代码或文档中说明为什么示例默认值改为“基础用法1”。
- 若需要更丰富的演示，可在演示页面增加常见事件或占位符用例。
13-19: 第二个 TextArea 增加了“type=container”，与第一个形成对比演示。
此种写法正确，可在组件文档中补充差异对比示例，让开发者了解两者视觉与功能上的区别。src/packages/textarea/textarea.taro.tsx (2)
24-24: 在接口中新增 “type: 'plain' | 'container'” 属性，为组件带来更加多样的渲染选择。
接口声明清晰，但请在文档注释中简要提示两种类型的区别和适用场景。
109-109: 使用动态 className 时最好确保容器类名与“type”无冲突。
此处写法简洁，但需妥善处理与其他可能的类型扩展，建议后续统一管理“type”可选项，避免类型命名冲突。src/packages/textarea/textarea.scss (2)
32-32: 固定高度为 40px
手动固定高度可能会限制可扩展性，若自动高度场景多，可考虑配置化以免影响灵活度。
44-55: 注释掉的占位符伪元素
保留此段注释可留待后续开发，如无使用计划应酌情删除以减少代码冗余。src/styles/variables.scss (3)
564-564: 注释旧的$textarea-font变量
建议在确认不再使用后彻底删除，减少冗余。
566-566: 注释$textarea-limit-color
若后期不再需要，可移除此变量，减少维护成本。
576-579: 注释$textarea-disabled-color
在新方案下或已被$color-text-disabled取代，保留注释占位可引发混淆。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
src/packages/textarea/__test__/__snapshots__/textarea.spec.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (20)
migrate-from-v2.md(1 hunks)src/packages/textarea/demos/h5/demo1.tsx(1 hunks)src/packages/textarea/demos/h5/demo2.tsx(1 hunks)src/packages/textarea/demos/h5/demo3.tsx(1 hunks)src/packages/textarea/demos/h5/demo4.tsx(1 hunks)src/packages/textarea/demos/h5/demo5.tsx(1 hunks)src/packages/textarea/demos/h5/demo6.tsx(1 hunks)src/packages/textarea/demos/h5/demo7.tsx(1 hunks)src/packages/textarea/demos/h5/demo8.tsx(1 hunks)src/packages/textarea/demos/taro/demo2.tsx(1 hunks)src/packages/textarea/demos/taro/demo3.tsx(1 hunks)src/packages/textarea/demos/taro/demo4.tsx(1 hunks)src/packages/textarea/demos/taro/demo5.tsx(1 hunks)src/packages/textarea/demos/taro/demo6.tsx(1 hunks)src/packages/textarea/demos/taro/demo7.tsx(1 hunks)src/packages/textarea/demos/taro/demo8.tsx(1 hunks)src/packages/textarea/textarea.scss(2 hunks)src/packages/textarea/textarea.taro.tsx(4 hunks)src/packages/textarea/textarea.tsx(4 hunks)src/styles/variables.scss(1 hunks)
🔇 Additional comments (32)
src/packages/textarea/demos/h5/demo4.tsx (1)
5-5: 此处增加了 type="container" 属性，功能看起来符合预期。
若与 autoSize 同时使用，需要确认在小屏或特殊场景下的展示是否正常。
src/packages/textarea/demos/h5/demo3.tsx (1)
5-5: 为 TextArea 添加了 type="container" 属性后，请确保计数功能（showCount）在容器模式下表现稳定。
整体逻辑无异常，建议在 Demo 中进一步测试各种输入长度。
src/packages/textarea/demos/taro/demo4.tsx (1)
5-5: 在 Taro 环境下增加了 type="container"，功能与 H5 版本保持一致。
请与团队确认是否需要在不同平台做差异化展示。
src/packages/textarea/demos/taro/demo3.tsx (1)
5-5: 此处在 Taro Demo 中同样设置 type="container"，配合 showCount 建议在实际设备上验证计数与布局是否正常。
src/packages/textarea/demos/h5/demo6.tsx (1)
7-7: 建议确认容器类型样式是否符合预期
此处新增 type="container" 属性后，应确保样式文件对该类型进行了适当的布局或外观处理。如果已有对应的样式定义且功能测试通过，则无需额外改动。
src/packages/textarea/demos/taro/demo6.tsx (1)
7-7: 建议确认容器类型样式是否符合预期
此处新增 type="container" 属性，与 H5 版本保持一致，建议检查 Taro 环境下是否对该类型进行了正确的样式或交互支持。
src/packages/textarea/demos/h5/demo8.tsx (1)
8-8: 确认容器模式下的文本显示效果
当 type="container" 结合右对齐时，需检查在不同屏幕或容器大小下的显示和可用性，避免因容器布局导致的文本被裁切或超出边界。
src/packages/textarea/demos/taro/demo8.tsx (1)
8-8: 验证 Taro 环境下容器模式兼容性
在 Taro 环境中使用 type="container" 同样要测试其在不同设备上渲染时的表现，并确保与 style={{ textAlign: 'right' }} 搭配使用时没有布局冲突。
src/packages/textarea/demos/h5/demo7.tsx (1)
11-11: 添加了新属性 type="container"
此处为新增属性，确保在样式或交互上已内置对 type="container" 的完整支持。建议在文档或示例中说明该类型的具体作用和差异，以便使用者理解其用途。
src/packages/textarea/demos/taro/demo7.tsx (1)
10-10: 新增属性 type="container" 的可用性检查
已在 TextArea 中添加 type="container"。请确认 Taro 环境下已同步支持该属性的渲染逻辑和样式。若需要特殊样式或行为，可考虑在对应的 CSS 文件中进行补充。
src/packages/textarea/demos/h5/demo2.tsx (1)
6-12: 在 TextArea 中添加 type="container" 并优化换行书写
此改动使组件可以展示新的容器风格。保持多行写法有利于后续扩展其他属性，也提升了可读性。若有更多相关属性需要同逻辑处理，建议一并添加并在文档中说明。
src/packages/textarea/demos/taro/demo2.tsx (1)
6-12: 新增 type="container"，并使用多行返回以提升可读性
此处使用多行结构提升了可维护性，且在 Taro 版示例中与 H5 版本保持一致。建议在实际使用前测试容器样式渲染，确保无兼容性问题。
src/packages/textarea/demos/taro/demo5.tsx (1)
11-11: 在 Taro 环境下同样增加了“type=container”属性，确保与 H5 端风格一致即可。
若后续需要区分 Taro 与 H5 的差异化表现，可考虑在组件内部进行环境判定及样式差异处理。
src/packages/textarea/demos/h5/demo1.tsx (2)
2-2: 导入 Space 组件有利于提升布局灵活性。
此改动能使示例结构更清晰，也便于在多个 TextArea 之间添加更多元素或改动时保持良好排版。
20-20: Space 组件封尾位置正确，注意后续若新增其他示例模块时，要保持层次清晰。
当前结构简洁明了，无需额外修改。
src/packages/textarea/textarea.taro.tsx (2)
39-39: 在 defaultProps 中默认设置 “type=plain”。
保持向后兼容性，避免已有场景因切换默认值而受到影响。此举合理。
55-55: 解构赋值中引入“type”属性时建议在文档或注释中说明优先级。
若组件外部传入了 type，便会覆盖 defaultProps；保持清晰的优先级文档有助于减少误用。
src/packages/textarea/textarea.tsx (4)
18-18: 新增 type 属性，增强可配置性
这个改动扩展了 TextAreaProps，允许选择 'plain' 或 'container' 两种模式。该实现思路清晰且易于维护。
34-34: 正确设置 type 的默认值
在 defaultProps 中将 type 默认为 'plain'，符合向后兼容和使用习惯。
56-56: 在 props 中合并并读取新属性 type
从代码逻辑来看，type 与其他属性一起解构使用，使用方式简洁明了。
124-124: 根据 type 动态设置 className
通过类名前缀 + -plain 或 -container 实现风格切换，思路清晰，无需修改可继续保持。
src/packages/textarea/textarea.scss (8)
2-3: 使用 flex 布局并改为 column 方向
display: flex; flex-direction: column; 更好地适配多行内容排布，样式配置合理。
7-8: 字体与圆角重设
调整 font-size 和 border-radius，使样式更统一；暂无明显问题。
10-13: 新增 &-container 内部容器样式
通过 padding 与背景色区别于默认模式，与新增的 type 相匹配，易维护。
16-20: 字符统计区域样式
text-align: right; margin-top: 8px;等设置确保字数统计靠右并保持间隔，布局清晰。
23-23: 禁用状态的文字颜色
将 color 设置为 $color-text-disabled，方便整体维护和全局样式一致性。
36-36: 保持字体与全局基准一致
font-size: $font-size-base; 有助于文字在各组件间保持一致性。
63-66: 设置占位符颜色
整体颜色与 $color-text-help 保持一致，风格统一且可读性高。
69-69: 多处禁用状态的文字颜色
统一使用 $color-text-disabled，推荐后续维护时保持与整体设计规范一致。
Also applies to: 71-71, 74-74, 76-76
migrate-from-v2.md (1)
519-520: 新增文档说明 TextArea type 属性
明确限定 'plain' 和 'container'，同时建议移除旧的样式变量，文档指引清晰。
src/styles/variables.scss (2)
565-565: 修改 $textarea-padding 至 12px
与 &-container 内部 padding 相呼应，适配新的组件样式风格。
574-574: 行高改为 20px
此行高更适合多行文本需求，有助于可读性。
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
|
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (6)
src/packages/textarea/demos/taro/demo1.tsx (2)
6-13: 为视觉提示添加占位文案或提示语
此处TextArea设置了plain属性，并且有默认值，但并未设置任何占位提示（例如提示用户输入内容等）。可根据交互需求，考虑是否需要添加清晰的占位符，以提升用户使用体验。
14-19: 根据反馈可添加错误状态或验证逻辑
参考 PR 评论中提到的“无错误信息展示”等反馈，可在TextArea失焦或编辑时，通过status、message等属性进行验证和提示，增强组件在表单场景中的可用性。src/packages/textarea/demos/h5/demo9.tsx (1)
4-10: 演示组件功能明确，但可考虑补充更多演示场景。
当前示例仅演示了错误状态的TextArea，若需要全面展示交互形式，建议在文档或示例中补充如：正确状态、禁用状态、受控状态等，方便用户理解。src/packages/textarea/textarea.scss (3)
10-13: 容器类&-container拆分合理，方便管理额外样式。
当前拆分结构便于后续扩展，如边距或背景色独立配置。
56-68: 注释掉的伪元素部分可考虑移除或改为调试分支。
若后续无使用场景，建议删除无效代码，以保持代码整洁。
81-88: 禁用状态下占位符颜色与普通文字颜色一致。
在可用性上可考虑略微区分，但目前做法已满足一般需求。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (12)
migrate-from-v2.md(1 hunks)src/config.json(1 hunks)src/packages/textarea/demo.taro.tsx(6 hunks)src/packages/textarea/demo.tsx(6 hunks)src/packages/textarea/demos/h5/demo1.tsx(1 hunks)src/packages/textarea/demos/h5/demo9.tsx(1 hunks)src/packages/textarea/demos/taro/demo1.tsx(1 hunks)src/packages/textarea/demos/taro/demo9.tsx(1 hunks)src/packages/textarea/textarea.scss(1 hunks)src/packages/textarea/textarea.taro.tsx(4 hunks)src/packages/textarea/textarea.tsx(4 hunks)src/styles/variables.scss(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- src/packages/textarea/demos/taro/demo9.tsx
🚧 Files skipped from review as they are similar to previous changes (3)
- src/packages/textarea/demos/h5/demo1.tsx
- src/packages/textarea/textarea.taro.tsx
- src/packages/textarea/textarea.tsx
🔇 Additional comments (25)
src/packages/textarea/demos/taro/demo1.tsx (1)
2-2: 使用Space组件可以有效提升布局整洁度
导入 Space 组件来包裹多个 TextArea ，从可维护性与可读性上都很实用。若后续有更多输入框或其他组件，可继续沿用此布局方式。
src/packages/textarea/demos/h5/demo9.tsx (2)
1-2: 引入方式符合规范，暂未发现问题。
导入 React 和 TextArea 组件语义清晰，能正常使用。
12-13: 导出默认组件的方式正确。
该导出写法简洁直观，未发现明显问题。
src/packages/textarea/demo.tsx (6)
11-11: 新增 Demo9 导入无冲突。
不过需确保 Demo9 文件被正确创建并包含预期功能，以防在构建或打包时出现导入错误。
25-25: 新增属性 error 表意清晰。
将错误提示抽象为一个新属性符合可维护性，建议同时在文档中说明此属性用途。
42-42: 中文翻译项添加正确。
error: '错误状态' 能直观表达界面含义，确保与界面元素对应即可。
56-56: 繁体中文翻译项添加正确。
error: '錯誤狀態' 与简体中文对应，确保无拼写或用语差异即可。
70-70: 英文翻译项添加正确。
error: 'Status is error' 能简要表达状态含义，无问题。
93-94: 新增错误状态示例展示清晰。
在此处渲染 <Demo9 /> 并配合标题 translated.error，成功直观地传递错误信息演示，符合预期。
src/packages/textarea/demo.taro.tsx (6)
14-14: 成功导入 Demo9 组件。
注意在 Taro 环境中确认该组件的依赖与文件路径的正确性。
28-28: 新增 error 属性语义合理。
在多语言场景下清晰标记错误信息，易于后续维护。
45-45: 简体中文翻译无语义歧义。
error: '错误状态' 与主站一致。
59-59: 繁体中文翻译无语义歧义。
error: '錯誤狀態' 表达逻辑正常。
73-73: 英文翻译保持一致性。
error: 'Status is error' 搭配简明标题较好。
97-98: 新增错误示例渲染合理。
在 Taro 中的 <h2> 与 <Demo9 /> 搭配能保持与 H5 版本一致的体验。
src/packages/textarea/textarea.scss (7)
2-3: 使用 flex 并改为纵向布局。
此修改使内容在垂直方向上更易排布，适用于较长文字输入。
7-8: 字体继承基础变量，边角圆角符合设计规范。
在视觉上更统一，后续可结合主题变量灵活调整。
15-18: 错误状态样式补充合理。
&-error 结合边框和背景突出错误信息，且将颜色与主题色变量绑定，保持风格一致。
21-25: 字数限制区样式更改为右对齐，视觉更集中。
margin-top 区分，与文本域主体分离度更高。
28-28: 禁用状态颜色改为 $color-text-disabled。
保证禁用提示在不同主题下保持一致。
32-37: &-description 新增有助于展示错误文案。
此类提供单独的排版和颜色样式，便于与主体区分。
75-77: 占位符默认颜色改为 $color-text-help。
提示调性与整体帮助信息平齐，保持UI一致性。
migrate-from-v2.md (1)
519-520: TextArea 组件的重要更新
对 TextArea 组件进行了以下改进：
- 新增
plain属性，用于支持纯文本模式 - 优化了样式变量，移除了可以使用基础样式变量的冗余定义
这些更改有助于：
- 提供更灵活的文本输入展示方式
- 简化样式配置，提高代码复用性
src/config.json (1)
705-705: TextArea 组件版本升级至 v15
组件升级到 v15 版本，标记了重要的功能更新。建议查看组件文档了解新版本的具体变更。
src/styles/variables.scss (1)
564-572: 优化 TextArea 样式变量定义
样式变量的更新主要包括：
- 统一内边距为 12px，提升布局一致性
- 光标颜色改用主题色，增强视觉反馈
- 行高调整为 20px，优化文本显示效果
这些调整有助于：
- 提升组件的视觉体验
- 增强与其他组件的样式一致性
| height: 40px; | ||
| min-width: 0; | ||
| margin: 0; | ||
| padding: 0; | ||
| font-size: $textarea-font; | ||
| font-size: $font-size-base; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
文本域强制固定 height: 40px 可能影响自适应布局。
若设计需求存在高度自动扩展，可考虑以 min-height 替换固定高度，更灵活地展示多行文本。
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (7)
src/packages/textarea/doc.zh-TW.md (2)
91-93: 属性文档格式需要修正
status属性的类型描述中包含了错误的转义字符\/，应修改为/message属性的默认值应保持一致性，建议使用-而不是空字符串- | status | 文本域狀態，可標記為 默認狀態 和 錯誤狀態 | `default /\ error` | `default` | + | status | 文本域狀態，可標記為 默認狀態 和 錯誤狀態 | `default / error` | `default` | - | message | 文本域描述，搭配error狀態使用 | `string` | `` | + | message | 文本域描述，搭配error狀態使用 | `string` | `-` |
Line range hint
1-90: 建议补充新属性的使用示例当前文档中缺少对新增的
plain、status和message属性的使用示例，建议添加相关示例代码以帮助用户理解这些新特性的使用方法。src/packages/textarea/doc.taro.md (2)
92-94: 属性文档格式需要修正
status属性的类型描述中包含了错误的转义字符\/，应修改为/message属性的默认值应保持一致性，建议使用-而不是空字符串- | status | 文本域状态，可标记为 默认状态 和 错误状态 | `default /\ error` | `default` | + | status | 文本域状态，可标记为 默认状态 和 错误状态 | `default / error` | `default` | - | message | 文本域描述，搭配error状态使用 | `string` | `` | + | message | 文本域描述，搭配error状态使用 | `string` | `-` |
Line range hint
1-91: 建议补充新属性的使用示例当前文档中缺少对新增的
plain、status和message属性的使用示例，建议添加相关示例代码以帮助用户理解这些新特性在 Taro 环境中的使用方法。src/packages/textarea/doc.md (2)
92-94: 属性文档格式需要修正
status属性的类型描述中包含了错误的转义字符\/，应修改为/message属性的默认值应保持一致性，建议使用-而不是空字符串- | status | 文本域状态，可标记为 默认状态 和 错误状态 | `default /\ error` | `default` | + | status | 文本域状态，可标记为 默认状态 和 错误状态 | `default / error` | `default` | - | message | 文本域描述，搭配error状态使用 | `string` | `` | + | message | 文本域描述，搭配error状态使用 | `string` | `-` |
Line range hint
1-91: 建议补充新属性的使用示例当前文档中缺少对新增的
plain、status和message属性的使用示例，建议添加相关示例代码以帮助用户理解这些新特性的使用方法。特别是status和message属性的组合使用场景。migrate-from-v2.md (1)
519-522: 迁移指南更新准确！迁移指南中的TextArea组件变更说明完整且清晰：
- 新增
plain属性用于标记文本框类型- 新增
status属性用于定义状态- 新增
message属性用于错误提示- 移除了一些可使用基础样式变量的属性
建议补充一下移除的样式变量对应的新变量名称，方便用户迁移时进行替换。
建议添加以下内容：
- 删掉一些可使用基础样式变量，并且建议使用基础样式变量的样式变量，比如 `$textarea-font` `$textarea-limit-color` `$textarea-disabled-color` + 删掉一些可使用基础样式变量的样式变量： + - `$textarea-font` 替换为 `$font-family` + - `$textarea-limit-color` 替换为 `$text-color` + - `$textarea-disabled-color` 替换为 `$disabled-color`
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
migrate-from-v2.md(1 hunks)src/packages/textarea/doc.en-US.md(1 hunks)src/packages/textarea/doc.md(2 hunks)src/packages/textarea/doc.taro.md(1 hunks)src/packages/textarea/doc.zh-TW.md(1 hunks)
🔇 Additional comments (2)
src/packages/textarea/doc.md (1)
109-109: 确认光标颜色变更
光标颜色从 $color-title 更改为 $color-primary，这个变更需要确认是否符合设计规范。
src/packages/textarea/doc.en-US.md (1)
92-94: 文档更新清晰且完整！
新增的属性定义明确，与组件功能相符：
plain属性用于区分容器类型status属性用于定义输入框状态message属性用于展示错误信息
这些更新与PR评论中提到的错误信息展示需求相吻合。
运行以下脚本验证文档中的属性是否与实际实现一致：
✅ Verification successful
TextArea组件的属性实现已验证完成
根据代码搜索结果，在 src/packages/textarea/textarea.tsx 和 src/packages/textarea/textarea.taro.tsx 文件中都找到了对应的属性实现：
// 属性定义
plain: boolean
status: 'error' | 'default'
message: string
// 默认值
plain: false,
status: 'default',
message: '',属性的实现与文档完全一致：
plain属性用于区分容器类型，默认为 falsestatus属性用于定义输入框状态，可选值为 'error' 或 'default'，默认为 'default'message属性用于展示描述信息，默认为空字符串
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：验证TextArea组件的属性实现
# 预期：在实现文件中找到对应的属性定义
# 检查属性定义
ast-grep --pattern 'interface TextAreaProps {
$$$
plain?: boolean
status?: $_
message?: string
$$$
}'
Length of output: 114
Script:
#!/bin/bash
# 搜索TextArea相关的类型定义文件
fd -e ts -e tsx -e d.ts | xargs rg -l "TextArea.*Props"
# 搜索plain属性的使用
rg "plain.*?:" -A 2
# 搜索status属性的使用
rg "status.*?:" -A 2
# 搜索message属性的使用
rg "message.*?:" -A 2
Length of output: 57008
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
src/packages/textarea/textarea.scss (1)
49-60: 建议移除未使用的注释代码建议清理这段被注释的代码，如果将来需要可以通过版本控制系统找回。保持代码整洁有助于提高可维护性。
src/packages/textarea/textarea.taro.tsx (1)
24-25: 建议改进类型定义建议将 status 的可选值定义为枚举类型，以提高类型安全性和代码可维护性：
- status: 'error' | 'default' + enum TextAreaStatus { + Error = 'error', + Default = 'default' + } + status: TextAreaStatussrc/packages/textarea/textarea.tsx (1)
121-162: 组件结构合理，建议小幅优化组件整体结构清晰，但建议将 showCount 相关的渲染逻辑抽取为独立组件，以提高代码的可维护性：
+ const TextAreaCounter = ({ value, maxLength, disabled, classPrefix }) => ( + <div className={`${classPrefix}-limit ${disabled ? `${classPrefix}-limit-disabled` : ''}`}> + {value.length}/{maxLength < 0 ? 0 : maxLength} + </div> + ) return ( <> <div className={...}> <textarea {...props} /> - {showCount && ( - <div className={`${classPrefix}-limit ${disabled ? `${classPrefix}-limit-disabled` : ''}`}> - {inputValue.length}/{maxLength < 0 ? 0 : maxLength} - </div> - )} + {showCount && ( + <TextAreaCounter + value={inputValue} + maxLength={maxLength} + disabled={disabled} + classPrefix={classPrefix} + /> + )} </div> </> )🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 144-145: src/packages/textarea/textarea.tsx#L144-L145
Added lines #L144 - L145 were not covered by tests
[warning] 147-148: src/packages/textarea/textarea.tsx#L147-L148
Added lines #L147 - L148 were not covered by tests
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
src/packages/textarea/__test__/__snapshots__/textarea.spec.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (10)
migrate-from-v2.md(1 hunks)src/packages/textarea/demos/h5/demo9.tsx(1 hunks)src/packages/textarea/demos/taro/demo9.tsx(1 hunks)src/packages/textarea/doc.en-US.md(1 hunks)src/packages/textarea/doc.md(2 hunks)src/packages/textarea/doc.taro.md(1 hunks)src/packages/textarea/doc.zh-TW.md(1 hunks)src/packages/textarea/textarea.scss(2 hunks)src/packages/textarea/textarea.taro.tsx(4 hunks)src/packages/textarea/textarea.tsx(4 hunks)
🚧 Files skipped from review as they are similar to previous changes (7)
- src/packages/textarea/demos/taro/demo9.tsx
- src/packages/textarea/doc.en-US.md
- src/packages/textarea/demos/h5/demo9.tsx
- src/packages/textarea/doc.zh-TW.md
- src/packages/textarea/doc.md
- src/packages/textarea/doc.taro.md
- migrate-from-v2.md
🧰 Additional context used
🪛 GitHub Check: codecov/patch
src/packages/textarea/textarea.tsx
[warning] 144-145: src/packages/textarea/textarea.tsx#L144-L145
Added lines #L144 - L145 were not covered by tests
[warning] 147-148: src/packages/textarea/textarea.tsx#L147-L148
Added lines #L147 - L148 were not covered by tests
🔇 Additional comments (4)
src/packages/textarea/textarea.scss (2)
37-37: 固定高度可能限制组件灵活性
将文本域高度固定为 40px 可能会影响组件在不同场景下的适应性。建议使用 min-height 来确保最小高度的同时保持灵活性。
15-18: 错误状态样式需要验证
请确认错误状态的边框颜色（0.5px solid $color-danger）和背景色（$color-danger-light）是否符合设计规范。
src/packages/textarea/textarea.taro.tsx (1)
133-142: 代码结构良好
Textarea 组件的核心渲染逻辑结构清晰，属性传递完整，事件处理合理。
src/packages/textarea/textarea.tsx (1)
143-148: 输入法组合事件处理需要测试覆盖
与 Taro 版本类似，Web 版本的输入法组合事件处理也缺少测试覆盖。建议添加测试用例确保功能正确性。
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 144-145: src/packages/textarea/textarea.tsx#L144-L145
Added lines #L144 - L145 were not covered by tests
[warning] 147-148: src/packages/textarea/textarea.tsx#L147-L148
Added lines #L147 - L148 were not covered by tests
| onCompositionStart: () => { | ||
| compositionRef.current = true | ||
| }, | ||
| onCompositionEnd: () => { | ||
| compositionRef.current = false | ||
| }, |
There was a problem hiding this comment.
💡 Codebase verification
需要补充输入法组合事件的测试用例
经过验证，当前测试文件（src/packages/textarea/test/）中缺少对 composition 事件的测试覆盖。代码中使用了 compositionRef 来处理输入法组合输入，这是一个重要的功能点，建议添加以下测试场景：
- 输入法组合输入开始时（onCompositionStart）的状态变化
- 输入法组合输入结束时（onCompositionEnd）的状态变化
- 在组合输入过程中的值处理逻辑
参考现有的测试用例格式，可以使用 fireEvent 来模拟这些事件。
🔗 Analysis chain
输入法组合事件处理缺少测试覆盖
compositionStart 和 compositionEnd 事件的处理逻辑缺少测试覆盖。建议添加相关测试用例以确保中文输入等场景的正确性。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查是否存在相关测试用例
rg -l "composition.*Event" "src/packages/textarea/**/*test*"
Length of output: 134
Script:
#!/bin/bash
# 查找textarea相关的测试文件
fd "test.*\.(tsx|ts|js|jsx)$" src/packages/textarea
# 查找所有包含composition相关测试的文件
rg -l "composition" --type ts --type tsx --type js --type jsx src/packages/textarea
Length of output: 165
Script:
#!/bin/bash
# 使用更通用的搜索方式查找测试文件
fd "test" src/packages/textarea
# 查找所有包含composition的文件
rg -l "composition" src/packages/textarea
Length of output: 180
Script:
#!/bin/bash
# 检查测试目录下的文件内容
fd . src/packages/textarea/__test__/ -t f -x cat {}
# 查看composition相关的具体实现上下文
rg "composition" -B 2 -A 2 src/packages/textarea/textarea.taro.tsx src/packages/textarea/textarea.tsx
Length of output: 5382
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
plain、status和message属性到TextArea组件，增强了组件的可配置性。TextArea组件的文档，包含新属性和修改的属性。Demo9，展示错误状态的处理。TextArea组件的样式，提高了视觉层次感和响应能力。TextArea组件的英文和中文文档，添加了新属性的描述并移除了不再使用的 CSS 变量。