feat: support custom cover placement #433
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough本次变更为图片组件的预览遮罩（cover）引入了位置自定义功能，包括样式、组件逻辑、文档和测试的同步更新。新增了 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ImageComponent
participant PreviewOverlay
User->>ImageComponent: 选择 cover 位置（top/bottom/center）
ImageComponent->>PreviewOverlay: 渲染带 placement 的 cover 配置
PreviewOverlay-->>User: 按指定位置展示遮罩内容
Suggested reviewers
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
docs/examples/coverPlacement.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. tests/basic.test.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/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. ✨ Finishing Touches
🧪 Generate unit tests
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:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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 ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #433 +/- ##
=======================================
Coverage 99.40% 99.41%
=======================================
Files 17 17
Lines 504 510 +6
Branches 146 152 +6
=======================================
+ Hits 501 507 +6
Misses 3 3 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
![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 (1)
src/Image.tsx (1)
128-134: 简化提取逻辑以提高可读性。当前的提取逻辑存在冗余检查，可以简化为更清晰的实现：
- const coverPlacement = typeof cover === 'object' && (cover as CoverConfig).placement ? - (cover as CoverConfig).placement || 'center' : - 'center'; - - const coverNode = typeof cover === 'object' && (cover as CoverConfig).coverNode ? - (cover as CoverConfig).coverNode : - cover as React.ReactNode; + const isCoverConfig = cover && typeof cover === 'object' && 'placement' in cover; + const coverPlacement = isCoverConfig ? (cover as CoverConfig).placement || 'center' : 'center'; + const coverNode = isCoverConfig ? (cover as CoverConfig).coverNode : cover as React.ReactNode;这样可以避免重复的类型断言，提高代码可读性。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
tests/__snapshots__/basic.test.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (6)
assets/index.less(2 hunks)docs/demo/coverPlacement.md(1 hunks)docs/examples/coverPlacement.tsx(1 hunks)package.json(1 hunks)src/Image.tsx(3 hunks)tests/basic.test.tsx(2 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (3)
docs/examples/coverPlacement.tsx (2)
src/Image.tsx (1)
CoverConfig(22-25)docs/examples/common.tsx (1)
defaultIcons(14-24)
tests/basic.test.tsx (1)
src/Image.tsx (1)
CoverConfig(22-25)
src/Image.tsx (1)
src/Preview/index.tsx (1)
InternalPreviewConfig(70-108)
🔇 Additional comments (14)
package.json (1)
39-39: LGTM! 标准的测试快照更新脚本。这个新增的npm脚本是用于更新测试快照的标准配置，与新增的封面位置功能测试用例配套使用。
assets/index.less (2)
31-31: LGTM! 适当的溢出控制。为图片元素添加
overflow: hidden可以防止内容溢出，这对于新的封面覆盖层功能是必要的。
40-78: LGTM! 封面位置样式实现完善。CSS样式实现了三种封面位置选项的完整支持：
- 基础
.rc-image-cover类提供了合理的默认样式（绝对定位、弹性布局、过渡效果）- 三个位置变体（
-top、-bottom、-center）都有正确的定位逻辑- 使用弹性布局实现了良好的内容对齐
- 半透明背景和过渡效果提升了用户体验
样式设计与组件逻辑完美配合。
src/Image.tsx (4)
22-25: LGTM! 接口设计合理。
CoverConfig接口设计简洁明确，支持可选的封面节点和位置配置。类型定义准确支持三种位置选项。
27-27: LGTM! 类型扩展向后兼容。将
cover属性扩展为支持React.ReactNode | CoverConfig的联合类型，既保持了向后兼容性，又支持新的配置对象功能。
252-252: LGTM! 动态类名应用正确。正确地将封面位置应用到CSS类名中，实现了动态的样式切换功能。
258-258: LGTM! 渲染逻辑更新得当。使用提取出的
coverNode替代原始的cover，正确支持了新的配置对象结构。docs/demo/coverPlacement.md (1)
1-8: LGTM! 标准的演示文档结构。文档结构标准，正确引用了示例代码，为新功能提供了清晰的演示页面。
docs/examples/coverPlacement.tsx (3)
8-8: LGTM! 正确的类型使用。使用
CoverConfig["placement"]类型确保了状态与接口定义的一致性。
15-19: LGTM! 选项值与类型定义匹配。下拉选择器的选项值完全匹配
CoverConfig.placement的类型定义，确保了类型安全。
34-37: LGTM! 新功能演示完整。正确展示了新的封面配置对象用法，包括：
coverNode属性设置封面内容placement属性设置位置选择- 与状态管理的正确绑定
这是一个很好的功能演示示例。
tests/basic.test.tsx (3)
1-3: 导入语句更新合理新增的
act导入用于处理异步状态更新，CoverConfig类型导入用于类型安全，这些都是测试新功能所必需的。
6-12: 计时器设置实现正确使用
jest.useFakeTimers()和jest.useRealTimers()的beforeEach/afterEach模式是测试异步行为的最佳实践，确保每个测试都有干净的计时器环境。
112-159: cover placement测试用例实现全面这个测试用例很好地验证了新的cover placement功能：
- 正确使用了受控组件模式来测试动态placement变化
- 适当地使用
act()和jest.runAllTimers()来处理状态更新- 覆盖了所有三种placement选项（center、top、bottom）
- 验证了对应的CSS类名是否正确应用
测试逻辑清晰，断言准确，是一个高质量的集成测试。
| {cover !== false && canPreview && ( | ||
| <div | ||
| className={classnames(`${prefixCls}-cover`, classNames.cover)} | ||
| className={classnames(`${prefixCls}-cover`, classNames.cover, `${prefixCls}-cover-${coverPlacement}`)} |
There was a problem hiding this comment.
这里有支持语义化结构，可以直接在 antd 里通过 classNames.cover 来扩展
There was a problem hiding this comment.
不需要在rc支持placement么
There was a problem hiding this comment.
不需要再 rc 组件支持 placement api 的话，我周末直接在 antd 上搞吧
3 participants
Summary by CodeRabbit
新功能
测试
文档
杂项