Merge pull request #5995 from Asana/reactdnd_draglayer

[ReactDnd] Added DragLayer type definition

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<CustomDragLayer> {
+        isDragging?: boolean;
+        item?: Object;
+    }
+
+    function dragLayerCollect(monitor: ReactDnd.DragLayerMonitor) {
+        return {
+            isDragging: monitor.isDragging(),
+            item: monitor.getItem(),
+        };
+    }
+
+    export class CustomDragLayer extends React.Component<CustomDragLayerP, {}> {
+        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
+                    })
+                ]
             });
         }
     }

react-dnd/react-dnd.d.ts

@@ -53,10 +53,10 @@ declare module __ReactDnd {
         backend: Backend
     ): (componentClass: React.ComponentClass<P>) => ContextComponentClass<P>;
 
-    // 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<P>(
+        collect: (monitor: DragLayerMonitor) => Object,
+        options?: DndOptions<P>
+    ): (componentClass: React.ComponentClass<P>) => DndComponentClass<P>;
 
     // Shared
     // ----------------------------------------------------------------------
@@ -148,6 +148,20 @@ declare module __ReactDnd {
 
     type ConnectDropTarget = <P>(elementOrNode: React.ReactElement<P>) => React.ReactElement<P>;
 
+    /// DragLayerMonitor
+    // ----------------------------------------------------------------------
+
+    class DragLayerMonitor {
+        isDragging(): boolean;
+        getItemType(): Identifier;
+        getItem(): Object;
+        getInitialClientOffset(): ClientOffset;
+        getInitialSourceClientOffset(): ClientOffset;
+        getClientOffset(): ClientOffset;
+        getDifferenceFromInitialOffset(): ClientOffset;
+        getSourceClientOffset(): ClientOffset;
+    }
+
     /// Backend
     /// ---------------------------------------------------------------------