@m4l/components 0.1.76 → 0.1.78

package/components/GridLayout/subcomponents/GridItem/index.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { GridItemProps } from './types';
+export declare type RefProps = {
+    cols: number;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    minW: number;
+    maxW: number;
+    minH: number;
+    maxH: number;
+    containerWidth: number;
+    containerHeight: number;
+    margin: [number, number];
+    containerPadding: [number, number];
+    rowHeight: number;
+    maxRows: number;
+    colapsed?: boolean;
+    visible?: boolean;
+};
+/**
+ * An individual item within a ReactGridLayout.
+ */
+export declare function GridItem(props: GridItemProps): React.JSX.Element;
+export declare const MemonizedGridItem: React.MemoExoticComponent<typeof GridItem>;

package/components/GridLayout/subcomponents/GridItem/types.d.ts

@@ -0,0 +1,78 @@
+import { CSSProperties } from 'react';
+import { DroppingPosition, GridDragEvent, GridResizeEvent, LayoutItemRender, LayoutItemType, ResizeHandle } from '../../types';
+export declare type GridItemState = {
+    resizing?: {
+        width: number;
+        height: number;
+    };
+    dragging?: {
+        top: number;
+        left: number;
+    };
+    className: string;
+};
+export declare type PartialPosition = {
+    top: number;
+    left: number;
+};
+export interface DraggableData {
+    node: HTMLElement;
+    x: number;
+    y: number;
+    deltaX: number;
+    deltaY: number;
+    lastX: number;
+    lastY: number;
+}
+export declare type GridItemCallback<T extends GridDragEvent | GridResizeEvent> = (i: string, w: number, h: number, data: T) => void;
+export declare type Maximize = 'maximize_me' | 'maximize_other' | 'none';
+export declare type GridItemProps = {
+    type: LayoutItemType;
+    layoutItemRender: LayoutItemRender;
+    cols: number;
+    containerWidth: number;
+    containerHeight: number;
+    margin: [number, number];
+    containerPadding: [number, number];
+    rowHeight: number;
+    colapsedHeight?: number;
+    maxRows: number;
+    isDraggable: boolean;
+    isResizable: boolean;
+    isBounded: boolean;
+    static?: boolean;
+    useCSSTransforms?: boolean;
+    usePercentages?: boolean;
+    droppingPosition?: DroppingPosition;
+    style?: CSSProperties;
+    cancel?: string;
+    handle?: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    className?: string;
+    minW?: number;
+    maxW?: number;
+    minH?: number;
+    maxH?: number;
+    transformScale?: number;
+    i: string;
+    maximize: Maximize;
+    colapsed?: boolean;
+    visible?: boolean;
+    resizeHandles?: ResizeHandle[];
+    /**
+     * Defines custom component for resize handle
+     */
+    resizeHandle?: React.ReactNode | ((resizeHandle: ResizeHandle) => React.ReactNode);
+    onDrag?: (i: string, x: number, y: number, gridDragEvent: GridDragEvent) => void;
+    onDragStart?: (i: string, x: number, y: number, gridDragEvent: GridDragEvent) => void;
+    onDragStop?: (i: string, x: number, y: number, gridDragEvent: GridDragEvent) => void;
+    onResize?: GridItemCallback<GridResizeEvent>;
+    onResizeStart?: GridItemCallback<GridResizeEvent>;
+    onResizeStop?: GridItemCallback<GridResizeEvent>;
+    onFreeMoveClick?: (i: string) => void;
+    freeMove?: boolean;
+    zIndex?: number;
+};

package/components/GridLayout/subcomponents/Responsive/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ResponsiveReactGridLayoutProps } from './types';
+export declare function Responsive(props: ResponsiveReactGridLayoutProps): import("react").JSX.Element;

package/components/GridLayout/subcomponents/Responsive/responsiveUtils.d.ts

