Update definitions for react-dropzone

types/react-dropzone/index.d.ts

@@ -1,46 +1,41 @@
-// 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: 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 {
+    interface ImageFile extends File {
+        preview?: string;
+    }
 
-        // Drag behavior
-        onDragStart?: Function;
-        onDragEnter?: Function;
-        onDragLeave?: Function;
+    interface DropFilesEventHandler {
+        (accepted: ImageFile[], rejected?: ImageFile[]): void;
+        <E extends DragEvent<HTMLDivElement>>(event: E): 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
-
-        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
+    interface DropzoneProps extends InputHTMLAttributes<HTMLDivElement> {
+        disableClick?: boolean;
+        disablePreview?: boolean;
+        preventDropOnDocument?: boolean;
+        inputProps?: InputHTMLAttributes<HTMLInputElement>;
         maxSize?: number;
         minSize?: number;
-
+        activeClassName?: string;
+        rejectClassName?: string;
+        activeStyle?: CSSProperties;
+        rejectStyle?: CSSProperties;
+        onDrop?: DropFilesEventHandler;
+        onDropAccepted?: DropFilesEventHandler;
+        onDropRejected?: DropFilesEventHandler;
         onFileDialogCancel?: () => void;
     }
-
-    class Dropzone extends React.Component<DropzoneProps, never> {
-        open(): void;
-    }
-
-    export = Dropzone;
 }
+
+declare class Dropzone extends Component<Dropzone.DropzoneProps> {
+    open(): void;
+}
+
+export = Dropzone;

types/react-dropzone/react-dropzone-tests.tsx

@@ -1,10 +1,7 @@
-import * as React from 'react';
-import Dropzone = require('react-dropzone');
+import * as React from "react";
+import * as Dropzone from "react-dropzone";
 
 class Test extends React.Component {
-  constructor(props: any) {
-    super(props);
-  }
 
   dz: Dropzone;
 
@@ -12,33 +9,41 @@ class Test extends React.Component {
     this.dz.open();
   }
 
+  handleDropFile = (files: File[]) => {};
+
+  handleDropFiles = (accepted: File[], rejected?: File[]) => {};
+
   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(); } }
+          onClick={ (e: any) => { e.preventDefault(); } }
+          onDrop={ this.handleDropFiles }
+          onDropAccepted={ this.handleDropFile }
+          onDropRejected={ this.handleDropFile }
+          onDragStart={ (e: any) => { e.preventDefault(); } }
+          onDragEnter={ (e: any) => { e.preventDefault(); } }
+          onDragLeave={ (e: any) => { e.preventDefault(); } }
+          onFileDialogCancel={ () => undefined }
           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}
+          minSize={ 2000 }
+          maxSize={ Infinity }
+          disablePreview
+          disableClick
+          multiple={ false }
           accept="*.png"
           name="dropzone"
-          inputProps={{ id: "dropzone" }}
+          inputProps={ { id : "dropzone" } }
         />
       </div>
+
+
     );
   }
 }

types/react-dropzone/v2/index.d.ts

@@ -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;
+}

types/react-dropzone/v2/react-dropzone-tests.tsx

@@ -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;

types/react-dropzone/v2/tsconfig.json

@@ -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"
+    ]
+}