mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 22:36:31 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

feat(upload): support ref.nativeElenent (#48210)

Browse Source 
* feat(upload): support ref.nativeElenent

* test: add unit test

* Update components/upload/__tests__/upload.test.tsx

Signed-off-by: 红 <wxh16144@qq.com>

---------

Signed-off-by: 红 <wxh16144@qq.com>
This commit is contained in:
红 2024-04-01 21:42:17 +08:00 committed by GitHub
parent bd9444fa35
commit a038583155
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
components/upload/Upload.tsx
View File

@ -32,6 +32,11 @@ export interface UploadRef<T = any> {
onError: (error: Error, response: any, file: RcFile) => void;
fileList: UploadFile<T>[];
upload: RcUpload | null;
/**
* Get native element for wrapping upload
* @since 5.17.0
*/
nativeElement: HTMLSpanElement | null;
}
const InternalUpload: React.ForwardRefRenderFunction<UploadRef, UploadProps> = (props, ref) => {
@ -79,6 +84,7 @@ const InternalUpload: React.ForwardRefRenderFunction<UploadRef, UploadProps> = (
const [dragState, setDragState] = React.useState<string>('drop');
const upload = React.useRef<RcUpload>(null);
const wrapRef = React.useRef<HTMLSpanElement>(null);
if (process.env.NODE_ENV !== 'production') {
const warning = devUseWarning('Upload');
@ -331,6 +337,7 @@ const InternalUpload: React.ForwardRefRenderFunction<UploadRef, UploadProps> = (
onError,
fileList: mergedFileList,
upload: upload.current,
nativeElement: wrapRef.current,
}));
const { getPrefixCls, direction, upload: ctxUpload } = React.useContext(ConfigContext);
@ -431,6 +438,8 @@ const InternalUpload: React.ForwardRefRenderFunction<UploadRef, UploadProps> = (
const mergedStyle: React.CSSProperties = { ...ctxUpload?.style, ...style };
// ======================== Render ========================
if (type === 'drag') {
const dragCls = classNames(hashId, prefixCls, `${prefixCls}-drag`, {
[`${prefixCls}-drag-uploading`]: mergedFileList.some((file) => file.status === 'uploading'),
@ -440,7 +449,7 @@ const InternalUpload: React.ForwardRefRenderFunction<UploadRef, UploadProps> = (
});
return wrapCSSVar(
<span className={mergedCls}>
<span className={mergedCls} ref={wrapRef}>
<div
className={dragCls}
style={mergedStyle}
@ -469,12 +478,14 @@ const InternalUpload: React.ForwardRefRenderFunction<UploadRef, UploadProps> = (
if (listType === 'picture-card' || listType === 'picture-circle') {
return wrapCSSVar(
<span className={mergedCls}>{renderUploadList(uploadButton, !!children)}</span>,
<span className={mergedCls} ref={wrapRef}>
{renderUploadList(uploadButton, !!children)}
</span>,
);
}
return wrapCSSVar(
<span className={mergedCls}>
<span className={mergedCls} ref={wrapRef}>
{uploadButton}
{renderUploadList()}
</span>,

7
components/upload/__tests__/upload.test.tsx
View File

@ -1082,4 +1082,11 @@ describe('Upload', () => {
expect(file.status).toBe('done');
});
});
it('container ref', () => {
const ref = React.createRef<any>();
render(<Upload ref={ref} />);
expect(ref.current?.nativeElement).toBeTruthy();
expect(ref.current?.nativeElement instanceof HTMLElement).toBeTruthy();
});
});