[react-beautiful-dnd] update to 4.0.1

types/react-beautiful-dnd/index.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for react-beautiful-dnd 3.0
+// Type definitions for react-beautiful-dnd 4.0.1
 // Project: https://github.com/atlassian/react-beautiful-dnd
 // Definitions by: varHarrie <https://github.com/varHarrie>
 //                 Bradley Ayers <https://github.com/bradleyayers>
@@ -8,12 +8,10 @@
 import * as React from 'react';
 
 export type Id = string;
-
 export type DraggableId = Id;
-
 export type DroppableId = Id;
-
 export type TypeId = Id;
+export type ZIndex = number | string;
 
 export interface DraggableLocation {
     droppableId: DroppableId;
@@ -71,9 +69,33 @@ export class Droppable extends React.Component<DroppableProps> {}
  *  Draggable
  */
 
-export type DraggableStyle = any;
+export interface NotDraggingStyle {
+    transform: null | string,
+    transition: null | 'none',
+}
 
-export interface DragHandleProps {
+export interface DraggingStyle {
+    pointerEvents: 'none',
+    position: 'fixed',
+    width: number,
+    height: number,
+    boxSizing: 'border-box',
+    top: number,
+    left: number,
+    margin: 0,
+    transform: null | string,
+    transition: 'none',
+    zIndex: ZIndex,
+}
+
+export interface DraggableProvidedDraggableProps {
+    // inline style
+    style: null | DraggingStyle | NotDraggingStyle,
+    // used for shared global styles
+    'data-react-beautiful-dnd-draggable': string,
+}
+
+export interface DraggableProvidedDragHandleProps {
     onMouseDown: React.MouseEventHandler<any>;
     onKeyDown: React.KeyboardEventHandler<any>;
     onClick: React.MouseEventHandler<any>;
@@ -85,9 +107,11 @@ export interface DragHandleProps {
 }
 
 export interface DraggableProvided {
+    draggableProps: DraggableProvidedDraggableProps | null;
+    dragHandleProps: DraggableProvidedDragHandleProps | null;
+
+    // will be removed after move to react 16
     innerRef(element?: HTMLElement | null): any;
-    draggableStyle?: DraggableStyle | null;
-    dragHandleProps?: DragHandleProps | null;
     placeholder?: React.ReactElement<any> | null;
 }
 
@@ -97,7 +121,7 @@ export interface DraggableStateSnapshot {
 
 export interface DraggableProps {
     draggableId: DroppableId;
-    type?: TypeId;
+    index: number;
     isDragDisabled?: boolean;
     disableInteractiveElementBlocking?: boolean;
     children(provided: DraggableProvided, snapshot: DraggableStateSnapshot): React.ReactElement<any>;

types/react-beautiful-dnd/react-beautiful-dnd-tests.tsx

@@ -24,7 +24,7 @@ const reorder = (list: any[], startIndex: number, endIndex: number) => {
   return result;
 };
 
-const getItemStyle = (draggableStyle: any, isDragging: any) => ({
+const getItemStyle = (isDragging: boolean, draggableStyle: any) => ({
   userSelect: 'none',
   background: isDragging ? 'lightgreen' : 'grey',
   ...draggableStyle
@@ -68,21 +68,16 @@ class App extends React.Component<{}, AppState> {
       <DragDropContext onDragEnd={this.onDragEnd}>
         <Droppable droppableId="droppable">
           {(provided, snapshot) => (
-            <div
-              ref={provided.innerRef}
-              style={getListStyle(snapshot.isDraggingOver)}
-            >
-              {this.state.items.map(item => (
-                <Draggable key={item.id} draggableId={item.id} disableInteractiveElementBlocking={true}>
+            <div ref={provided.innerRef} style={getListStyle(snapshot.isDraggingOver)}>
+              {this.state.items.map((item, index) => (
+                <Draggable key={item.id} draggableId={item.id} index={index}>
                   {(provided, snapshot) => (
                     <div>
                       <div
                         ref={provided.innerRef}
-                        style={getItemStyle(
-                          provided.draggableStyle,
-                          snapshot.isDragging
-                        )}
+                        {...provided.draggableProps}
                         {...provided.dragHandleProps}
+                        style={getItemStyle(snapshot.isDragging, provided.draggableProps.style)}
                       >
                         {item.content}
                       </div>