// Type definitions for React DnD v1.1.4 // Project: https://github.com/gaearon/react-dnd // Definitions by: Asana // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped /// declare module __ReactDnd { import React = __React; // Decorated React Components // ---------------------------------------------------------------------- class ContextComponent extends React.Component { getDecoratedComponentInstance(): React.Component; // Note: getManager is not yet documented on the React DnD docs. getManager(): any; } class DndComponent extends React.Component { getDecoratedComponentInstance(): React.Component; getHandlerId(): Identifier; } interface ContextComponentClass

extends React.ComponentClass

{ new(props?: P, context?: any): ContextComponent; DecoratedComponent: React.ComponentClass

; } interface DndComponentClass

extends React.ComponentClass

{ new(props?: P, context?: any): DndComponent; DecoratedComponent: React.ComponentClass

; } // Top-level API // ---------------------------------------------------------------------- export function DragSource

( type: Identifier | ((props: P) => Identifier), spec: DragSourceSpec

, collect: DragSourceCollector, options?: DndOptions

): (componentClass: React.ComponentClass

) => DndComponentClass

; export function DropTarget

( types: Identifier | Identifier[] | ((props: P) => Identifier | Identifier[]), spec: DropTargetSpec

, collect: DropTargetCollector, options?: DndOptions

): (componentClass: React.ComponentClass

) => DndComponentClass

; export function DragDropContext

( backend: Backend ): (componentClass: React.ComponentClass

) => ContextComponentClass

; export function DragLayer

( collect: DragLayerCollector, options?: DndOptions

): (componentClass: React.ComponentClass

) => DndComponentClass

; type DragSourceCollector = (connect: DragSourceConnector, monitor: DragSourceMonitor) => Object; type DropTargetCollector = (connect: DropTargetConnector, monitor: DropTargetMonitor) => Object; type DragLayerCollector = (monitor: DragLayerMonitor) => Object; // Shared // ---------------------------------------------------------------------- // The React DnD docs say that this can also be the ES6 Symbol. type Identifier = string; interface ClientOffset { x: number; y: number; } interface DndOptions

{ arePropsEqual?(props: P, otherProps: P): boolean; } // DragSource // ---------------------------------------------------------------------- interface DragSourceSpec

{ beginDrag(props: P, monitor?: DragSourceMonitor, component?: React.Component): Object; endDrag?(props: P, monitor?: DragSourceMonitor, component?: React.Component): void; canDrag?(props: P, monitor?: DragSourceMonitor): boolean; isDragging?(props: P, monitor?: DragSourceMonitor): boolean; } class DragSourceMonitor { canDrag(): boolean; isDragging(): boolean; getItemType(): Identifier; getItem(): Object; getDropResult(): Object; didDrop(): boolean; getInitialClientOffset(): ClientOffset; getInitialSourceClientOffset(): ClientOffset; getClientOffset(): ClientOffset; getDifferenceFromInitialOffset(): ClientOffset; getSourceClientOffset(): ClientOffset; } class DragSourceConnector { dragSource(): ConnectDragSource; dragPreview(): ConnectDragPreview; } interface DragElementWrapper {

(elementOrNode: React.ReactElement

, options?: O): React.ReactElement

; } interface DragSourceOptions { dropEffect?: string; } interface DragPreviewOptions { captureDraggingState?: boolean; anchorX?: number; anchorY?: number; } type ConnectDragSource = DragElementWrapper; type ConnectDragPreview = DragElementWrapper; /// DropTarget // ---------------------------------------------------------------------- interface DropTargetSpec

{ drop?(props: P, monitor?: DropTargetMonitor, component?: React.Component): Object|void; hover?(props: P, monitor?: DropTargetMonitor, component?: React.Component): void; canDrop?(props: P, monitor?: DropTargetMonitor): boolean; } class DropTargetMonitor { canDrop(): boolean; isOver(options?: { shallow: boolean }): boolean; getItemType(): Identifier; getItem(): Object; getDropResult(): Object; didDrop(): boolean; getInitialClientOffset(): ClientOffset; getInitialSourceClientOffset(): ClientOffset; getClientOffset(): ClientOffset; getDifferenceFromInitialOffset(): ClientOffset; getSourceClientOffset(): ClientOffset; } class DropTargetConnector { dropTarget(): ConnectDropTarget; } type ConnectDropTarget =

(elementOrNode: React.ReactElement

) => React.ReactElement

; /// DragLayerMonitor // ---------------------------------------------------------------------- class DragLayerMonitor { isDragging(): boolean; getItemType(): Identifier; getItem(): Object; getInitialClientOffset(): ClientOffset; getInitialSourceClientOffset(): ClientOffset; getClientOffset(): ClientOffset; getDifferenceFromInitialOffset(): ClientOffset; getSourceClientOffset(): ClientOffset; } /// Backend /// --------------------------------------------------------------------- // TODO: Fill in the Backend interface. // The React DnD docs do not cover this, and this is only needed for // creating custom backends (i.e. not using the built-in HTML5Backend). interface Backend {} } declare module "react-dnd" { export = __ReactDnd; } declare module "react-dnd/modules/backends/HTML5" { export enum NativeTypes { FILE, URL, TEXT } export function getEmptyImage(): any; // Image export default class HTML5Backend implements __ReactDnd.Backend {} } declare module "react-dnd/modules/backends/Test" { class TestBackend { setup(): void; teardown(): void; connectDragSource(): void; connectDropTarget(): void; simulateBeginDrag(sourceIds: __ReactDnd.Identifier[], options?: {}): void; simulatePublishDragSource(): void; simulateHover(targetIds: __ReactDnd.Identifier[], options?: {}): void; simulateDrop(): void; simulateEndDrag(): void; } export = TestBackend; }