Skip to content

Commit 54bb989

Browse files
mann1996mann1996
committed
chore: add types declaration file
1 parent 698269c commit 54bb989

File tree

2 files changed

+273
-1
lines changed

2 files changed

+273
-1
lines changed

‎index.d.ts‎

Lines changed: 271 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,271 @@
1+
import * as React from "react";
2+
3+
declare module "@incmix/react-grid-layout" {
4+
export type ResizeHandleAxis =
5+
| "s"
6+
| "w"
7+
| "e"
8+
| "n"
9+
| "sw"
10+
| "nw"
11+
| "se"
12+
| "ne";
13+
14+
export type LayoutItem = {
15+
w: number;
16+
h: number;
17+
x: number;
18+
y: number;
19+
i: string;
20+
minW?: number;
21+
minH?: number;
22+
maxW?: number;
23+
maxH?: number;
24+
moved?: boolean;
25+
static?: boolean;
26+
isDraggable?: boolean | null;
27+
isResizable?: boolean | null;
28+
resizeHandles?: Array<ResizeHandleAxis>;
29+
isBounded?: boolean | null;
30+
placeholder?: boolean;
31+
};
32+
33+
export type Layout = ReadonlyArray<LayoutItem>;
34+
35+
export type Position = {
36+
left: number;
37+
top: number;
38+
width: number;
39+
height: number;
40+
};
41+
42+
export type ReactDraggableCallbackData = {
43+
node: HTMLElement;
44+
x?: number;
45+
y?: number;
46+
deltaX: number;
47+
deltaY: number;
48+
lastX?: number;
49+
lastY?: number;
50+
};
51+
52+
export type PartialPosition = { left: number; top: number };
53+
export type DroppingPosition = { left: number; top: number; e: Event };
54+
export type Size = { width: number; height: number };
55+
56+
export type GridDragEvent = {
57+
e: Event;
58+
node: HTMLElement;
59+
newPosition: PartialPosition;
60+
};
61+
62+
export type GridResizeEvent = {
63+
e: Event;
64+
node: HTMLElement;
65+
size: Size;
66+
handle: string;
67+
};
68+
69+
export type DragOverEvent = MouseEvent & {
70+
nativeEvent: {
71+
layerX: number;
72+
layerY: number;
73+
} & Event;
74+
};
75+
76+
export type EventCallback = (
77+
layout: Layout,
78+
oldItem: LayoutItem | null,
79+
newItem: LayoutItem | null,
80+
placeholder: LayoutItem | null,
81+
event: Event,
82+
element?: HTMLElement
83+
) => void;
84+
85+
export type CompactType = "horizontal" | "vertical" | null;
86+
87+
export type ResizeHandle =
88+
| React.ReactElement
89+
| ((
90+
resizeHandleAxis: ResizeHandleAxis,
91+
ref: React.RefObject<HTMLElement>
92+
) => React.ReactElement);
93+
94+
export interface CoreProps {
95+
className?: string;
96+
style?: React.CSSProperties;
97+
width?: number;
98+
autoSize?: boolean;
99+
cols?: number;
100+
draggableCancel?: string;
101+
draggableHandle?: string;
102+
verticalCompact?: boolean;
103+
compactType?: CompactType;
104+
layout?: Layout;
105+
margin?: [number, number];
106+
containerPadding?: [number, number] | null;
107+
rowHeight?: number;
108+
maxRows?: number;
109+
isBounded?: boolean;
110+
isDraggable?: boolean;
111+
isResizable?: boolean;
112+
isDroppable?: boolean;
113+
preventCollision?: boolean;
114+
useCSSTransforms?: boolean;
115+
transformScale?: number;
116+
droppingItem?: Partial<LayoutItem>;
117+
resizeHandles?: ResizeHandleAxis[];
118+
resizeHandle?: ResizeHandle;
119+
allowOverlap?: boolean;
120+
onLayoutChange?: (layout: Layout) => void;
121+
onDrag?: EventCallback;
122+
onDragStart?: EventCallback;
123+
onDragStop?: EventCallback;
124+
onResize?: EventCallback;
125+
onResizeStart?: EventCallback;
126+
onResizeStop?: EventCallback;
127+
onDropDragOver?: (
128+
e: DragOverEvent
129+
) => { w?: number; h?: number } | false | null;
130+
onDrop?: (layout: Layout, item: LayoutItem | null, e: Event) => void;
131+
children?: React.ReactNode;
132+
innerRef?: React.Ref<HTMLDivElement>;
133+
}
134+
135+
export interface ReactGridLayoutProps extends CoreProps {
136+
// Additional props specific to ReactGridLayout
137+
}
138+
139+
export type Breakpoint = string;
140+
export type Breakpoints = {
141+
[breakpoint: string]: number;
142+
};
143+
144+
export type ResponsiveLayout<T extends string = string> = {
145+
[P in T]?: Layout;
146+
};
147+
148+
export interface ResponsiveProps<T extends string = string>
149+
extends Omit<
150+
CoreProps,
151+
"cols" | "margin" | "containerPadding" | "onLayoutChange"
152+
> {
153+
breakpoint?: T | null;
154+
breakpoints: Breakpoints;
155+
cols: {
156+
[key in T]: number;
157+
};
158+
layouts: ResponsiveLayout<T>;
159+
width: number;
160+
margin: { [key in T]: [number, number] } | [number, number];
161+
containerPadding:
162+
| { [key in T]: [number, number] | null }
163+
| [number, number]
164+
| null;
165+
onBreakpointChange?: (breakpoint: T, cols: number) => void;
166+
onLayoutChange?: (layout: Layout, layouts: ResponsiveLayout<T>) => void;
167+
onWidthChange?: (
168+
containerWidth: number,
169+
margin: [number, number],
170+
cols: number,
171+
containerPadding: [number, number] | null
172+
) => void;
173+
}
174+
175+
export interface WidthProviderProps {
176+
className?: string;
177+
measureBeforeMount?: boolean;
178+
style?: React.CSSProperties;
179+
}
180+
181+
// Utils
182+
export namespace utils {
183+
export function bottom(layout: Layout): number;
184+
export function cloneLayout(layout: Layout): Layout;
185+
export function cloneLayoutItem(layoutItem: LayoutItem): LayoutItem;
186+
export function childrenEqual(
187+
a: React.ReactNode,
188+
b: React.ReactNode
189+
): boolean;
190+
export function collides(l1: LayoutItem, l2: LayoutItem): boolean;
191+
export function compact(
192+
layout: Layout,
193+
compactType: CompactType,
194+
cols: number
195+
): Layout;
196+
export function getAllCollisions(
197+
layout: Layout,
198+
layoutItem: LayoutItem
199+
): Array<LayoutItem>;
200+
export function getLayoutItem(
201+
layout: Layout,
202+
id: string
203+
): LayoutItem | null;
204+
export function moveElement(
205+
layout: Layout,
206+
l: LayoutItem,
207+
x: number | null,
208+
y: number | null,
209+
isUserAction: boolean,
210+
preventCollision: boolean,
211+
compactType: CompactType,
212+
cols: number
213+
): Layout;
214+
export function synchronizeLayoutWithChildren(
215+
initialLayout: Layout,
216+
children: React.ReactNode,
217+
cols: number,
218+
compactType: CompactType,
219+
allowOverlap?: boolean
220+
): Layout;
221+
export function validateLayout(layout: Layout, contextName?: string): void;
222+
}
223+
224+
export namespace calculateUtils {
225+
export function calcXY(
226+
positionParams: {
227+
margin: [number, number];
228+
containerPadding: [number, number] | null;
229+
containerWidth: number;
230+
cols: number;
231+
rowHeight: number;
232+
maxRows: number;
233+
},
234+
x: number,
235+
y: number,
236+
w: number,
237+
h: number
238+
): { x: number; y: number };
239+
}
240+
241+
export namespace responsiveUtils {
242+
export function getBreakpointFromWidth(
243+
breakpoints: Breakpoints,
244+
width: number
245+
): string;
246+
export function getColsFromBreakpoint(
247+
breakpoint: string,
248+
cols: { [key: string]: number }
249+
): number;
250+
export function findOrGenerateResponsiveLayout(
251+
layouts: ResponsiveLayout,
252+
breakpoints: Breakpoints,
253+
breakpoint: string,
254+
lastBreakpoint: string,
255+
cols: number,
256+
compactType: CompactType
257+
): Layout;
258+
export function sortBreakpoints(breakpoints: Breakpoints): Array<string>;
259+
}
260+
261+
// Components
262+
export default class ReactGridLayout extends React.Component<ReactGridLayoutProps> {}
263+
264+
export class Responsive extends React.Component<ResponsiveProps> {
265+
static utils: typeof responsiveUtils;
266+
}
267+
268+
export function WidthProvider<P>(
269+
ComposedComponent: React.ComponentType<P>
270+
): React.ComponentType<P & WidthProviderProps>;
271+
}

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
{
22
"name": "@incmix/react-grid-layout",
3-
"version": "1.5.1",
3+
"version": "1.5.2",
44
"description": "A draggable and resizable grid layout with responsive breakpoints, for React.",
55
"main": "index.js",
6+
"types": "index.d.ts",
67
"scripts": {
78
"lint": "make lint",
89
"test": "make test",

0 commit comments

Comments
 (0)