getTargetContainer getPopupContainer support ShadowRoot type#55278
getTargetContainer getPopupContainer support ShadowRoot type#55278afc163 merged 2 commits intoant-design:masterfrom
Conversation
Signed-off-by: smallbun <30397655+leshalv@users.noreply.github.com>
|
|
👁 Visual Regression Report for PR #55278 Passed ✅
🎊 Congrats! No visual-regression diff found. 
|
|
|
|
Summary of ChangesHello @leshalv, 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! This pull request enhances the Highlights
Using Gemini Code AssistThe 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
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 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
|
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. 📝 WalkthroughSummary by CodeRabbit
Walkthrough在 Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
There was a problem hiding this comment.
Code Review
This pull request adds support for ShadowRoot as a return type for getTargetContainer and getPopupContainer in ConfigProvider. This is a useful enhancement for using antd components within a Shadow DOM. However, the change is incomplete. The corresponding types in the config context and the API documentation have not been updated. Additionally, there are no tests to validate this new functionality. I've left a comment with suggestions to address these points to make the change complete.
Bundle ReportBundle size has no change ✅ |
More templates
commit: |
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
components/config-provider/index.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx}: Use TypeScript and React for implementation
Use early returns to improve readability
Props and variable names use camelCase
Props naming: initialization asdefault+ PropName (e.g., defaultValue)
Props naming: forceRender for forced render
Props naming: child force render asforce+ SubComponentName +Render
Props naming: child render asSubComponentName+Render
Props naming: dataSource for data source
Props naming: useopeninstead ofvisiblefor open state
Props naming: display-related asshow+ PropName
Props naming: capability asPropName+able
Props naming: disabled for disabled state
Props naming: extra for extra content
Props naming: icon for icon
Props naming: trigger for trigger elements
Props naming: className for CSS class
Event naming:on+ EventName
Event naming: child component eventson+ SubComponentName + EventName
Event naming: before + EventName for pre events
Event naming: after + EventName for post events
Event naming:on+ EventName +Completefor completion
Component token naming: variant(optional) + semantic parts + css property + size/disabled(optional)
Provide accurate TypeScript types for all components and functions
Avoidany; prefer precise types
Use interfaces instead of type aliases for object shapes
Export all public interface types
No TypeScript errors or warnings in compilation
Component props must be defined with interface namedComponentNameProps
Define component state interfaces likeComponentNameStatewhere applicable
All callback types must declare parameter and return types explicitly
Use generics appropriately for flexibility
Use intersection types (&) to combine types when needed
Use literal union types for finite option sets
Avoid enum; prefer union types withas const
Prefer type inference; use assertions only when necessary
Files:
components/config-provider/index.tsx
**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
**/*.tsx: Prefer functional components and Hooks; avoid class components
Use React.memo, useMemo, and useCallback appropriately for performance
Component names use PascalCase
Components should expose a ref prop with shape { nativeElement: HTMLElement; focus: VoidFunction; ... }
Component ref types should be explicit using React.ForwardRefRenderFunction
Avoid unnecessary re-renders; optimize style computation; optimize assets; support tree-shaking
Files:
components/config-provider/index.tsx
components/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Use useLocale exported from components/locale/index.tsx to read localized strings and merge with prop locale
Files:
components/config-provider/index.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (14)
- GitHub Check: build preview
- GitHub Check: build
- GitHub Check: build
- GitHub Check: test-react-latest (dom, 2/2)
- GitHub Check: test lib/es module (es, 2/2)
- GitHub Check: test-react-latest (dom, 1/2)
- GitHub Check: test lib/es module (es, 1/2)
- GitHub Check: visual-diff snapshot (1/2)
- GitHub Check: test-react-legacy (17, 2/2)
- GitHub Check: test-react-legacy (16, 2/2)
- GitHub Check: visual-diff snapshot (2/2)
- GitHub Check: test-react-legacy (17, 1/2)
- GitHub Check: test-react-legacy (16, 1/2)
- GitHub Check: size
| getTargetContainer?: () => HTMLElement | Window | ShadowRoot; | ||
| getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement | ShadowRoot; |
There was a problem hiding this comment.
🧩 Analysis chain
类型扩展支持 Shadow DOM，需验证下游消费者。
类型扩展为 ShadowRoot 是向后兼容的改动，支持 Web Components 场景。但需要确保：
ConfigConsumerProps接口（从./context导入）中的对应类型也已同步更新- 所有使用这些回调的组件（如 Modal、Drawer、Tooltip、Popover、Dropdown 等）能够正确处理
ShadowRoot作为容器节点
运行以下脚本验证类型定义的一致性和使用情况：
🏁 Script executed:
#!/bin/bash
# 验证 ConfigConsumerProps 接口中的类型定义是否已同步更新
echo "=== 检查 context.tsx 中的 ConfigConsumerProps 定义 ==="
ast-grep --pattern $'export interface ConfigConsumerProps {
$$$
getTargetContainer?: $RETURN_TYPE
$$$
}'
ast-grep --pattern $'export interface ConfigConsumerProps {
$$$
getPopupContainer?: $RETURN_TYPE
$$$
}'
echo -e "\n=== 查找 getTargetContainer 的使用位置 ==="
rg -n --type=ts --type=tsx -C3 'getTargetContainer' -g '!node_modules' -g '!*.test.*' -g '!*.spec.*'
echo -e "\n=== 查找 getPopupContainer 的使用位置 ==="
rg -n --type=ts --type=tsx -C3 'getPopupContainer' -g '!node_modules' -g '!*.test.*' -g '!*.spec.*'
echo -e "\n=== 检查可能受影响的 Overlay 相关组件 ==="
fd -e tsx -e ts 'modal|drawer|tooltip|popover|dropdown|popup' components/Length of output: 1842
继续验证 ConfigConsumerProps 接口定义是否已包含 ShadowRoot。
🏁 Script executed:
#!/bin/bash
# 查找并打印 ConfigConsumerProps 接口定义
context_file=$(fd -e tsx -e ts 'context.tsx')
echo "Context file: $context_file"
sed -n '1,200p' "$context_file" | sed -n '/export interface ConfigConsumerProps/,/}/p'Length of output: 686
继续验证 ConfigConsumerProps 接口定义是否已包含 ShadowRoot。
🏁 Script executed:
#!/bin/bash
# 查找并打印 components/config-provider 下定义 ConfigConsumerProps 的文件及接口内容
echo "ConfigConsumerProps 定义文件路径："
fd -e tsx 'ConfigConsumerProps' components/config-provider
echo -e "\n接口定义内容："
fd -e tsx 'ConfigConsumerProps' components/config-provider | xargs sed -n '/export interface ConfigConsumerProps/,/}/p'Length of output: 36
继续查找 ConfigConsumerProps 定义位置：
🏁 Script executed:
#!/bin/bash
# 全局查找 ConfigConsumerProps 定义
echo "=== 全局查找 ConfigConsumerProps ==="
rg -n "ConfigConsumerProps" -g "!node_modules"Length of output: 5088
继续验证 ConfigConsumerProps 接口定义是否已包含 ShadowRoot。
🏁 Script executed:
#!/bin/bash
# 打印 ConfigConsumerProps 接口定义
sed -n '/^export interface ConfigConsumerProps/,/^}/p' components/config-provider/context.tsLength of output: 916
在 context.ts 中同步扩展容器返回类型
将 components/config-provider/context.ts 中 ConfigConsumerProps 接口修改为：
getTargetContainer?: () => HTMLElement | Window | ShadowRoot;
getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement | ShadowRoot;以匹配 ConfigProviderProps 中的类型扩展。
🤖 Prompt for AI Agents
In components/config-provider/index.tsx around lines 145 to 146, the exported
function types allow getTargetContainer to return HTMLElement | Window |
ShadowRoot and getPopupContainer to return HTMLElement | ShadowRoot; update the
matching interface in components/config-provider/context.ts
(ConfigConsumerProps) so its getTargetContainer?: () => HTMLElement | Window |
ShadowRoot and getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement |
ShadowRoot, ensuring any imports/types referenced remain valid and run
type-checks to catch any downstream mismatches.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #55278 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 776 776
Lines 14122 14122
Branches 3752 3752
=========================================
Hits 14122 14122 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
components/image/__tests__/index.test.tsx (1)
92-94: 考虑使用泛型参数替代类型断言以提升代码清晰度。当前实现使用了双重断言（
!和as HTMLElement），虽然功能正确，但可以通过querySelector的泛型参数来简化，使意图更加明确。应用以下修改来改进代码：
<ConfigProvider - getPopupContainer={() => document.querySelector('.container')! as HTMLElement} + getPopupContainer={() => document.querySelector<HTMLElement>('.container')!} >
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
components/image/__tests__/index.test.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx}: Use TypeScript and React for implementation
Use early returns to improve readability
Props and variable names use camelCase
Props naming: initialization asdefault+ PropName (e.g., defaultValue)
Props naming: forceRender for forced render
Props naming: child force render asforce+ SubComponentName +Render
Props naming: child render asSubComponentName+Render
Props naming: dataSource for data source
Props naming: useopeninstead ofvisiblefor open state
Props naming: display-related asshow+ PropName
Props naming: capability asPropName+able
Props naming: disabled for disabled state
Props naming: extra for extra content
Props naming: icon for icon
Props naming: trigger for trigger elements
Props naming: className for CSS class
Event naming:on+ EventName
Event naming: child component eventson+ SubComponentName + EventName
Event naming: before + EventName for pre events
Event naming: after + EventName for post events
Event naming:on+ EventName +Completefor completion
Component token naming: variant(optional) + semantic parts + css property + size/disabled(optional)
Provide accurate TypeScript types for all components and functions
Avoidany; prefer precise types
Use interfaces instead of type aliases for object shapes
Export all public interface types
No TypeScript errors or warnings in compilation
Component props must be defined with interface namedComponentNameProps
Define component state interfaces likeComponentNameStatewhere applicable
All callback types must declare parameter and return types explicitly
Use generics appropriately for flexibility
Use intersection types (&) to combine types when needed
Use literal union types for finite option sets
Avoid enum; prefer union types withas const
Prefer type inference; use assertions only when necessary
Files:
components/image/__tests__/index.test.tsx
**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
**/*.tsx: Prefer functional components and Hooks; avoid class components
Use React.memo, useMemo, and useCallback appropriately for performance
Component names use PascalCase
Components should expose a ref prop with shape { nativeElement: HTMLElement; focus: VoidFunction; ... }
Component ref types should be explicit using React.ForwardRefRenderFunction
Avoid unnecessary re-renders; optimize style computation; optimize assets; support tree-shaking
Files:
components/image/__tests__/index.test.tsx
**/__tests__/**/?(*.)test.tsx
📄 CodeRabbit inference engine (AGENTS.md)
**/__tests__/**/?(*.)test.tsx: Use Jest and React Testing Library for unit tests
Use snapshot testing for UI components where appropriate
Test files should be named index.test.tsx or xxx.test.tsx under tests
Files:
components/image/__tests__/index.test.tsx
components/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Use useLocale exported from components/locale/index.tsx to read localized strings and merge with prop locale
Files:
components/image/__tests__/index.test.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (15)
- GitHub Check: lint
- GitHub Check: test lib/es module (es, 2/2)
- GitHub Check: test lib/es module (es, 1/2)
- GitHub Check: test-react-legacy (16, 2/2)
- GitHub Check: test-react-legacy (16, 1/2)
- GitHub Check: build
- GitHub Check: test-react-latest (dom, 1/2)
- GitHub Check: test-react-legacy (17, 1/2)
- GitHub Check: test-react-latest (dom, 2/2)
- GitHub Check: test-react-legacy (17, 2/2)
- GitHub Check: build preview
- GitHub Check: build
- GitHub Check: visual-diff snapshot (2/2)
- GitHub Check: visual-diff snapshot (1/2)
- GitHub Check: size
|
看一下 coderabbitai 评论，还有一个地方没改 |
|
中文版模板 / Chinese template
🤔 This is a ...
🔗 Related Issues
💡 Background and Solution
📝 Change Log