shineout

import * as React from 'react'; import { ReactNode } from 'react'; import { ObjectType, StandardProps } from '../@types/common'; import { PopoverConfirmProps } from '../Popover/Props'; import { GapProps } from '../Gap/Props'; import { ButtonProps } from '../Button/Props'; import { GetInputableProps } from '../Form/Props'; export interface FileRecord { name: string; process: number; status: number; blob: File; xhr?: Xhr | void; message?: string; } export declare type XhrType = Xhr; interface Xhr { status: number; statusText?: string; responseType?: XMLHttpRequestResponseType; responseText?: string; response?: any; abort?: () => void; [key: string]: any; } export interface SimpleUploadProps<ValueItem> extends StandardProps { /** * @en The type of the upload file, same as the standard,See details [accept](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) * @cn 上传文件类型, 和标准一致, 详见[accept](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) */ accept?: string; /** * @en The address for uploading * @cn 上传地址 */ action?: string | ((file: File) => string); /** * @en The callback of before upload * @cn 上传前的回调 */ beforeUpload?: (file: File, validatorHandle: (error: Error, _file: File) => boolean) => Promise<any>; /** * @en Upload placeholder * @cn 上传占位内容 */ children?: React.ReactNode; /** * @inner 废弃属性 */ cors?: boolean; /** * @inner 内部属性 */ imageStyle?: React.CSSProperties; /** * @en Request headers * @cn 请求头部信息 * @override object */ headers?: ObjectType; /** * @en The filename received by the server. If it is not filled in, use the name. * @cn 服务端接收的 filename，不填使用 name */ htmlName?: string; /** * @en Maximum number of uploaded files * @cn 最大上传文件数 * @default 100 */ limit?: number; /** * @en Whether multi-select files are supported * @cn 是否支持多选文件 * @default false */ multiple?: boolean; /** * @en The key access data in the Form * @cn Form 内存取数据的 key */ name?: string; /** * @en The callback function when the value is changing(Upload successfully, delete). values: Array, the value is the onSuccess returns * @cn 值改变回调(上传成功，删除)。values: 数组, 其每个值是 onSuccess 的返回值 */ onChange: (values: ValueItem[]) => void; /** * @en onProgress * @cn 上传中进度 */ onProgress?: ((fileInfo: FileRecord) => any) | false; /** * @en onSuccess * @cn 上传成功事件 * res: 上传接口返回结果 * file: 选择的文件 * data: 请求的数据 * xhr: 返回的 response */ onSuccess?: (res: any, file: File, data?: any, xhr?: Xhr) => ValueItem | Error; /** * @en onError callback * @cn 上传出错事件(props 中为 onHttpError) */ onError?: (xhr: Xhr, file: File) => string | undefined; /** * @en The callback function when to upload unsuccessfully. The returned result is as the error message. * @cn 上传失败时回调，返回结果作为错误内容提示 */ onHttpError?: (xhr: Xhr, file: File) => string | undefined; /** * @en The callback function before cancel upload file. * @cn 取消文件上传前的回调 */ beforeCancel?: (xhr: Xhr) => void; /** * @en Additional parameters submitted to the server * @cn 提交到服务端的额外参数 * @override object */ params?: ObjectType; /** * @en Whether to recover deleted values. * @cn 是否可以恢复已删除的value * @default true */ recoverAble?: boolean; /** * @en Display results * @cn 结果展示 * @default a => a */ renderResult?: (data: any) => React.ReactNode; /** * @en Custom upload method. options: the options of upload * @cn 自定义上传方法。 options: 上传的配置 * @override (options: UploadOptions) => Xhr | void */ request?: (options: UploadOptions<ValueItem>) => Xhr | void; /** * @inner 内部属性 */ validateHook: (func: () => Promise<any>) => void; /** * @en Check file before uploading * @cn 上传前文件校验，详见下方 Validator * @override Validator */ validator?: Validator; /** * @en value * @cn defaultValue 和 value 可以同时设置，defaultValue 会被value覆盖在 Form 中，value会被表单接管，value 无效 * @override any[] */ value: ValueItem[]; /** * @en custom Result component * @cn 自定义Result 组件 */ customResult?: React.ComponentType<{ value: any; files: any; onValueRemove: (index: number) => void; onFileRemove: (id: string) => void; }>; /** * @en Whether to take the cookie * @cn 是否携带 cookie * @default false */ withCredentials?: boolean; /** * @en callback when start * @cn 开始上传的回调函数 */ onStart?: (file: File) => void; /** * @en show upload list * @cn 是否展示上传列表 * @default true */ showUploadList?: boolean; /** * @en Whether to handle the case of validation failure, if a function is provided, it is judged by the return value of the function. * @cn 是否处理校验失败的情况, 如果提供一个函数, 则以函数的返回值判断是否处理此 error * @default true */ validatorHandle?: ((error: any, file: File) => boolean) | boolean; /** * @en is disabled * @cn 是否禁用 * @default false */ disabled?: boolean; /** * @en The same as the native webkitdirectory tag * @cn 同原生 input 标签的 webkitdirectory 属性 */ webkitdirectory?: boolean | string; /** * @en Custom content of result * @cn 自定义结果的内容 */ renderContent?: (res: any, value: ValueItem, index: number, values: ValueItem[]) => React.ReactNode; /** * @en drop to update * @cn 是否开启拖拽上传文件 * @default false */ drop?: boolean; /** * @en Filter after file selection, users can customize the list of files that need to be uploaded eventually. Need to return a new file list * @cn 文件选中后的筛选，用户可自定义最终需要上传的文件列表。需返回一个新的文件列表 */ filesFilter?: (fileList: File[]) => File[]; /** * @en remove update failed callback * @cn 上传失败图片删除之后的回调 */ onErrorRemove?: (xhr: Xhr, file: File, fileInfo?: any) => void; forceAccept?: boolean; /** * @inner 内部属性 */ leftHandler?: boolean; /** * @en how to preview the image * @cn 自定义预览图片操作，默认为画廊展示 */ onPreview?: (url: string, value: ValueItem, index: number, values: ValueItem[], fun: { preview: () => void; }) => void; /** * @en Confirmation before deletion * @cn 是否在删除文件和图片前弹出确认 */ removeConfirm?: string | PopoverConfirmProps; /** * @en callback before remove * @cn 删除前的确认，返回一个Promise用于最终确定是否删除 */ beforeRemove?: (value: ValueItem) => Promise<any>; /** * @en Custom error prompt after forceAccept type verification fails * @cn forceAccept 类型校验失败后自定义错误提示 */ forceAcceptErrorMsg?: string; /** * @en Can the file be deleted * @cn 文件是否可以删除 * @default true */ canDelete?: ((value: ValueItem, index: number) => boolean) | boolean; /** * @en Adjust the spacing to be consistent with the [Gap](/components/Gap) props * @cn 调整间距同 [Gap](/components/Gap) 属性 * @default {column: 12, row: 12} */ gapProps?: GapProps; /** * @en set xhr.responseType * @cn 设置 xhr.responseType */ responseType?: XMLHttpRequestResponseType; } /** * @title Upload */ export declare type UploadProps<ValueItem> = Omit<GetInputableProps<AcceptUpload<ValueItem>, ValueItem[]>, 'filterSameChange'>; export interface FileInputProps extends Pick<SimpleUploadProps<any>, 'webkitdirectory' | 'accept' | 'multiple'> { onChange: (e: any) => void; } export interface AcceptUpload<ValueItem> extends Omit<SimpleUploadProps<ValueItem>, 'forceAccept'> { /** * @en After disabled the file type filtering provided by accept, it is mandatory to check the file type, value same as accept * @cn 在使用时关闭了 accept 提供的文件类型过滤后，强制对文件类型进行校验（值同accept) */ forceAccept?: string; } export interface DraggerProps { children: React.ReactNode; multiple: boolean; addFile: (...args: any) => void; accept: string; disabled?: boolean; limit: number; } export interface DropProps<ValueItem> extends Pick<AcceptUpload<ValueItem>, 'drop' | 'accept' | 'disabled'> { multiple?: boolean; dropData?: any; onDrop?: (files: File[], index: number) => void; className?: string; children?: ReactNode; } export interface FileProps { id: string; message?: string; name: string; onRemove: (id: string) => void; process: number; status: number; } export interface ImageFileProps { id: string; message?: string; onRemove: (id: string) => void; process: number; status: number; style?: React.CSSProperties; data?: string; } /** * @title Upload.Image * @en The basic API is the same as Upload, and the specific API is as follows: * @cn 基本 API 和 Upload 相同，特定的 API 如下： */ export interface SimpleUploadImagePropsSpec<ValueItem> { /** * @en Add image view is displayed on the left * @cn 添加图片视图是否在左侧展示 * @default false */ leftHandler?: AcceptUpload<ValueItem>['leftHandler']; /** * @en same as style.height * @cn 同 style.height */ height?: number; /** * @en same as style.width * @cn 同 style.width */ width?: number; /** * @en ignore image preview * @cn 是否忽略上传图片预览 * @default false */ ignorePreview?: boolean; } export interface SimpleUploadImageProps<ValueItem> extends AcceptUpload<ValueItem>, SimpleUploadImagePropsSpec<ValueItem> { } export interface UploadImageHandlerProps { className?: string; disabled?: boolean; urlInvalid?: boolean; children?: React.ReactNode; style?: React.CSSProperties; width?: number; height?: number; onKeyDown?: React.KeyboardEventHandler; onMouseDown?: React.MouseEventHandler; [key: string]: any; } export interface UploadImageResultProps { index: number; value: any; values: any[]; onRecover?: (index: number, value: any) => void; recoverAble?: boolean; showRecover?: boolean; style?: React.CSSProperties; onRemove?: (index: number) => void; renderResult?: AcceptUpload<any>['renderResult']; renderContent?: AcceptUpload<any>['renderContent']; onPreview?: AcceptUpload<any>['onPreview']; removeConfirm?: AcceptUpload<any>['removeConfirm']; } /** * @title Upload.Button * @en The basic API is the same as Upload, and the specific API is as follows: * @cn 基本 API 和 Upload 相同，特定的 API 如下： */ export interface UploadProgressPropsSpec extends Pick<ButtonProps, 'type' | 'size' | 'outline'> { /** * @en button default content * @cn 按钮默认内容 */ placeholder?: React.ReactNode; /** * @en content of uploading, will have spin if a string * @cn 上传中按钮的内容，如果是字符串默认会有spin loading */ loading?: React.ReactNode; /** * @en same as [Button](/components.Button) type * @cn 同 [Button](/components.Button) type * @default 'primary' */ type?: ButtonProps['type']; } export interface UploadProgressProps<ValueItem> extends AcceptUpload<ValueItem>, UploadProgressPropsSpec { } export interface UploadRemoveConfirmProps { confirm?: AcceptUpload<any>['removeConfirm']; onRemove?: () => void; onVisibleChange?: (v: boolean) => void; } export interface UploadResultProps { index: number; value: any; onRecover?: (index: number, value: any) => void; recoverAble?: boolean; showRecover?: boolean; style?: React.CSSProperties; onRemove?: (index: number) => void; renderResult?: AcceptUpload<any>['renderResult']; renderContent?: AcceptUpload<any>['renderContent']; onPreview?: AcceptUpload<any>['onPreview']; removeConfirm?: AcceptUpload<any>['removeConfirm']; } export declare type UploadImageProps<ValueItem> = Omit<GetInputableProps<SimpleUploadImageProps<ValueItem>, ValueItem[]>, 'filterSameChange'>; export declare class Image<ValueItem> extends React.Component<UploadImageProps<ValueItem>, any> { render: () => JSX.Element; } export declare class ImageHandler extends React.Component<UploadImageHandlerProps, any> { render: () => JSX.Element; } export declare type UploadButtonProps<ValueItem> = Omit<GetInputableProps<UploadProgressProps<ValueItem>, ValueItem[]>, 'filterSameChange'>; /** * @title UploadOptions * @isDetail true */ export interface UploadOptions<T> { /** * @en The upload address can be obtained from action * @cn 上传地址从 action 中获取 */ url: string; /** * @en key of formData * @cn formData 中存的字段名 */ name: string; /** * @inner 内部属性 */ cors?: SimpleUploadProps<T>['cors']; /** * @en same as withCredentials in props * @cn 同 props 中的 withCredentials */ withCredentials: SimpleUploadProps<T>['withCredentials']; /** * @en same as responseType in props * @cn 同 props 中的 responseType */ responseType: SimpleUploadProps<T>['responseType']; /** * @en incoming file * @cn 传入文件 */ file: File; /** * @en request header information * @cn 请求头部信息 * @override object */ headers?: ObjectType; /** * @en onError callback * @cn 上传出错事件(props 中为 onHttpError) */ onError: (xhr: Partial<Xhr>) => void; /** * @en onLoad * @cn 上传事件 */ onLoad: (xhr?: Xhr) => void; /** * @en onProgress * @cn 上传中进度 */ onProgress: (event?: ProgressEvent, msg?: string) => any; /** * @en onStart * @cn 开始上传事件 */ onStart?: (file: File) => void; /** * @en onSuccess * @cn 上传成功事件 */ onSuccess?: (res?: string, file?: File, data?: any, xhr?: Xhr) => T | Error; /** * @en params * @cn 上传参数 * @override object */ params?: ObjectType; } /** * @title Validator */ export interface Validator { /** * @en custom validator * @cn 自定义校验 */ customValidator?: (file: File) => void | Error | Promise<any>; /** * @en Judge the file extension, return the Error when the verification fails. * @cn 判断后缀名，传入参数为文件后缀，校验失败返回 Error */ ext?: (ext: string) => void | Error | Promise<any>; /** * @en It is only valid for Image to determine the size of images and return the Error when the verification fails. * @cn 只对 Image 有效，判断图片尺寸，校验失败返回 Error * @override union */ imageSize?: (image: { width: number; height: number; }) => void | Error; /** * @en Judge the size of the file and return the Error when the verification fails. * @cn 判断文件大小，校验失败返回 Error */ size?: (size: number) => void | Error | Promise<any>; } export declare class UploadButton<ValueItem> extends React.Component<UploadButtonProps<ValueItem>, any> { render: () => JSX.Element; } export declare class UploadDragger extends React.Component<any, any> { render: () => JSX.Element; } export declare class Upload<ValueItem> extends React.Component<UploadProps<ValueItem>, any> { static Image: typeof Image; static ImageHandler: typeof ImageHandler; static Button: typeof UploadButton; static Dragger: typeof UploadDragger; render: () => JSX.Element; } export declare type UploadType = typeof Upload; export {};