diff --git a/types/react-dropzone/index.d.ts b/types/react-dropzone/index.d.ts index cd07fd3341..8225fa4ab8 100644 --- a/types/react-dropzone/index.d.ts +++ b/types/react-dropzone/index.d.ts @@ -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 , Ivo Jesus , Luís Rodrigues , Ben Bayard +// Definitions by: Mathieu Larouche Dube , +// Ivo Jesus , +// Luís Rodrigues , +// Ben Bayard , +// Karol Janyst // 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 { + export interface ImageFile extends File { + preview?: string; + } - // Drag behavior - onDragStart?: Function; - onDragEnter?: Function; - onDragLeave?: Function; + export type DropFileEventHandler = (acceptedOrRejected: ImageFile[], event: DragEvent) => void; + export type DropFilesEventHandler = (accepted: ImageFile[], rejected: ImageFile[], event: DragEvent) => 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; // 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 + export interface DropzoneProps extends Pick, PickedAttributes> { + disableClick?: boolean; + disablePreview?: boolean; + preventDropOnDocument?: boolean; + inputProps?: InputHTMLAttributes; 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 { - 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..d0477e3e4c 100644 --- a/types/react-dropzone/react-dropzone-tests.tsx +++ b/types/react-dropzone/react-dropzone-tests.tsx @@ -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) => {}; + + handleDropFiles = (accepted: File[], rejected: File[], event: DragEvent) => {}; + + handleDefault = (e: SyntheticEvent) => {} + + handleFileDialog = () => {} + 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(); } } + 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" }} />
); 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" + ] +}