publ-echo-test 0.0.1

package/dist/lib/GridLayoutEditor/types.d.ts

@@ -0,0 +1,133 @@
+import { DragEvent, ReactElement, RefObject } from "react";
+import { ResizeHandleAxis, ResizeHandleType } from "../Resizable/types";
+import { ResizeEventType } from "../GridItem/types";
+export type CompactType = "vertical" | "horizontal";
+export type LayoutItem = {
+    w: number;
+    h: number;
+    x: number;
+    y: number;
+    z?: number;
+    i: string;
+    minW?: number;
+    minH?: number;
+    maxW?: number;
+    maxH?: number;
+    moved?: boolean;
+    static?: boolean;
+    isDraggable?: boolean;
+    isResizable?: boolean;
+    resizeHandles?: ResizeHandleAxis[];
+    isBounded?: boolean;
+    groupLayouts?: LayoutItem[];
+};
+export type Layout = LayoutItem[];
+export type DroppedEvent = {
+    layout: Layout;
+    item?: LayoutItem;
+    event?: DragEvent<HTMLDivElement>;
+};
+export type ReactGridLayoutProps = {
+    children: ReactElement<any> | ReactElement[];
+    className?: string;
+    style?: Object;
+    width?: number;
+    autoSize?: boolean;
+    cols: number;
+    draggableCancel?: string;
+    draggableHandle?: string;
+    verticalCompact?: boolean;
+    compactType?: CompactType;
+    layout: Layout;
+    margin: [number, number];
+    containerPadding?: [number, number] | null;
+    rowHeight: number;
+    maxRows?: number;
+    isBounded?: boolean;
+    isDraggable?: boolean;
+    isResizable?: boolean;
+    isDroppable?: boolean;
+    preventCollision?: boolean;
+    useCSSTransforms?: boolean;
+    transformScale?: number;
+    droppingItem?: Partial<LayoutItem>;
+    resizeHandles?: ResizeHandleAxis[];
+    resizeHandle?: ResizeHandleType;
+    allowOverlap?: boolean;
+    onLayoutChange?: (layout: Layout) => void;
+    onDrag?: EventCallback;
+    onDragStart?: EventCallback;
+    onDragStop?: EventCallback;
+    onResize?: EventCallback;
+    onResizeStart?: EventCallback;
+    onResizeStop?: EventCallback;
+    onDropDragOver?: (e: DragOverEvent) => ({
+        w?: number;
+        h?: number;
+    } | false) | null;
+    onDrop?: (layout: Layout, item: LayoutItem | null, e: ResizeEventType) => void;
+    isHiddenVisibility?: boolean;
+    innerRef?: RefObject<HTMLDivElement>;
+    minNbRow?: number;
+    customColWidth?: number;
+};
+export type DragOverEvent = MouseEvent & {
+    nativeEvent: {
+        layerX: number;
+        layerY: number;
+    } & Event;
+};
+export type EventCallback = (properties: {
+    layout: Layout;
+    prev?: LayoutItem;
+    item?: LayoutItem;
+    placeholder?: LayoutItem;
+    e?: ResizeEventType;
+    node?: HTMLElement;
+}) => void;
+export type RowHeight = number | ((width: number) => number);
+export type Position = {
+    left: number;
+    top: number;
+    z?: number;
+    width: number;
+    height: number;
+};
+export type PositionParams = {
+    margin: [number, number];
+    containerPadding: [number, number];
+    containerWidth: number;
+    cols: number;
+    rowHeight: RowHeight;
+    maxRows: number;
+};
+export type ResponsiveGridLayoutStateType = {
+    breakpoint: string;
+    cols: number;
+    layout: Layout;
+    layouts?: ResponsiveLayout<string>;
+};
+type CoreType = Omit<ReactGridLayoutProps, "cols" | "layout" | "margin" | "containerPadding" | "transformScale" | "onLayoutChange" | "isHiddenVisibility">;
+export type ResponsiveGridLayoutProps = {
+    breakpoint?: Breakpoint;
+    breakpoints?: Breakpoints<Breakpoint>;
+    cols?: Record<Breakpoint, number>;
+    layouts?: Layouts;
+    margin?: Record<Breakpoint, [number, number]> | [number, number] | undefined;
+    containerPadding?: Record<Breakpoint, [number, number]> | [number, number] | undefined;
+    onBreakpointChange?: OnBreakpointChangeCallback;
+    onLayoutChange?: OnLayoutChangeCallback;
+    onWidthChange?: OnWidthChangeCallback;
+} & CoreType;
+export type Breakpoint = string;
+export type DefaultBreakpoints = "lg" | "md" | "sm" | "xs" | "xxs";
+export type ResponsiveLayout<T extends Breakpoint> = Record<T, Layout>;
+export type Breakpoints<T extends Breakpoint> = Record<T, number>;
+export type OnLayoutChangeCallback = (properties: {
+    layout: Layout;
+    layouts: Layouts;
+}) => void;
+export type OnBreakpointChangeCallback = (breakpoint: Breakpoint, cols: number) => void;
+export type OnWidthChangeCallback = (containerWidth: number, margin: [number, number], cols: number, containerPadding?: [number, number]) => void;
+export type Layouts = ResponsiveLayout<Breakpoint>;
+export {};

