react-dnd.d.ts

react-dnd.d.ts

// fork https://www.github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-dnd

// Type definitions for React DnD
// Project: https://github.com/gaearon/react-dnd
// TypeScript Version: 2.3

///<reference types="react" />

declare namespace __ReactDnd {
  // Decorated React Components
  // ----------------------------------------------------------------------

  class ContextComponent<P, S> extends React.Component<P, S> {
    getDecoratedComponentInstance(): React.Component<P, S>
    // Note: getManager is not yet documented on the React DnD docs.
    getManager(): any
  }

  class DndComponent<P, S> extends React.Component<P, S> {
    getDecoratedComponentInstance(): React.Component<P, S>
    getHandlerId(): Identifier
  }

  interface ContextComponentClass<P> extends React.ComponentClass<P> {
    new (props?: P, context?: any): ContextComponent<P, any>
    DecoratedComponent: React.ComponentClass<P>
  }

  interface DndComponentClass<P> extends React.ComponentClass<P> {
    new (props?: P, context?: any): DndComponent<P, any>
    DecoratedComponent: React.ComponentClass<P>
  }

  // Top-level API
  // ----------------------------------------------------------------------

  export function DragSource<P, DragItem, DrapSourceProps, DropResult = void>(
    type: Identifier | ((props: P) => Identifier),
    spec: DragSourceSpec<P, DragItem, DropResult>,
    collect: DragSourceCollector<DragItem, DrapSourceProps, DropResult>,
    options?: DndOptions<P>
  ): (
    componentClass:
      | React.ComponentClass<P & DrapSourceProps>
      | React.StatelessComponent<P & DrapSourceProps>
  ) => DndComponentClass<P>

  export function DropTarget<P, DragItem, DropTargetProps, DropResult = void>(
    types: Identifier | Identifier[] | ((props: P) => Identifier | Identifier[]),
    spec: DropTargetSpec<P, DragItem, DropResult>,
    collect: DropTargetCollector<DragItem, DropTargetProps, DropResult>,
    options?: DndOptions<P>
  ): (
    componentClass:
      | React.ComponentClass<P & DropTargetProps>
      | React.StatelessComponent<P & DropTargetProps>
  ) => DndComponentClass<P>

  export function DragDropContext<P>(
    backend: Backend
  ): <P>(
    componentClass: React.ComponentClass<P> | React.StatelessComponent<P>
  ) => ContextComponentClass<P>

  interface DragDropContextProviderProps {
    backend: Backend
    window?: Window
  }

  export class DragDropContextProvider extends React.Component<DragDropContextProviderProps> {}

  export function DragLayer<P, DragLayerProps, DragItem>(
    collect: DragLayerCollector<DragLayerProps, DragItem>,
    options?: DndOptions<P>
  ): (
    componentClass:
      | React.ComponentClass<P & DragLayerProps>
      | React.StatelessComponent<P & DragLayerProps>
  ) => DndComponentClass<P>

  type DragSourceCollector<DragItem, DragSourceProps, DropResult = void> = (
    connect: DragSourceConnector,
    monitor: DragSourceMonitor<DragItem, DropResult>
  ) => DragSourceProps
  type DropTargetCollector<DragItem, DropTargetProps, DropResult = void> = (
    connect: DropTargetConnector,
    monitor: DropTargetMonitor<DragItem, DropResult>
  ) => DropTargetProps
  type DragLayerCollector<DragLayerProps, DragItem> = (
    monitor: DragLayerMonitor<DragItem>
  ) => DragLayerProps

  // Shared
  // ----------------------------------------------------------------------

  // The React DnD docs say that this can also be the ES6 Symbol.
  type Identifier = string | Symbol

  interface ClientOffset {
    x: number
    y: number
  }

  interface DndOptions<P> {
    arePropsEqual?(props: P, otherProps: P): boolean
  }

  // DragSource
  // ----------------------------------------------------------------------

  interface DragSourceSpec<P, DragItem, DropResult = void> {
    beginDrag(
      props: P,
      monitor?: DragSourceMonitor<DragItem, DropResult>,
      component?: React.Component<P>
    ): DragItem
    endDrag?(
      props: P,
      monitor?: DragSourceMonitor<DragItem, DropResult>,
      component?: React.Component<P>
    ): void
    canDrag?(props: P, monitor?: DragSourceMonitor<DragItem, DropResult>): boolean
    isDragging?(props: P, monitor?: DragSourceMonitor<DragItem, DropResult>): boolean
  }

  class DragSourceMonitor<DragItem, DropResult = void> {
    canDrag(): boolean
    isDragging(): boolean
    getItemType(): Identifier
    getItem(): DragItem | null
    getDropResult(): DropResult | null
    didDrop(): boolean
    getInitialClientOffset(): ClientOffset
    getInitialSourceClientOffset(): ClientOffset
    getClientOffset(): ClientOffset
    getDifferenceFromInitialOffset(): ClientOffset
    getSourceClientOffset(): ClientOffset
  }

  class DragSourceConnector {
    dragSource(): ConnectDragSource
    dragPreview(): ConnectDragPreview
  }

  interface DragElementWrapper<O> {
    <P>(elementOrNode: React.ReactElement<P>, options?: O): React.ReactElement<P>
  }

  interface DragSourceOptions {
    dropEffect?: string
  }

  interface DragPreviewOptions {
    captureDraggingState?: boolean
    anchorX?: number
    anchorY?: number
  }

  type ConnectDragSource = DragElementWrapper<DragSourceOptions>
  type ConnectDragPreview = DragElementWrapper<DragPreviewOptions>

  /// DropTarget
  // ----------------------------------------------------------------------

  interface DropTargetSpec<P, DragItem, DropResult = void> {
    drop?(
      props: P,
      monitor?: DropTargetMonitor<DragItem, DropResult>,
      component?: React.Component<P>
    ): DropResult
    hover?(
      props: P,
      monitor?: DropTargetMonitor<DragItem, DropResult>,
      component?: React.Component<P>
    ): void
    canDrop?(props: P, monitor?: DropTargetMonitor<DragItem, DropResult>): boolean
  }

  class DropTargetMonitor<DragItem, DropResult = void> {
    canDrop(): boolean
    isOver(options?: { shallow: boolean }): boolean
    getItemType(): Identifier
    getItem(): DragItem | null
    getDropResult(): DropResult | null
    didDrop(): boolean
    getInitialClientOffset(): ClientOffset
    getInitialSourceClientOffset(): ClientOffset
    getClientOffset(): ClientOffset
    getDifferenceFromInitialOffset(): ClientOffset
    getSourceClientOffset(): ClientOffset
  }

  class DropTargetConnector {
    dropTarget(): ConnectDropTarget
  }

  type ConnectDropTarget = <P>(elementOrNode: React.ReactElement<P>) => React.ReactElement<P>

  /// DragLayerMonitor
  // ----------------------------------------------------------------------

  class DragLayerMonitor<DragItem> {
    isDragging(): boolean
    getItemType(): Identifier
    getItem(): DragItem
    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
}