Export handler and options types

types/react-rnd/index.d.ts

@@ -2,104 +2,106 @@
 // Project: https://github.com/bokuweb/react-rnd
 // Definitions by: Ragg <https://github.com/Ragg->
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-// TypeScript Version: 2.3
+// TypeScript Version: 2.6
 import * as React from 'react';
 
 type CSSProperties = React.CSSProperties;
 
-interface HandleClasses {
-    bottom?: string;
-    bottomLeft?: string;
-    bottomRight?: string;
-    left?: string;
-    right?: string;
-    top?: string;
-    topLeft?: string;
-    topRight?: string;
+declare namespace Rnd {
+    type Direction =
+        | 'bottom'
+        | 'bottomLeft'
+        | 'bottomRight'
+        | 'left'
+        | 'right'
+        | 'top'
+        | 'topLeft'
+        | 'topRight';
+
+    export interface HandleClasses {
+        bottom?: string;
+        bottomLeft?: string;
+        bottomRight?: string;
+        left?: string;
+        right?: string;
+        top?: string;
+        topLeft?: string;
+        topRight?: string;
+    }
+
+    export interface HandleStyles {
+        bottom?: CSSProperties;
+        bottomLeft?: CSSProperties;
+        bottomRight?: CSSProperties;
+        left?: CSSProperties;
+        right?: CSSProperties;
+        top?: CSSProperties;
+        topLeft?: CSSProperties;
+        topRight?: CSSProperties;
+    }
+
+    export interface Position {
+        x: number;
+        y: number;
+    }
+
+    export interface Size {
+        width: number;
+        height: number;
+    }
+
+    export interface DraggableData {
+        node: HTMLElement;
+        x: number;
+        y: number;
+        deltaX: number;
+        deltaY: number;
+        lastX: number;
+        lastY: number;
+    }
+
+    export type DraggableEventHandler = (e: MouseEvent | TouchEvent, data: DraggableData) => void|false;
+
+    export type ResizeHandler = (
+        e: MouseEvent|TouchEvent,
+        direction: Direction,
+        ref: HTMLDivElement,
+        delta: Size,
+        position: Position
+    ) => void;
+
+    export interface Options {
+        default: {
+            x?: number;
+            y?: number;
+            width?: number|string;
+            height?: number|string;
+        };
+        className: string;
+        style: any;
+        width: number|string;
+        height: number|string;
+        minWidth: number|string;
+        minHeight: number|string;
+        maxWidth: number|string;
+        maxHeight: number|string;
+        z: number;
+        resizeHandleClasses: HandleClasses;
+        resizeHandleStyles: HandleStyles;
+
+        lockAspectRatio: boolean;
+        enableResizing: boolean;
+
+        onResizeStart: () => void;
+        onResize: () => void;
+        onResizeStop: ResizeHandler;
+
+        onDragStart: DraggableEventHandler;
+        onDrag: DraggableEventHandler;
+        onDragStop: DraggableEventHandler;
+    }
 }
 
-interface HandleStyles {
-    bottom?: CSSProperties;
-    bottomLeft?: CSSProperties;
-    bottomRight?: CSSProperties;
-    left?: CSSProperties;
-    right?: CSSProperties;
-    top?: CSSProperties;
-    topLeft?: CSSProperties;
-    topRight?: CSSProperties;
-}
-
-type Direction =
-    | 'bottom'
-    | 'bottomLeft'
-    | 'bottomRight'
-    | 'left'
-    | 'right'
-    | 'top'
-    | 'topLeft'
-    | 'topRight';
-
-interface Position {
-    x: number;
-    y: number;
-}
-
-interface Size {
-    width: number;
-    height: number;
-}
-
-interface DraggableData {
-    node: HTMLElement;
-    x: number;
-    y: number;
-    deltaX: number;
-    deltaY: number;
-    lastX: number;
-    lastY: number;
-}
-
-type DraggableEventHandler = (e: MouseEvent | TouchEvent, data: DraggableData) => void|false;
-
-type ResizeHandler = (
-    e: MouseEvent|TouchEvent,
-    direction: Direction,
-    ref: HTMLDivElement,
-    delta: Size,
-    position: Position
-) => void;
-
-interface Options {
-    default: {
-        x?: number;
-        y?: number;
-        width?: number|string;
-        height?: number|string;
-    };
-    className: string;
-    style: any;
-    width: number|string;
-    height: number|string;
-    minWidth: number|string;
-    minHeight: number|string;
-    maxWidth: number|string;
-    maxHeight: number|string;
-    z: number;
-    resizeHandleClasses: HandleClasses;
-    resizeHandleStyles: HandleStyles;
-
-    lockAspectRatio: boolean;
-    enableResizing: boolean;
-
-    onResizeStart: () => void;
-    onResize: () => void;
-    onResizeStop: ResizeHandler;
-
-    onDragStart: DraggableEventHandler;
-    onDrag: DraggableEventHandler;
-    onDragStop: DraggableEventHandler;
-}
-
-declare class Rnd extends React.Component<Partial<Options>> {}
+declare class Rnd extends React.Component<Partial<Rnd.Options>> {}
 
 export default Rnd;

types/react-rnd/react-rnd-tests.tsx

@@ -1,4 +1,20 @@
 import * as React from 'react';
 import Rnd from 'react-rnd';
 
-<Rnd  />;
+const onResize: Rnd.ResizeHandler = (e, direction, ref, delta, position) => {
+    direction === 'right';
+    delta.width;
+    delta.height;
+    position.x;
+    position.y;
+};
+
+<Rnd
+    className="class"
+    lockAspectRatio
+    maxWidth={100}
+    enableResizing={false}
+    resizeHandleStyles={{
+        top: { background: '#000' }
+    }}
+/>;

types/react-rnd/tsconfig.json

@@ -2,6 +2,7 @@
     "compilerOptions": {
         "module": "commonjs",
         "lib": [
+            "dom",
             "es6"
         ],
         "noImplicitAny": true,