feat(upload): expand the scope of the click event of draggable to the entire card area
#3606
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
… to the entire card area chore: 上传事件添加 `stopPropagation`
RSS1102
requested review from
HaixingOoO,
NWYLZW,
ZWkang,
carolin913,
honkinglin and
uyarn
as code owners
commit: |
Contributor
|
|
HaixingOoO
approved these changes
Jun 9, 2025
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR expands the clickable area for the "display" theme in the upload component, ensuring that the click event is triggered correctly across the entire card area and that event propagation is properly controlled.
- Updated triggerUpload definitions in several components to accept a MouseEvent parameter.
- Added an onClick handler in the DraggerFile component and updated the useUpload hook to stop event propagation.
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| packages/components/upload/themes/ImageCard.tsx | Updated triggerUpload’s signature to include the event parameter. |
| packages/components/upload/themes/DraggerFile.tsx | Added onClick handler and updated triggerUpload’s type and usage with proper memoization. |
| packages/components/upload/themes/CustomFile.tsx | Updated triggerUpload’s signature to include the event parameter with React-specific typing. |
| packages/components/upload/hooks/useUpload.ts | Modified triggerUpload to accept an optional event parameter and stop its propagation. |
Comments suppressed due to low confidence (2)
packages/components/upload/themes/CustomFile.tsx:13
- Ensure consistent event types for triggerUpload across components. Currently, CustomFile.tsx uses React.MouseEvent while other components (e.g., ImageCard.tsx and DraggerFile.tsx) use MouseEvent; consider unifying these types to avoid potential type mismatches.
triggerUpload?: (e: React.MouseEvent<HTMLDivElement>) => void;
packages/components/upload/hooks/useUpload.ts:345
- Consider standardizing the event type for the triggerUpload function here. If the UI components expect a React.MouseEvent, align this hook's event type accordingly.
e?.stopPropagation?.();
Collaborator
|
theme=display? |
RSS1102
changed the title
theme="display" to the entire card areatheme="file" to the entire card area
RSS1102
changed the title
theme="file" to the entire card areadraggable to the entire card area
Collaborator
Author
已更改，看是否需要二次修改更新日志 |
RSS1102
changed the title
draggable to the entire card areadraggable to the entire card area
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
chore: 上传事件添加
stopPropagation🤔 这个 PR 的性质是？
🔗 相关 Issue
sync Tencent/tdesign-vue-next#5575
💡 需求背景和解决方案
此次更改是为了让用户可以在点击这个区域都可以触发上传文件事件，避免用户点击操作触发上传事件困难。
📝 更新日志
feat(Upload): 扩大
draggable的点击事件触发热区至整个卡片区域本条 PR 不需要纳入 Changelog
☑️ 请求合并前的自查清单