@@ -0,0 +1,64 @@
+import { CompactType, Layout, LayoutItem, Margin } from '../../types';
+import { Breakpoint, BreakpointCols, Breakpoints, ResponsiveLayout, Layouts, ResponsiveMargin } from './types';
+/**
+ * Given a width, find the highest breakpoint that matches is valid for it (width > breakpoint).
+ *
+ * @param  {Object} breakpoints Breakpoints object (e.g. {lg: 1200, md: 960, ...})
+ * @param  {Number} width Screen width.
+ * @return {String}       Highest breakpoint that is less than width.
+ */
+export declare function getBreakpointFromWidth(breakpoints: Breakpoints<Breakpoint>, width: number): Breakpoint;
+/**
+ * Given a breakpoint, get the # of cols set for it.
+ * @param  {String} breakpoint Breakpoint name.
+ * @param  {Object} cols       Map of breakpoints to cols.
+ * @return {Number}            Number of cols.
+ */
+export declare function getColsFromBreakpoint(breakpoint: Breakpoint, cols: Breakpoints<Breakpoint>): number;
+/**
+ * Given existing layouts and a new breakpoint, find or generate a new layout.
+ *
+ * This finds the layout above the new one and generates from it, if it exists.
+ *
+ * @param  {Object} layouts     Existing layouts.
+ * @param  {Array} breakpoints All breakpoints.
+ * @param  {String} breakpoint New breakpoint.
+ * @param  {String} breakpoint Last breakpoint (for fallback).
+ * @param  {Number} cols       Column count at new breakpoint.
+ * @param  {Boolean} verticalCompact Whether or not to compact the layout
+ *   vertically.
+ * @return {Array}             New layout.
+ */
+export declare function findOrGenerateResponsiveLayout(layouts: ResponsiveLayout<Breakpoint>, breakpoints: Breakpoints<Breakpoint>, breakpoint: Breakpoint, lastBreakpoint: Breakpoint, cols: number, compactType: CompactType, brekpointsCols: BreakpointCols, colapsedHeight: number): Layout;
+/**
+ * Given breakpoints, return an array of breakpoints sorted by width. This is usually
+ * e.g. ['xxs', 'xs', 'sm', ...]
+ *
+ * @param  {Object} breakpoints Key/value pair of breakpoint names to widths.
+ * @return {Array}              Sorted breakpoints.
+ */
+export declare function sortBreakpoints(breakpoints: Breakpoints<Breakpoint>): Array<Breakpoint>;
+/**
+ * Get a value of margin or containerPadding.
+ *
+ * @param  {Array | Object} param Margin | containerPadding, e.g. [10, 10] | {lg: [10, 10], ...}.
+ * @param  {String} breakpoint   Breakpoint: lg, md, sm, xs and etc.
+ * @return {Array}
+ */
+export declare function getIndentationValue(param: ResponsiveMargin, breakpoint: string): Margin;
+/**
+ * Modifica el layout y le arega el item a todos los breakpoints
+ * @param layouts
+ * @param layoutItem
+ */
+export declare function addLayoutItemToBreakPointIfNoExists(layouts: Layouts, breakpoint: string, layoutItem: LayoutItem, cols: BreakpointCols, margin: ResponsiveMargin, containerPadding: ResponsiveMargin, rowHeight: number, containerHeight?: number, currentBreakpoint?: Breakpoint): void;
+/**
+ * Modifica el layout y le arega el item a todos los breakpoints
+ * @param layouts
+ * @param layoutItem
+ */
+export declare function addLayoutItemToBreakPoints(layouts: Layouts, layoutItem: LayoutItem, cols: BreakpointCols, margin: ResponsiveMargin, containerPadding: ResponsiveMargin, rowHeight: number, containerHeight?: number, currentBreakpoint?: Breakpoint): Layouts;
+export declare function cloneLayouts(layouts: Layouts, layoutItemReplaceProps?: Partial<Exclude<LayoutItem, 'i'>>): Layouts;
+export declare function isEqualLayoutItem(layoutA: LayoutItem, layoutB: LayoutItem): boolean;
+export declare function isEqualLayout(layoutA: Layout, layoutB: Layout): boolean;
+export declare function isEqualLayouts(layoutsA: Layouts, layoutsB: Layouts): boolean;

package/components/GridLayout/subcomponents/Responsive/types.d.ts

@@ -0,0 +1,69 @@
+import type { BaseLayoutItem, GridLayoutProps, Layout, LayoutItemRender, LayoutNotReadOnly, Margin } from '../../types';
+export declare type Breakpoint = string;
+export declare type DefaultBreakpoints = 'lg' | 'md' | 'sm' | 'xs' | 'xxs';
+export declare type ResponsiveLayout<T extends Breakpoint> = Record<T, Layout>;
+export declare type Breakpoints<T extends Breakpoint> = Readonly<Record<T, number>>;
+export interface LayoutsNotReadonly {
+    [P: Breakpoint]: LayoutNotReadOnly;
+}
+export interface Layouts {
+    [P: Breakpoint]: Layout;
+}
+export declare type BaseResposiveLayoutItems = BaseLayoutItem[];
+export declare type State = {
+    layout: LayoutNotReadOnly;
+    breakpoint: Breakpoint;
+    cols: number;
+    fireOnLoadLayoutChange?: boolean;
+    contaierMargin: Margin;
+    contaierPadding: Margin;
+};
+export declare type AddItemPostion = 'first' | 'last';
+export declare type OnLayoutChangeCallback = (layout: LayoutNotReadOnly, layouts: LayoutsNotReadonly) => void;
+export declare type LayoutItemResponsive = {
+    i: string;
+    freeMove: boolean;
+};
+export declare type ResponsiveMargin = {
+    [key: Breakpoint]: Margin;
+} | Margin;
+export declare type RefResponsiveState = {
+    layouts: LayoutsNotReadonly;
+    breakpoint: Breakpoint;
+    breakpoints: Breakpoints<Breakpoint>;
+    width: number;
+    height: number;
+};
+export declare type OnBreakpointChange = (breakPoint: Breakpoint, cols: number, width: number, height: number) => void;
+export declare type ContainerChangeEvent = {
+    containerWidth: number;
+    containerHeight: number;
+    containerMargin: Margin;
+    containerPadding: Margin;
+    breakpoint: Breakpoint;
+    cols: number;
+};
+export declare type OnContainerChange = (event: ContainerChangeEvent) => void;
+export declare type BreakpointCols = {
+    [key: Breakpoint]: number;
+};
+export declare type ResponsiveReactGridLayoutProps = {
+    /**
+     * rawLayout: LayoutItems vigentes en todos los breakpoints, si se remueve de aca, se remueve en todos
+     */
+    addItemPosition?: AddItemPostion;
+    layoutItemRender: LayoutItemRender;
+    allowOverlap?: boolean;
+    breakpoint?: Breakpoint;
+    breakpoints: Breakpoints<Breakpoint>;
+    cols: BreakpointCols;
+    layouts: ResponsiveLayout<Breakpoint>;
+    width: number;
+    height: number;
+    containerMargin?: ResponsiveMargin;
+    containerPadding?: ResponsiveMargin;
+    onBreakpointChange?: OnBreakpointChange;
+    onLayoutChange?: OnLayoutChangeCallback;
+    onContainerChange?: OnContainerChange;
+} & Omit<GridLayoutProps, 'cols' | 'margin' | 'containerPadding' | 'onLayoutChange' | 'layout'>;
+export declare type generateInitialStateProps = Pick<ResponsiveReactGridLayoutProps, 'width' | 'height' | 'breakpoint' | 'breakpoints' | 'cols' | 'compactType' | 'layouts' | 'containerMargin' | 'containerPadding' | 'colapsedHeight'>;

package/components/GridLayout/subcomponents/WidthProvider/index.d.ts

@@ -0,0 +1,16 @@
+import { FunctionComponent } from 'react';
+import { CoreProps, GridLayoutProps } from '../../types';
+import { ResponsiveReactGridLayoutProps } from '../Responsive/types';
+export declare const THROTTLE_RESIZE_TIME = 200;
+export declare type HOCProps = {
+    measureBeforeMount?: boolean;
+};
+export declare type ComponentReactGridLayoutProps = GridLayoutProps & {
+    measureBeforeMount?: boolean;
+};
+export interface ComponentResponsiveReactGridLayoutProps extends Omit<ResponsiveReactGridLayoutProps, 'width' | 'height'> {
+    measureBeforeMount?: boolean;
+}
+declare type MinimalParameters = Pick<CoreProps, 'width' | 'height' | 'innerRef' | 'style' | 'className'>;
+export declare function WidthProvider<T extends MinimalParameters>(ComposedComponent: FunctionComponent<T>): (props: Omit<T, 'width' | 'height' | 'innerRef'> & HOCProps) => import("react").JSX.Element;
+export {};

package/components/GridLayout/types.d.ts

