Preview

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

@@ -10,6 +10,7 @@
 //                 Arun George <https://github.com/aruniverse>
 //                 Nick Garlis <https://github.com/nickgarlis>
 //                 Brian Powers <https://github.com/brianspowers>
+//                 Declan Warn <https://github.com/declan-warn>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 // Refer to https://github.com/atlassian/react-beautiful-dnd/blob/master/src/types.js
@@ -180,24 +181,24 @@ export interface Scrollable {
 export interface PlaceholderInSubject {
     // might not actually be increased by
     // placeholder if there is no required space
-    increasedBy?: Position | undefined;
+    increasedBy: Position | null | undefined;
     placeholderSize: Position;
     // max scroll before placeholder added
     // will be null if there was no frame
-    oldFrameMaxScroll?: Position | undefined;
+    oldFrameMaxScroll: Position | null | undefined;
 }
 
 export interface DroppableSubject {
     // raw, unchanging
     page: BoxModel;
-    withPlaceholder?: PlaceholderInSubject | undefined;
+    withPlaceholder: PlaceholderInSubject | null | undefined;
     // The hitbox for a droppable
     // - page margin box
     // - with scroll changes
     // - with any additional droppable placeholder
     // - clipped by frame
     // The subject will be null if the hit area is completely empty
-    active?: Rect | undefined;
+    active: Rect | null | undefined;
 }
 
 export interface DroppableDimension {
@@ -212,7 +213,7 @@ export interface DroppableDimension {
     // relative to the page
     page: BoxModel;
     // The container of the droppable
-    frame?: Scrollable | undefined;
+    frame: Scrollable | null | undefined;
     // what is visible through the frame
     subject: DroppableSubject;
 }
@@ -283,7 +284,7 @@ export interface Displaced {
 export interface DragImpact {
     displaced: DisplacementGroups;
     displacedBy: DisplacedBy;
-    at?: ImpactLocation | undefined;
+    at: ImpactLocation | null | undefined;
 }
 
 export interface ClientPositions {
@@ -316,11 +317,6 @@ export interface DragPositions {
 
 export interface DraggableRubric {
     draggableId: DraggableId;
-    mode: MovementMode;
-    source: DraggableLocation;
-}
-
-export interface DragStart extends BeforeCapture {
     type: TypeId;
     source: DraggableLocation;
 }
@@ -340,9 +336,9 @@ export interface DragStart extends DraggableRubric {
 
 export interface DragUpdate extends DragStart {
     // may not have any destination (drag to nowhere)
-    destination?: DraggableLocation | undefined;
+    destination: DraggableLocation | null | undefined;
     // populated when a draggable is dragging over another in combine mode
-    combine?: Combine | undefined;
+    combine: Combine | null | undefined;
 }
 
 export type DropReason = 'DROP' | 'CANCEL';
@@ -392,6 +388,7 @@ export interface DroppablePublish {
     droppableId: DroppableId;
     scroll: Position;
 }
+
 export interface Published {
     additions: DraggableDimension[];
     removals: DraggableId[];
@@ -407,7 +404,7 @@ export interface CompletedDrag {
 
 export interface IdleState {
     phase: 'IDLE';
-    completed?: CompletedDrag | undefined;
+    completed: CompletedDrag | null | undefined;
     shouldFlush: boolean;
 }
 
@@ -426,9 +423,9 @@ export interface DraggingState {
     // when there is a fixed list we want to opt out of this behaviour
     isWindowScrollAllowed: boolean;
     // if we need to jump the scroll (keyboard dragging)
-    scrollJumpRequest?: Position | undefined;
+    scrollJumpRequest: Position | null | undefined;
     // whether or not draggable movements should be animated
-    forceShouldAnimate?: boolean | undefined;
+    forceShouldAnimate: boolean | null | undefined;
 }
 
 // While dragging we can enter into a bulk collection phase
@@ -550,42 +547,41 @@ export type Sensor = (api: SensorAPI) => void;
  *  DragDropContext
  */
 
-export interface DragDropContextProps {
-    onBeforeCapture?(before: BeforeCapture): void;
-    onBeforeDragStart?(initial: DragStart): void;
-    onDragStart?(initial: DragStart, provided: ResponderProvided): void;
-    onDragUpdate?(initial: DragUpdate, provided: ResponderProvided): void;
-    onDragEnd(result: DropResult, provided: ResponderProvided): void;
+// Refer to https://github.com/atlassian/react-beautiful-dnd/blob/master/src/view/drag-drop-context/drag-drop-context.jsx
+
+export interface DragDropContextProps extends Responders {
     children: React.ReactNode | null;
     dragHandleUsageInstructions?: string | undefined;
     nonce?: string | undefined;
     enableDefaultSensors?: boolean | undefined;
     sensors?: Sensor[] | undefined;
 }
 
-export class DragDropContext extends React.Component<DragDropContextProps> { }
+export class DragDropContext extends React.Component<DragDropContextProps> {}
 
 /**
  *  Droppable
  */
 
+// Refer to https://github.com/atlassian/react-beautiful-dnd/blob/master/src/view/droppable/droppable-types.js
+
 export interface DroppableProvidedProps {
     // used for shared global styles
-    'data-rbd-droppable-context-id': string;
+    'data-rbd-droppable-context-id': ContextId;
     // Used to lookup. Currently not used for drag and drop lifecycle
     'data-rbd-droppable-id': DroppableId;
 }
 
 export interface DroppableProvided {
-    innerRef: (element: HTMLElement | null) => any;
-    placeholder?: React.ReactElement<HTMLElement> | null | undefined;
+    innerRef: (element: HTMLElement | null) => void;
+    placeholder: React.ReactNode;
     droppableProps: DroppableProvidedProps;
 }
 
 export interface DroppableStateSnapshot {
     isDraggingOver: boolean;
-    draggingOverWith?: DraggableId | undefined;
-    draggingFromThisWith?: DraggableId | undefined;
+    draggingOverWith: DraggableId | null | undefined;
+    draggingFromThisWith: DraggableId | null | undefined;
     isUsingPlaceholder: boolean;
 }
 
@@ -598,27 +594,61 @@ export interface DroppableProps {
     direction?: Direction | undefined;
     ignoreContainerClipping?: boolean | undefined;
     renderClone?: DraggableChildrenFn | undefined;
-    getContainerForClone?: (() => React.ReactElement<HTMLElement>) | undefined;
+    getContainerForClone?: (() => HTMLElement) | undefined;
     children(provided: DroppableProvided, snapshot: DroppableStateSnapshot): React.ReactElement<HTMLElement>;
 }
 
-export class Droppable extends React.Component<DroppableProps> { }
+export class Droppable extends React.Component<DroppableProps> {}
 
 /**
  *  Draggable
  */
 
+// Refer to https://github.com/atlassian/react-beautiful-dnd/blob/master/src/view/draggable/draggable-types.js
+
 export interface DropAnimation {
     duration: number;
     curve: string;
     moveTo: Position;
-    opacity?: number | undefined;
-    scale?: number | undefined;
+    /**
+     * This value will actually be `null` instead of `undefined`.
+     *
+     * The type is fudged because `null` is not compatible with the
+     * `React.CSSProperties` type.
+     *
+     * The `style` prop should interpret `null` and `undefined` the same way.
+     */
+    opacity: number | undefined;
+    /**
+     * This value will actually be `null` instead of `undefined`.
+     *
+     * The type is fudged because `null` is not compatible with the
+     * `React.CSSProperties` type.
+     *
+     * The `style` prop should interpret `null` and `undefined` the same way.
+     */
+    scale: number | undefined;
 }
 
 export interface NotDraggingStyle {
-    transform?: string | undefined;
-    transition?: 'none' | undefined;
+    /**
+     * This value will actually be `null` instead of `undefined`.
+     *
+     * The type is fudged because `null` is not compatible with the
+     * `React.CSSProperties` type.
+     *
+     * The `style` prop should interpret `null` and `undefined` the same way.
+     */
+    transform: string | undefined;
+    /**
+     * This value will actually be `null` instead of `undefined`.
+     *
+     * The type is fudged because `null` is not compatible with the
+     * `React.CSSProperties` type.
+     *
+     * The `style` prop should interpret `null` and `undefined` the same way.
+     */
+    transition: 'none' | undefined;
 }
 
 export interface DraggingStyle {
@@ -628,10 +658,26 @@ export interface DraggingStyle {
     boxSizing: 'border-box';
     width: number;
     height: number;
-    transition: 'none';
-    transform?: string | undefined;
+    transition: string;
+    /**
+     * This value will actually be `null` instead of `undefined`.
+     *
+     * The type is fudged because `null` is not compatible with the
+     * `React.CSSProperties` type.
+     *
+     * The `style` prop should interpret `null` and `undefined` the same way.
+     */
+    transform: string | undefined;
     zIndex: number;
-    opacity?: number | undefined;
+    /**
+     * This value will actually be `null` instead of `undefined`.
+     *
+     * The type is fudged because `null` is not compatible with the
+     * `React.CSSProperties` type.
+     *
+     * The `style` prop should interpret `null` and `undefined` the same way.
+     */
+    opacity: number | undefined;
     pointerEvents: 'none';
 }
 
@@ -657,22 +703,23 @@ export interface DraggableProvidedDragHandleProps {
 
 export interface DraggableProvided {
     // will be removed after move to react 16
-    innerRef: (element?: HTMLElement | null) => any;
+    innerRef: (element: HTMLElement | null) => void;
     draggableProps: DraggableProvidedDraggableProps;
-    dragHandleProps?: DraggableProvidedDragHandleProps | undefined;
+    dragHandleProps: DraggableProvidedDragHandleProps | null | undefined;
 }
 
 export interface DraggableStateSnapshot {
     isDragging: boolean;
     isDropAnimating: boolean;
-    dropAnimation?: DropAnimation | undefined;
-    draggingOver?: DroppableId | undefined;
+    isClone: boolean;
+    dropAnimation: DropAnimation | null | undefined;
+    draggingOver: DroppableId | null | undefined;
     // the id of a draggable that you are combining with
-    combineWith?: DraggableId | undefined;
+    combineWith: DraggableId | null | undefined;
     // a combine target is being dragged over by
-    combineTargetFor?: DraggableId | undefined;
+    combineTargetFor: DraggableId | null | undefined;
     // What type of movement is being done: 'FLUID' or 'SNAP'
-    mode?: MovementMode | undefined;
+    mode: MovementMode | null | undefined;
 }
 
 export type DraggableChildrenFn = (
@@ -690,7 +737,7 @@ export interface DraggableProps {
     shouldRespectForcePress?: boolean | undefined;
 }
 
-export class Draggable extends React.Component<DraggableProps> { }
+export class Draggable extends React.Component<DraggableProps> {}
 
 export function resetServerContext(): void;