Here is what I came up with, please give me your opinions, before we make this a PR to either this Repo or the DefinitelyTyped repo.

Something is definitely amiss, as the following only works if we ask TS to target ES6. Not sure what needs to be done to ensure more robust compatibility.

///<reference path="typings/react/react.d.ts"/>

declare module 'react-draggable' {

    import {Component} from 'react';
    import Props = __React.Props;

    interface DraggableBounds {
        left: number
        right: number
        top: number
        bottom:number
    }

    interface DraggableProps extends Props<Draggable> {
        axis?: string
        bounds?: DraggableBounds|string|boolean
        start?:{x:number,y:number}
        zIndex?:number
    }

    interface DraggableCoreProps extends Props<DraggableCore> {
        allowAnyClick: boolean
        disabled: boolean
        enableUserSelectHack: boolean
        grid: number[]
        handle: string
        cancel: string
        onStart: (event, ui) => boolean
        onDrag: (event, ui) => boolean
        onStop: (event, ui) => boolean
        onMouseDown: (event, ui) => boolean
    }

    export default class Draggable extends Component<DraggableProps, any> {
    }

    export class DraggableCore extends Component<DraggableCoreProps, any> {
    }

}

{
    "compilerOptions": {
        "module": "es6",
        "target": "es6",
        "sourceMap": true,
        "jsx": "react"
    },
    "exclude": [
        "node_modules"
    ]
}

// sample code
///<reference path="react-draggable.d.ts"/>
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {default as Draggable, DraggableProps} from 'react-draggable';
import * as ReactDraggable from 'react-draggable';

class SampleComponent extends React.Component<any,any> {
    constructor(props:any) {
        super(props);
    }

    render() {

        const props:DraggableProps = {};
        debugger;
        return (
            <Draggable {...props}>
                <div>
                    <h1>Hello World!</h1>
                </div>
            </Draggable>
        )
    }
}
ReactDOM.render(<SampleComponent/>, document.getElementById("content"));

Provide typescript definitions #119

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions