Merge pull request #18006 from LKay/lkay/react-dropzone-update

Update definitions for react-dropzone
2026-10-07 00:07:07 +00:00 · 2017-07-14 11:09:58 -07:00
parent ac2189733c d954b4f012
commit 2e35b64530
5 changed files with 177 additions and 48 deletions
@@ -1,46 +1,45 @@
-// Type definitions for react-dropzone
+// Type definitions for react-dropzone 3.13
 // Project: https://github.com/okonet/react-dropzone
-// Definitions by: Mathieu Larouche Dube <https://github.com/matdube>, Ivo Jesus <https://github.com/LynxEyes>, Luís Rodrigues <https://github.com/goblindegook>, Ben Bayard <https://github.com/benbayard>
+// Definitions by: Mathieu Larouche Dube <https://github.com/matdube>,
+//                 Ivo Jesus <https://github.com/LynxEyes>,
+//                 Luís Rodrigues <https://github.com/goblindegook>,
+//                 Ben Bayard <https://github.com/benbayard>,
+//                 Karol Janyst <https://github.com/LKay>
 // Definitions: https://github.com/Vooban/DefinitelyTyped
 // TypeScript Version: 2.3

-/// <reference types="react"/>
+import { CSSProperties, Component, DragEvent, InputHTMLAttributes } from "react";

