diff --git a/react-dnd/react-dnd-tests.ts b/react-dnd/react-dnd-tests.ts index d270a041de..ef51367e85 100644 --- a/react-dnd/react-dnd-tests.ts +++ b/react-dnd/react-dnd-tests.ts @@ -11,6 +11,7 @@ var r = React.DOM; import DragSource = ReactDnd.DragSource; import DropTarget = ReactDnd.DropTarget; +import DragLayer = ReactDnd.DragLayer; import DragDropContext = ReactDnd.DragDropContext; import HTML5Backend = require('react-dnd/modules/backends/HTML5'); import TestBackend = require('react-dnd/modules/backends/Test'); @@ -197,6 +198,32 @@ module BoardSquare { export var create = React.createFactory(DndBoardSquare); } +// Custom Drag Layer Component +// ---------------------------------------------------------------------- +module CustomDragLayer { + interface CustomDragLayerP extends React.Props { + isDragging?: boolean; + item?: Object; + } + + function dragLayerCollect(monitor: ReactDnd.DragLayerMonitor) { + return { + isDragging: monitor.isDragging(), + item: monitor.getItem(), + }; + } + + export class CustomDragLayer extends React.Component { + render() { + return r.div(null, this.props.isDragging ? this.props.item : null); + } + } + + export var dragLayer = DragLayer(dragLayerCollect)(CustomDragLayer); + + export var create = React.createFactory(dragLayer); +} + // Board Component // ---------------------------------------------------------------------- @@ -237,13 +264,18 @@ module Board { } return r.div({ - style: { - width: '100%', - height: '100%', - display: 'flex', - flexWrap: 'wrap' - }, - children: squares + children: [ + CustomDragLayer.create(), + r.div({ + style: { + width: '100%', + height: '100%', + display: 'flex', + flexWrap: 'wrap' + }, + children: squares + }) + ] }); } } diff --git a/react-dnd/react-dnd.d.ts b/react-dnd/react-dnd.d.ts index d86af3b8b7..151f0a4041 100644 --- a/react-dnd/react-dnd.d.ts +++ b/react-dnd/react-dnd.d.ts @@ -53,10 +53,10 @@ declare module __ReactDnd { backend: Backend ): (componentClass: React.ComponentClass

) => ContextComponentClass

; - // TODO: Add exported function for DragLayer. - // The React DnD docs say that this is an advanced feature that is only - // necessary when performing custom rendering or when using a custom - // backend. + export function DragLayer

( + collect: (monitor: DragLayerMonitor) => Object, + options?: DndOptions

+ ): (componentClass: React.ComponentClass

) => DndComponentClass

; // Shared // ---------------------------------------------------------------------- @@ -148,6 +148,20 @@ declare module __ReactDnd { 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 /// ---------------------------------------------------------------------