-
Notifications
You must be signed in to change notification settings - Fork 357
feat(dialog): add sizeDraggable to props #3875
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: develop
Are you sure you want to change the base?
feat(dialog): add sizeDraggable to props #3875
Conversation
commit: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
This PR adds a sizeDraggable
property to the Dialog component that allows users to resize dialogs by dragging their edges. The feature includes customizable size limits and integrates with the existing drag functionality.
- Adds a new
sizeDraggable
prop with support for boolean or object configuration with size limits - Implements edge-based resizing with cursor feedback and collision detection
- Integrates with existing dialog drag functionality to prevent conflicts
Reviewed Changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 5 comments.
Show a summary per file
File | Description |
---|---|
packages/components/hooks/useMouseEvent.ts | Adds alwaysEmitOnMove option to emit mouse events even when not actively dragging |
packages/components/dialog/type.ts | Defines the sizeDraggable prop and DialogSizeDragLimit interface |
packages/components/dialog/hooks/useDialogResize.ts | New hook implementing the resize functionality with edge detection and size constraints |
packages/components/dialog/hooks/useDialogDrag.ts | Updates drag hook to avoid conflicts with resize functionality |
packages/components/dialog/dialog.md | Chinese documentation for the new prop |
packages/components/dialog/dialog.en-US.md | English documentation for the new prop |
packages/components/dialog/defaultProps.ts | Sets default value for sizeDraggable to false |
packages/components/dialog/Dialog.tsx | Integrates resize hook and prevents overlay clicks during resize |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
|
||
const minWidth = React.useRef(0); | ||
const maxWidth = React.useRef(Number.MAX_VALUE); | ||
const minHeight = React.useRef<number|undefined>(undefined); // If undefined, set to current height on first drag (lower than which causes buttons overflow). |
Copilot
AI
Oct 9, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Missing space after pipe character in type annotation.
const minHeight = React.useRef<number|undefined>(undefined); // If undefined, set to current height on first drag (lower than which causes buttons overflow). | |
const minHeight = React.useRef<number | undefined>(undefined); // If undefined, set to current height on first drag (lower than which causes buttons overflow). |
Copilot uses AI. Check for mistakes.
if (sizeDraggableProps === undefined || typeof sizeDraggableProps === 'boolean') { | ||
minWidth.current = undefined; | ||
maxWidth.current = Number.MAX_VALUE; | ||
minHeight.current = 0; |
Copilot
AI
Oct 9, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Inconsistent handling of undefined values. Line 72 sets minWidth.current = undefined
but line 74 sets minHeight.current = 0
. Both should handle undefined consistently or there should be a clear reason for the difference.
minHeight.current = 0; | |
minHeight.current = undefined; |
Copilot uses AI. Check for mistakes.
#3634
🤔 这个 PR 的性质是?
🔗 相关 Issue
#3634
💡 需求背景和解决方案
Dialog 允许开发者设置边缘拖拽改变大小。
📝 更新日志
☑️ 请求合并前的自查清单