From c69aadeeb578e7f9b53cf8fc55ad7dbe9ac7e9ea Mon Sep 17 00:00:00 2001 From: Ali Taheri Moghaddar Date: Tue, 2 May 2017 21:42:27 +0430 Subject: [PATCH] [react-grid-layout] Improve typings (#16071) * Improve react-grid-layout typings * Fix lint errors --- types/react-grid-layout/index.d.ts | 352 +++++++++++++----- .../react-grid-layout-tests.tsx | 27 +- 2 files changed, 281 insertions(+), 98 deletions(-) diff --git a/types/react-grid-layout/index.d.ts b/types/react-grid-layout/index.d.ts index 5ece607aa5..3ed852e765 100644 --- a/types/react-grid-layout/index.d.ts +++ b/types/react-grid-layout/index.d.ts @@ -1,110 +1,292 @@ // Type definitions for react-grid-layout 0.14 // Project: https://github.com/STRML/react-grid-layout -// Definitions by: Andrew Birkholz +// Definitions by: Andrew Birkholz , Ali Taheri // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.2 import * as React from "react"; export as namespace ReactGridLayout; export = ReactGridLayout; -declare class ReactGridLayout extends React.Component { - constructor(props: any, context: any); - - componentDidMount(): void; - componentWillReceiveProps(nextProps: any): void; - containerHeight(): any; - onDrag(i: number, x: number, y: number, _ref2: any): void; - onDragStart(i: number, x: number, y: number, _ref: any): void; - onDragStop(i: number, x: number, y: number, _ref3: any): void; - onLayoutMaybeChanged(newLayout: any[], oldLayout: any[]): void; - onResize(i: number, w: number, h: number, _ref5: any): void; - onResizeStart(i: number, w: number, h: number, _ref4: any): void; - onResizeStop(i: number, w: number, h: number, _ref6: any): void; - placeholder(): any; - processGridItem(child: any): any; - render(): JSX.Element | null; - - static WidthProvider(ComposedComponent: any, ...args: any[]): any; - static displayName: string; -} +declare class ReactGridLayout extends React.Component { } declare namespace ReactGridLayout { - interface CoreProps { - autoSize?: boolean; - className?: string; - isDraggable?: boolean; - isResizable?: boolean; - layout?: any[]; - margin?: number[]; - maxRows?: number; - rowHeight?: number; - useCSSTransforms?: boolean; - verticalCompact?: boolean; - width?: number; + type Breakpoints = 'lg' | 'md' | 'sm' | 'xs' | 'xxs'; - onDrag?(layout: any, oldItem: any, newItem: any, placeholder: any, e: MouseEvent, element: HTMLElement): any; - onDragStart?(layout: any, oldItem: any, newItem: any, placeholder: any, e: MouseEvent, element: HTMLElement): any; - onDragStop?(layout: any, oldItem: any, newItem: any, placeholder: any, e: MouseEvent, element: HTMLElement): any; - onResize?(layout: any, oldItem: any, newItem: any, placeholder: any, e: MouseEvent, element: HTMLElement): any; - onResizeStart?(layout: any, oldItem: any, newItem: any, placeholder: any, e: MouseEvent, element: HTMLElement): any; - onResizeStop?(layout: any, oldItem: any, newItem: any, placeholder: any, e: MouseEvent, element: HTMLElement): any; + interface Layout { + /** + * A string corresponding to the component key. + * Uses the index of components instead if not provided. + */ + i?: string; + + /** + * X position in grid units. + */ + x: number; + + /** + * Y position in grid units. + */ + y: number; + + /** + * Width in grid units. + */ + w: number; + + /** + * Height in grid units. + */ + h: number; + + /** + * Minimum width in grid units. + */ + minW?: number; + + /** + * Maximum width in grid units. + */ + maxW?: number; + + /** + * Minimum height in grid units. + */ + minH?: number; + + /** + * Maximum height in grid units. + */ + maxH?: number; + + /** + * If true, equal to `isDraggable: false` and `isResizable: false`. + */ + static?: boolean; + + /** + * If false, will not be draggable. Overrides `static`. + */ + isDraggable?: boolean; + + /** + * If false, will not be resizable. Overrides `static`. + */ + isResizable?: boolean; } - interface DefaultProps extends CoreProps { + type Layouts = { + [P in Breakpoints]: Layout; + }; + + type ItemCallback = ( + layout: Layout[], + oldItem: Layout, + newItem: Layout, + placeholder: Layout, + event: MouseEvent, + element: HTMLElement + ) => void; + + interface CoreProps { + /** + * The classname to add to the root element. + */ + className?: string; + + /** + * Inline-style object to pass to the root element. + */ + style?: React.CSSProperties; + + /** + * If true, the container height swells and contracts to fit contents. + */ + autoSize?: boolean; + + /** + * A CSS selector for tags that will not be draggable. + * + * For example: `draggableCancel: '.MyNonDraggableAreaClassName'` + * + * If you forget the leading. it will not work. + */ + draggableCancel?: string; + + /** + * A CSS selector for tags that will act as the draggable handle. + * + * For example: `draggableHandle: '.MyDragHandleClassName'` + * + * If you forget the leading . it will not work. + */ + draggableHandle?: string; + + /** + * If true, the layout will compact vertically. + */ + verticalCompact?: boolean; + + /** + * This allows setting the initial width on the server side. + * This is required unless using the HOC or similar. + */ + width?: number; + + /** + * Margin between items `[x, y]` in px. + */ + margin?: [number, number]; + + /** + * Padding inside the container `[x, y]` in px. + */ + containerPadding?: [number, number]; + + /** + * Rows have a static height, but you can change this based on breakpoints if you like. + */ + rowHeight?: number; + + /** + * If set to false it will disable dragging on all children. + */ + isDraggable?: boolean; + + /** + * If set to false it will disable resizing on all children. + */ + isResizable?: boolean; + + /** + * Uses CSS3 `translate()` instead of position top/left. + * This makes about 6x faster paint performance. + */ + useCSSTransforms?: boolean; + + /** + * 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; + + /** + * Calls when drag starts. + */ + onDragStart?: ItemCallback; + + /** + * Calls on each drag movement. + */ + onDrag?: ItemCallback; + + /** + * Calls when drag is complete. + */ + onDragStop?: ItemCallback; + + /** + * Calls when resize starts. + */ + onResizeStart?: ItemCallback; + + /** + * Calls when resize movement happens. + */ + onResize?: ItemCallback; + + /** + * Calls when resize is complete. + */ + onResizeStop?: ItemCallback; + } + + interface ReactGridLayoutProps extends CoreProps { + /** + * Number of columns in this layout. + */ cols?: number; - onLayoutChange?(layout: any): any; + + /** + * Layout is an array of object with the format: + * + * `{x: number, y: number, w: number, h: number}` + * + * The index into the layout must match the key used on each item component. + * If you choose to use custom keys, you can specify that key in the layout + * array objects like so: + * + * `{i: string, x: number, y: number, w: number, h: number}` + * + * If not provided, use data-grid props on children. + */ + layout?: Layout[]; + + /** + * Callback so you can save the layout. + * Calls back with (currentLayout) after every drag or resize stop. + */ + onLayoutChange?(layout: Layout[]): void; } interface ResponsiveProps extends CoreProps { - breakpoints: {lg: number, md: number, sm: number, xs: number, xxs: number}; - cols: {lg: number, md: number, sm: number, xs: number, xxs: number}; - layouts?: {}; + /** + * `{name: pxVal}, e.g. {lg: 1200, md: 996, sm: 768, xs: 480}` + * + * Breakpoint names are arbitrary but must match in the cols and layouts objects. + */ + breakpoints?: {[P in Breakpoints]: number }; - onBreakpointChange?(newBreakpoint: string, newCols: number): any; - onLayoutChange?(currentLayout: any, allLayouts: any): any; - onWidthChange?(containerWidth: number, margin: [number, number], cols: number, containerPadding: [number, number]): any; + /** + * Number of cols. This is a breakpoint -> cols map, e.g. `{lg: 12, md: 10, ...}`. + */ + cols?: {[P in Breakpoints]: number }; + + /** + * layouts is an object mapping breakpoints to layouts. + * + * e.g. `{lg: Layout, md: Layout, ...}` + */ + layouts?: Layouts; + + /** + * Calls back with breakpoint and new number pf cols. + */ + onBreakpointChange?(newBreakpoint: string, newCols: number): void; + + /** + * Callback so you can save the layout. + */ + onLayoutChange?(currentLayout: Layout, allLayouts: Layouts): void; + + /** + * Callback when the width changes, so you can modify the layout as needed. + */ + onWidthChange?( + containerWidth: number, + margin: [number, number], + cols: number, + containerPadding: [number, number] + ): void; } - class Responsive extends React.Component { - constructor(...args: any[]); + class Responsive extends React.Component { } - componentWillReceiveProps(nextProps: any): void; - generateInitialState(): any; - onWidthChange(nextProps: any): void; - render(): JSX.Element | null; + interface WidthProviderProps { + /** + * If true, WidthProvider will measure the container's width before mounting children. + * Use this if you'd like to completely eliminate any resizing animation on + * application/component mount. + */ + measureBeforeMount?: boolean; } - namespace Responsive { - namespace utils { - function findOrGenerateResponsiveLayout(layouts: {}, breakpoints: {}, breakpoint: number, lastBreakpoint: number, cols: {}, verticalCompact: boolean): any; - function getBreakpointFromWidth(breakpoints: {}, width: number): any; - function getColsFromBreakpoint(breakpoint: number, cols: {}): any; - function sortBreakpoints(breakpoints: {}): any; - } - } - - namespace utils { - function autoBindHandlers(el: any, fns: any): any; - function bottom(layout: any): any; - function childrenEqual(a: any, b: any): any; - function cloneLayout(layout: any): any; - function cloneLayoutItem(layoutItem: any): any; - function collides(l1: any, l2: any): any; - function compact(layout: any, verticalCompact: any): any; - function compactItem(compareWith: any, l: any, verticalCompact: any): any; - function correctBounds(layout: any, bounds: any): any; - function getAllCollisions(layout: any, layoutItem: any): any; - function getFirstCollision(layout: any, layoutItem: any): any; - function getLayoutItem(layout: any, id: any): any; - function getStatics(layout: any): any; - function moveElement(layout: any, l: any, x: any, y: any, isUserAction: any): any; - function moveElementAwayFromCollision(layout: any, collidesWith: any, itemToMove: any, isUserAction: any): any; - function perc(num: any): any; - function setTopLeft(_ref2: any): any; - function setTransform(_ref: any): any; - function sortLayoutItemsByRowCol(layout: any): any; - function synchronizeLayoutWithChildren(initialLayout: any, children: any, cols: any, verticalCompact: any): any; - function validateLayout(layout: any, contextName: any): void; - } + function WidthProvider

( + component: React.ComponentClass

+ ): React.ComponentClass

; } diff --git a/types/react-grid-layout/react-grid-layout-tests.tsx b/types/react-grid-layout/react-grid-layout-tests.tsx index 90c716e7f6..081da57e9c 100644 --- a/types/react-grid-layout/react-grid-layout-tests.tsx +++ b/types/react-grid-layout/react-grid-layout-tests.tsx @@ -1,15 +1,15 @@ import * as React from 'react'; import * as ReactGridLayout from 'react-grid-layout'; +import { Responsive, WidthProvider } from 'react-grid-layout'; -const ReactGridLayoutResponsive = ReactGridLayout.Responsive; -const ReactGridLayoutResponsiveWidth = ReactGridLayout.WidthProvider(ReactGridLayout.Responsive); +const ResponsiveWidth = WidthProvider(Responsive); class DefaultGridTest extends React.Component { render() { const layout = [ - {i: 'a', x: 0, y: 0, w: 1, h: 2, static: true}, - {i: 'b', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4}, - {i: 'c', x: 4, y: 0, w: 1, h: 2} + { i: 'a', x: 0, y: 0, w: 1, h: 2, static: true }, + { i: 'b', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4 }, + { i: 'c', x: 4, y: 0, w: 1, h: 2 } ]; return ( @@ -32,15 +32,15 @@ class DefaultGridTest extends React.Component { class ResponsiveGridTest extends React.Component { render() { return ( -

a
b
c
- + ); } } @@ -48,14 +48,15 @@ class ResponsiveGridTest extends React.Component { class ResponsiveGridWidthProviderTest extends React.Component { render() { return ( -
a
b
c
- + ); } }