-declare module "react-dropzone" {
-    interface DropzoneProps {
-        // Drop behavior
-        onDrop?: (accepted: File[], rejected: File[]) => any;
-        onDropAccepted?: (accepted: File[]) => any;
-        onDropRejected?: (rejected: File[]) => any;
+declare namespace Dropzone {
+    export interface ImageFile extends File {
+        preview?: string;
+    }

-        // Drag behavior
-        onDragStart?: Function;
-        onDragEnter?: Function;
-        onDragLeave?: Function;
+    export type DropFileEventHandler = (acceptedOrRejected: ImageFile[], event: DragEvent<HTMLDivElement>) => void;
+    export type DropFilesEventHandler = (accepted: ImageFile[], rejected: ImageFile[], event: DragEvent<HTMLDivElement>) => void;

-        style?: React.CSSProperties; // CSS styles to apply
-        activeStyle?: React.CSSProperties; // CSS styles to apply when drop will be accepted
-        rejectStyle?: React.CSSProperties; // CSS styles to apply when drop will be rejected
-        className?: string; // Optional className
-        activeClassName?: string; // className for accepted state
-        rejectClassName?: string; // className for rejected state
+    type PickedAttributes = "accept" | "className" | "multiple" | "name" | "onClick" | "onDragStart" | "onDragEnter" | "onDragOver" | "onDragLeave" | "style";

-        disablePreview?: boolean; // Enable/disable preview generation
-        disableClick?: boolean; // Disallow clicking on the dropzone container to open file dialog
-
-        inputProps?: React.InputHTMLAttributes<HTMLInputElement>; // Pass additional attributes to the <input type="file"/> tag
-        multiple?: boolean; // Allow dropping multiple files
-        accept?: string; // Allow specific types of files. See https://github.com/okonet/attr-accept for more information
-        name?: string; // name attribute for the input tag
+    export interface DropzoneProps extends Pick<InputHTMLAttributes<HTMLDivElement>, PickedAttributes> {
+        disableClick?: boolean;
+        disablePreview?: boolean;
+        preventDropOnDocument?: boolean;
+        inputProps?: InputHTMLAttributes<HTMLInputElement>;
        maxSize?: number;
        minSize?: number;
-
+        activeClassName?: string;
+        rejectClassName?: string;
+        activeStyle?: CSSProperties;
+        rejectStyle?: CSSProperties;
+        onDrop?: DropFilesEventHandler;
+        onDropAccepted?: DropFileEventHandler;
+        onDropRejected?: DropFileEventHandler;
        onFileDialogCancel?: () => void;
    }
-
-    class Dropzone extends React.Component<DropzoneProps, never> {
-        open(): void;
-    }
-
-    export = Dropzone;
 }
+
+declare class Dropzone extends Component<Dropzone.DropzoneProps> {
+    open(): void;
+}
+
+export = Dropzone;
@@ -1,10 +1,9 @@
-import * as React from 'react';
-import Dropzone = require('react-dropzone');
+import * as React from "react";
+import { DragEvent, SyntheticEvent} from "react";
+import Dropzone = require("react-dropzone");
+import { ImageFile } from "react-dropzone";

 class Test extends React.Component {
-  constructor(props: any) {
-    super(props);
-  }

  dz: Dropzone;

@@ -12,17 +11,27 @@ class Test extends React.Component {
    this.dz.open();
  }

+  handleDropFile = (files: ImageFile[], e: DragEvent<HTMLDivElement>) => {};
+
+  handleDropFiles = (accepted: File[], rejected: File[], event: DragEvent<HTMLDivElement>) => {};
+
+  handleDefault = (e: SyntheticEvent<HTMLDivElement>) => {}
+
+  handleFileDialog = () => {}
+
  render() {
    return (
      <div>
        <Dropzone
-          ref={(node) => { this.dz = node } }
-          onDrop={(e: any) => { e.preventDefault(); } }
-          onDropAccepted={(e: any) => { e.preventDefault(); } }
-          onDropRejected={(e: any) => { e.preventDefault(); } }
-          onDragStart={(e: any) => { e.preventDefault(); } }
-          onDragEnter={(e: any) => { e.preventDefault(); } }
-          onDragLeave={(e: any) => { e.preventDefault(); } }
+          ref={(node) => { this.dz = node }}
+          onClick={this.handleDefault}
+          onDrop={this.handleDropFiles}
+          onDropAccepted={this.handleDropFile }
+          onDropRejected={this.handleDropFile }
+          onDragStart={this.handleDefault}
+          onDragEnter={this.handleDefault}
+          onDragLeave={this.handleDefault}
+          onFileDialogCancel={this.handleFileDialog}
          style={{ borderStyle: "dashed" }}
          activeStyle={{ borderStyle: "dotted" }}
          rejectStyle={{ borderStyle: "dotted" }}
@@ -31,12 +40,12 @@ class Test extends React.Component {
          rejectClassName="reject"
          minSize={2000}
          maxSize={Infinity}
-          disablePreview={true}
-          disableClick={true}
+          disablePreview
+          disableClick
          multiple={false}
          accept="*.png"
          name="dropzone"
-          inputProps={{ id: "dropzone" }}
+          inputProps={{ id : "dropzone" }}
        />
      </div>
    );
@@ -0,0 +1,46 @@
+// Type definitions for react-dropzone 2.2
+// Project: https://github.com/okonet/react-dropzone
+// Definitions by: Mathieu Larouche Dube <https://github.com/matdube>, Ivo Jesus <https://github.com/LynxEyes>, Luís Rodrigues <https://github.com/goblindegook>, Ben Bayard <https://github.com/benbayard>
+// Definitions: https://github.com/Vooban/DefinitelyTyped
+// TypeScript Version: 2.3
+
+/// <reference types="react"/>
+
+declare module "react-dropzone" {
+    interface DropzoneProps {
+        // Drop behavior
+        onDrop?: (accepted: File[], rejected: File[]) => any;
+        onDropAccepted?: (accepted: File[]) => any;
+        onDropRejected?: (rejected: File[]) => any;
+
+        // Drag behavior
+        onDragStart?: Function;
+        onDragEnter?: Function;
+        onDragLeave?: Function;
+
+        style?: React.CSSProperties; // CSS styles to apply
+        activeStyle?: React.CSSProperties; // CSS styles to apply when drop will be accepted
+        rejectStyle?: React.CSSProperties; // CSS styles to apply when drop will be rejected
+        className?: string; // Optional className
+        activeClassName?: string; // className for accepted state
+        rejectClassName?: string; // className for rejected state
+
+        disablePreview?: boolean; // Enable/disable preview generation
+        disableClick?: boolean; // Disallow clicking on the dropzone container to open file dialog
+
+        inputProps?: React.InputHTMLAttributes<HTMLInputElement>; // Pass additional attributes to the <input type="file"/> tag
+        multiple?: boolean; // Allow dropping multiple files
+        accept?: string; // Allow specific types of files. See https://github.com/okonet/attr-accept for more information
+        name?: string; // name attribute for the input tag
+        maxSize?: number;
+        minSize?: number;
+
+        onFileDialogCancel?: () => void;
+    }
+
+    class Dropzone extends React.Component<DropzoneProps, never> {
+        open(): void;
+    }
+
+    export = Dropzone;
+}
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import Dropzone = require('react-dropzone');
+
+class Test extends React.Component {
+  constructor(props: any) {
+    super(props);
+  }
+
+  dz: Dropzone;
+
+  open() {
+    this.dz.open();
+  }
+
+  render() {
+    return (
+      <div>
+        <Dropzone
+          ref={(node) => { this.dz = node } }
+          onDrop={(e: any) => { e.preventDefault(); } }
+          onDropAccepted={(e: any) => { e.preventDefault(); } }
+          onDropRejected={(e: any) => { e.preventDefault(); } }
+          onDragStart={(e: any) => { e.preventDefault(); } }
+          onDragEnter={(e: any) => { e.preventDefault(); } }
+          onDragLeave={(e: any) => { e.preventDefault(); } }
+          style={{ borderStyle: "dashed" }}
+          activeStyle={{ borderStyle: "dotted" }}
+          rejectStyle={{ borderStyle: "dotted" }}
+          className="regular"
+          activeClassName="active"
+          rejectClassName="reject"
+          minSize={2000}
+          maxSize={Infinity}
+          disablePreview={true}
+          disableClick={true}
+          multiple={false}
+          accept="*.png"
+          name="dropzone"
+          inputProps={{ id: "dropzone" }}
+        />
+      </div>
+    );
+  }
+}
+
+export default Test;
@@ -0,0 +1,29 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": false,
+        "jsx": "react",
+        "baseUrl": "../../",
+        "typeRoots": [
+            "../../"
+        ],
+        "types": [],
+        "paths": {
+            "react-dropzone": [
+                "react-dropzone/v2"
+            ]
+        },
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts",
+        "react-dropzone-tests.tsx"
+    ]
+}