fix(TextArea&Skeleton): 增加disabled样式,调整autosize demo,删除无用样式 #2684
Conversation
Walkthrough此次更改主要涉及 Changes
Possibly related PRs
Suggested reviewers
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: 2
🧹 Outside diff range and nitpick comments (2)
src/packages/textarea/demos/h5/demo4.tsx (1)
Line range hint
1-8: 建议完善演示文档当前演示代码过于简单，建议：
- 添加注释说明此演示的目的
- 展示更多实用的使用场景
- 添加必要的交互反馈
建议参考以下示例结构：
import React, { useState } from 'react' import { TextArea } from '@nutui/nutui-react' // 演示TextArea的自动调整高度功能 const Demo4 = () => { const [value, setValue] = useState('') const handleChange = (val: string) => { setValue(val) console.log('当前输入内容：', val) } return ( <div> <h4>自动调整高度示例</h4> <TextArea value={value} onChange={handleChange} autoSize placeholder="请输入内容，文本框会自动调整高度" maxLength={100} /> <div className="demo-tips">当前输入字数：{value.length}/100</div> </div> ) } export default Demo4src/packages/textarea/demos/taro/demo4.tsx (1)
5-5: 建议完善示例文档作为演示组件，建议：
- 添加注释说明用途
- 展示更多常用属性的使用方式
- 说明无限制输入的影响
+// 演示TextArea的自适应高度功能 +// 注意：移除输入长度限制可能会影响性能 return <TextArea rows={1} autoSize maxLength={-1} />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (4)
src/packages/textarea/demos/h5/demo4.tsx(1 hunks)src/packages/textarea/demos/taro/demo4.tsx(1 hunks)src/packages/textarea/textarea.harmony.css(1 hunks)src/packages/textarea/textarea.scss(1 hunks)
🔇 Additional comments (4)
src/packages/textarea/demos/taro/demo4.tsx (1)
5-5: 建议添加输入验证和性能优化措施
将 maxLength 设置为 -1 可能会带来以下问题：
- 无限制的输入可能导致性能问题
- 缺少必要的输入验证机制
- 用户体验可能受到影响
建议：
- 考虑添加合理的输入长度限制
- 实现输入验证逻辑
- 添加加载状态处理
- return <TextArea rows={1} autoSize maxLength={-1} />
+ return (
+ <TextArea
+ rows={1}
+ autoSize
+ maxLength={1000}
+ onChange={(val) => {
+ // 添加输入验证逻辑
+ if (val.length > 1000) {
+ console.warn('输入内容过长');
+ }
+ }}
+ />
+ )src/packages/textarea/textarea.harmony.css (2)
46-50: 禁用状态下的占位符样式实现正确！
新增的样式很好地处理了禁用状态下的占位符文本颜色，并且同时兼容了Web和Taro框架。颜色选择与禁用文本颜色保持一致，符合设计规范。
Line range hint 1-63: 建议验证样式删除的影响
根据变更记录，移除了 .cpoyText 类和 textarea 的 height 属性。请确认：
- height 属性的移除不会影响现有的自适应高度功能
- .cpoyText 类确实未被其他组件使用
执行以下脚本验证样式使用情况：
✅ Verification successful
Let me generate additional scripts to verify the textarea's height functionality in more detail:
Let me try one more verification to check the autoSize implementation:
样式变更验证完成，确认安全
验证结果显示：
.cpoyText类在整个代码库中未被引用，可以安全移除- TextArea 组件的自适应高度功能由
autoSize属性控制，其实现依赖于scrollHeight和 JavaScript 动态设置高度，不受 CSS 中 height 属性移除的影响 - 组件中的高度计算逻辑保持完整：
- 通过
useEffect监听autoSize和值变化 - 使用
scrollHeight动态计算实际需要的高度 - 通过
style.height动态设置高度值
- 通过
因此这些样式变更是安全的，不会影响组件的现有功能。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查是否有其他文件引用了被删除的样式类
echo "检查 .cpoyText 类的使用情况："
rg -l "cpoyText"
echo "检查 TextArea 组件中 height 相关的使用："
rg -A 3 "height.*textarea" src/packages/textarea/
Length of output: 903
Script:
#!/bin/bash
# 检查 textarea 组件中与高度相关的实现
ast-grep --pattern 'const height = $_'
# 检查是否有其他文件引用了 textarea 的高度相关属性
rg -l "style.height.*textarea"
# 检查组件的自适应高度实现
rg -A 5 "autoSize.*textarea" src/packages/textarea/
Length of output: 1238
Script:
#!/bin/bash
# 检查 textarea 组件中的 autoSize 相关实现
rg -C 10 "autoSize" src/packages/textarea/textarea.tsx
# 检查组件中的高度计算逻辑
rg -C 5 "scrollHeight" src/packages/textarea/textarea.tsx
# 检查是否有测试用例验证高度功能
fd -e test.tsx -e test.ts -X rg -l "textarea.*height|autoSize.*textarea"
Length of output: 2183
src/packages/textarea/textarea.scss (1)
47-54: 禁用状态下的样式实现完善且规范
样式实现符合以下要求：
- 统一使用了
$textarea-disabled-color变量确保颜色一致性 - 同时考虑了原生和 Taro 环境下的实现
- 嵌套结构清晰，符合 SCSS 最佳实践
| @@ -2,6 +2,6 @@ import React from 'react' | |||
| import { TextArea } from '@nutui/nutui-react' | |||
|
|
|||
| const Demo4 = () => { | |||
| return <TextArea rows={1} autoSize /> | |||
| return <TextArea rows={1} autoSize maxLength={-1} /> | |||
There was a problem hiding this comment.
请考虑重新设计此演示用例
此演示存在以下问题：
- 设置
maxLength={-1}可能不是最佳实践，建议使用一个合理的正整数值来展示字符限制功能。 - 同时使用
rows={1}和autoSize可能会造成混淆，因为固定行数和自动调整大小这两个属性可能会相互冲突。 - 作为演示用例，缺少必要的说明和上下文，不利于用户理解组件的使用方式。
建议按照以下方式修改：
- return <TextArea rows={1} autoSize maxLength={-1} />
+ return (
+ <div>
+ <h4>自动调整高度示例</h4>
+ <TextArea
+ autoSize
+ placeholder="请输入内容，文本框会自动调整高度"
+ maxLength={100}
+ />
+ </div>
+ )📝 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.
| return <TextArea rows={1} autoSize maxLength={-1} /> | |
| return ( | |
| <div> | |
| <h4>自动调整高度示例</h4> | |
| <TextArea | |
| autoSize | |
| placeholder="请输入内容，文本框会自动调整高度" | |
| maxLength={100} | |
| /> | |
| </div> | |
| ) |
src/packages/textarea/textarea.scss
Outdated
| &::-webkit-input-placeholder { | ||
| color: $textarea-disabled-color; | ||
| } | ||
| .taro-textarea { | ||
| &::-webkit-input-placeholder { | ||
| color: $textarea-disabled-color; | ||
| } | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议增强跨浏览器兼容性
为确保在不同浏览器中表现一致，建议添加其他浏览器的占位符伪元素支持。
建议按如下方式修改：
&-disabled {
cursor: not-allowed;
color: $textarea-disabled-color;
&::-webkit-input-placeholder {
color: $textarea-disabled-color;
}
+ &::-moz-placeholder {
+ color: $textarea-disabled-color;
+ }
+ &:-ms-input-placeholder {
+ color: $textarea-disabled-color;
+ }
+ &::placeholder {
+ color: $textarea-disabled-color;
+ }
.taro-textarea {
&::-webkit-input-placeholder {
color: $textarea-disabled-color;
}
+ &::-moz-placeholder {
+ color: $textarea-disabled-color;
+ }
+ &:-ms-input-placeholder {
+ color: $textarea-disabled-color;
+ }
+ &::placeholder {
+ color: $textarea-disabled-color;
+ }
}
}📝 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.
| &::-webkit-input-placeholder { | |
| color: $textarea-disabled-color; | |
| } | |
| .taro-textarea { | |
| &::-webkit-input-placeholder { | |
| color: $textarea-disabled-color; | |
| } | |
| } | |
| &::-webkit-input-placeholder { | |
| color: $textarea-disabled-color; | |
| } | |
| &::-moz-placeholder { | |
| color: $textarea-disabled-color; | |
| } | |
| &:-ms-input-placeholder { | |
| color: $textarea-disabled-color; | |
| } | |
| &::placeholder { | |
| color: $textarea-disabled-color; | |
| } | |
| .taro-textarea { | |
| &::-webkit-input-placeholder { | |
| color: $textarea-disabled-color; | |
| } | |
| &::-moz-placeholder { | |
| color: $textarea-disabled-color; | |
| } | |
| &:-ms-input-placeholder { | |
| color: $textarea-disabled-color; | |
| } | |
| &::placeholder { | |
| color: $textarea-disabled-color; | |
| } | |
| } |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## V3.0 #2684 +/- ##
=======================================
Coverage 83.95% 83.95%
=======================================
Files 221 221
Lines 17849 17849
Branches 2679 2679
=======================================
Hits 14986 14986
Misses 2858 2858
Partials 5 5 ☔ View full report in Codecov by Sentry. |
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Outside diff range and nitpick comments (4)
src/packages/skeleton/demos/taro/demo5.tsx (1)
39-39: 建议统一样式管理方式建议将内联样式迁移到统一的样式文件中管理，以保持代码的一致性和可维护性。可以考虑使用类似其他组件demo的样式管理方式。
建议修改如下：
- <View style={{ marginTop: '10px', width: '70%' }}> + <View className="skeleton-demo-description">然后在相应的样式文件中添加：
.skeleton-demo-description { margin-top: 10px; width: 70%; }src/packages/textarea/textarea.taro.tsx (2)
Line range hint
126-133: 建议改进事件处理器的类型安全性目前的事件处理使用了
any类型，建议定义具体的事件类型以提高代码的类型安全性。建议按照以下方式修改：
-onInput={(e: any) => handleChange(e)} -onBlur={(e: any) => handleBlur(e)} -onFocus={(e: any) => handleFocus(e)} +onInput={(e: Taro.BaseEventOrig<TextareaProps.onInputEventDetail>) => handleChange(e)} +onBlur={(e: Taro.FocusEvent) => handleBlur(e)} +onFocus={(e: Taro.FocusEvent) => handleFocus(e)}
Line range hint
126-133: 建议优化性能和可访问性当前实现可以在以下方面进行改进：
- 考虑使用
useCallback包装事件处理函数以避免不必要的重渲染- 为残障用户添加必要的 ARIA 属性
建议添加以下 ARIA 属性：
<Textarea + aria-disabled={disabled} + aria-readonly={readOnly} + role="textbox" value={inputValue} ... />src/packages/skeleton/skeleton.harmony.css (1)
Line range hint
14-26: 合并重复的样式以减少冗余
.nut-image-loading和.nut-image-error的样式相同，可以考虑合并为一个公共类，减少代码重复。建议提取公共样式为
.nut-image-placeholder：.nut-image-placeholder { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #f5f6fa; background-size: 100% 100%; } .nut-image-loading, .nut-image-error { @extend .nut-image-placeholder; /* 如果使用预处理器 */ }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (7)
src/packages/skeleton/demos/taro/demo5.tsx(1 hunks)src/packages/skeleton/skeleton.harmony.css(4 hunks)src/packages/textarea/demos/h5/demo4.tsx(1 hunks)src/packages/textarea/demos/taro/demo4.tsx(1 hunks)src/packages/textarea/textarea.harmony.css(1 hunks)src/packages/textarea/textarea.scss(1 hunks)src/packages/textarea/textarea.taro.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- src/packages/textarea/demos/h5/demo4.tsx
- src/packages/textarea/demos/taro/demo4.tsx
- src/packages/textarea/textarea.harmony.css
- src/packages/textarea/textarea.scss
🔇 Additional comments (4)
src/packages/skeleton/demos/taro/demo5.tsx (1)
38-38: 验证移除标题类名的影响
移除了 Text 组件的 nut-skeleton-content-title 类名，需要确认是否会影响组件的展示效果。
✅ Verification successful
移除类名不会影响组件展示
经过验证，移除 nut-skeleton-content-title 类名是合理的，原因如下：
- 在 demo5.tsx 中，Text 组件是作为内容展示使用，不需要骨架屏样式
- skeleton.harmony.css 中的
nut-skeleton-content-title类名仅用于骨架屏占位样式 - 当前代码结构中，Text 组件被正确包裹在 Skeleton 组件内，可以正常显示骨架效果
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查其他骨架屏demo中是否使用了这个类名
rg -l "nut-skeleton-content-title" "src/packages/skeleton"
# 检查样式文件中是否定义了这个类名的样式
rg "nut-skeleton-content-title" "src/packages/skeleton/**/*.scss"
Length of output: 237
Script:
#!/bin/bash
# 检查skeleton.harmony.css中的类名定义
cat src/packages/skeleton/skeleton.harmony.css
# 检查其他demo文件中的Text组件用法
fd -e tsx -e ts -e jsx -e js . src/packages/skeleton/demos --exec grep -l "Text"
# 查看demo5.tsx的完整内容以了解上下文
cat src/packages/skeleton/demos/taro/demo5.tsx
Length of output: 6508
src/packages/textarea/textarea.taro.tsx (1)
Line range hint 126-133: 验证禁用状态的样式实现
根据 PR 的目标，需要确保禁用状态的样式正确实现。请验证以下几点：
- 禁用状态下的文本颜色
- 禁用状态下的背景色
- 禁用状态下的占位符样式
✅ Verification successful
Let me check the actual content of these style files to verify the disabled state implementation.
Let me check the variable definitions for the disabled state colors.
禁用状态样式实现已完整验证
经过验证，TextArea 组件的禁用状态样式已正确实现：
- 文本颜色：使用
$textarea-disabled-color变量，统一设置为$color-text-disabled - 禁用状态下的样式特性：
- 设置
cursor: not-allowed - 文本颜色设为
#c2c4cc - 占位符文本同样使用禁用状态颜色
- 适配了 Taro 环境下的特殊样式需求
- 设置
样式实现完整且统一，符合组件设计规范。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查相关的样式文件中是否包含禁用状态的样式定义
rg -l "textarea.*disabled" --type css
Length of output: 207
Script:
#!/bin/bash
# Check the disabled state styles in textarea related files
rg "textarea.*disabled|disabled.*textarea" -A 3 src/packages/textarea/textarea.scss src/packages/textarea/textarea.harmony.css
Length of output: 2176
Script:
#!/bin/bash
# Check the textarea disabled color variable definitions
rg "textarea-disabled-color" src/styles/variables*.scss
Length of output: 493
Script:
#!/bin/bash
# Check the CSS variable definitions for disabled state
rg "nutui-textarea-disabled" src/styles/variables*.scss -A 1
Length of output: 480
src/packages/skeleton/skeleton.harmony.css (2)
5-8: 良好的样式重构
将默认样式提取为.nut-image-default，提高了代码的可读性和可维护性。
52-65: 确保RTL布局下的样式一致性
在RTL模式下，调整了margin-left和margin-right，请确认这些修改能在RTL布局中正确展示头像组的重叠效果。
| .nut-avatar-first-child { | ||
| margin-left: 0; | ||
| margin-right: 0; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
优化选择器，减少不必要的类名
.nut-avatar-first-child类可以使用:first-child伪类替代，降低HTML结构的复杂度。
建议修改为：
.nut-avatar-group .nut-avatar:first-child {
margin-left: 0;
margin-right: 0;
}| .nut-avatar-large { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| width: 60px; | ||
| height: 60px; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
精简重复的样式
.nut-avatar-large、.nut-avatar-normal和.nut-avatar-small都有相同的display和布局属性，可以提取为公共类，减少代码冗余。
建议提取公共样式：
.nut-avatar-common {
display: flex;
justify-content: center;
align-items: center;
}
.nut-avatar-large,
.nut-avatar-normal,
.nut-avatar-small {
@extend .nut-avatar-common; /* 如果使用预处理器 */
/* 保留各自的尺寸属性 */
}Also applies to: 138-143, 153-159
xiaoyatong
changed the title
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
TextArea组件中添加了maxLength属性，设置为-1，允许输入长度无限制。样式更新
.nut-textarea-textarea的高度属性，增强了高度调整的灵活性。.cpoyText类，简化了样式。组件更新
TextArea组件的事件处理逻辑，确保更好的用户交互体验。