Last active
March 20, 2017 08:11
-
-
Save FlatMapIO/b73962bf606a28913e0c to your computer and use it in GitHub Desktop.
Revisions
-
FlatMapIO revised this gist
Mar 20, 2017 . 1 changed file with 140 additions and 183 deletions.There are no files selected for viewing
This file contains hidden or 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 charactersOriginal file line number Diff line number Diff line change @@ -1,260 +1,217 @@ 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 }> { } } -
Jan 7, 2016 .There are no files selected for viewing
This file contains hidden or 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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,260 @@ declare module 'react-grid-layout' { export = __ReactGridLayout; } declare namespace __ReactGridLayout { import React = __React; let Responsive:__ReactGridLayout.ResponsiveReactGridLayout interface GridItemProps { // Children must be only a single element children: React.ReactElement, // 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, string, string) => void, maxW?: (GridItemProps, string, string) => void, minH?: (GridItemProps, string, string) => void, maxH?: (GridItemProps, string, string) => 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 extends React.ClassicComponent<GridItemProps,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, position:Position): React.ReactElement; mixinResizable(child:React.ReactElement, position:Position): React.ReactElement; onDragHandler(handlerName:String): (e:Event, x:{element: React.ReactElement, position: Position}) => void; onResizeHandler(handlerName:String): (e:Event, x:{element: React.ReactElement, 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, string, string) => void; layouts: (ReactGridLayoutProps, string, string) => void; // margin between items [x, y] in px margin: Array; // 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> extends React.ClassicComponent<ReactGridLayoutProps,S> { containerHeight(): void, onWidthChange(width:number): void, onDragStart(i:number, x:number, y:number, params?:{e: Event,element: React.ReactElement,position: Position}): void onDrag(i:number, x:number, y:number, params?:{e: Event,element: React.ReactElement,position: Position}): void onDragStop(i:number, x:number, y:number, params?:{e: Event,element: React.ReactElement,position: Position}): void onResizeStart(i:number, w:number, h:number, params?:{e: Event,element: React.ReactElement,position: Position}): void onResize(i:number, w:number, h:number, params?:{e: Event,element: React.ReactElement,position: Position}): void onResizeStop(i:number, w:number, h:number, params?:{e: Event,element: React.ReactElement,position: Position}): void placeholder(): React.ReactElement, processGridItem(child:React.ReactElement): React.ReactElement } 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:Array), 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:Array, breakpoints:Array, breakpoint:string, lastBreakpoint:string, cols:number, verticalCompact:boolean):Array /** * 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):Array } namespace mixins { interface PureDeepRenderMixin { } interface WidthListeningMixin { } } }