@@ -0,0 +1,355 @@
+import { SyntheticEvent } from 'react';
+import { DraggableEvent } from 'react-draggable';
+export declare type Position = {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};
+export declare type PartialPosition = {
+    left: number;
+    top: number;
+};
+export declare type PositionParams = {
+    containerMargin: [number, number];
+    containerPadding: [number, number];
+    containerWidth: number;
+    containerHeight: number;
+    cols: number;
+    rowHeight: number;
+    maxRows: number;
+};
+export declare type ReactDraggableCallbackData = {
+    node: HTMLElement;
+    x?: number;
+    y?: number;
+    deltaX: number;
+    deltaY: number;
+    lastX?: number;
+    lastY?: number;
+};
+export declare type ReactRef<T> = React.RefObject<T>;
+export declare type ResizeHandle = 's' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne';
+export declare type DroppingPosition = {
+    left: number;
+    top: number;
+    e: Event;
+};
+export declare type Size = {
+    width: number;
+    height: number;
+};
+export declare type GridResizeEvent = {
+    e: SyntheticEvent;
+    node: HTMLElement;
+    size: Size;
+};
+export declare type GridDragEvent = {
+    e: DraggableEvent;
+    node: HTMLElement;
+    newPosition: PartialPosition;
+};
+export declare type DragOverEvent = MouseEvent & {
+    nativeEvent: {
+        layerX: number;
+        layerY: number;
+    } & Event;
+};
+export declare type Margin = [number, number];
+export interface BaseLayoutItem {
+    /**
+     * A string corresponding to the component key.
+     * Uses the index of components instead if not provided.
+     */
+    i: string;
+    /**
+     * If true el item puede moverse dentro del area sin reorganizar los otros layouuts.
+     */
+    freeMove?: boolean | undefined;
+    /**
+     * If true el item solo muestra el header. y reacomoda el layout
+     */
+    colapsed?: boolean | undefined;
+    /**
+     * If false desaparece del layout
+     */
+    visible?: boolean | undefined;
+}
+export interface LayoutItem extends BaseLayoutItem {
+    /**
+     * 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 | undefined;
+    /**
+     * Maximum width in grid units.
+     */
+    maxW?: number | undefined;
+    /**
+     * Minimum height in grid units.
+     */
+    minH?: number | undefined;
+    /**
+     * Maximum height in grid units.
+     */
+    maxH?: number | undefined;
+    /**
+     * set by DragEvents (onDragStart, onDrag, onDragStop) and ResizeEvents (onResizeStart, onResize, onResizeStop)
+     */
+    moved?: boolean | undefined;
+    /**
+     * If true, equal to `isDraggable: false` and `isResizable: false`.
+     */
+    static?: boolean | undefined;
+    /**
+     * If false, will not be draggable. Overrides `static`.
+     */
+    isDraggable?: boolean | undefined;
+    /**
+     * If false, will not be resizable. Overrides `static`.
+     */
+    isResizable?: boolean | undefined;
+    /**
+     * By default, a handle is only shown on the bottom-right (southeast) corner.
+     * Note that resizing from the top or left is generally not intuitive.
+     */
+    resizeHandles?: ResizeHandle[] | undefined;
+    /**
+     * If true and draggable, item will be moved only within grid.
+     */
+    isBounded?: boolean | undefined;
+}
+export declare type LayoutNotReadOnly = Array<LayoutItem>;
+export declare type Layout = Array<LayoutItem>;
+export declare type CompactType = 'horizontal' | 'vertical' | null;
+export declare type EventCallback = (layout: Layout, oldItem: LayoutItem | undefined, newItem: LayoutItem, placeholder: LayoutItem | undefined, event: DraggableEvent | SyntheticEvent, element: HTMLElement) => void;
+export declare type LayoutItemType = 'placeholder' | 'layoutItem';
+export declare type LayoutItemRenderProps = {
+    i: string;
+    type: LayoutItemType;
+};
+export declare type LayoutItemRender = (props: LayoutItemRenderProps) => JSX.Element;
+export interface CoreProps {
+    /**
+     * The classname to add to the root element.
+     */
+    className?: string | undefined;
+    /**
+     * Inline-style object to pass to the root element.
+     */
+    style?: React.CSSProperties | undefined;
+    /**
+     * This allows setting the initial width on the server side.
+     * This is required unless using the HOC <WidthProvider> or similar.
+     */
+    width?: number | undefined;
+    /**
+     * This allows setting the initial heigth on the server side.
+     * This is required unless using the HOC <WidthProvider> or similar.
+     */
+    height?: number | undefined;
+    /**
+     * If true, the container height swells and contracts to fit contents.
+     */
+    autoSize?: boolean | undefined;
+    /**
+     * A CSS selector for tags that will not be draggable.
+     * For example: `draggableCancel: '.MyNonDraggableAreaClassName'`
+     * If you forget the leading. it will not work.
+     * "".react-resizable-handle" is always prepended to this value.
+     */
+    draggableCancel?: string | undefined;
+    /**
+     * 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 | undefined;
+    /**
+     * Compaction type.
+     */
+    compactType?: CompactType;
+    /**
+     * Rows have a static height, but you can change this based on breakpoints if you like.
+     */
+    rowHeight?: number | undefined;
+    /**
+     * Altura cuando está colapsado
+     */
+    colapsedHeight?: number;
+    /**
+     * Configuration of a dropping element. Dropping element is a "virtual" element
+     * which appears when you drag over some element from outside.
+     */
+    droppingItem?: {
+        i: string;
+        w: number;
+        h: number;
+    } | undefined;
+    /**
+     * If true, the layout will compact vertically.
+     */
+    verticalCompact?: boolean | undefined;
+    /**
+     * 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 | undefined;
+    /**
+     * If set to false it will disable dragging on all children.
+     */
+    isDraggable?: boolean | undefined;
+    /**
+     * If set to false it will disable resizing on all children.
+     */
+    isResizable?: boolean | undefined;
+    /**
+     * If true and draggable, all items will be moved only within grid.
+     */
+    isBounded?: boolean | undefined;
+    /**
+     * Uses CSS3 `translate()` instead of position top/left.
+     * This makes about 6x faster paint performance.
+     */
+    useCSSTransforms?: boolean | undefined;
+    /**
+     * If parent DOM node of ResponsiveReactGridLayout or ReactGridLayout has "transform: scale(n)" css property,
+     * we should set scale coefficient to avoid render artefacts while dragging.
+     */
+    transformScale?: number | undefined;
+    /**
+     * If true, grid can be placed one over the other.
+     */
+    allowOverlap?: boolean | undefined;
+    /**
+     * If true, grid items won't change position when being dragged over.
+     */
+    preventCollision?: boolean | undefined;
+    /**
+     * If true, droppable elements (with `draggable={true}` attribute)
+     * can be dropped on the grid. It triggers "onDrop" callback
+     * with position and event object as parameters.
+     * It can be useful for dropping an element in a specific position
+     * NOTE: In case of using Firefox you should add
+     * `onDragStart={e => e.dataTransfer.setData('text/plain', '')}` attribute
+     * along with `draggable={true}` otherwise this feature will work incorrect.
+     * onDragStart attribute is required for Firefox for a dragging initialization
+     * @see https://bugzilla.mozilla.org/show_bug.cgi?id=568313
+     */
+    isDroppable?: boolean | undefined;
+    /**
+     * Defines which resize handles should be rendered
+     * Allows for any combination of:
+     * 's' - South handle (bottom-center)
+     * 'w' - West handle (left-center)
+     * 'e' - East handle (right-center)
+     * 'n' - North handle (top-center)
+     * 'sw' - Southwest handle (bottom-left)
+     * 'nw' - Northwest handle (top-left)
+     * 'se' - Southeast handle (bottom-right)
+     * 'ne' - Northeast handle (top-right)
+     */
+    resizeHandles?: ResizeHandle[];
+    /**
+     * Defines custom component for resize handle
+     */
+    resizeHandle?: React.ReactNode | ((resizeHandle: ResizeHandle) => React.ReactNode);
+    /**
+     * Calls when drag starts.
+     */
+    onDragStart?: EventCallback | undefined;
+    /**
+     * Calls on each drag movement.
+     */
+    onDrag?: EventCallback | undefined;
+    /**
+     * Calls when drag is complete.
+     */
+    onDragStop?: EventCallback | undefined;
+    /**
+     * Calls when resize starts.
+     */
+    onResizeStart?: EventCallback | undefined;
+    /**
+     * Calls when resize movement happens.
+     */
+    onResize?: EventCallback | undefined;
+    /**
+     * Calls when resize is complete.
+     */
+    onResizeStop?: EventCallback | undefined;
+    /**
+     * Calls when some element has been dropped
+     */
+    onDrop?(layout: Layout[], item: Layout, e: Event): void;
+    /**
+     * Calls when an element is being dragged over the grid from outside as above.
+     * This callback should return an object to dynamically change the droppingItem size
+     * Return false to short-circuit the dragover
+     */
+    onDropDragOver?(e: any): {
+        w?: number;
+        h?: number;
+    } | false | undefined;
+    /**
+     * Ref for getting a reference for the grid's wrapping div.
+     * You can use this instead of a regular ref and the deprecated `ReactDOM.findDOMNode()`` function.
+     */
+    innerRef?: React.Ref<HTMLDivElement>;
+}
+export interface GridLayoutProps extends CoreProps {
+    layoutItemRender: LayoutItemRender;
+    /**
+     * Number of columns in this layout.
+     */
+    cols?: number | undefined;
+    /**
+     * containerMargin between items `[x, y]` in px.
+     */
+    containerMargin?: Margin;
+    /**
+     * Padding inside the container `[x, y]` in px.
+     */
+    containerPadding?: [number, number] | undefined;
+    /**
+     * 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 | undefined;
+    /**
+     * Indica cual ventana se va a maximizar
+     */
+    maximizeId?: string | undefined;
+    /**
+     * Callback so you can save the layout.
+     * Calls back with (currentLayout) after every drag or resize stop.
+     */
+    onLayoutChange?(layout: Layout): void;
+}