diff --git a/types/react-beautiful-dnd/index.d.ts b/types/react-beautiful-dnd/index.d.ts index e1dd58a179..d02c86bbcf 100644 --- a/types/react-beautiful-dnd/index.d.ts +++ b/types/react-beautiful-dnd/index.d.ts @@ -1,7 +1,8 @@ -// Type definitions for react-beautiful-dnd 4.0 +// Type definitions for react-beautiful-dnd 6.0 // Project: https://github.com/atlassian/react-beautiful-dnd // Definitions by: varHarrie // Bradley Ayers +// Austin Turner // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.6 @@ -12,12 +13,18 @@ export type DraggableId = Id; export type DroppableId = Id; export type TypeId = Id; export type ZIndex = number | string; +export type DropReason = 'DROP' | 'CANCEL'; +export type Announce = (message: string) => void; export interface DraggableLocation { droppableId: DroppableId; index: number; } +export interface HookProvided { + announce: Announce; +} + /** * DragDropContext */ @@ -32,17 +39,14 @@ export interface DragUpdate extends DragStart { destination?: DraggableLocation | null; } -export interface DropResult { - draggableId: DraggableId; - type: TypeId; - source: DraggableLocation; - destination?: DraggableLocation | null; +export interface DropResult extends DragUpdate { + reason: DropReason; } export interface DragDropContextProps { - onDragStart?(initial: DragStart): void; - onDragUpdate?(initial: DragUpdate): void; - onDragEnd(result: DropResult): void; + onDragStart?(initial: DragStart, provided: HookProvided): void; + onDragUpdate?(initial: DragUpdate, provided: HookProvided): void; + onDragEnd(result: DropResult, provided: HookProvided): void; } export class DragDropContext extends React.Component {} @@ -51,9 +55,14 @@ export class DragDropContext extends React.Component {} * Droppable */ +export interface DroppableProvidedProps { + // used for shared global styles + 'data-react-beautiful-dnd-droppable': string; +} export interface DroppableProvided { innerRef(element: HTMLElement | null): any; placeholder?: React.ReactElement | null; + droppableProps: DroppableProvidedProps; } export interface DroppableStateSnapshot { @@ -103,12 +112,14 @@ export interface DraggableProvidedDraggableProps { export interface DraggableProvidedDragHandleProps { onMouseDown: React.MouseEventHandler; onKeyDown: React.KeyboardEventHandler; - onClick: React.MouseEventHandler; + onTouchStart: React.TouchEventHandler; + onTouchMove: React.TouchEventHandler; + 'data-react-beautiful-dnd-drag-handle': string; + 'aria-roledescription': string; tabIndex: number; 'aria-grabbed': boolean; draggable: boolean; - onDragStart(): void; - onDrop(): void; + onDragStart: React.DragEventHandler; } export interface DraggableProvided { diff --git a/types/react-beautiful-dnd/react-beautiful-dnd-tests.tsx b/types/react-beautiful-dnd/react-beautiful-dnd-tests.tsx index b05ff46550..882b28a9ad 100644 --- a/types/react-beautiful-dnd/react-beautiful-dnd-tests.tsx +++ b/types/react-beautiful-dnd/react-beautiful-dnd-tests.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; -import { DragDropContext, Draggable, Droppable, DropResult } from 'react-beautiful-dnd'; +import { DragDropContext, Draggable, Droppable, DropResult, DragStart, DragUpdate, HookProvided } from 'react-beautiful-dnd'; interface Item { id: string; @@ -49,7 +49,15 @@ class App extends React.Component<{}, AppState> { this.onDragEnd = this.onDragEnd.bind(this); } - onDragEnd(result: DropResult) { + onDragStart(dragStart: DragStart, provided: HookProvided) { + // + } + + onDragUpdate(dragUpdate: DragUpdate, provided: HookProvided) { + // + } + + onDragEnd(result: DropResult, provided: HookProvided) { if (!result.destination) { return; } @@ -65,10 +73,10 @@ class App extends React.Component<{}, AppState> { render() { return ( - + {(provided, snapshot) => ( -
+
{this.state.items.map((item, index) => ( {(provided, snapshot) => (