react-grid-layout.d.ts

declare module 'react-grid-layout' {
    import * as React from 'react'

    export namespace utils {
        type Maybe<T> = T | undefined

        type LayoutItemRequired = { w: number, h: number, x: number, y: number, i: string }
        type LayoutItem =
            { minW ?: number, minH ?: number, maxW ?: number, maxH ?: number, moved ?: boolean, static ?: boolean, isDraggable?: boolean, isResizable?: boolean }
            & LayoutItemRequired
        type Layout = LayoutItem[]
        type Position = { left: number, top: number, width: number, height: number }
        type DragCallbackData = {
            node: HTMLElement,
            x: number, y: number,
            deltaX: number, deltaY: number,
            lastX: number, lastY: number
        }
        type DragEvent = { e: Event } & DragCallbackData
        type Size = { width: number, height: number }
        type ResizeEvent = { e: Event, node: HTMLElement, size: Size }
        type ReactChildren =
            React.ReactElement<any>[]
            | React.ReactElement<any>
            | { [key: string]: React.ReactElement<any> }

        export function bottom(layout: Layout): number

        export function cloneLayout(layout: Layout): Layout

        export function cloneLayoutItem(layoutItem: LayoutItem): LayoutItem

        export function childrenEqual(a: ReactChildren, b: ReactChildren): boolean

        export function collides(l1: LayoutItem, l2: LayoutItem): boolean

        export function compact(layout: Layout, verticalCompact: boolean): Layout

        export function compactItem(compareWith: Layout, l: LayoutItem, verticalCompact: boolean): LayoutItem

        export function correctBounds(layout: Layout, bounds: { cols: number }): Layout

        export function getLayoutItem(layout: Layout, id: string): Maybe<LayoutItem>

        export function getFirstCollision(layout: Layout, layoutItem: LayoutItem): Maybe<LayoutItem>

        export function getAllCollisions(layout: Layout, layoutItem: LayoutItem): Array<LayoutItem>

        export function getStatics(layout: Layout): Array<LayoutItem>

        export function moveElement(layout: Layout, l: LayoutItem, x?: number, y?: number, isUserAction?: boolean): Layout

        export function moveElementAwayFromCollision(layout: Layout, collidesWith: LayoutItem,
                                                     itemToMove: LayoutItem, isUserAction?: boolean): Layout

        export function perc(num: number): string

        export function setTransform({top, left, width, height}: Position): object

        export function setTopLeft({top, left, width, height}: Position): object

        export function sortLayoutItemsByRowCol(layout: Layout): Layout

        export function synchronizeLayoutWithChildren(initialLayout: Layout, children: ReactChildren,
                                                      cols: number, verticalCompact: boolean): Layout

        export function validateLayout(layout: Layout, contextName: string)

        export function autoBindHandlers(el: Object, fns: Array<string>)
    }

    interface ReactGridLayoutState {
        activeDrag?: utils.LayoutItem
        layout: utils.Layout
        mounted: boolean
        oldDragItem?: utils.LayoutItem
        oldLayout?: utils.Layout
        oldResizeItem?: utils.LayoutItem
    }
    interface ReactGridLayoutProps {
        //
        // Basic props
        //
        className?: string,
        style: object,

        // This can be set explicitly. If it is not set, it will automatically
        // be set to the container width. Note that resizes will *not* cause this to adjust.
        // If you need that behavior, use WidthProvider.
        width: number,

        // 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: String}
        layout?: { x: number, y: number, w: number, h: number, i: string }[],

        //
        // Grid Dimensions
        //

        // Margin between items [x, y] in px
        margin?: number[]
        // Padding inside the container [x, y] in px
        containerPadding: number[]
        // Rows have a static height, but you can change this based on breakpoints if you like
        rowHeight: number,
        // Default Infinity, but you can specify a max here if you like.
        // Note that this isn't fully fleshed out and won't error if you specify a layout that
        // extends beyond the row capacity. It will, however, not allow users to drag/resize
        // an item past the barrier. They can push items beyond the barrier, though.
        // Intentionally not documented for this reason.
        maxRows?: number,

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

        //
        // Callbacks
        //

        // Callback so you can save the layout. Calls after each drag & resize stops.
        onLayoutChange?: (newLayout: utils.Layout) => void,

        // 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,
    }
    export default class ReactGridLayout extends React.Component<ReactGridLayoutProps, ReactGridLayoutState> {
    }

    interface  ResponsiveState {
        layout: utils.Layout,
        breakpoint: string,
        cols: number
    }
    interface ResponsiveProps {
        //
        // 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?: { lg: number, md: number, sm: number, xs: number },

        // # of cols. This is a breakpoint -> cols map
        cols?: { lg: number, md: number, sm: number, xs: number, xxs: number },

        // layouts is an object mapping breakpoints to layouts.
        // e.g. {lg: Layout, md: Layout, ...}
        layouts?: { lg: utils.Layout, md: utils.Layout }


        // The width of this component.
        // Required in this propTypes stanza because generateInitialState() will fail without it.
        width: number,

        //
        // 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,

        // Calls back with (containerWidth, margin, cols, containerPadding)
        onWidthChange?: Function
    }
    type ResponsiveLayout = { lg?: utils.Layout, md?: utils.Layout, sm?: utils.Layout, xs?: utils.Layout, xxs?: utils.Layout }
    type Breakpoint = string
    type Breakpoints = { lg?: number, md?: number, sm?: number, xs?: number, xxs?: number }
    export class Responsive extends React.Component<ResponsiveProps, ResponsiveState> {
        static utils: {
            getBreakpointFromWidth(breakpoints: Breakpoints, width: number): Breakpoint
            getColsFromBreakpoint(breakpoint: Breakpoint, cols: Breakpoints): number
            findOrGenerateResponsiveLayout(layouts: ResponsiveLayout, breakpoints: Breakpoints,
                                           breakpoint: Breakpoint, lastBreakpoint: Breakpoint,
                                           cols: number, verticalCompact: boolean): utils.Layout
            sortBreakpoints(breakpoints: Breakpoints): Array<Breakpoint>
        }
    }

    export class WidthProvider extends React.Component<{ width: number }, { measureBeforeMount: boolean }> {
    }
}