@m4l/components 0.1.80 → 0.1.82

package/components/GridLayout/index.d.ts

@@ -1,6 +1,7 @@
 export { GridLayout } from './GridLayout';
 export { Responsive } from './subcomponents/Responsive';
-export { addLayoutItemToBreakPoints, addLayoutItemToBreakPointIfNoExists, cloneLayouts, isEqualLayouts, isEqualLayout, } from './subcomponents/Responsive/responsiveUtils';
-export type { GridLayoutProps, LayoutItemRenderProps, Layout, LayoutItem, BaseLayoutItem, } from './types';
-export type { Layouts, ContainerChangeEvent } from './subcomponents/Responsive/types';
+export { addLayoutItemToBreakPoints, addLayoutItemToBreakPointIfNoExists, cloneLayouts, } from './subcomponents/Responsive/responsiveUtils';
+export { isEqualLayouts, isEqualLayout } from './utils';
+export type { GridLayoutProps, LayoutItemRenderProps, Layout, LayoutItem, BaseLayoutItem, Layouts, } from './types';
+export type { ContainerChangeEvent } from './subcomponents/Responsive/types';
 export { WidthProvider } from './subcomponents/WidthProvider';

package/components/GridLayout/subcomponents/Griditem/index.01fc14c3.js

@@ -0,0 +1,370 @@
+import React__default, { useRef, useEffect, useState, useCallback, useMemo } from "react";
+import { D as DraggableCore_1 } from "../../../../react-draggable.7abb5d0a.js";
+import { R as Resizable } from "../../../../react-resizable.ba08699a.js";
+import { g as getH, c as calcXY, a as calcGridItemWHPx, b as calcGridColWidth, d as calcWH, e as clamp, f as calcGridItemPosition, h as gridLayoutClasses, D as DEFAULT_COLS, i as DEFAULT_ROW_HEIGHT, j as DEFAULT_CONTAINER_WIDTH, k as DEFAULT_CONTAINER_HEIGHT, l as DEFAULT_MARGIN, m as DEFAULT_CONTAINER_PADDING, n as DEFAULT_TRANSFORM_SCALE, o as DEFAULT_COLAPSED_HEIGHT, p as perc, s as setTransform, q as setTopLeft } from "../../index.76bccc4f.js";
+import clsx from "clsx";
+import { d as deepEqual } from "../../../../node_modules.d73a220d.js";
+import { jsx, Fragment } from "react/jsx-runtime";
+function GridItem(props) {
+  const {
+    layoutItemRender: ComponentItemRender,
+    type,
+    i,
+    x,
+    y,
+    w,
+    h,
+    cols = DEFAULT_COLS,
+    rowHeight = DEFAULT_ROW_HEIGHT,
+    containerWidth = DEFAULT_CONTAINER_WIDTH,
+    containerHeight = DEFAULT_CONTAINER_HEIGHT,
+    margin = DEFAULT_MARGIN,
+    containerPadding = DEFAULT_CONTAINER_PADDING,
+    transformScale = DEFAULT_TRANSFORM_SCALE,
+    colapsedHeight = DEFAULT_COLAPSED_HEIGHT,
+    isBounded,
+    maxRows = Infinity,
+    className = "",
+    draggableCancel = "",
+    draggableHandle = "",
+    minH = 1,
+    minW = 1,
+    maxH = Infinity,
+    maxW = Infinity,
+    isResizable = true,
+    isDraggable = true,
+    resizeHandles,
+    resizeHandle,
+    useCSSTransforms = true,
+    usePercentages,
+    style,
+    freeMove,
+    maximize = "none",
+    colapsed,
+    visible = true,
+    onDragStart,
+    onDrag,
+    onDragStop,
+    onFreeMoveClick
+  } = props;
+  const refProps = useRef({
+    cols,
+    x,
+    y,
+    w,
+    h: getH(h, colapsedHeight, rowHeight, colapsed),
+    minW,
+    maxW,
+    minH,
+    maxH,
+    containerWidth,
+    containerHeight,
+    margin,
+    containerPadding,
+    rowHeight,
+    maxRows,
+    colapsed
+  });
+  useEffect(() => {
+    refProps.current = {
+      cols,
+      x,
+      y,
+      w,
+      h: getH(h, colapsedHeight, rowHeight, colapsed),
+      minW,
+      maxW,
+      minH,
+      maxH,
+      containerWidth,
+      containerHeight,
+      margin,
+      containerPadding,
+      rowHeight,
+      maxRows,
+      colapsed
+    };
+  }, [cols, x, y, w, h, minW, maxW, minH, maxH, containerWidth, containerHeight, margin, containerPadding, rowHeight, maxRows, colapsed, colapsedHeight]);
+  const [currentState, setCurrentState] = useState({
+    resizing: void 0,
+    dragging: void 0
+  });
+  const refState = useRef({
+    resizing: void 0,
+    dragging: void 0
+  });
+  const elementRef = useRef(null);
+  const getPositionParams = useCallback((preferContainerWidth, preferContainerHeight) => {
+    return {
+      cols: refProps.current.cols,
+      containerPadding: refProps.current.containerPadding,
+      containerWidth: preferContainerWidth || refProps.current.containerWidth,
+      containerHeight: preferContainerHeight || refProps.current.containerHeight,
+      containerMargin: refProps.current.margin,
+      maxRows: refProps.current.maxRows,
+      rowHeight: refProps.current.rowHeight
+    };
+  }, []);
+  const createStyle = (pos2) => {
+    let newStyle;
+    if (useCSSTransforms) {
+      newStyle = setTransform(pos2);
+    } else {
+      newStyle = setTopLeft(pos2);
+      if (usePercentages) {
+        newStyle.left = perc(pos2.left / containerWidth);
+        newStyle.width = perc(pos2.width / containerWidth);
+      }
+    }
+    return newStyle;
+  };
+  const gridItemOnDragStart = useCallback((e, {
+    node
+  }) => {
+    if (!onDragStart)
+      return;
+    const newPosition = {
+      top: 0,
+      left: 0
+    };
+    const {
+      offsetParent
+    } = node;
+    if (!offsetParent)
+      return;
+    const parentRect = offsetParent.getBoundingClientRect();
+    const clientRect = node.getBoundingClientRect();
+    const cLeft = clientRect.left / transformScale;
+    const pLeft = parentRect.left / transformScale;
+    const cTop = clientRect.top / transformScale;
+    const pTop = parentRect.top / transformScale;
+    newPosition.left = cLeft - pLeft + offsetParent.scrollLeft;
+    newPosition.top = cTop - pTop + offsetParent.scrollTop;
+    console.log(`gridItemOnDragStart cleft:${cLeft},pleft:${pLeft}, offsetParent.scrollTop:${offsetParent.scrollTop}  `, newPosition);
+    refState.current.dragging = newPosition;
+    setCurrentState((prev) => ({
+      ...prev,
+      dragging: newPosition
+    }));
+    const {
+      x: newX,
+      y: newY
+    } = calcXY(getPositionParams(), newPosition.top, newPosition.left, refProps.current.w, refProps.current.h);
+    onDragStart(i, newX, newY, {
+      e,
+      node,
+      newPosition
+    });
+  }, []);
+  const gridItemOnDrag = useCallback((e, {
+    node,
+    deltaX,
+    deltaY
+  }) => {
+    if (!onDrag)
+      return;
+    if (!refState.current.dragging) {
+      console.warn("gridItemOnDrag onDrag called before onDragStart");
+      return;
+    }
+    let top = refState.current.dragging.top + deltaY;
+    let left = refState.current.dragging.left + deltaX;
+    const positionParams = getPositionParams();
+    if (isBounded) {
+      const {
+        offsetParent
+      } = node;
+      if (offsetParent) {
+        const bottomBoundary = offsetParent.clientHeight - calcGridItemWHPx(refProps.current.h, refProps.current.rowHeight, refProps.current.margin[1]);
+        top = clamp(top, 0, bottomBoundary);
+        const colWidth = calcGridColWidth(positionParams);
+        const rightBoundary = containerWidth - calcGridItemWHPx(refProps.current.w, colWidth, refProps.current.margin[0]);
+        left = clamp(left, 0, rightBoundary);
+      }
+    }
+    const newPosition = {
+      top,
+      left
+    };
+    refState.current.dragging = newPosition;
+    setCurrentState((prev) => ({
+      ...prev,
+      dragging: newPosition
+    }));
+    const {
+      x: newX,
+      y: newY
+    } = calcXY(positionParams, top, left, refProps.current.w, refProps.current.h);
+    onDrag(i, newX, newY, {
+      e,
+      node,
+      newPosition
+    });
+  }, []);
+  const gridItemOnDragStop = useCallback((e, {
+    node
+  }) => {
+    if (!onDragStop)
+      return;
+    if (!refState.current.dragging) {
+      console.warn("onDragEnd called before onDragStart");
+      return;
+    }
+    const {
+      left,
+      top
+    } = refState.current.dragging;
+    const newPosition = {
+      top,
+      left
+    };
+    refState.current.dragging = void 0;
+    setCurrentState((prev) => ({
+      ...prev,
+      dragging: void 0
+    }));
+    const {
+      x: newX,
+      y: newY
+    } = calcXY(getPositionParams(), top, left, refProps.current.w, refProps.current.h);
+    return onDragStop(i, newX, newY, {
+      e,
+      node,
+      newPosition
+    });
+  }, []);
+  const onResizeHandler = useCallback((e, {
+    node,
+    size
+  }, handlerName) => {
+    const handler = props[handlerName];
+    if (!handler) {
+      console.warn("onResizeHandler invalid");
+      return;
+    }
+    if (refProps.current.colapsed) {
+      console.warn("onResizeHandler  colapsed invalid");
+      return;
+    }
+    let {
+      w: newW,
+      h: newH
+    } = calcWH(getPositionParams(), size.width, size.height, refProps.current.x, refProps.current.y);
+    const newMinW = Math.max(refProps.current.minW, 1);
+    const newMaxW = Math.min(refProps.current.maxW, refProps.current.cols - refProps.current.x);
+    newW = clamp(newW, newMinW, newMaxW);
+    newH = clamp(newH, refProps.current.minH, refProps.current.maxH);
+    const resizing = handlerName === "onResizeStop" ? void 0 : size;
+    setCurrentState((prev) => ({
+      ...prev,
+      resizing
+    }));
+    refState.current.resizing = resizing;
+    handler(i, newW, newH, {
+      e,
+      node,
+      size
+    });
+  }, []);
+  const localOnResizeStop = useCallback((e, callbackData) => {
+    onResizeHandler(e, callbackData, "onResizeStop");
+  }, []);
+  const localOnResizeStart = useCallback((e, callbackData) => {
+    onResizeHandler(e, callbackData, "onResizeStart");
+  }, []);
+  const localFreeMoveOnClick = useCallback(() => {
+    if (!onFreeMoveClick)
+      return;
+    onFreeMoveClick(i);
+  }, []);
+  const mixinResizable = useCallback((child, position, positionParams) => {
+    const maxWidth = calcGridItemPosition(positionParams, 0, 0, cols - x, 0, maximize).width;
+    const mins = calcGridItemPosition(positionParams, 0, 0, minW, minH, maximize);
+    const maxes = calcGridItemPosition(positionParams, 0, 0, maxW, maxH, maximize);
+    const minConstraints = [mins.width, mins.height];
+    const maxConstraints = [Math.min(maxes.width, maxWidth), Math.min(maxes.height, Infinity)];
+    return /* @__PURE__ */ jsx(
+      Resizable,
+      {
+        draggableOpts: {
+          disabled: !isResizable || maximize !== "none" || colapsed
+        },
+        className: isResizable ? void 0 : "react-resizable-hide",
+        width: position.width,
+        height: position.height,
+        minConstraints,
+        maxConstraints,
+        onResizeStop: localOnResizeStop,
+        onResizeStart: localOnResizeStart,
+        onResize: localOnResize,
+        transformScale,
+        resizeHandles,
+        handle: resizeHandle,
+        children: child
+      }
+    );
+  }, [cols, x, minW, minH, maxW, maxH, isResizable, transformScale, resizeHandles, resizeHandle, maximize, colapsed]);
+  const mixinDraggable = useCallback((child) => {
+    return /* @__PURE__ */ jsx(
+      DraggableCore_1,
+      {
+        disabled: !isDraggable || maximize !== "none",
+        onStart: gridItemOnDragStart,
+        onDrag: gridItemOnDrag,
+        onStop: gridItemOnDragStop,
+        handle: draggableHandle,
+        cancel: ".react-resizable-handle" + (draggableCancel ? "," + draggableCancel : ""),
+        scale: transformScale,
+        nodeRef: elementRef,
+        children: child
+      }
+    );
+  }, [isDraggable, draggableHandle, transformScale, draggableCancel, maximize]);
+  const localOnResize = useCallback((e, callbackData) => {
+    onResizeHandler(e, callbackData, "onResize");
+  }, []);
+  const positionParms = getPositionParams(containerWidth, containerHeight);
+  const pos = calcGridItemPosition(positionParms, x, y, w, getH(h, colapsedHeight, rowHeight, colapsed), maximize, currentState);
+  const classNameFinal = clsx(gridLayoutClasses.gridItemRoot, className, {
+    [`${gridLayoutClasses.gridItemType}-${type}`]: true,
+    [gridLayoutClasses.static]: props.static,
+    [gridLayoutClasses.resizing]: Boolean(currentState.resizing),
+    [gridLayoutClasses.dragging]: Boolean(currentState.dragging),
+    [gridLayoutClasses.maximizeMe]: maximize === "maximize_me",
+    [gridLayoutClasses.maximizeOther]: maximize === "maximize_other",
+    [gridLayoutClasses.colapsed]: colapsed,
+    [gridLayoutClasses.gridItemFreeMove]: freeMove,
+    [gridLayoutClasses.resizeHide]: colapsed,
+    [gridLayoutClasses.invisible]: !visible,
+    [gridLayoutClasses.cssTransforms]: useCSSTransforms,
+    "react-draggable": isDraggable
+  });
+  const styleFinal = {
+    ...style,
+    ...createStyle(pos)
+  };
+  const memoLayouItemRender = useMemo(() => {
+    return /* @__PURE__ */ jsx(ComponentItemRender, {
+      type,
+      i
+    });
+  }, [type, i]);
+  const gridItemRoot = /* @__PURE__ */ jsx("div", {
+    className: classNameFinal,
+    ref: elementRef,
+    style: styleFinal,
+    role: "none",
+    onClick: localFreeMoveOnClick,
+    children: memoLayouItemRender
+  });
+  const gridItem = mixinDraggable(mixinResizable(gridItemRoot, pos, getPositionParams()));
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: gridItem
+  });
+}
+const MemonizedGridItem = React__default.memo(GridItem, (prevProps, nextProps) => {
+  return deepEqual(prevProps, nextProps);
+});
+export {
+  MemonizedGridItem as M
+};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { GridItemProps } from './types';
+/**
+ * An individual item within a ReactGridLayout.
+ * En el GridItem es realmente donde se generan los tamaños y posiciones denependiendo si se está
+ * en Dragging o en Resizing
+ */
+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,103 @@
+import { GridDragEvent, GridLayoutProps, GridResizeEvent, LayoutItem, LayoutItemRender, LayoutItemType } from '../../types';
+export declare type GridItemState = {
+    /**
+     * "resizing" indica el tamaño actual cuando se está redimensionando el gridItem
+     */
+    resizing?: {
+        width: number;
+        height: number;
+    };
+    /**
+     * "dragging" indica la posición actual cuando se está moviendo el gridItem
+     */
+    dragging?: {
+        top: number;
+        left: number;
+    };
+};
+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 GridItemResizeCallback = (i: string, w: number, h: number, data: GridResizeEvent) => void;
+export declare type GridItemDragCallback = (i: string, x: number, y: number, gridDragEvent: GridDragEvent) => void;
+export declare type Maximize = 'maximize_me' | 'maximize_other' | 'none';
+export interface GridItemProps extends Omit<LayoutItem, 'moved'>, Pick<GridLayoutProps, 'cols' | 'resizeHandle' | 'draggableCancel' | 'draggableHandle' | 'containerWidth' | 'containerHeight' | 'transformScale' | 'colapsedHeight' | 'rowHeight' | 'useCSSTransforms' | 'margin' | 'containerPadding' | 'maxRows' | 'style'> {
+    /**
+     * "type": Indica si es placeHolder o Layout
+     */
+    type: LayoutItemType;
+    layoutItemRender: LayoutItemRender;
+    /**
+     * "className" permite identificar si es placeHolder y estilar
+     */
+    className?: string;
+    /**
+     * zIndex: Permite modificar en los gridItems freeMove (popups) el zIndex
+     */
+    zIndex?: number;
+    /**
+     * "usePercentages" indica si usan porcentajes en vez de pixels, se usa antes de montar el componente
+     */
+    usePercentages?: boolean;
+    /**
+     * "maximize" indica si el gridItem está maximizado, o si otro está maxmizado o si ninguno
+     */
+    maximize: Maximize;
+    /**
+     * "onDrag" función que maneja el onDrag del gridItem
+     */
+    onDrag?: GridItemDragCallback;
+    /**
+     * "onDragStart" función que maneja el onDragStart del gridItem
+     */
+    onDragStart?: GridItemDragCallback;
+    /**
+     * "onDragStop" función que maneja el onDragStop del gridItem
+     */
+    onDragStop?: GridItemDragCallback;
+    /**
+     * "onResize" función que maneja el onResize del gridItem
+     */
+    onResize?: GridItemResizeCallback;
+    /**
+     * "onResizeStart" función que maneja el onResizeStart del gridItem
+     */
+    onResizeStart?: GridItemResizeCallback;
+    /**
+     * "onResizeStop" función que maneja el onResizeStop del gridItem
+     */
+    onResizeStop?: GridItemResizeCallback;
+    /**
+     * "onFreeMoveClick" función que va a tender los onclicks del gridItem
+     */
+    onFreeMoveClick?: (i: string) => void;
+}
+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;
+};

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

