@douyinfe/semi-ui
Version:
A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.
220 lines (219 loc) • 11.2 kB
TypeScript
import React, { ReactNode, CSSProperties, RefObject, ChangeEvent, DragEvent } from 'react';
import PropTypes from 'prop-types';
import UploadFoundation from '@douyinfe/semi-foundation/lib/cjs/upload/foundation';
import FileCard from './fileCard';
import BaseComponent from '../_base/baseComponent';
import type { FileItem, RenderFileItemProps, UploadListType, PromptPositionType, BeforeUploadProps, AfterUploadProps, OnChangeProps, customRequestArgs, CustomError, RenderPictureCloseProps } from './interface';
import { Locale } from '../locale/interface';
import '@douyinfe/semi-foundation/lib/cjs/upload/upload.css';
import type { CustomFile, UploadAdapter, BeforeUploadObjectResult, AfterUploadResult, FileItemStatus } from '@douyinfe/semi-foundation/lib/cjs/upload/foundation';
import type { ValidateStatus } from '../_base/baseComponent';
import { ShowTooltip } from '../typography';
export type { FileItem, FileItemStatus, RenderFileItemProps, UploadListType, PromptPositionType, BeforeUploadProps, AfterUploadProps, OnChangeProps, customRequestArgs, CustomError, BeforeUploadObjectResult, AfterUploadResult, };
export interface UploadProps {
accept?: string;
action: string;
afterUpload?: (object: AfterUploadProps) => AfterUploadResult;
beforeUpload?: (object: BeforeUploadProps) => BeforeUploadObjectResult | Promise<BeforeUploadObjectResult> | boolean;
beforeClear?: (fileList: Array<FileItem>) => boolean | Promise<boolean>;
beforeRemove?: (file: FileItem, fileList: Array<FileItem>) => boolean | Promise<boolean>;
capture?: boolean | 'user' | 'environment' | undefined;
children?: ReactNode;
className?: string;
customRequest?: (object: customRequestArgs) => void;
data?: Record<string, any> | ((file: File) => Record<string, unknown>);
defaultFileList?: Array<FileItem>;
directory?: boolean;
disabled?: boolean;
dragIcon?: ReactNode;
dragMainText?: ReactNode;
dragSubText?: ReactNode;
draggable?: boolean;
addOnPasting?: boolean;
fileList?: Array<FileItem>;
fileName?: string;
headers?: Record<string, any> | ((file: File) => Record<string, string>);
hotSpotLocation?: 'start' | 'end';
itemStyle?: CSSProperties;
limit?: number;
listType?: UploadListType;
maxSize?: number;
minSize?: number;
multiple?: boolean;
name?: string;
onAcceptInvalid?: (files: File[]) => void;
onChange?: (object: OnChangeProps) => void;
onClear?: () => void;
onDrop?: (e: Event, files: Array<File>, fileList: Array<FileItem>) => void;
onError?: (e: CustomError, file: File, fileList: Array<FileItem>, xhr: XMLHttpRequest) => void;
onPastingError?: (error: Error | PermissionStatus) => void;
onExceed?: (fileList: Array<File>) => void;
onFileChange?: (files: Array<File>) => void;
onOpenFileDialog?: () => void;
onPreviewClick?: (fileItem: FileItem) => void;
onProgress?: (percent: number, file: File, fileList: Array<FileItem>) => void;
onRemove?: (currentFile: File, fileList: Array<FileItem>, currentFileItem: FileItem) => void;
onRetry?: (fileItem: FileItem) => void;
onSizeError?: (file: File, fileList: Array<FileItem>) => void;
onSuccess?: (responseBody: any, file: File, fileList: Array<FileItem>) => void;
previewFile?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
prompt?: ReactNode;
promptPosition?: PromptPositionType;
picHeight?: string | number;
picWidth?: string | number;
renderFileItem?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
renderPicInfo?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
renderThumbnail?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
renderPicPreviewIcon?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
renderPicClose?: (renderPicCloseProps: RenderPictureCloseProps) => ReactNode;
renderFileOperation?: (fileItem: RenderFileItemProps) => ReactNode;
showClear?: boolean;
showPicInfo?: boolean;
showReplace?: boolean;
showRetry?: boolean;
showUploadList?: boolean;
style?: CSSProperties;
timeout?: number;
transformFile?: (file: File) => FileItem;
uploadTrigger?: 'auto' | 'custom';
validateMessage?: ReactNode;
validateStatus?: ValidateStatus;
withCredentials?: boolean;
showTooltip?: boolean | ShowTooltip;
}
export interface UploadState {
dragAreaStatus: 'default' | 'legal' | 'illegal';
fileList: Array<FileItem>;
inputKey: number;
localUrls: Array<string>;
replaceIdx: number;
replaceInputKey: number;
}
declare class Upload extends BaseComponent<UploadProps, UploadState> {
static propTypes: {
accept: PropTypes.Requireable<string>;
action: PropTypes.Validator<string>;
addOnPasting: PropTypes.Requireable<boolean>;
afterUpload: PropTypes.Requireable<(...args: any[]) => any>;
beforeClear: PropTypes.Requireable<(...args: any[]) => any>;
beforeRemove: PropTypes.Requireable<(...args: any[]) => any>;
beforeUpload: PropTypes.Requireable<(...args: any[]) => any>;
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
className: PropTypes.Requireable<string>;
customRequest: PropTypes.Requireable<(...args: any[]) => any>;
data: PropTypes.Requireable<object>;
defaultFileList: PropTypes.Requireable<any[]>;
directory: PropTypes.Requireable<boolean>;
disabled: PropTypes.Requireable<boolean>;
dragIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
dragMainText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
dragSubText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
draggable: PropTypes.Requireable<boolean>;
fileList: PropTypes.Requireable<any[]>;
fileName: PropTypes.Requireable<string>;
headers: PropTypes.Requireable<object>;
hotSpotLocation: PropTypes.Requireable<string>;
itemStyle: PropTypes.Requireable<object>;
limit: PropTypes.Requireable<number>;
listType: PropTypes.Requireable<"picture" | "list">;
maxSize: PropTypes.Requireable<number>;
minSize: PropTypes.Requireable<number>;
multiple: PropTypes.Requireable<boolean>;
name: PropTypes.Requireable<string>;
onAcceptInvalid: PropTypes.Requireable<(...args: any[]) => any>;
onChange: PropTypes.Requireable<(...args: any[]) => any>;
onClear: PropTypes.Requireable<(...args: any[]) => any>;
onDrop: PropTypes.Requireable<(...args: any[]) => any>;
onError: PropTypes.Requireable<(...args: any[]) => any>;
onExceed: PropTypes.Requireable<(...args: any[]) => any>;
onFileChange: PropTypes.Requireable<(...args: any[]) => any>;
onOpenFileDialog: PropTypes.Requireable<(...args: any[]) => any>;
onPreviewClick: PropTypes.Requireable<(...args: any[]) => any>;
onProgress: PropTypes.Requireable<(...args: any[]) => any>;
onRemove: PropTypes.Requireable<(...args: any[]) => any>;
onRetry: PropTypes.Requireable<(...args: any[]) => any>;
onSizeError: PropTypes.Requireable<(...args: any[]) => any>;
onSuccess: PropTypes.Requireable<(...args: any[]) => any>;
onPastingError: PropTypes.Requireable<(...args: any[]) => any>;
previewFile: PropTypes.Requireable<(...args: any[]) => any>;
prompt: PropTypes.Requireable<PropTypes.ReactNodeLike>;
promptPosition: PropTypes.Requireable<"left" | "right" | "bottom">;
picWidth: PropTypes.Requireable<NonNullable<string | number>>;
picHeight: PropTypes.Requireable<NonNullable<string | number>>;
renderFileItem: PropTypes.Requireable<(...args: any[]) => any>;
renderPicPreviewIcon: PropTypes.Requireable<(...args: any[]) => any>;
renderFileOperation: PropTypes.Requireable<(...args: any[]) => any>;
renderPicClose: PropTypes.Requireable<(...args: any[]) => any>;
renderPicInfo: PropTypes.Requireable<(...args: any[]) => any>;
renderThumbnail: PropTypes.Requireable<(...args: any[]) => any>;
showClear: PropTypes.Requireable<boolean>;
showPicInfo: PropTypes.Requireable<boolean>;
showReplace: PropTypes.Requireable<boolean>;
showRetry: PropTypes.Requireable<boolean>;
showUploadList: PropTypes.Requireable<boolean>;
style: PropTypes.Requireable<object>;
timeout: PropTypes.Requireable<number>;
transformFile: PropTypes.Requireable<(...args: any[]) => any>;
uploadTrigger: PropTypes.Requireable<"auto" | "custom">;
validateMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">;
withCredentials: PropTypes.Requireable<boolean>;
showTooltip: PropTypes.Requireable<NonNullable<boolean | object>>;
};
static defaultProps: Partial<UploadProps>;
static FileCard: typeof FileCard;
constructor(props: UploadProps);
/**
* Notes:
* The input parameter and return value here do not declare the type, otherwise tsc may report an error in form/fields.tsx when wrap after withField
* `The types of the parameters "props" and "nextProps" are incompatible.
The attribute "action" is missing in the type "Readonly<any>", but it is required in the type "UploadProps".`
* which seems to be a bug, remove props type declare here
*/
static getDerivedStateFromProps(props: any): {
fileList: any;
};
get adapter(): UploadAdapter<UploadProps, UploadState>;
foundation: UploadFoundation;
inputRef: RefObject<HTMLInputElement>;
replaceInputRef: RefObject<HTMLInputElement>;
pastingCb: null | ((params: any) => void);
componentDidMount(): void;
componentWillUnmount(): void;
onClick: () => void;
onChange: (e: ChangeEvent<HTMLInputElement>) => void;
replace: (index: number) => void;
onReplaceChange: (e: ChangeEvent<HTMLInputElement>) => void;
clear: () => void;
remove: (fileItem: FileItem) => void;
/**
* ref method
* insert files at index
* @param files Array<CustomFile>
* @param index number
* @returns
*/
insert: (files: Array<CustomFile>, index?: number) => void;
/**
* ref method
* manual upload by user
*/
upload: () => void;
/**
* ref method
* manual open file select dialog
*/
openFileDialog: () => void;
renderFile: (file: FileItem, index: number, locale: Locale['Upload']) => ReactNode;
renderFileList: () => ReactNode;
renderFileListPic: () => React.JSX.Element;
renderFileListDefault: () => React.JSX.Element;
onDrop: (e: DragEvent<HTMLDivElement>) => void;
onDragOver: (e: DragEvent<HTMLDivElement>) => void;
onDragLeave: (e: DragEvent<HTMLDivElement>) => void;
onDragEnter: (e: DragEvent<HTMLDivElement>) => void;
renderAddContent: () => string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element;
renderDragArea: () => ReactNode;
render(): ReactNode;
}
export default Upload;