publ-echo-test 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +29 -0
- package/css/gle-styles.css +169 -0
- package/css/resizable-styles.css +76 -0
- package/dist/external-lib/classnames/index.d.ts +5 -0
- package/dist/external-lib/classnames/index.js +60 -0
- package/dist/external-lib/lodash.isEqual/index.d.ts +30 -0
- package/dist/external-lib/lodash.isEqual/index.js +1661 -0
- package/dist/lib/Draggable/Draggable.d.ts +17 -0
- package/dist/lib/Draggable/Draggable.js +192 -0
- package/dist/lib/Draggable/DraggableCore.d.ts +5 -0
- package/dist/lib/Draggable/DraggableCore.js +266 -0
- package/dist/lib/Draggable/constants.d.ts +12 -0
- package/dist/lib/Draggable/constants.js +12 -0
- package/dist/lib/Draggable/index.d.ts +2 -0
- package/dist/lib/Draggable/index.js +2 -0
- package/dist/lib/Draggable/types.d.ts +55 -0
- package/dist/lib/Draggable/types.js +1 -0
- package/dist/lib/Draggable/utils/domHelpers.d.ts +22 -0
- package/dist/lib/Draggable/utils/domHelpers.js +222 -0
- package/dist/lib/Draggable/utils/getPrefix.d.ts +5 -0
- package/dist/lib/Draggable/utils/getPrefix.js +41 -0
- package/dist/lib/Draggable/utils/positionHelpers.d.ts +7 -0
- package/dist/lib/Draggable/utils/positionHelpers.js +32 -0
- package/dist/lib/Draggable/utils/types.d.ts +30 -0
- package/dist/lib/Draggable/utils/types.js +1 -0
- package/dist/lib/Draggable/utils/validationHelpers.d.ts +4 -0
- package/dist/lib/Draggable/utils/validationHelpers.js +16 -0
- package/dist/lib/GridItem/GridItem.d.ts +5 -0
- package/dist/lib/GridItem/GridItem.js +350 -0
- package/dist/lib/GridItem/index.d.ts +1 -0
- package/dist/lib/GridItem/index.js +1 -0
- package/dist/lib/GridItem/types.d.ts +107 -0
- package/dist/lib/GridItem/types.js +1 -0
- package/dist/lib/GridItem/utils/calculateUtils.d.ts +30 -0
- package/dist/lib/GridItem/utils/calculateUtils.js +108 -0
- package/dist/lib/GridLayoutEditor/ReactGridLayout.d.ts +6 -0
- package/dist/lib/GridLayoutEditor/ReactGridLayout.js +456 -0
- package/dist/lib/GridLayoutEditor/ResponsiveGridLayout.d.ts +4 -0
- package/dist/lib/GridLayoutEditor/ResponsiveGridLayout.js +117 -0
- package/dist/lib/GridLayoutEditor/index.d.ts +3 -0
- package/dist/lib/GridLayoutEditor/index.js +2 -0
- package/dist/lib/GridLayoutEditor/types.d.ts +133 -0
- package/dist/lib/GridLayoutEditor/types.js +1 -0
- package/dist/lib/GridLayoutEditor/utils/renderHelpers.d.ts +165 -0
- package/dist/lib/GridLayoutEditor/utils/renderHelpers.js +566 -0
- package/dist/lib/GridLayoutEditor/utils/responsiveUtils.d.ts +26 -0
- package/dist/lib/GridLayoutEditor/utils/responsiveUtils.js +77 -0
- package/dist/lib/Resizable/Resizable.d.ts +6 -0
- package/dist/lib/Resizable/Resizable.js +215 -0
- package/dist/lib/Resizable/ResizableBox.d.ts +7 -0
- package/dist/lib/Resizable/ResizableBox.js +57 -0
- package/dist/lib/Resizable/index.d.ts +1 -0
- package/dist/lib/Resizable/index.js +1 -0
- package/dist/lib/Resizable/types.d.ts +63 -0
- package/dist/lib/Resizable/types.js +1 -0
- package/dist/lib/Resizable/utils/cloneElement.d.ts +2 -0
- package/dist/lib/Resizable/utils/cloneElement.js +21 -0
- package/dist/lib/components/WidthProvider.d.ts +9 -0
- package/dist/lib/components/WidthProvider.js +65 -0
- package/dist/lib/components/index.d.ts +1 -0
- package/dist/lib/components/index.js +1 -0
- package/dist/lib/components/types.d.ts +13 -0
- package/dist/lib/components/types.js +1 -0
- package/dist/lib/index.d.ts +5 -0
- package/dist/lib/index.js +5 -0
- package/dist/lib/types.d.ts +4 -0
- package/dist/lib/types.js +1 -0
- package/package.json +56 -0
@@ -0,0 +1,133 @@
|
|
1
|
+
import { DragEvent, ReactElement, RefObject } from "react";
|
2
|
+
import { ResizeHandleAxis, ResizeHandleType } from "../Resizable/types";
|
3
|
+
import { ResizeEventType } from "../GridItem/types";
|
4
|
+
export type CompactType = "vertical" | "horizontal";
|
5
|
+
export type LayoutItem = {
|
6
|
+
w: number;
|
7
|
+
h: number;
|
8
|
+
x: number;
|
9
|
+
y: number;
|
10
|
+
z?: number;
|
11
|
+
i: string;
|
12
|
+
minW?: number;
|
13
|
+
minH?: number;
|
14
|
+
maxW?: number;
|
15
|
+
maxH?: number;
|
16
|
+
moved?: boolean;
|
17
|
+
static?: boolean;
|
18
|
+
isDraggable?: boolean;
|
19
|
+
isResizable?: boolean;
|
20
|
+
resizeHandles?: ResizeHandleAxis[];
|
21
|
+
isBounded?: boolean;
|
22
|
+
groupLayouts?: LayoutItem[];
|
23
|
+
};
|
24
|
+
export type Layout = LayoutItem[];
|
25
|
+
export type DroppedEvent = {
|
26
|
+
layout: Layout;
|
27
|
+
item?: LayoutItem;
|
28
|
+
event?: DragEvent<HTMLDivElement>;
|
29
|
+
};
|
30
|
+
export type ReactGridLayoutProps = {
|
31
|
+
children: ReactElement<any> | ReactElement[];
|
32
|
+
className?: string;
|
33
|
+
style?: Object;
|
34
|
+
width?: number;
|
35
|
+
autoSize?: boolean;
|
36
|
+
cols: number;
|
37
|
+
draggableCancel?: string;
|
38
|
+
draggableHandle?: string;
|
39
|
+
verticalCompact?: boolean;
|
40
|
+
compactType?: CompactType;
|
41
|
+
layout: Layout;
|
42
|
+
margin: [number, number];
|
43
|
+
containerPadding?: [number, number] | null;
|
44
|
+
rowHeight: number;
|
45
|
+
maxRows?: number;
|
46
|
+
isBounded?: boolean;
|
47
|
+
isDraggable?: boolean;
|
48
|
+
isResizable?: boolean;
|
49
|
+
isDroppable?: boolean;
|
50
|
+
preventCollision?: boolean;
|
51
|
+
useCSSTransforms?: boolean;
|
52
|
+
transformScale?: number;
|
53
|
+
droppingItem?: Partial<LayoutItem>;
|
54
|
+
resizeHandles?: ResizeHandleAxis[];
|
55
|
+
resizeHandle?: ResizeHandleType;
|
56
|
+
allowOverlap?: boolean;
|
57
|
+
onLayoutChange?: (layout: Layout) => void;
|
58
|
+
onDrag?: EventCallback;
|
59
|
+
onDragStart?: EventCallback;
|
60
|
+
onDragStop?: EventCallback;
|
61
|
+
onResize?: EventCallback;
|
62
|
+
onResizeStart?: EventCallback;
|
63
|
+
onResizeStop?: EventCallback;
|
64
|
+
onDropDragOver?: (e: DragOverEvent) => ({
|
65
|
+
w?: number;
|
66
|
+
h?: number;
|
67
|
+
} | false) | null;
|
68
|
+
onDrop?: (layout: Layout, item: LayoutItem | null, e: ResizeEventType) => void;
|
69
|
+
isHiddenVisibility?: boolean;
|
70
|
+
innerRef?: RefObject<HTMLDivElement>;
|
71
|
+
minNbRow?: number;
|
72
|
+
customColWidth?: number;
|
73
|
+
};
|
74
|
+
export type DragOverEvent = MouseEvent & {
|
75
|
+
nativeEvent: {
|
76
|
+
layerX: number;
|
77
|
+
layerY: number;
|
78
|
+
} & Event;
|
79
|
+
};
|
80
|
+
export type EventCallback = (properties: {
|
81
|
+
layout: Layout;
|
82
|
+
prev?: LayoutItem;
|
83
|
+
item?: LayoutItem;
|
84
|
+
placeholder?: LayoutItem;
|
85
|
+
e?: ResizeEventType;
|
86
|
+
node?: HTMLElement;
|
87
|
+
}) => void;
|
88
|
+
export type RowHeight = number | ((width: number) => number);
|
89
|
+
export type Position = {
|
90
|
+
left: number;
|
91
|
+
top: number;
|
92
|
+
z?: number;
|
93
|
+
width: number;
|
94
|
+
height: number;
|
95
|
+
};
|
96
|
+
export type PositionParams = {
|
97
|
+
margin: [number, number];
|
98
|
+
containerPadding: [number, number];
|
99
|
+
containerWidth: number;
|
100
|
+
cols: number;
|
101
|
+
rowHeight: RowHeight;
|
102
|
+
maxRows: number;
|
103
|
+
};
|
104
|
+
export type ResponsiveGridLayoutStateType = {
|
105
|
+
breakpoint: string;
|
106
|
+
cols: number;
|
107
|
+
layout: Layout;
|
108
|
+
layouts?: ResponsiveLayout<string>;
|
109
|
+
};
|
110
|
+
type CoreType = Omit<ReactGridLayoutProps, "cols" | "layout" | "margin" | "containerPadding" | "transformScale" | "onLayoutChange" | "isHiddenVisibility">;
|
111
|
+
export type ResponsiveGridLayoutProps = {
|
112
|
+
breakpoint?: Breakpoint;
|
113
|
+
breakpoints?: Breakpoints<Breakpoint>;
|
114
|
+
cols?: Record<Breakpoint, number>;
|
115
|
+
layouts?: Layouts;
|
116
|
+
margin?: Record<Breakpoint, [number, number]> | [number, number] | undefined;
|
117
|
+
containerPadding?: Record<Breakpoint, [number, number]> | [number, number] | undefined;
|
118
|
+
onBreakpointChange?: OnBreakpointChangeCallback;
|
119
|
+
onLayoutChange?: OnLayoutChangeCallback;
|
120
|
+
onWidthChange?: OnWidthChangeCallback;
|
121
|
+
} & CoreType;
|
122
|
+
export type Breakpoint = string;
|
123
|
+
export type DefaultBreakpoints = "lg" | "md" | "sm" | "xs" | "xxs";
|
124
|
+
export type ResponsiveLayout<T extends Breakpoint> = Record<T, Layout>;
|
125
|
+
export type Breakpoints<T extends Breakpoint> = Record<T, number>;
|
126
|
+
export type OnLayoutChangeCallback = (properties: {
|
127
|
+
layout: Layout;
|
128
|
+
layouts: Layouts;
|
129
|
+
}) => void;
|
130
|
+
export type OnBreakpointChangeCallback = (breakpoint: Breakpoint, cols: number) => void;
|
131
|
+
export type OnWidthChangeCallback = (containerWidth: number, margin: [number, number], cols: number, containerPadding?: [number, number]) => void;
|
132
|
+
export type Layouts = ResponsiveLayout<Breakpoint>;
|
133
|
+
export {};
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
@@ -0,0 +1,165 @@
|
|
1
|
+
import type { ReactElement } from "react";
|
2
|
+
import { CompactType, Layout, LayoutItem, Position } from "../types";
|
3
|
+
/**
|
4
|
+
* Return the bottom coordinate of the layout.
|
5
|
+
*
|
6
|
+
* @param {Array} layout Layout array.
|
7
|
+
* @return {Number} Bottom coordinate.
|
8
|
+
*/
|
9
|
+
export declare function bottom(layout: Layout): number;
|
10
|
+
export declare function cloneLayout(layout: Layout): Layout;
|
11
|
+
export declare function modifyLayout(layout: Layout, layoutItem: LayoutItem): Layout;
|
12
|
+
export declare function withLayoutItem(layout: Layout, itemKey: string, cb: (l: LayoutItem) => LayoutItem): [Layout, LayoutItem | null];
|
13
|
+
export declare function cloneLayoutItem(layoutItem: LayoutItem): LayoutItem;
|
14
|
+
/**
|
15
|
+
* Comparing React `children` is a bit difficult. This is a good way to compare them.
|
16
|
+
* This will catch differences in keys, order, and length.
|
17
|
+
*/
|
18
|
+
export declare function fastPositionEqual(a: Position, b: Position): boolean;
|
19
|
+
/**
|
20
|
+
* Given two layoutItems, check if they collide.
|
21
|
+
*/
|
22
|
+
export declare function collides(l1: LayoutItem, l2: LayoutItem): boolean;
|
23
|
+
/**
|
24
|
+
* Given a layout, compact it. This involves going down each y coordinate and removing gaps
|
25
|
+
* between items.
|
26
|
+
*
|
27
|
+
* Does not modify layout items (clones). Creates a new layout array.
|
28
|
+
*
|
29
|
+
* @param {Array} layout Layout.
|
30
|
+
* @param {Boolean} verticalCompact Whether or not to compact the layout
|
31
|
+
* vertically.
|
32
|
+
* @param {Boolean} allowOverlap When `true`, allows overlapping grid items.
|
33
|
+
* @return {Array} Compacted Layout.
|
34
|
+
*/
|
35
|
+
export declare function compact(layout: Layout, compactType: CompactType, cols: number, allowOverlap?: boolean): Layout;
|
36
|
+
/**
|
37
|
+
* Compact an item in the layout.
|
38
|
+
*
|
39
|
+
* Modifies item.
|
40
|
+
*
|
41
|
+
*/
|
42
|
+
export declare function compactItem(compareWith: Layout, l: LayoutItem, compactType: CompactType, cols: number, fullLayout: Layout, allowOverlap?: boolean): LayoutItem;
|
43
|
+
/**
|
44
|
+
* Given a layout, make sure all elements fit within its bounds.
|
45
|
+
*
|
46
|
+
* Modifies layout items.
|
47
|
+
*
|
48
|
+
* @param {Array} layout Layout array.
|
49
|
+
* @param {Number} bounds Number of columns.
|
50
|
+
*/
|
51
|
+
export declare function correctBounds(layout: Layout, bounds: {
|
52
|
+
cols: number;
|
53
|
+
}): Layout;
|
54
|
+
/**
|
55
|
+
* Get a layout item by ID. Used so we can override later on if necessary.
|
56
|
+
*
|
57
|
+
* @param {Array} layout Layout array.
|
58
|
+
* @param {String} id ID
|
59
|
+
* @return {LayoutItem} Item at ID.
|
60
|
+
*/
|
61
|
+
export declare function getLayoutItem(layout: Layout, id: string): LayoutItem | undefined;
|
62
|
+
/**
|
63
|
+
* Returns the first item this layout collides with.
|
64
|
+
* It doesn't appear to matter which order we approach this from, although
|
65
|
+
* perhaps that is the wrong thing to do.
|
66
|
+
*
|
67
|
+
* @param {Object} layoutItem Layout item.
|
68
|
+
* @return {Object|undefined} A colliding layout item, or undefined.
|
69
|
+
*/
|
70
|
+
export declare function getFirstCollision(layout: Layout, layoutItem: LayoutItem): LayoutItem | undefined;
|
71
|
+
export declare function getAllCollisions(layout: Layout, layoutItem: LayoutItem): Array<LayoutItem>;
|
72
|
+
/**
|
73
|
+
* Get all static elements.
|
74
|
+
* @param {Array} layout Array of layout objects.
|
75
|
+
* @return {Array} Array of static layout items..
|
76
|
+
*/
|
77
|
+
export declare function getStatics(layout: Layout): Array<LayoutItem>;
|
78
|
+
/**
|
79
|
+
* Move an element. Responsible for doing cascading movements of other elements.
|
80
|
+
*
|
81
|
+
* Modifies layout items.
|
82
|
+
*
|
83
|
+
* @param {Array} layout Full layout to modify.
|
84
|
+
* @param {LayoutItem} l element to move.
|
85
|
+
* @param {Number} [x] X position in grid units.
|
86
|
+
* @param {Number} [y] Y position in grid units.
|
87
|
+
*/
|
88
|
+
export declare function moveElement(properties: {
|
89
|
+
layout: Layout;
|
90
|
+
l: LayoutItem;
|
91
|
+
x?: number;
|
92
|
+
y?: number;
|
93
|
+
z?: number;
|
94
|
+
isUserAction?: boolean;
|
95
|
+
preventCollision?: boolean;
|
96
|
+
compactType: CompactType;
|
97
|
+
cols: number;
|
98
|
+
allowOverlap?: boolean;
|
99
|
+
overrideZ?: number;
|
100
|
+
}): Layout;
|
101
|
+
/**
|
102
|
+
* This is where the magic needs to happen - given a collision, move an element away from the collision.
|
103
|
+
* We attempt to move it up if there's room, otherwise it goes below.
|
104
|
+
*
|
105
|
+
* @param {Array} layout Full layout to modify.
|
106
|
+
* @param {LayoutItem} collidesWith Layout item we're colliding with.
|
107
|
+
* @param {LayoutItem} itemToMove Layout item we're moving.
|
108
|
+
*/
|
109
|
+
export declare function moveElementAwayFromCollision(properties: {
|
110
|
+
layout: Layout;
|
111
|
+
collidesWith: LayoutItem;
|
112
|
+
itemToMove: LayoutItem;
|
113
|
+
isUserAction?: boolean;
|
114
|
+
compactType: CompactType;
|
115
|
+
cols: number;
|
116
|
+
}): Layout;
|
117
|
+
/**
|
118
|
+
* Helper to convert a number to a percentage string.
|
119
|
+
*
|
120
|
+
* @param {Number} num Any number
|
121
|
+
* @return {String} That number as a percentage.
|
122
|
+
*/
|
123
|
+
export declare function perc(num: number): string;
|
124
|
+
export declare function setTransform({ top, left, z, width, height, }: Position): Record<string, string | number>;
|
125
|
+
export declare function setTopLeft({ top, left, z, width, height, }: Position): Record<string, string | number>;
|
126
|
+
/**
|
127
|
+
* Get layout items sorted from top left to right and down.
|
128
|
+
*
|
129
|
+
* @return {Array} Array of layout objects.
|
130
|
+
* @return {Array} Layout, sorted static items first.
|
131
|
+
*/
|
132
|
+
export declare function sortLayoutItems(layout: Layout, compactType: CompactType): Layout;
|
133
|
+
/**
|
134
|
+
* Sort layout items by row ascending and column ascending.
|
135
|
+
*
|
136
|
+
* Does not modify Layout.
|
137
|
+
*/
|
138
|
+
export declare function sortLayoutItemsByRowCol(layout: Layout): Layout;
|
139
|
+
/**
|
140
|
+
* Sort layout items by column ascending then row ascending.
|
141
|
+
*
|
142
|
+
* Does not modify Layout.
|
143
|
+
*/
|
144
|
+
export declare function sortLayoutItemsByColRow(layout: Layout): Layout;
|
145
|
+
/**
|
146
|
+
* Generate a layout using the initialLayout and children as a template.
|
147
|
+
* Missing entries will be added, extraneous ones will be truncated.
|
148
|
+
*
|
149
|
+
* Does not modify initialLayout.
|
150
|
+
*
|
151
|
+
* @param {Array} initialLayout Layout passed in through props.
|
152
|
+
* @param {String} breakpoint Current responsive breakpoint.
|
153
|
+
* @param {?String} compact Compaction option.
|
154
|
+
* @return {Array} Working layout.
|
155
|
+
*/
|
156
|
+
export declare function synchronizeLayoutWithChildren(initialLayout: Layout, children: ReactElement | ReactElement[], cols: number, compactType: CompactType, allowOverlap?: boolean): Layout;
|
157
|
+
/**
|
158
|
+
* Validate a layout. Throws errors.
|
159
|
+
*
|
160
|
+
* @param {Array} layout Array of layout items.
|
161
|
+
* @param {String} [contextName] Context name for errors.
|
162
|
+
* @throw {Error} Validation error.
|
163
|
+
*/
|
164
|
+
export declare function validateLayout(layout: Layout, contextName?: string): void;
|
165
|
+
export declare const noop: (args: any) => any;
|