-
-
Save episage/46911a79482d82e36180 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 { | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment