react-dropzone.d.ts 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. import * as React from "react";
  2. export { FileWithPath } from "file-selector";
  3. export default function Dropzone(
  4. props: DropzoneProps & React.RefAttributes<DropzoneRef>
  5. ): JSX.Element;
  6. export function useDropzone(options?: DropzoneOptions): DropzoneState;
  7. export interface DropzoneProps extends DropzoneOptions {
  8. children?(state: DropzoneState): JSX.Element;
  9. }
  10. export enum ErrorCode {
  11. FileInvalidType = "file-invalid-type",
  12. FileTooLarge = "file-too-large",
  13. FileTooSmall = "file-too-small",
  14. TooManyFiles = "too-many-files",
  15. }
  16. export interface FileError {
  17. message: string;
  18. code: ErrorCode | string;
  19. }
  20. export interface FileRejection {
  21. file: File;
  22. errors: FileError[];
  23. }
  24. export type DropzoneOptions = Pick<React.HTMLProps<HTMLElement>, PropTypes> & {
  25. accept?: Accept;
  26. minSize?: number;
  27. maxSize?: number;
  28. maxFiles?: number;
  29. preventDropOnDocument?: boolean;
  30. noClick?: boolean;
  31. noKeyboard?: boolean;
  32. noDrag?: boolean;
  33. noDragEventsBubbling?: boolean;
  34. disabled?: boolean;
  35. onDrop?: <T extends File>(
  36. acceptedFiles: T[],
  37. fileRejections: FileRejection[],
  38. event: DropEvent
  39. ) => void;
  40. onDropAccepted?: <T extends File>(files: T[], event: DropEvent) => void;
  41. onDropRejected?: (fileRejections: FileRejection[], event: DropEvent) => void;
  42. getFilesFromEvent?: (
  43. event: DropEvent
  44. ) => Promise<Array<File | DataTransferItem>>;
  45. onFileDialogCancel?: () => void;
  46. onFileDialogOpen?: () => void;
  47. onError?: (err: Error) => void;
  48. validator?: <T extends File>(file: T) => FileError | FileError[] | null;
  49. useFsAccessApi?: boolean;
  50. autoFocus?: boolean;
  51. };
  52. export type DropEvent =
  53. | React.DragEvent<HTMLElement>
  54. | React.ChangeEvent<HTMLInputElement>
  55. | DragEvent
  56. | Event;
  57. export type DropzoneState = DropzoneRef & {
  58. isFocused: boolean;
  59. isDragActive: boolean;
  60. isDragAccept: boolean;
  61. isDragReject: boolean;
  62. isFileDialogActive: boolean;
  63. acceptedFiles: File[];
  64. fileRejections: FileRejection[];
  65. rootRef: React.RefObject<HTMLElement>;
  66. inputRef: React.RefObject<HTMLInputElement>;
  67. getRootProps: <T extends DropzoneRootProps>(props?: T) => T;
  68. getInputProps: <T extends DropzoneInputProps>(props?: T) => T;
  69. };
  70. export interface DropzoneRef {
  71. open: () => void;
  72. }
  73. export interface DropzoneRootProps extends React.HTMLAttributes<HTMLElement> {
  74. refKey?: string;
  75. [key: string]: any;
  76. }
  77. export interface DropzoneInputProps
  78. extends React.InputHTMLAttributes<HTMLInputElement> {
  79. refKey?: string;
  80. }
  81. type PropTypes = "multiple" | "onDragEnter" | "onDragOver" | "onDragLeave";
  82. export interface Accept {
  83. [key: string]: string[];
  84. }