Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.