react-grid-layout.d.ts

declare module 'react-grid-layout' {
    export  = __ReactGridLayout;

}
declare namespace __ReactGridLayout {
    import React = __React;
    let Responsive:__ReactGridLayout.ResponsiveReactGridLayout
    interface GridItemProps<P> {
        // Children must be only a single element
        children: React.ReactElement<P>,

        // General grid attributes
        cols: number,
        containerWidth: number,
        rowHeight: number,
        margin: Array<any>,

        // These are all in grid units
        x: number,
        y: number,
        w: number,
        h: number,

        // All optional
        minW?: (GridItemProps, string1, string2) => void,
        maxW?: (GridItemProps, string1, string2) => void,
        minH?: (GridItemProps, string1, string2) => void,
        maxH?: (GridItemProps, string1, string2) => void,

        // ID is nice to have for callbacks
        i: string

        // If true, item will be repositioned when x/y/w/h change
        moveOnStartChange?: boolean,

        // Functions
        onDragStop?: Function,
        onDragStart?: Function,
        onDrag?: Function,
        onResizeStop?: Function,
        onResizeStart?: Function,
        onResize?: Function,

        // Flags
        isDraggable?: boolean,
        isResizable?: boolean,
        // Use CSS transforms instead of top/left
        useCSSTransforms?: boolean,
        isPlaceholder?: boolean,

        // Others
        className?: string,
        // Selector for draggable handle
        handle?: string,
        // Selector for draggable cancel (see react-draggable)
        cancel?: string
    }

    interface GridItemState {
        resizing: boolean;
        className: string;
    }

    interface Position {
        left: number;
        top: number;
        width: number;
        height: number;
    }


    interface GridItem<P> extends React.ClassicComponent<GridItemProps<P>,GridItemState> {
        calcPosition(x:number, y:number, w:number, h:number): Position;
        calcXY(params:{left: number,top: number}):{x: number,y: number};
        calcWH(params:{height: number,width: number}): {w: number,h: number};
        createStyle(pos:Position): {width: string,height: string, left: string,top: string,position: string};
        mixinDraggable(child:React.ReactElement<P>, position:Position): React.ReactElement<P>;
        mixinResizable(child:React.ReactElement<P>, position:Position): React.ReactElement<P>;
        onDragHandler(handlerName:String): (e:Event, x:{element: React.ReactElement<P>, position: Position}) => void;
        onResizeHandler(handlerName:String): (e:Event, x:{element: React.ReactElement<P>, position: Position}) => void;
    }


    interface ReactGridLayoutProps {
        // If true, the container height swells and contracts to fit contents
        autoSize: boolean;
        // # of cols.
        cols: number;

        // A selector that will not be draggable.
        draggableCancel: string;
        // A selector for the draggable handler
        draggableHandle: string;

        // If true, the layout will compact vertically
        verticalCompact: boolean;

        // layout is an array of object with the format:
        // {x: Number, y: Number, w: Number, h: Number, i: Number}
        layout: (ReactGridLayoutProps, string1, string2) => void;

        layouts: (ReactGridLayoutProps, string1, string2) => void;

        // margin between items [x, y] in px
        margin: any;
        // Rows have a static height, but you can change this based on breakpoints if you like
        rowHeight: number;

        //
        // Flags
        //
        isDraggable: boolean;
        isResizable: boolean;
        // Use CSS transforms instead of top/left
        useCSSTransforms: boolean;

        //
        // Callbacks
        //

        // Callback so you can save the layout.
        // Calls back with (currentLayout, allLayouts). allLayouts are keyed by breakpoint.
        onLayoutChange: Function,

        // Calls when drag starts. Callback is of the signature (layout, oldItem, newItem, placeholder, e).
        // All callbacks below have the same signature. 'start' and 'stop' callbacks omit the 'placeholder'.
        onDragStart: Function,
        // Calls on each drag movement.
        onDrag: Function,
        // Calls when drag is complete.
        onDragStop: Function,
        //Calls when resize starts.
        onResizeStart: Function,
        // Calls when resize movement happens.
        onResize: Function,
        // Calls when resize is complete.
        onResizeStop: Function,

        //
        // Other validations
        //

        // Children must not have duplicate keys.
        children: (props:ReactGridLayoutProps, propName:string, componentName:string) => void;
    }

