Add declarations for 'react-beautiful-dnd' (#20060)

* Add declarations for 'react-beautiful-dnd'

* Add missing header

* Fix lint issues

* Fix mistake

* Remove personal tslint rules

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

@@ -0,0 +1,104 @@
+// Type definitions for react-beautiful-dnd 2.3
+// Project: https://github.com/atlassian/react-beautiful-dnd
+// Definitions by: varHarrie <https://github.com/varHarrie>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.4
+
+import * as React from 'react';
+
+export type Id = string;
+
+export type DraggableId = Id;
+
+export type DroppableId = Id;
+
+export type TypeId = Id;
+
+export interface DraggableLocation {
+    droppableId: DroppableId;
+    index: number;
+}
+
+/**
+ *  DragDropContext
+ */
+
+export interface DragStart {
+    draggableId: DraggableId;
+    type: TypeId;
+    source: DraggableLocation;
+}
+
+export interface DropResult {
+    draggableId: DraggableId;
+    type: TypeId;
+    source: DraggableLocation;
+    destination?: DraggableLocation;
+}
+
+export interface DragDropContextProps {
+    onDragStart?(initial: DragStart): void;
+    onDragEnd(result: DropResult): void;
+}
+
+export class DragDropContext extends React.Component<DragDropContextProps> {}
+
+/**
+ *  Droppable
+ */
+
+export interface DroppableProvided {
+    innerRef(element: HTMLElement | null): any;
+    placeholder?: React.ReactElement<any>;
+}
+
+export interface DroppableStateSnapshot {
+    isDraggingOver: boolean;
+}
+
+export interface DroppableProps {
+    droppableId: DroppableId;
+    type?: TypeId;
+    isDropDisabled?: boolean;
+    direction?: 'vertical' | 'horizontal';
+    children(provided: DroppableProvided, snapshot: DroppableStateSnapshot): React.ReactElement<any>;
+}
+
+export class Droppable extends React.Component<DroppableProps> {}
+
+/**
+ *  Draggable
+ */
+
+export type DraggableStyle = any;
+
+export interface DragHandleProps {
+    onMouseDown(event: MouseEvent): void;
+    onKeyDown(event: KeyboardEvent): void;
+    onClick(event: MouseEvent): void;
+    tabIndex: number;
+    'aria-grabbed': boolean;
+    draggable: boolean;
+    onDragStart(): void;
+    onDrop(): void;
+}
+
+export interface DraggableProvided {
+    innerRef(element?: HTMLElement | null): any;
+    draggableStyle?: DraggableStyle;
+    dragHandleProps?: DragHandleProps;
+    placeholder?: React.ReactElement<any>;
+}
+
+export interface DraggableStateSnapshot {
+    isDragging: boolean;
+}
+
+export interface DraggableProps {
+    draggableId: DroppableId;
+    type?: TypeId;
+    isDragDisabled?: boolean;
+    children(provided: DraggableProvided, snapshot: DraggableStateSnapshot): React.ReactElement<any>;
+}
+
+export class Draggable extends React.Component<DraggableProps> {}

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

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { DragDropContext, Draggable, Droppable, DropResult } from 'react-beautiful-dnd';
+
+interface Item {
+  id: string;
+  content: string;
+}
+
+const getItems = (count: number): Item[] => {
+  return Array
+    .from({length: count}, (v, k) => k)
+    .map(k => ({
+      id: `item-${k}`,
+      content: `item ${k}`
+    }));
+};
+
+const reorder = (list: any[], startIndex: number, endIndex: number) => {
+  const result = Array.from(list);
+  const [removed] = result.splice(startIndex, 1);
+  result.splice(endIndex, 0, removed);
+
+  return result;
+};
+
+const getItemStyle = (draggableStyle: any, isDragging: any) => ({
+  userSelect: 'none',
+  background: isDragging ? 'lightgreen' : 'grey',
+  ...draggableStyle
+});
+
+const getListStyle = (isDraggingOver: any) => ({
+  background: isDraggingOver ? 'lightblue' : 'lightgrey',
+  width: 250
+});
+
+interface AppState {
+  items: Item[];
+}
+
+class App extends React.Component<{}, AppState> {
+  constructor(props: any) {
+    super(props);
+
+    this.state = {
+      items: getItems(10)
+    };
+    this.onDragEnd = this.onDragEnd.bind(this);
+  }
+
+  onDragEnd(result: DropResult) {
+    if (!result.destination) {
+      return;
+    }
+
+    const items = reorder(
+      this.state.items,
+      result.source.index,
+      result.destination.index
+    );
+
+    this.setState({items});
+  }
+
+  render() {
+    return (
+      <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}>
+                  {(provided, snapshot) => (
+                    <div>
+                      <div
+                        ref={provided.innerRef}
+                        style={getItemStyle(
+                          provided.draggableStyle,
+                          snapshot.isDragging
+                        )}
+                        {...provided.dragHandleProps}
+                      >
+                        {item.content}
+                      </div>
+                      {provided.placeholder}
+                    </div>
+                  )}
+                </Draggable>
+              ))}
+              {provided.placeholder}
+            </div>
+          )}
+        </Droppable>
+      </DragDropContext>
+    );
+  }
+}
+
+ReactDOM.render(<App />, document.getElementById('app'));

types/react-beautiful-dnd/tsconfig.json

@@ -0,0 +1,24 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "jsx": "react",
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts",
+        "react-beautiful-dnd-tests.tsx"
+    ]
+}

types/react-beautiful-dnd/tslint.json

@@ -0,0 +1,3 @@
+{
+    "extends": "dtslint/dt.json"
+}