diff --git a/types/react-dropzone/index.d.ts b/types/react-dropzone/index.d.ts index cd07fd3341..dd0daec880 100644 --- a/types/react-dropzone/index.d.ts +++ b/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 , Ivo Jesus , Luís Rodrigues , Ben Bayard // Definitions: https://github.com/Vooban/DefinitelyTyped // TypeScript Version: 2.3 -/// +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; + >(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; // Pass additional attributes to the 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 { + disableClick?: boolean; + disablePreview?: boolean; + preventDropOnDocument?: boolean; + inputProps?: InputHTMLAttributes; 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 { - open(): void; - } - - export = Dropzone; } + +declare class Dropzone extends Component { + open(): void; +} + +export = Dropzone; diff --git a/types/react-dropzone/react-dropzone-tests.tsx b/types/react-dropzone/react-dropzone-tests.tsx index 95c3886454..cc1b2d03d8 100644 --- a/types/react-dropzone/react-dropzone-tests.tsx +++ b/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 (
{ 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" } } />
+ + ); } } diff --git a/types/react-dropzone/v2/index.d.ts b/types/react-dropzone/v2/index.d.ts new file mode 100644 index 0000000000..396fccc3b3 --- /dev/null +++ b/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 , Ivo Jesus , Luís Rodrigues , Ben Bayard +// Definitions: https://github.com/Vooban/DefinitelyTyped +// TypeScript Version: 2.3 + +/// + +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; // Pass additional attributes to the 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 { + open(): void; + } + + export = Dropzone; +} diff --git a/types/react-dropzone/v2/react-dropzone-tests.tsx b/types/react-dropzone/v2/react-dropzone-tests.tsx new file mode 100644 index 0000000000..95c3886454 --- /dev/null +++ b/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 ( +
+ { 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" }} + /> +
+ ); + } +} + +export default Test; diff --git a/types/react-dropzone/v2/tsconfig.json b/types/react-dropzone/v2/tsconfig.json new file mode 100644 index 0000000000..8693dae088 --- /dev/null +++ b/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" + ] +}