    interface ReactGridLayout<S, P> extends React.ClassicComponent<ReactGridLayoutProps,S> {
        containerHeight(): void,
        onWidthChange(width:number): void,
        onDragStart(i:number, x:number, y:number, params?:{e: Event,element: React.ReactElement<P>,position: Position}): void
        onDrag(i:number, x:number, y:number, params?:{e: Event,element: React.ReactElement<P>,position: Position}): void
        onDragStop(i:number, x:number, y:number, params?:{e: Event,element: React.ReactElement<P>,position: Position}): void
        onResizeStart(i:number, w:number, h:number, params?:{e: Event,element: React.ReactElement<P>,position: Position}): void
        onResize(i:number, w:number, h:number, params?:{e: Event,element: React.ReactElement<P>,position: Position}): void
        onResizeStop(i:number, w:number, h:number, params?:{e: Event,element: React.ReactElement<P>,position: Position}): void
        placeholder(): React.ReactElement<P>,
        processGridItem(child:React.ReactElement<P>): React.ReactElement<P>
    }

    interface ResponsiveReactGridLayoutProps {
        //
        // Basic props
        //

        // Optional, but if you are managing width yourself you may want to set the breakpoint
        // yourself as well.
        breakpoint: string,

        // {name: pxVal}, e.g. {lg: 1200, md: 996, sm: 768, xs: 480}
        breakpoints: Object,

        // # of cols. This is a breakpoint -> cols map
        cols: Object,

        // layouts is an object mapping breakpoints to layouts.
        // e.g. {lg: Layout, md: Layout, ...}
        layouts: (props:ResponsiveReactGridLayoutProps, propName:string, componentName:string) => void,

        //
        // Callbacks
        //

        // Calls back with breakpoint and new # cols
        onBreakpointChange: Function,

        // Callback so you can save the layout.
        // Calls back with (currentLayout, allLayouts). allLayouts are keyed by breakpoint.
        onLayoutChange: Function
    }
    interface ResponsiveReactGridLayoutState {
        layout: any;
        layouts: any[];
        breakpoint: string;
        cols: number;
        width: number;
    }

    interface ResponsiveReactGridLayout extends React.ClassicComponent<ResponsiveReactGridLayoutProps,ResponsiveReactGridLayoutState> {
        onLayoutChange(layout:any),
        onWidthChange(width:number),
    }

    export namespace responsiveUtils {
        /**
         * Given a width, find the highest breakpoint that matches is valid for it (width > breakpoint).
         *
         * @param  {Object} breakpoints Breakpoints object (e.g. {lg: 1200, md: 960, ...})
         * @param  {Number} width Screen width.
         * @return {String}       Highest breakpoint that is less than width.
         */
        function getBreakpointFromWidth(breakpoints:string, width:number):string

        /**
         * Given a breakpoint, get the # of cols set for it.
         * @param  {String} breakpoint Breakpoint name.
         * @param  {Object} cols       Map of breakpoints to cols.
         * @return {Number}            Number of cols.
         */
        function getColsFromBreakpoint(breakpoint:string, cols:Object):number

        /**
         * Given existing layouts and a new breakpoint, find or generate a new layout.
         *
         * This finds the layout above the new one and generates from it, if it exists.
         *
         * @param  {Array} layouts     Existing layouts.
         * @param  {Array} breakpoints All breakpoints.
         * @param  {String} breakpoint New breakpoint.
         * @param lastBreakpoint
         * @param  {Number} cols       Column count at new breakpoint.
         * @param  {Boolean} verticalCompact Whether or not to compact the layout
         *   vertically.
         * @return {Array}             New layout.
         */
        function findOrGenerateResponsiveLayout(layouts:any,
                                                breakpoints:any,
                                                breakpoint:string,
                                                lastBreakpoint:string,
                                                cols:number,
                                                verticalCompact:boolean):any


        /**
         * Given breakpoints, return an array of breakpoints sorted by width. This is usually
         * e.g. ['xxs', 'xs', 'sm', ...]
         *
         * @param  {Object} breakpoints Key/value pair of breakpoint names to widths.
         * @return {Array}              Sorted breakpoints.
         */
        function sortBreakpoints(breakpoints:Object):any
    }

    namespace mixins {
        interface PureDeepRenderMixin {
        }
        interface WidthListeningMixin {
        }

    }
}