package/dist/lib/GridLayoutEditor/types.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/GridLayoutEditor/utils/renderHelpers.d.ts

@@ -0,0 +1,165 @@
+import type { ReactElement } from "react";
+import { CompactType, Layout, LayoutItem, Position } from "../types";
+/**
+ * Return the bottom coordinate of the layout.
+ *
+ * @param  {Array} layout Layout array.
+ * @return {Number}       Bottom coordinate.
+ */
+export declare function bottom(layout: Layout): number;
+export declare function cloneLayout(layout: Layout): Layout;
+export declare function modifyLayout(layout: Layout, layoutItem: LayoutItem): Layout;
+export declare function withLayoutItem(layout: Layout, itemKey: string, cb: (l: LayoutItem) => LayoutItem): [Layout, LayoutItem | null];
+export declare function cloneLayoutItem(layoutItem: LayoutItem): LayoutItem;
+/**
+ * Comparing React `children` is a bit difficult. This is a good way to compare them.
+ * This will catch differences in keys, order, and length.
+ */
+export declare function fastPositionEqual(a: Position, b: Position): boolean;
+/**
+ * Given two layoutItems, check if they collide.
+ */
+export declare function collides(l1: LayoutItem, l2: LayoutItem): boolean;
+/**
+ * Given a layout, compact it. This involves going down each y coordinate and removing gaps
+ * between items.
+ *
+ * Does not modify layout items (clones). Creates a new layout array.
+ *
+ * @param  {Array} layout Layout.
+ * @param  {Boolean} verticalCompact Whether or not to compact the layout
+ *   vertically.
+ * @param  {Boolean} allowOverlap When `true`, allows overlapping grid items.
+ * @return {Array}       Compacted Layout.
+ */
+export declare function compact(layout: Layout, compactType: CompactType, cols: number, allowOverlap?: boolean): Layout;
+/**
+ * Compact an item in the layout.
+ *
+ * Modifies item.
+ *
+ */
+export declare function compactItem(compareWith: Layout, l: LayoutItem, compactType: CompactType, cols: number, fullLayout: Layout, allowOverlap?: boolean): LayoutItem;
+/**
+ * Given a layout, make sure all elements fit within its bounds.
+ *
+ * Modifies layout items.
+ *
+ * @param  {Array} layout Layout array.
+ * @param  {Number} bounds Number of columns.
+ */
+export declare function correctBounds(layout: Layout, bounds: {
+    cols: number;
+}): Layout;
+/**
+ * Get a layout item by ID. Used so we can override later on if necessary.
+ *
+ * @param  {Array}  layout Layout array.
+ * @param  {String} id     ID
+ * @return {LayoutItem}    Item at ID.
+ */
+export declare function getLayoutItem(layout: Layout, id: string): LayoutItem | undefined;
+/**
+ * Returns the first item this layout collides with.
+ * It doesn't appear to matter which order we approach this from, although
+ * perhaps that is the wrong thing to do.
+ *
+ * @param  {Object} layoutItem Layout item.
+ * @return {Object|undefined}  A colliding layout item, or undefined.
+ */
+export declare function getFirstCollision(layout: Layout, layoutItem: LayoutItem): LayoutItem | undefined;
+export declare function getAllCollisions(layout: Layout, layoutItem: LayoutItem): Array<LayoutItem>;
+/**
+ * Get all static elements.
+ * @param  {Array} layout Array of layout objects.
+ * @return {Array}        Array of static layout items..
+ */
+export declare function getStatics(layout: Layout): Array<LayoutItem>;
+/**
+ * Move an element. Responsible for doing cascading movements of other elements.
+ *
+ * Modifies layout items.
+ *
+ * @param  {Array}      layout            Full layout to modify.
+ * @param  {LayoutItem} l                 element to move.
+ * @param  {Number}     [x]               X position in grid units.
+ * @param  {Number}     [y]               Y position in grid units.
+ */
+export declare function moveElement(properties: {
+    layout: Layout;
+    l: LayoutItem;
+    x?: number;
+    y?: number;
+    z?: number;
+    isUserAction?: boolean;
+    preventCollision?: boolean;
+    compactType: CompactType;
+    cols: number;
+    allowOverlap?: boolean;
+    overrideZ?: number;
+}): Layout;
+/**
+ * This is where the magic needs to happen - given a collision, move an element away from the collision.
+ * We attempt to move it up if there's room, otherwise it goes below.
+ *
+ * @param  {Array} layout            Full layout to modify.
+ * @param  {LayoutItem} collidesWith Layout item we're colliding with.
+ * @param  {LayoutItem} itemToMove   Layout item we're moving.
+ */
+export declare function moveElementAwayFromCollision(properties: {
+    layout: Layout;
+    collidesWith: LayoutItem;
+    itemToMove: LayoutItem;
+    isUserAction?: boolean;
+    compactType: CompactType;
+    cols: number;
+}): Layout;
+/**
+ * Helper to convert a number to a percentage string.
+ *
+ * @param  {Number} num Any number
+ * @return {String}     That number as a percentage.
+ */
+export declare function perc(num: number): string;
+export declare function setTransform({ top, left, z, width, height, }: Position): Record<string, string | number>;
+export declare function setTopLeft({ top, left, z, width, height, }: Position): Record<string, string | number>;
+/**
+ * Get layout items sorted from top left to right and down.
+ *
+ * @return {Array} Array of layout objects.
+ * @return {Array}        Layout, sorted static items first.
+ */
+export declare function sortLayoutItems(layout: Layout, compactType: CompactType): Layout;
+/**
+ * Sort layout items by row ascending and column ascending.
+ *
+ * Does not modify Layout.
+ */
+export declare function sortLayoutItemsByRowCol(layout: Layout): Layout;
+/**
+ * Sort layout items by column ascending then row ascending.
+ *
+ * Does not modify Layout.
+ */
+export declare function sortLayoutItemsByColRow(layout: Layout): Layout;
+/**
+ * Generate a layout using the initialLayout and children as a template.
+ * Missing entries will be added, extraneous ones will be truncated.
+ *
+ * Does not modify initialLayout.
+ *
+ * @param  {Array}  initialLayout Layout passed in through props.
+ * @param  {String} breakpoint    Current responsive breakpoint.
+ * @param  {?String} compact      Compaction option.
+ * @return {Array}                Working layout.
+ */
+export declare function synchronizeLayoutWithChildren(initialLayout: Layout, children: ReactElement | ReactElement[], cols: number, compactType: CompactType, allowOverlap?: boolean): Layout;
+/**
+ * Validate a layout. Throws errors.
+ *
+ * @param  {Array}  layout        Array of layout items.
+ * @param  {String} [contextName] Context name for errors.
+ * @throw  {Error}                Validation error.
+ */
+export declare function validateLayout(layout: Layout, contextName?: string): void;
+export declare const noop: (args: any) => any;