feat: support classnames and styles #378
Conversation
Walkthrough此次提交在 Image、Operations 和 Preview 组件中新增了可选的 Changes
Sequence Diagram(s)sequenceDiagram
participant Parent as 父组件
participant ImageInternal as ImageInternal 组件
participant Preview as Preview 组件
participant Dialog as Dialog 组件
participant PreviewImage as PreviewImage 组件
Parent->>ImageInternal: 传递包含自定义 classNames/styles 的预览属性
ImageInternal->>Preview: 转发 classNames/styles 属性
Preview->>Dialog: 将属性传递给 Dialog 用于定制化
Preview->>PreviewImage: 将属性传递给 PreviewImage 用于定制化
sequenceDiagram
participant Parent as 父组件
participant Operations as Operations 组件
participant Toolbar as 工具栏元素
Parent->>Operations: 传递包含自定义 classNames/styles 的属性
Operations->>Toolbar: 应用 classNames/styles 到工具栏的相关元素
Possibly related PRs
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
src/Image.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the config "prettier" to extend from. Please check that the name of the config is correct. The config "prettier" was referenced from the config file in "/.eslintrc.js". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. src/Preview.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the config "prettier" to extend from. Please check that the name of the config is correct. The config "prettier" was referenced from the config file in "/.eslintrc.js". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🔇 Additional comments (13)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 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 (
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
![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 (5)
src/Operations.tsx (2)
7-7: 导入命名可能导致混淆，建议修改这里同时导入了两个命名相似的模块：一个是用于类名组合的函数
classnames，另一个是从./Image导入的类型classNames。虽然一个是函数一个是类型，但名称非常接近，可能导致开发者混淆。建议将从
./Image导入的类型改为更明确的命名，比如：- import classNames from 'classnames'; + import cn from 'classnames';Also applies to: 11-11
99-100: 变量命名建议与属性名保持一致属性名为
classNames但解构为imageClassNames，可能会使代码阅读者困惑。- classNames: imageClassNames, + classNames,src/Image.tsx (1)
38-40: 类型定义清晰且可复用
SemanticName类型的定义很好，将其作为独立的导出类型有助于在其他组件中重用。对ImagePreviewType接口的扩展也很干净。建议添加JSDoc注释说明这些属性的用途和用法，这将使API更加清晰。
+ /** + * 语义化元素名称，用于定义可自定义的样式目标 + */ export type SemanticName = 'root' | 'actions' | 'mask' | 'wrapper'; export interface ImagePreviewType extends Omit< IDialogPropTypes, 'mask' | 'visible' | 'closable' | 'prefixCls' | 'onClose' | 'afterClose' | 'wrapClassName' > { src?: string; visible?: boolean; minScale?: number; maxScale?: number; onVisibleChange?: (value: boolean, prevValue: boolean) => void; getContainer?: GetContainer | false; mask?: React.ReactNode; maskClassName?: string; + /** + * 自定义类名，按语义结构组织 + */ classNames?: Partial<Record<SemanticName, string>>; + /** + * 自定义样式，按语义结构组织 + */ styles?: Partial<Record<SemanticName, React.CSSProperties>>;Also applies to: 54-54
src/Preview.tsx (2)
139-140: 变量命名可以更一致与Operations组件类似，这里也将
classNames解构为imageClassNames，建议保持命名一致性，直接使用classNames。- classNames: imageClassNames, + classNames,
227-227: 格式化问题这里的右花括号单独一行，与项目的其他代码风格不一致。
- }; + }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/Image.tsx(5 hunks)src/Operations.tsx(4 hunks)src/Preview.tsx(8 hunks)tests/preview.test.tsx(1 hunks)
🔇 Additional comments (8)
tests/preview.test.tsx (1)
1033-1064: 测试用例补充得很全面！这个测试用例很好地验证了新增的自定义类名和样式功能。对mask、actions和root三个关键元素都进行了测试。
几点建议：
- 可以考虑也测试一下
wrapper语义名称的应用- 建议添加对样式应用失败的边缘情况测试，例如使用不存在的语义名称时的行为
src/Operations.tsx (2)
65-66: 新增的类型定义良好！使用
Partial<Record<SemanticName, string>>和Partial<Record<SemanticName, React.CSSProperties>>是很好的类型设计，允许用户只指定需要的部分样式和类名。
203-206: 样式和类名应用实现良好很好地在
classNames函数中使用了可选链操作符?.，确保即使imageClassNames为undefined也不会出错。对styles?.actions的应用也是如此。src/Image.tsx (2)
110-111: props解构和应用实现良好解构和条件应用classNames和styles的方式符合React最佳实践。使用了可选链操作符确保即使用户没有提供这些props也不会出错。
Also applies to: 230-234
261-263: 向子组件传递props的方式正确将新增的props正确地传递给了Preview组件，这样保证了样式可以向下传递。
src/Preview.tsx (3)
7-7: 从Image导入SemanticName类型是个好决定从Image导入SemanticName类型保证了类型定义的一致性，避免了重复定义可能导致的不一致。
45-45: 接口扩展使用Omit很合适使用
Omit<IDialogPropTypes, 'onClose' | 'styles' | 'classNames'>来扩展接口是正确的，避免了属性命名冲突。新增的classNames和styles属性定义与其他组件保持一致。Also applies to: 85-86
304-311: 样式和类名应用实现得很全面对Dialog组件应用classNames和styles的方式很全面，分别处理了mask、wrapper和root元素。向Operations组件传递这些props也保证了样式可以继续向下传递。
Also applies to: 313-313, 353-354
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #378 +/- ##
=======================================
Coverage 99.78% 99.79%
=======================================
Files 15 15
Lines 470 486 +16
Branches 134 139 +5
=======================================
+ Hits 469 485 +16
Misses 1 1 ☔ View full report in Codecov by Sentry. |
Summary by CodeRabbit