Move TS defs to own folder and add tests

Makefile

@@ -35,6 +35,7 @@ dist/%.js: $(BIN)
 
 test: $(BIN)
 	@$(BIN)/karma start --single-run
+	@$(BIN)/tsc -p typings
 
 dev: $(BIN)
 	script/build-watch

package.json

@@ -12,7 +12,7 @@
     "build": "make clean build",
     "lint": "make lint"
   },
-  "typings": "./index.d.ts",
+  "typings": "./typings/index.d.ts",
   "repository": {
     "type": "git",
     "url": "https://github.com/mzabriskie/react-draggable.git"
@@ -29,6 +29,8 @@
   },
   "homepage": "https://github.com/mzabriskie/react-draggable",
   "devDependencies": {
+    "@types/react": "^15.0.23",
+    "@types/react-dom": "^15.5.0",
     "babel-cli": "^6.10.1",
     "babel-core": "^6.10.4",
     "babel-eslint": "^6.1.2",
@@ -64,6 +66,7 @@
     "react-frame-component": "0.6.2",
     "semver": "^5.3.0",
     "static-server": "^2.0.3",
+    "typescript": "^2.3.2",
     "uglify-js": "^2.7.0",
     "webpack": "^1.13.1",
     "webpack-dev-server": "^1.14.1"

typings/index.d.ts

@@ -0,0 +1,53 @@
+declare module 'react-draggable' {
+  import * as React from 'react';
+
+  export interface DraggableBounds {
+    left: number
+    right: number
+    top: number
+    bottom: number
+  }
+
+  export interface DraggableProps extends DraggableCoreProps {
+    axis: 'both' | 'x' | 'y' | 'none',
+    bounds: DraggableBounds | string | false ,
+    defaultClassName: string,
+    defaultClassNameDragging: string,
+    defaultClassNameDragged: string,
+    defaultPosition: ControlPosition,
+    position: ControlPosition
+  }
+
+  export type DraggableEventHandler = (e: MouseEvent, data: DraggableData) => void | false;
+
+  export interface DraggableData {
+    node: HTMLElement,
+    x: number, y: number,
+    deltaX: number, deltaY: number,
+    lastX: number, lastY: number
+  }
+
+  export type ControlPosition = {x: number, y: number};
+
+  export interface DraggableCoreProps {
+    allowAnyClick: boolean,
+    cancel: string,
+    disabled: boolean,
+    enableUserSelectHack: boolean,
+    offsetParent: HTMLElement,
+    grid: [number, number],
+    handle: string,
+    onStart: DraggableEventHandler,
+    onDrag: DraggableEventHandler,
+    onStop: DraggableEventHandler,
+    onMouseDown: (e: MouseEvent) => void
+  }
+
+  export default class Draggable extends React.Component<Partial<DraggableProps>, {}> {
+    static defaultProps : DraggableProps;
+  }
+
+  export class DraggableCore extends React.Component<Partial<DraggableCoreProps>, {}> {
+    static defaultProps : DraggableCoreProps;    
+  }
+}

typings/test.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import Draggable, {DraggableCore} from 'react-draggable';
+
+const root = document.getElementById('root')
+
+function handleStart() {}
+function handleDrag() {}
+function handleStop() {}
+function handleMouseDown() {}
+
+ReactDOM.render(
+  <Draggable
+    axis="y"
+    handle=".handle"
+    cancel=".cancel"
+    grid={[10, 10]}
+    onStart={handleStart}
+    onDrag={handleDrag}
+    onStop={handleStop}
+    offsetParent={document.body}
+    allowAnyClick={true}
+    onMouseDown={handleMouseDown}
+    disabled={true}
+    enableUserSelectHack={false}
+    bounds={false}
+    defaultClassName={'draggable'}
+    defaultClassNameDragging={'dragging'}
+    defaultClassNameDragged={'dragged'}
+    defaultPosition={{x: 0, y: 0}}
+    position={{x: 50, y: 50}}>
+    <div className="foo bar">
+      <div className="handle"/>
+      <div className="cancel"/>
+    </div>
+  </Draggable>,
+  root
+);
+
+ReactDOM.render(
+  <DraggableCore
+    handle=".handle"
+    cancel=".cancel"
+    allowAnyClick={true}
+    disabled={true}
+    onMouseDown={handleMouseDown}
+    grid={[10, 10]}
+    onStart={handleStart}
+    onDrag={handleDrag}
+    onStop={handleStop}
+    offsetParent={document.body}
+    enableUserSelectHack={false}>
+    <div className="foo bar">
+      <div className="handle"/>
+      <div className="cancel"/>
+    </div>
+  </DraggableCore>,
+  root
+);
+
+
+ReactDOM.render(<Draggable><div/></Draggable>, root);
+
+ReactDOM.render(<DraggableCore><div/></DraggableCore>, root);

typings/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "noEmit": true,
+    "jsx": "preserve",
+    "strict": true
+  },
+  "files": [
+    "index.d.ts",
+    "test.tsx"
+  ]
+}