@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.
138 lines (137 loc) • 4.65 kB
TypeScript
import { BoxProps } from '@mui/material/Box';
import type { DropzoneOptions, FileRejection, FileWithPath } from 'react-dropzone/typings/react-dropzone';
import { DropzoneState } from 'react-dropzone';
import { FunctionComponent, ReactNode } from 'react';
import { StackProps } from '@mui/material/Stack';
export type { FileRejection, FileWithPath };
/** The props type of [[`FilePickerBlock`]]. */
export interface FilePickerBlockProps extends BoxProps {
/**
* If true, the component should render the compact horizontal style.
* @default false
*/
condensed?: boolean;
/**
* The header of the component.
*/
header?: string | ReactNode;
/**
* If true, the description will be shown.
* @default true
*/
showDescription?: boolean;
/**
* The extra description shows below the description.
*/
extraDescription?: string | ReactNode;
/**
* The label of the upload button.
* @default Upload
*/
buttonLabel?: string;
/**
* The instruction of the drop zone.
* @default Drag & Drop files
*/
dropZoneInstruction?: string | ReactNode;
/**
* The DropZone state and options.
*/
dropZoneProps?: DropzoneState & DropzoneOptions;
/**
* A user-friendly list of accepted file types to display for the user. If not specified, the component will display the values specified in the accept field of the dropZoneProps.
*/
acceptedFilesDisplayList?: ReadonlyArray<string>;
/**
* If true, the maximum number of allowed files will be displayed in the description.
*/
showMaxFiles?: boolean;
/**
* The file panel component.
*/
FilePanelComponent?: FunctionComponent<any>;
}
/** The props type of [[`DropOverlay`]]. */
export interface DropOverlayProps extends StackProps {
/**
* The header of the component.
* @default Drop files anywhere to upload.
*/
header?: string | ReactNode;
/**
* If true, the maximum accepted number of files will be shown.
* @default true
*/
showMaxFiles?: boolean;
/**
* If true, the maximum file size will be shown.
* @default true
*/
showMaxSize?: boolean;
/**
* The extra description shows below the description.
*/
extraDescription?: string | ReactNode;
/**
* The DropZone options.
*/
dropZoneOptions?: DropzoneOptions;
}
/** The props type of [[`FilePicker`]]. */
export interface FilePickerProps extends Omit<BoxProps, 'color'> {
/**
* Options to configure the react-dropzone root element.
* refer to the [react-dropzone](https://github.com/react-dropzone/react-dropzone).
*/
dropZoneOptions: DropzoneOptions;
/**
* Callback function triggered when the drop event occurs.
* Note that the onDropped callback will always be invoked regardless if the dropped files were accepted or rejected.
*/
onDropped: (acceptedFiles: FileWithPath[], rejectedFiles: FileRejection[]) => void;
/**
* The content of FilePicker component.
* By default, it shows the built-in FilePickerBlock component.
*/
DropZoneComponent?: FunctionComponent<FilePickerBlockProps>;
/**
* Props applied to the DropZoneComponent.
*
* ```
* export interface FilePickerBlockProps extends BoxProps {
* condensed?: boolean;
* header?: string | ReactNode;
* showDescription?: boolean;
* acceptedFilesDisplayList?: string[];
* showMaxFiles?: boolean;
* extraDescription?: string | ReactNode;
* buttonLabel?: string;
* dragZoneInstructions?: string | ReactNode;
* dropZoneProps?: DropzoneState & DropzoneOptions;
* FilePanelComponent?: ComponentType<FilePanelComponentProps>;
* }
* ```
*
*/
DropZoneComponentProps?: FilePickerBlockProps;
/**
* The component used for drag and drop target overlay.
* By default, it shows the built-in DropOverlay component.
*/
DropOverlayComponent?: FunctionComponent<DropOverlayProps>;
/**
* Props applied to the DropOverlayComponent.
*
* ```
* export interface DropOverlayProps extends StackProps {
* header?: string | ReactNode;
* showMaxFiles?: boolean;
* showMaxSize?: boolean;
* extraDescription?: string | ReactNode;
* dropZoneOptions?: DropzoneOptions;
* }
* ```
*/
DropOverlayComponentProps?: DropOverlayProps;
}
export declare const FilePicker: (props: FilePickerProps) => import("react/jsx-runtime").JSX.Element;