@@ -0,0 +1,10 @@
+import { ResponsiveState, ResponsiveInitialStateProps } from './types';
+/**
+ * Funcion de apoyo que devuelve el esatado inicial del componente Responsive
+ * En caso de que sea diferente a la prop "layout" del breakpoint establecido inicialmeente no
+ * sea igual al que se regenera findOrGenerateResponsiveLayout se marca con la variable "fireOnLoadLayoutChange" que debe emitir
+ * cambio de layout en la primera renderización
+ * @param props
+ * @returns
+ */
+export declare function generateInitialState(props: ResponsiveInitialStateProps): ResponsiveState;

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

@@ -1,3 +1,16 @@
 /// <reference types="react" />
-import { ResponsiveReactGridLayoutProps } from './types';
-export declare function Responsive(props: ResponsiveReactGridLayoutProps): import("react").JSX.Element;
+import { ResponsiveProps } from './types';
+/**
+ * Componente encargado de proporcionar el layout basado
+ * en el breakpoint que se recibe o en el que se calcula dependiendo del containerWidth.
+ * Eventos:
+ *  - onContainerChange: Este evento que indica las medidas del contendor, columnas actuales y breakpoint actual.
+ *                       Se genera cuando se renderiza la primera vez el componente
+ * Consideraciones de optimización
+ *  - El compontente almacena en una posicion de memoria diferente los layouts que le llegan por los props.
+ *    Cuando props.layouts cambia, el componente se-rerenderiza si hay un cambio (Se agrego/borro/movió un layoutItem)
+ *    Es aconsejable no reintroducir el layouts cuando
+ * @param props
+ * @returns
+ */
+export declare function Responsive(props: ResponsiveProps): import("react").JSX.Element;