ant-design/components/upload/interface.ts
Mehmet Yarar f6dc5f39e0
enhance: Improve the a11y of the upload progress bar (#42704)
* improve the a11y of the upload progress

* add a11y test, update snapshots

* pass aria props as part of restProps

* use kebab-case instead of camelCase for aria attributes

---------

Co-authored-by: afc163 <afc163@gmail.com>
2023-05-31 20:36:29 +08:00

168 lines
5.3 KiB
TypeScript
Executable File

import type {
RcFile as OriRcFile,
UploadRequestOption as RcCustomRequestOptions,
UploadProps as RcUploadProps,
} from 'rc-upload/lib/interface';
import type * as React from 'react';
import type { ProgressAriaProps, ProgressProps } from '../progress';
export interface RcFile extends OriRcFile {
readonly lastModifiedDate: Date;
}
export type UploadFileStatus = 'error' | 'success' | 'done' | 'uploading' | 'removed';
export interface HttpRequestHeader {
[key: string]: string;
}
export interface UploadFile<T = any> extends ProgressAriaProps {
uid: string;
size?: number;
name: string;
fileName?: string;
lastModified?: number;
lastModifiedDate?: Date;
url?: string;
status?: UploadFileStatus;
percent?: number;
thumbUrl?: string;
crossOrigin?: React.ImgHTMLAttributes<HTMLImageElement>['crossOrigin'];
originFileObj?: RcFile;
response?: T;
error?: any;
linkProps?: any;
type?: string;
xhr?: T;
preview?: string;
}
export interface InternalUploadFile<T = any> extends UploadFile<T> {
originFileObj: RcFile;
}
export interface UploadChangeParam<T = UploadFile> {
// https://github.com/ant-design/ant-design/issues/14420
file: T;
fileList: T[];
event?: { percent: number };
}
export interface ShowUploadListInterface<T = any> {
showRemoveIcon?: boolean;
showPreviewIcon?: boolean;
showDownloadIcon?: boolean;
removeIcon?: React.ReactNode | ((file: UploadFile<T>) => React.ReactNode);
downloadIcon?: React.ReactNode | ((file: UploadFile<T>) => React.ReactNode);
previewIcon?: React.ReactNode | ((file: UploadFile<T>) => React.ReactNode);
}
export interface UploadLocale {
uploading?: string;
removeFile?: string;
downloadFile?: string;
uploadError?: string;
previewFile?: string;
}
export type UploadType = 'drag' | 'select';
export type UploadListType = 'text' | 'picture' | 'picture-card' | 'picture-circle';
export type UploadListProgressProps = Omit<ProgressProps, 'percent' | 'type'>;
export type ItemRender<T = any> = (
originNode: React.ReactElement,
file: UploadFile<T>,
fileList: Array<UploadFile<T>>,
actions: {
download: () => void;
preview: () => void;
remove: () => void;
},
) => React.ReactNode;
type PreviewFileHandler = (file: File | Blob) => PromiseLike<string>;
type TransformFileHandler = (
file: RcFile,
) => string | Blob | File | PromiseLike<string | Blob | File>;
type BeforeUploadValueType = void | boolean | string | Blob | File;
export interface UploadProps<T = any> extends Pick<RcUploadProps, 'capture'> {
type?: UploadType;
name?: string;
defaultFileList?: Array<UploadFile<T>>;
fileList?: Array<UploadFile<T>>;
action?: string | ((file: RcFile) => string) | ((file: RcFile) => PromiseLike<string>);
directory?: boolean;
data?:
| Record<string, unknown>
| ((file: UploadFile<T>) => Record<string, unknown> | Promise<Record<string, unknown>>);
method?: 'POST' | 'PUT' | 'PATCH' | 'post' | 'put' | 'patch';
headers?: HttpRequestHeader;
showUploadList?: boolean | ShowUploadListInterface;
multiple?: boolean;
accept?: string;
beforeUpload?: (
file: RcFile,
FileList: RcFile[],
) => BeforeUploadValueType | Promise<BeforeUploadValueType>;
onChange?: (info: UploadChangeParam<UploadFile<T>>) => void;
onDrop?: (event: React.DragEvent<HTMLDivElement>) => void;
listType?: UploadListType;
className?: string;
onPreview?: (file: UploadFile<T>) => void;
onDownload?: (file: UploadFile<T>) => void;
onRemove?: (file: UploadFile<T>) => void | boolean | Promise<void | boolean>;
supportServerRender?: boolean;
style?: React.CSSProperties;
disabled?: boolean;
prefixCls?: string;
customRequest?: (options: RcCustomRequestOptions) => void;
withCredentials?: boolean;
openFileDialogOnClick?: boolean;
locale?: UploadLocale;
id?: string;
previewFile?: PreviewFileHandler;
/** @deprecated Please use `beforeUpload` directly */
transformFile?: TransformFileHandler;
iconRender?: (file: UploadFile<T>, listType?: UploadListType) => React.ReactNode;
isImageUrl?: (file: UploadFile<T>) => boolean;
progress?: UploadListProgressProps;
itemRender?: ItemRender<T>;
/** Config max count of `fileList`. Will replace current one when `maxCount` is 1 */
maxCount?: number;
children?: React.ReactNode;
}
export interface UploadState<T = any> {
fileList: UploadFile<T>[];
dragState: string;
}
export interface UploadListProps<T = any> {
listType?: UploadListType;
onPreview?: (file: UploadFile<T>) => void;
onDownload?: (file: UploadFile<T>) => void;
onRemove?: (file: UploadFile<T>) => void | boolean;
items?: Array<UploadFile<T>>;
progress?: UploadListProgressProps;
prefixCls?: string;
className?: string;
showRemoveIcon?: boolean;
showDownloadIcon?: boolean;
showPreviewIcon?: boolean;
removeIcon?: React.ReactNode | ((file: UploadFile) => React.ReactNode);
downloadIcon?: React.ReactNode | ((file: UploadFile) => React.ReactNode);
previewIcon?: React.ReactNode | ((file: UploadFile) => React.ReactNode);
locale: UploadLocale;
previewFile?: PreviewFileHandler;
iconRender?: (file: UploadFile<T>, listType?: UploadListType) => React.ReactNode;
isImageUrl?: (file: UploadFile<T>) => boolean;
appendAction?: React.ReactNode;
appendActionVisible?: boolean;
itemRender?: ItemRender<T>;
/**
* @internal Only the internal remove button is provided for use
*/
disabled?: boolean;
}