hootsuite / grid

Drag and drop library for two-dimensional, resizable and responsive lists
http://hootsuite.github.io/grid/
Apache License 2.0
3.57k stars 279 forks source link

TypeScript Definitions #113

Open JonGinty opened 7 years ago

JonGinty commented 7 years ago

Added single type definition file which contains definitions for both GridList and DraggableGridList.

There are a couple of lines in the definitions which I've commented out which allow the definitions to be used without depending on JQuery definitions as well. I can refactor into two separate definition files if that would be more suitable.

I've publicly exposed DraggableGridList as window member "window.DraggableGridList". I'm aware that's a controversial change so I could potentially refactor to avoid it. The issue is that using the "$(el).gridList()" constructor is incompatible with the widely used DefinitelyTyped definitions for JQuery.

catalinmiron commented 6 years ago

@JonGinty can't you do like this:

interface JQuery {
    gridList: GridlistPlugin<this>;
}
interface GridlistPlugin<TJQuery> {
    (methodName: string, ...args: any[]): TJQuery;
    (options?: GridlistOptions): TJQuery;
}
interface GridList {
    gridList: GridList;
    destroy(): void;
    resize(lanes: number): void;
    resizeItem(element: Element | string | JQuery, size: Dimension2): void;
    // resizeItem(element: Element | string | any, size: Dimension2): void;
    reflow(): void;
    render(): void;
}
interface GridListOptions {
    // ...
}

?

JonGinty commented 6 years ago

Hey @catalinmiron,

Yeah that pretty much seems to do the trick. I did have to add a string indexer to the JQuery interface to get it to work in my code (compiler complained about missing JQuery methods and indexer).

interface JQuery {
    gridList: GridListPlugin<this>;
    [index: string]: any;
}

The downside to this seems to be that if (like me) you are using the type definitions for JQuery, you lose all of the JQuery strong typing. That said, I guess anyone could just comment out this new JQuery definition block if they have the definitions.

What do you reckon? Worth me amending the PR?

Cheers Jon