Skip to content

feat: add -movable classname#497

Open
ug-hero wants to merge 2 commits intoreact-component:masterfrom
ug-hero:feat/addClass
Open

feat: add -movable classname#497
ug-hero wants to merge 2 commits intoreact-component:masterfrom
ug-hero:feat/addClass

Conversation

@ug-hero
Copy link

@ug-hero ug-hero commented Mar 13, 2026

ant-design/ant-design#57249

新增一个-movable 类名,在antd侧,单独写-movable的样式cursor: 'grab'

Summary by CodeRabbit

发布说明

  • 新功能

    • 预览组件新增“可移动”样式支持:当启用时,会在预览根元素应用对应样式以实现可移动相关视觉行为。
  • 测试

    • 增强了预览相关测试,新增用例验证根据可移动属性动态添加或移除对应样式类,确保行为一致。

@vercel
Copy link

vercel bot commented Mar 13, 2026

Someone is attempting to deploy a commit to the React Component Team on Vercel.

A member of the Team first needs to authorize it.

@gemini-code-assist
Copy link
Contributor

Summary of Changes

Hello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

此拉取请求引入了一个新的功能,允许 Preview 组件根据 movable 属性动态应用一个 CSS 类名。这使得开发者能够更灵活地控制可移动元素的样式,例如设置拖拽光标,从而提升用户体验和界面的可定制性。

Highlights

  • 新增可移动类名: 在 Preview 组件中,根据 movable 属性的值,动态添加或移除一个名为 ${prefixCls}-movable 的 CSS 类名,以便在 Ant Design 侧可以单独为可移动元素设置 cursor: 'grab' 等样式。
  • 增加测试用例: 为新添加的 movable 类名功能增加了测试用例,确保其根据 movable prop 正确渲染和移除。

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog
  • src/Preview/index.tsx
    • 根据 movable 属性动态添加 ${prefixCls}-movable 类名。
  • tests/preview.test.tsx
    • 调整了 ReactDialog 的导入顺序。
    • 新增了一个测试用例,验证 movable 属性是否正确控制 ${prefixCls}-movable 类名的渲染。
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

@coderabbitai
Copy link

coderabbitai bot commented Mar 13, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: e7c00c46-9a24-4fc3-84ea-d68e1a3f6377

📥 Commits

Reviewing files that changed from the base of the PR and between 42df24b and 427d62f.

📒 Files selected for processing (1)
  • tests/preview.test.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • tests/preview.test.tsx

Walkthrough

在 Preview 组件根元素上根据 movable 属性条件性添加 ${prefixCls}-movable CSS 类,并为此添加了对应的单元测试以验证类的添加与移除。

Changes

Cohort / File(s) Summary
Preview 组件
src/Preview/index.tsx
在 Preview 根元素中添加条件性 CSS 类 ${prefixCls}-movable,当 movabletrue 时应用该类。
Preview 测试
tests/preview.test.tsx
调整导入(添加 Dialog 的导入)并新增测试用例:验证在 movabletrue 时根元素含 rc-image-preview-movable 类,重渲染为 movable: false 时类被移除。

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 分钟

Possibly related PRs

Suggested reviewers

  • zombieJ
  • thinkasany

兔子诗

🐰 轻轻一跳加个类,预览根上风舞开,
属性为真便可见,测试来回又确认,
小改动,大欢喜,代码整洁心更安。

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 标题清晰简洁,准确概括了PR的主要变更:添加-movable类名功能,与代码变更内容完全相符。
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
📝 Coding Plan
  • Generate coding plan for human review comments

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Tip

You can validate your CodeRabbit configuration file in your editor.

If your editor has YAML language server, you can enable auto-completion and validation by adding # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json at the top of your CodeRabbit configuration file.

Copy link
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

本次 PR 为 Preview 组件添加了 -movable 类名,用于支持 movable 状态下的样式自定义。相关实现逻辑清晰,并且补充了完整的单元测试来覆盖默认开启和手动关闭 movable 时的场景。整体来看没有问题。

@ug-hero
Copy link
Author

ug-hero commented Mar 14, 2026

看了一下测试用例的报错应该是master上的代码,我试着一些方法改一下,没搞成功

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant