@m4l/components 7.0.0 → 7.1.2

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

@@ -2,24 +2,22 @@ import { Breakpoint, CompactType, Layout, LayoutItem, Layouts, Margin } from '..
 import { BreakpointCols, Breakpoints, ResponsiveLayout, 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.
+ * @returns {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.
+ * @returns {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.
@@ -27,23 +25,21 @@ export declare function getColsFromBreakpoint(breakpoint: Breakpoint, cols: Brea
  * @param  {Number} cols       Column count at new breakpoint.
  * @param  {CompactType} compactType
  *   vertically.
- * @return {Array}             New layout.
+ * @returns {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, rowHeight: 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.
+ * @returns {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}
+ * @returns {Array}
  */
 export declare function getIndentationValue(param: ResponsiveMargin, breakpoint: string): Margin;
 /**
@@ -58,4 +54,7 @@ export declare function addLayoutItemToBreakPointIfNoExists(layouts: Layouts, br
  * @param layoutItem
  */
 export declare function addLayoutItemToBreakPoints(layouts: Layouts, layoutItem: LayoutItem, cols: BreakpointCols, margin: ResponsiveMargin, containerPadding: ResponsiveMargin, rowHeight: number | Record<string, number>, containerHeight?: number, currentBreakpoint?: Breakpoint): Layouts;
+/**
+ * TODO: Documentar
+ */
 export declare function cloneLayouts(layouts: Layouts, layoutItemReplaceProps?: Partial<Exclude<LayoutItem, 'i'>>): Layouts;

package/components/GridLayout/subcomponents/Responsive/responsiveUtils.js

@@ -0,0 +1,150 @@
+import { a as cloneLayoutItem, c as cloneLayout, d as compact, l as correctBounds } from "../../utils.js";
+function getBreakpointFromWidth(breakpoints, width) {
+  const sorted = sortBreakpoints(breakpoints);
+  let matching = sorted[0];
+  for (let i = 1, len = sorted.length; i < len; i++) {
+    const breakpointName = sorted[i];
+    if (width > breakpoints[breakpointName]) {
+      matching = breakpointName;
+    }
+  }
+  return matching;
+}
+function getColsFromBreakpoint(breakpoint, cols) {
+  if (!cols[breakpoint]) {
+    throw new Error(
+      "ResponsiveReactGridLayout: `cols` entry for breakpoint " + breakpoint + " is missing!"
+    );
+  }
+  return cols[breakpoint];
+}
+function findOrGenerateResponsiveLayout(layouts, breakpoints, breakpoint, lastBreakpoint, cols, compactType, brekpointsCols, colapsedHeight, rowHeight) {
+  let layout = layouts[breakpoint];
+  const breakpointsSorted = sortBreakpoints(breakpoints);
+  const indexBreakointInit = breakpointsSorted.indexOf(breakpoint);
+  let compareBreakpoint;
+  if (!layout) {
+    if (lastBreakpoint !== breakpoint && layouts[lastBreakpoint]) {
+      compareBreakpoint = lastBreakpoint;
+    } else {
+      const rotatedBreakpoints = [
+        ...breakpointsSorted.splice(indexBreakointInit),
+        ...breakpointsSorted.reverse()
+      ];
+      for (let i = 0, len = rotatedBreakpoints.length; i < len; i++) {
+        const b = rotatedBreakpoints[i];
+        if (layouts[b]) {
+          compareBreakpoint = b;
+          break;
+        }
+      }
+    }
+    if (compareBreakpoint) {
+      layout = [];
+      for (let i = 0, len = layouts[compareBreakpoint].length; i < len; i++) {
+        const li = cloneLayoutItem(layouts[compareBreakpoint][i]);
+        if (brekpointsCols[compareBreakpoint]) {
+          const newW = Math.round(li.w * cols / brekpointsCols[compareBreakpoint]);
+          li.w = newW;
+        }
+        layout.push(li);
+      }
+    }
+    if (!layout) {
+      layout = [];
+    }
+  } else {
+    layout = cloneLayout(layout);
+  }
+  layout = cloneLayout(layout);
+  const ret = compact(
+    correctBounds(layout, { cols }, colapsedHeight, colapsedHeight),
+    compactType,
+    cols,
+    colapsedHeight,
+    rowHeight
+  );
+  return ret;
+}
+function sortBreakpoints(breakpoints) {
+  const keys = Object.keys(breakpoints);
+  return keys.sort(function(a, b) {
+    return breakpoints[a] - breakpoints[b];
+  });
+}
+function getIndentationValue(param, breakpoint) {
+  if (!param) {
+    return [0, 0];
+  }
+  return Array.isArray(param) ? param : param[breakpoint];
+}
+function addLayoutItemToBreakPointIfNoExists(layouts, breakpoint, layoutItem, cols, margin, containerPadding, rowHeight, containerHeight, currentBreakpoint) {
+  if (!layouts[breakpoint]) {
+    return;
+  }
+  if (layouts[breakpoint].findIndex((l) => l.i === layoutItem.i) === -1) {
+    const l = cloneLayoutItem(layoutItem);
+    const rowHeightBreakpoint = typeof rowHeight === "number" ? rowHeight : rowHeight[breakpoint];
+    const heigthUnits = containerHeight !== void 0 ? (containerHeight + getIndentationValue(margin, breakpoint)[1] - 2 * getIndentationValue(containerPadding, breakpoint)[1]) / (rowHeightBreakpoint + getIndentationValue(margin, breakpoint)[1]) : l.h;
+    if (l.freeMove) {
+      l.x = Math.round(cols[breakpoint] / 4);
+      l.y = Math.round(heigthUnits / 4);
+      l.w = Math.round(cols[breakpoint] / 2);
+      l.h = heigthUnits / 2;
+      if (breakpoint === "xxs") {
+        l.visible = false;
+        for (let index = 0; index < layouts[breakpoint].length; index++) {
+          if (layouts[breakpoint][index].freeMove) {
+            layouts[breakpoint][index].visible = false;
+          }
+        }
+        if (currentBreakpoint === "xxs") {
+          l.visible = true;
+        }
+      }
+    } else {
+      l.w = cols[breakpoint];
+      l.h = Math.round(heigthUnits * 0.8);
+    }
+    if (l.freeMove) {
+      layouts[breakpoint].push(l);
+    } else {
+      layouts[breakpoint].unshift(l);
+    }
+  }
+}
+function addLayoutItemToBreakPoints(layouts, layoutItem, cols, margin, containerPadding, rowHeight, containerHeight, currentBreakpoint) {
+  const newLayouts = {};
+  for (const key in layouts) {
+    const layoutBreakpoint = cloneLayout(layouts[key]);
+    newLayouts[key] = layoutBreakpoint;
+    addLayoutItemToBreakPointIfNoExists(
+      newLayouts,
+      key,
+      layoutItem,
+      cols,
+      margin,
+      containerPadding,
+      rowHeight,
+      containerHeight,
+      currentBreakpoint
+    );
+  }
+  return newLayouts;
+}
+function cloneLayouts(layouts, layoutItemReplaceProps) {
+  const newLayouts = {};
+  for (const breakPoint in layouts) {
+    newLayouts[breakPoint] = cloneLayout(layouts[breakPoint], layoutItemReplaceProps);
+  }
+  return newLayouts;
+}
+export {
+  getColsFromBreakpoint as a,
+  getIndentationValue as b,
+  addLayoutItemToBreakPointIfNoExists as c,
+  addLayoutItemToBreakPoints as d,
+  cloneLayouts as e,
+  findOrGenerateResponsiveLayout as f,
+  getBreakpointFromWidth as g
+};

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

@@ -1,11 +1,11 @@
-import type { Breakpoint, CoreProps, Layout, Layouts, Margin } from '../../types';
-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>>;
+import { Breakpoint, CoreProps, Layout, Layouts, Margin } from '../../types';
+export type DefaultBreakpoints = 'lg' | 'md' | 'sm' | 'xs' | 'xxs';
+export type ResponsiveLayout<T extends Breakpoint> = Record<T, Layout>;
+export type Breakpoints<T extends Breakpoint> = Readonly<Record<T, number>>;
 /**
  * "ResponsiveState" interface usada para manejar el estado reactivo del Responsive
  */
-export declare type ResponsiveState = {
+export type ResponsiveState = {
     /**
      * "breakpointLayout" variable de estado que sirve de parametro de entrada al GridLayout
      * Esta variable cambia con base en los movimientos del usuario y los cambios a traves de los props
@@ -32,7 +32,7 @@ export declare type ResponsiveState = {
     contaierMargin: Margin;
     /**
      * "contaierPadding" padding del contenedor para el brekpoint actual
-     **/
+     */
     contaierPadding: Margin;
     /**
      * colapsedHeight: Valor de altura de un grid item colapsado.
@@ -43,22 +43,22 @@ export declare type ResponsiveState = {
      */
     rowHeight: number;
 };
-export declare type OnLayoutChangeCallback = (layout: Layout, layouts: Layouts) => void;
-export declare type LayoutItemResponsive = {
+export type OnLayoutChangeCallback = (layout: Layout, layouts: Layouts) => void;
+export type LayoutItemResponsive = {
     i: string;
     freeMove: boolean;
 };
 /**
  * "ResponsiveMargin" interface para denotar el padding o margin de manera responsive que incluye la opción no responsive Marghin
  */
-export declare type ResponsiveMargin = {
+export type ResponsiveMargin = {
     [key: Breakpoint]: Margin;
 } | Margin;
 /**
  * "RefResponsiveState" interface para manejar las variables de referencia que son accesibles en useCallbacs
  * Adicionalmente sirve para comparar las props vs lo ultimo guardado y tomar acciones cuando realmente cambian los datos.
  */
-export declare type RefResponsiveState = {
+export type RefResponsiveState = {
     /**
      * "cols": ultimo valor de la prop cols
      */
@@ -98,14 +98,14 @@ export declare type RefResponsiveState = {
      */
     rowHeight: number;
 };
-export declare type ContainerChangeEvent = {
+export type ContainerChangeEvent = {
     containerWidth: number;
     containerHeight: number;
     breakpoint: Breakpoint;
     cols: number;
 };
-export declare type OnContainerChange = (event: ContainerChangeEvent) => void;
-export declare type BreakpointCols = {
+export type OnContainerChange = (event: ContainerChangeEvent) => void;
+export type BreakpointCols = {
     [key: Breakpoint]: number;
 };
 export interface ResponsiveProps extends Omit<CoreProps, 'colapsedHeight' | 'rowHeight'> {
@@ -168,4 +168,4 @@ export interface ResponsiveProps extends Omit<CoreProps, 'colapsedHeight' | 'row
 /**
  * "ResponsiveInitialStateProps" interfaz usada en la inicialización y conciliación del primer estado del componente
  */
-export declare type ResponsiveInitialStateProps = Pick<ResponsiveProps, 'containerWidth' | 'containerHeight' | 'breakpoint' | 'breakpoints' | 'cols' | 'compactType' | 'layouts' | 'containerMargin' | 'containerPadding' | 'colapsedHeight' | 'rowHeight'>;
+export type ResponsiveInitialStateProps = Pick<ResponsiveProps, 'containerWidth' | 'containerHeight' | 'breakpoint' | 'breakpoints' | 'cols' | 'compactType' | 'layouts' | 'containerMargin' | 'containerPadding' | 'colapsedHeight' | 'rowHeight'>;

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

@@ -1,15 +1,18 @@
 import { FunctionComponent } from 'react';
 import { CoreProps, GridLayoutProps } from '../../types';
 import { ResponsiveProps } from '../Responsive/types';
-export declare type HOCProps = {
+export type HOCProps = {
     measureBeforeMount?: boolean;
 };
-export declare type ComponentReactGridLayoutProps = GridLayoutProps & {
+export type ComponentReactGridLayoutProps = GridLayoutProps & {
     measureBeforeMount?: boolean;
 };
 export interface ComponentResponsiveReactGridLayoutProps extends Omit<ResponsiveProps, 'width' | 'height'> {
     measureBeforeMount?: boolean;
 }
-declare type MinimalParameters = Pick<CoreProps, 'containerWidth' | 'containerHeight' | 'innerRef' | 'style' | 'className'>;
-export declare function withSizeProvider<T extends MinimalParameters>(ComposedComponent: FunctionComponent<T>): (props: Omit<T, 'containerWidth' | 'containerHeight' | 'innerRef'> & HOCProps) => import("react/jsx-runtime").JSX.Element;
+type MinimalParameters = Pick<CoreProps, 'containerWidth' | 'containerHeight' | 'innerRef' | 'style' | 'className'>;
+/**
+ * TODO: Documentar
+ */
+export declare function withSizeProvider<T extends MinimalParameters>(ComposedComponent: FunctionComponent<T>): (props: Omit<T, "containerWidth" | "containerHeight" | "innerRef"> & HOCProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/components/GridLayout/subcomponents/withSizeProvider/index.js

@@ -0,0 +1,72 @@
+import { jsx } from "react/jsx-runtime";
+import { useRef, useState, useMemo, useCallback, useEffect } from "react";
+import clsx from "clsx";
+import throttle from "lodash.throttle";
+import { useResizeObserver } from "@m4l/graphics";
+import { e as DEFAULT_CONTAINER_WIDTH, f as DEFAULT_CONTAINER_HEIGHT, T as THROTTLE_RESIZE_TIMEOUT, C as COMPONENT_CLASS_NAME } from "../../constants.js";
+function withSizeProvider(ComposedComponent) {
+  return (props) => {
+    const { measureBeforeMount = true, ...rest } = props;
+    const refMounted = useRef(false);
+    const [currentState, setCurrentState] = useState({
+      mounted: false,
+      width: DEFAULT_CONTAINER_WIDTH,
+      height: DEFAULT_CONTAINER_HEIGHT
+    });
+    const onWindowResizeMemo = useMemo(
+      () => () => {
+        const nodeElement = elementRef.current;
+        if (nodeElement instanceof HTMLElement && nodeElement.clientWidth) {
+          setCurrentState((prev) => ({
+            ...prev,
+            width: nodeElement.clientWidth,
+            //
+            height: nodeElement.offsetHeight
+          }));
+        }
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      []
+    );
+    const throttleResize = throttle(onWindowResizeMemo, THROTTLE_RESIZE_TIMEOUT, {
+      leading: false,
+      // No enviar el primer evento de resizing
+      trailing: true
+      // Incluir siempre el ultimo evento en la cola, para que no quede se quedee a la mitad de resizing
+    });
+    const onResize = useCallback((_target) => {
+      throttleResize();
+    }, []);
+    const elementRef = useResizeObserver(onResize);
+    useEffect(() => {
+      setCurrentState((prev) => ({ ...prev, mounted: true }));
+      refMounted.current = true;
+      onWindowResizeMemo();
+    }, []);
+    if (measureBeforeMount && !currentState.mounted) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: clsx(props.className, COMPONENT_CLASS_NAME),
+          style: props.style,
+          ref: elementRef
+        }
+      );
+    }
+    return (
+      //@ts-expect-error
+      /* @__PURE__ */ jsx(
+        ComposedComponent,
+        {
+          innerRef: elementRef,
+          containerWidth: currentState.width,
+          containerHeight: currentState.height,
+          ...rest
+        }
+      )
+    );
+  };
+}
+export {
+  withSizeProvider as w
+};

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

@@ -0,0 +1,8 @@
+export type 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 | undefined;
+};

package/components/GridLayout/types.d.ts

@@ -1,16 +1,16 @@
-import React, { SyntheticEvent } from 'react';
+import { default as React, SyntheticEvent } from 'react';
 import { DraggableEvent } from 'react-draggable';
-export declare type Position = {
+export type Position = {
     left: number;
     top: number;
     width: number;
     height: number;
 };
-export declare type PartialPosition = {
+export type PartialPosition = {
     left: number;
     top: number;
 };
-export declare type PositionParams = {
+export type PositionParams = {
     containerMargin: [number, number];
     containerPadding: [number, number];
     containerWidth: number;
@@ -19,7 +19,7 @@ export declare type PositionParams = {
     rowHeight: number;
     maxRows: number;
 };
-export declare type ReactDraggableCallbackData = {
+export type ReactDraggableCallbackData = {
     node: HTMLElement;
     x?: number;
     y?: number;
@@ -28,34 +28,34 @@ export declare type ReactDraggableCallbackData = {
     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 = {
+export type ReactRef<T> = React.RefObject<T>;
+export type ResizeHandle = 's' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne';
+export type DroppingPosition = {
     left: number;
     top: number;
     e: Event;
 };
-export declare type Size = {
+export type Size = {
     width: number;
     height: number;
 };
-export declare type GridResizeEvent = {
+export type GridResizeEvent = {
     e: SyntheticEvent;
     node: HTMLElement;
     size: Size;
 };
-export declare type GridDragEvent = {
+export type GridDragEvent = {
     e: DraggableEvent;
     node: HTMLElement;
     newPosition: PartialPosition;
 };
-export declare type DragOverEvent = MouseEvent & {
+export type DragOverEvent = MouseEvent & {
     nativeEvent: {
         layerX: number;
         layerY: number;
     } & Event;
 };
-export declare type Margin = [number, number];
+export type Margin = [number, number];
 export interface BaseLayoutItem {
     /**
      * A string corresponding to the component key.
@@ -139,7 +139,7 @@ export interface LayoutItem extends BaseLayoutItem {
 /**
  * GridLayoutState utilizado para saber si se está en draggin y si el componente ya se renderizó por primera vez
  */
-export declare type GridLayoutState = {
+export type GridLayoutState = {
     /**
      * "activeDrag" si es diferente a undefined es el layoutItem del placeHolder
      */
@@ -153,7 +153,7 @@ export declare type GridLayoutState = {
  * "GridLayoutRefState" Debido a la limitación de React de no poder obtener el valor de las variables en
  * las funciones que  useCallback, se debe hacer una copia a un ref para poder obtener el último valor de estado.
  */
-export declare type GridLayoutRefState = {
+export type GridLayoutRefState = {
     /**
      * "layout" se guarda el layout actual con los cambios durante el resizing y/o dragging
      */
@@ -175,7 +175,7 @@ export declare type GridLayoutRefState = {
      */
     oldResizeItem?: LayoutItem;
     /**
-     *
+     * TODO: Documentar
      */
     zIndexes: string[];
     /**
@@ -187,26 +187,26 @@ export declare type GridLayoutRefState = {
      */
     rowHeight: number;
 };
-export declare type Layout = Array<LayoutItem>;
+export type Layout = Array<LayoutItem>;
 /** Tipos de datos para el responsive que es nec */
-export declare type Breakpoint = string;
+export type Breakpoint = string;
 export interface Layouts {
     [P: Breakpoint]: Layout;
 }
-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 = {
+export type CompactType = 'horizontal' | 'vertical' | null;
+export type EventCallback = (layout: Layout, oldItem: LayoutItem | undefined, newItem: LayoutItem, placeholder: LayoutItem | undefined, event: DraggableEvent | SyntheticEvent, element: HTMLElement) => void;
+export type LayoutItemType = 'placeholder' | 'layoutItem';
+export type LayoutItemRenderProps = {
     i: string;
     type: LayoutItemType;
 };
-export declare type LayoutItemRender = (props: LayoutItemRenderProps) => JSX.Element;
+export type LayoutItemRender = (props: LayoutItemRenderProps) => JSX.Element;
 export interface CoreProps {
     /**
      * "layoutItemRender" función encargada de renderizar los gridItems
      *  No es reactiva al cambio. Con la función que se inicia el componente
      *
-     * */
+     */
     layoutItemRender: LayoutItemRender;
     /**
      * Indica cual layout se va a maximizar
@@ -418,7 +418,7 @@ export interface GridLayoutProps extends CoreProps {
      *
      * `{i: string, x: number, y: number, w: number, h: number}`
      *
-     **/
+     */
     layout: Layout;
     /**
      * Callback so you can save the layout.