@nexusui/components
Version:
These are custom components specially-developed for NexusUI applications. They will make your life easier by giving you out-of-the-box implementations for various high-level UI elements that you can drop directly into your application.
84 lines (83 loc) • 2.8 kB
TypeScript
import { StackProps } from '@mui/material/Stack';
import type { FileRejection, FileWithPath } from 'react-dropzone/typings/react-dropzone';
import { SvgIconProps } from '@mui/material/SvgIcon';
import { UploadStatus } from '../models';
export interface FileWithStatus {
file: FileWithPath;
status: UploadStatus;
progress?: number;
}
export interface FilePanelProps extends StackProps {
/**
* the title of the file panel shows on the top of the file item list.
* @default Uploaded Files
*/
label?: string;
/**
* if true, the size of the files will not be displayed.
* @default false
*/
hideSizes?: boolean;
/**
* rejected files that selected from your local computer.
*
* ```
* export interface FileRejection {
* file: FileWithPath;
* errors: FileError[];
* }
*
* ```
*/
rejectedFiles: ReadonlyArray<FileRejection>;
/**
* function to specify your own error message to display for files that failed to upload
*
* @example (rejection) => `${(rejection.file as FileWithPath).path || rejection.file.name}: (${rejection.errors[0].code}) ${rejection.errors[0].message}`
*/
getErrorMessage?: (rejection: FileRejection) => string;
/**
* accepted files that selected from your local computer.
*/
acceptedFiles: ReadonlyArray<FileWithPath>;
/**
* uploading files that selected from your local computer.
*
* ```
* interface FileWithStatus {
* file: FileWithPath;
* status: UploadStatus;
* progress?: number;
* }
* ```
*
*/
uploadingFiles?: ReadonlyArray<FileWithStatus>;
/**
* Set which file extension should be used as the parent for nested files (when present).
* If undefined, files will nest under the first file alphabetically with the same base name
* If null, all nesting will be disabled.
*/
parentFileExtension?: string | null;
/**
* the close function when user close an error alert
*/
onClose: (file: FileRejection) => void;
/**
* the remove function when user clicks the minus icon
*/
onRemove: (file: FileWithPath) => void;
/**
* Retry callback when clicked the retry button when the file status is failed
*/
onRetry?: (file: FileWithPath) => void;
/**
* Custom mapping of file extensions to icons, e.g., { pdf: PictureAsPdf, png: Image }
* Components in the mapping must support the `fontSize` prop from MUI SvgIcon.
* @default {}
*/
iconMapping?: {
[key: string]: React.FunctionComponent<Pick<SvgIconProps, 'fontSize'>>;
};
}
export declare const FilePanel: (props: FilePanelProps) => import("react/jsx-runtime").JSX.Element;