fix: repair spin classname is invalid without tip #766
Conversation
|
Important Review skippedReview was skipped due to path filters ⛔ Files ignored due to path filters (4)
CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including You can disable this status message by setting the Walkthrough该拉取请求对 Changes
Possibly related PRs
Suggested labels
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: 1
🧹 Outside diff range and nitpick comments (3)
packages/base/src/spin/spin.type.ts (1)
76-76: 建议为 uniqueClassName 添加 JSDoc 注释
为了保持代码文档的一致性，建议添加与其他属性相同风格的 JSDoc 注释，说明该属性的用途。
建议添加如下注释：
+ /**
+ * @en Unique className for the spin component
+ * @cn Spin 组件的唯一类名
+ */
uniqueClassName?: stringpackages/base/src/spin/spin.tsx (1)
78-78: 修复逻辑正确，建议添加注释说明
className 的条件传递逻辑修复了没有 tip 时样式失效的问题。建议添加注释说明这个行为。
建议添加如下注释：
+ // 当有 tip 时，className 应用在外层容器上
+ // 当没有 tip 时，className 直接应用在 spin 组件上
return <Comp {...props} color={color} style={style} className={!tip ? className : undefined} />;packages/base/src/spin/spins.tsx (1)
Line range hint 1-244: 建议优化代码结构以减少重复
当前代码中有大量相似的组件定义模式，建议考虑提取共同逻辑：
- 样式处理逻辑可以抽取为公共函数
- 可以创建高阶组件来处理通用的 props 处理逻辑
示例重构方案：
const withSpinStyles = (Component: React.ComponentType<SpinProps>, styleName: keyof SpinClasses) => {
return (props: SpinProps) => {
const { jssStyle, ...rest } = props;
const spinStyles = jssStyle?.spin?.() || ({} as SpinClasses);
return <Component {...rest} uniqueClassName={spinStyles[styleName]} />;
};
};📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
packages/shineout/src/spin/__test__/__snapshots__/spin.spec.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (4)
- packages/base/src/spin/base.tsx (2 hunks)
- packages/base/src/spin/spin.tsx (1 hunks)
- packages/base/src/spin/spin.type.ts (1 hunks)
- packages/base/src/spin/spins.tsx (13 hunks)
🔇 Additional comments (5)
packages/base/src/spin/base.tsx (2)
10-10: 属性解构中添加 uniqueClassName 属性
在组件的属性解构中添加 uniqueClassName 是一个合理的改进，这样可以确保在没有 tip 属性时类名也能正常工作。
31-31: 验证类名生成逻辑的改进
类名生成逻辑的修改看起来合理，但建议验证在不同场景下的表现。
✅ Verification successful
Let me gather more information about the Spin component usage and its tests.
根据已获得的信息，我可以生成最终响应了。
类名生成逻辑验证通过
通过查看 Spin 组件的源码和测试用例，可以确认：
- 类名生成逻辑使用了标准的 classNames 工具函数
- 测试用例完整覆盖了类名相关的场景
- 组件具有完善的样式和类名测试
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：验证 Spin 组件在其他文件中的使用情况
# 预期：确认类名相关的修改不会影响现有功能
# 测试：搜索 Spin 组件的使用场景
rg -l "Spin" --type tsx
# 测试：检查是否有相关的测试文件
fd -e test.tsx -e spec.tsx
Length of output: 3237
Script:
#!/bin/bash
# 查找 Spin 组件的测试文件内容
cat packages/shineout/src/spin/__test__/spin.spec.tsx
# 查找 Spin 组件的使用情况，使用正确的文件类型
rg -l "Spin" --type ts --type tsx --type jsx
# 检查类名相关的测试用例
rg "className" packages/shineout/src/spin/__test__/spin.spec.tsx
Length of output: 9496
Script:
#!/bin/bash
# 检查 base.tsx 中的类名生成逻辑
cat packages/base/src/spin/base.tsx
# 检查其他组件中是否有类似的类名生成逻辑
rg "classNames\(.*styles\?\..*\)" --type ts --type tsx
# 检查是否有其他使用 uniqueClassName 的地方
rg "uniqueClassName" --type ts --type tsx
Length of output: 1258
packages/base/src/spin/spin.type.ts (1)
76-76: 新属性 uniqueClassName 的实现看起来不错！
属性类型定义正确，且与现有的 className 属性模式保持一致。这个改动很好地解决了没有 tip 时 className 失效的问题。
packages/base/src/spin/spin.tsx (1)
78-78: 建议验证样式在不同场景下的表现
请确认以下两种场景的样式是否正常：
- 有 tip 时，样式是否正确应用在外层容器
- 没有 tip 时，样式是否正确应用在 spin 组件本身
✅ Verification successful
Let me gather more information about the Spin component implementation and its usage.
Let me check the actual Spin component implementation to understand how the className is handled.
Let me try a different approach to check the Spin component implementation.
样式处理逻辑正确，无需修改
根据源码分析，当前的样式处理逻辑是合理的：
-
有 tip 时：
- className 会应用在外层容器
contentClass上 - Spin 组件本身不带 className，避免样式重复应用
- className 会应用在外层容器
-
没有 tip 时：
- className 直接应用在 Spin 组件上
- 不会创建额外的容器层级
这种处理方式可以确保样式在不同场景下都能正确应用，不会出现样式冲突或重复的问题。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 搜索 Spin 组件的使用场景，验证不同 tip 配置下的样式应用
rg -l "Spin.*className.*tip"
Length of output: 144
Script:
#!/bin/bash
# Check the Spin component implementation
ast-grep --pattern 'export $_ function Spin' -A 20
# Check actual usage in docs
rg "Spin.*className.*tip" -A 3
Length of output: 53193
Script:
#!/bin/bash
# Check the Spin component implementation and its wrapper
rg -A 10 "function Spin" packages/base/src/spin/
Length of output: 50
Script:
#!/bin/bash
# Check the content of the Spin component file
cat packages/base/src/spin/spin.tsx
# Check for any tests related to className behavior
rg -l "className.*tip" packages/base/src/spin/
Length of output: 2740
packages/base/src/spin/spins.tsx (1)
47-47: 统一使用 uniqueClassName 替代 className
所有的 Spin 变体组件都从使用 className 切换到了 uniqueClassName。这个改动是为了解决当 tip 属性未提供时类名失效的问题。这种统一的修改方式有助于确保样式的一致性和可预测性。
不过建议考虑以下几点：
- 确保
uniqueClassName在 TypeScript 类型定义中已正确声明 - 考虑添加相关测试用例，验证无
tip时的样式是否正确应用
Also applies to: 63-63, 74-74, 83-83, 97-97, 115-115, 127-127, 137-137, 147-147, 164-164, 178-178, 204-204, 223-223
| @@ -112,7 +112,7 @@ const ScaleCircle = (props: SpinProps) => { | |||
| <BaseSpin | |||
| {...props} | |||
| count={12} | |||
| className={spinStyles.fadingCircle} | |||
| uniqueClassName={spinStyles.fadingCircle} | |||
There was a problem hiding this comment.
ScaleCircle 组件使用了错误的样式类名
ScaleCircle 组件错误地使用了 fadingCircle 的样式类名，这可能会导致样式混乱。
建议修改为：
- uniqueClassName={spinStyles.fadingCircle}
+ uniqueClassName={spinStyles.scaleCircle}📝 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.
| uniqueClassName={spinStyles.fadingCircle} | |
| uniqueClassName={spinStyles.scaleCircle} |
Types of changes
Changelog
Summary by CodeRabbit
新功能
Spin组件中添加了uniqueClassName属性，以增强类名生成。Default、ChasingDots等）现在支持uniqueClassName属性。修复
className属性。