mirror of
https://github.com/zhigang1992/DefinitelyTyped.git
synced 2026-05-30 01:47:21 +08:00
[react-grid-layout] Improve typings (#16071)
* Improve react-grid-layout typings * Fix lint errors
This commit is contained in:
Ali Taheri Moghaddar
committed by
Andy
Andy
parent
8070c2338e
commit
c69aadeeb5
352
types/react-grid-layout/index.d.ts
vendored
352
types/react-grid-layout/index.d.ts
vendored
@@ -1,110 +1,292 @@
|
||||
// Type definitions for react-grid-layout 0.14
|
||||
// Project: https://github.com/STRML/react-grid-layout
|
||||
// Definitions by: Andrew Birkholz <https://github.com/abirkholz>
|
||||
// Definitions by: Andrew Birkholz <https://github.com/abirkholz>, Ali Taheri <https://github.com/alitaheri>
|
||||
// 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<ReactGridLayout.DefaultProps, any> {
|
||||
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<ReactGridLayout.ReactGridLayoutProps, any> { }
|
||||
|
||||
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 <WidthProvider> 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<ResponsiveProps, any> {
|
||||
constructor(...args: any[]);
|
||||
class Responsive extends React.Component<ResponsiveProps, any> { }
|
||||
|
||||
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<P>(
|
||||
component: React.ComponentClass<P>
|
||||
): React.ComponentClass<P & WidthProviderProps>;
|
||||
}
|
||||
|
||||
@@ -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<any, any> {
|
||||
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<any, any> {
|
||||
class ResponsiveGridTest extends React.Component<any, any> {
|
||||
render() {
|
||||
return (
|
||||
<ReactGridLayoutResponsive
|
||||
<Responsive
|
||||
width={800}
|
||||
breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
|
||||
cols={{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}}
|
||||
breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
|
||||
cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
|
||||
>
|
||||
<div key="1">a</div>
|
||||
<div key="2">b</div>
|
||||
<div key="3">c</div>
|
||||
</ReactGridLayoutResponsive>
|
||||
</Responsive>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -48,14 +48,15 @@ class ResponsiveGridTest extends React.Component<any, any> {
|
||||
class ResponsiveGridWidthProviderTest extends React.Component<any, any> {
|
||||
render() {
|
||||
return (
|
||||
<ReactGridLayoutResponsiveWidth
|
||||
breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
|
||||
cols={{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}}
|
||||
<ResponsiveWidth
|
||||
measureBeforeMount={true}
|
||||
breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
|
||||
cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
|
||||
>
|
||||
<div key="1">a</div>
|
||||
<div key="2">b</div>
|
||||
<div key="3">c</div>
|
||||
</ReactGridLayoutResponsiveWidth>
|
||||
</ResponsiveWidth>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user