feat(dialog): add sizeDraggable to props#3875
feat(dialog): add sizeDraggable to props#3875FlowerBlackG wants to merge 14 commits intoTencent:developfrom
Conversation
FlowerBlackG
requested review from
HaixingOoO,
NWYLZW,
RylanBot,
ZWkang,
carolin913,
honkinglin and
uyarn
as code owners
|
|
commit: |
There was a problem hiding this comment.
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
sizeDraggableprop 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.
| if (sizeDraggableProps === undefined || typeof sizeDraggableProps === 'boolean') { | ||
| minWidth.current = undefined; | ||
| maxWidth.current = Number.MAX_VALUE; | ||
| minHeight.current = 0; |
There was a problem hiding this comment.
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; |
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
…esign-react into feat/sizeDraggableDialog
|
|
||
| // Do resize. | ||
| const dir = resizingDirection.current; | ||
| const {style} = dialogCardRef.current; |
There was a problem hiding this comment.
看起来没有习惯一键格式化代码...缺少空格 const { style }
| const onTopBorder = mouseY >= top - borderWidth && mouseY <= top + borderWidth; | ||
| const onBottomBorder = mouseY >= top + height - borderWidth && mouseY <= top + height + borderWidth; | ||
| if (onLeftBorder && onTopBorder) | ||
| return 'nw'; |
There was a problem hiding this comment.
既然前面变量叫 onLeftBorder 和 onTopBorder 了
感觉 return 'lt' 比较好
或者没必要简写...保留 return 'left-top' 也是合理的
2 participants
#3634
🤔 这个 PR 的性质是？
🔗 相关 Issue
#3634
💡 需求背景和解决方案
Dialog 允许开发者设置边缘拖拽改变大小。
📝 更新日志
☑️ 请求合并前的自查清单