@m4l/components 0.1.75 → 0.1.77

package/components/GridLayout/Responsive/index.a12a8cec.js

@@ -0,0 +1,335 @@
+import { c as cloneLayoutItem, a as cloneLayout, b as compact, d as correctBounds, G as GridLayout, n as noop } from "../index.4ba3767a.js";
+import { useState, useRef, useEffect, useCallback } from "react";
+import { useFirstRender } from "@m4l/graphics";
+import { d as deepEqual } from "../../../node_modules.d73a220d.js";
+import { jsx } from "react/jsx-runtime";
+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, colapsedItems) {
+  let layout = layouts[breakpoint];
+  const breakpointsSorted = sortBreakpoints(breakpoints);
+  const indexBreakointInit = breakpointsSorted.indexOf(breakpoint);
+  let compareBreakpoint;
+  console.log("findOrGenerateResponsiveLayout start", layout);
+  if (!layout) {
+    if (lastBreakpoint !== breakpoint && layouts[lastBreakpoint]) {
+      compareBreakpoint = lastBreakpoint;
+    } else {
+      const rotatedBreakpoints = [
+        ...breakpointsSorted.splice(indexBreakointInit),
+        ...breakpointsSorted.reverse()
+      ];
+      console.log("findOrGenerateResponsiveLayout  rotatedBreakpoints ", rotatedBreakpoints);
+      for (let i = 0, len = rotatedBreakpoints.length; i < len; i++) {
+        const b = rotatedBreakpoints[i];
+        if (layouts[b]) {
+          console.log("findOrGenerateResponsiveLayout above I*:", i, b);
+          compareBreakpoint = b;
+          break;
+        }
+      }
+    }
+    console.log("findOrGenerateResponsiveLayout  compareBreakpoint ", compareBreakpoint);
+    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]);
+          console.log(
+            `findOrGenerateResponsiveLayout  li:${li.i}, actual: ${li.w} -> new: ${newW} `,
+            compareBreakpoint
+          );
+          li.w = newW;
+        }
+        layout.push(li);
+      }
+    }
+    if (!layout) {
+      layout = [];
+    }
+  } else {
+    layout = cloneLayout(layout);
+  }
+  console.log("findOrGenerateResponsiveLayout layout filtrado:", layout);
+  layout = cloneLayout(layout);
+  for (let index = 0; index < layout.length; index++) {
+    const element = layout[index];
+    element.colapsed = false;
+    if (colapsedItems && colapsedItems[element.i]) {
+      element.colapsed = true;
+    }
+  }
+  console.log("findOrGenerateResponsiveLayout layout clonado:", layout);
+  const ret = compact(
+    correctBounds(layout, { cols }, colapsedHeight),
+    compactType,
+    cols,
+    colapsedHeight
+  );
+  console.log("findOrGenerateResponsiveLayout layout ret **:", ret);
+  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) {
+  if (!layouts[breakpoint])
+    return;
+  if (layouts[breakpoint].findIndex((l) => l.i === layoutItem.i) === -1) {
+    const l = cloneLayoutItem(layoutItem);
+    const heigthUnits = containerHeight !== void 0 ? (containerHeight + getIndentationValue(margin, breakpoint)[1] - 2 * getIndentationValue(containerPadding, breakpoint)[1]) / (rowHeight + 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;
+    } else {
+      l.w = cols[breakpoint];
+      l.h = Math.round(heigthUnits * 0.8);
+    }
+    if (breakpoint === "xxs") {
+      if (l.freeMove) {
+        l.visible = false;
+      }
+    }
+    if (l.freeMove) {
+      layouts[breakpoint].push(l);
+    } else {
+      layouts[breakpoint].unshift(l);
+    }
+  }
+}
+function addLayoutItemToBreakPoints(layouts, layoutItem, cols, margin, containerPadding, rowHeight, containerHeight) {
+  const newLayouts = {};
+  for (const key in layouts) {
+    const layoutBreakpoint = cloneLayout(layouts[key]);
+    newLayouts[key] = layoutBreakpoint;
+    addLayoutItemToBreakPointIfNoExists(
+      newLayouts,
+      key,
+      layoutItem,
+      cols,
+      margin,
+      containerPadding,
+      rowHeight,
+      containerHeight
+    );
+  }
+  return newLayouts;
+}
+function cloneLayouts(layouts, layoutItemReplaceProps) {
+  console.log("cloneLayout");
+  const newLayouts = {};
+  for (const breakPoint in layouts) {
+    newLayouts[breakPoint] = cloneLayout(layouts[breakPoint], layoutItemReplaceProps);
+  }
+  return newLayouts;
+}
+function generateInitialState(props) {
+  const {
+    width,
+    breakpoint,
+    breakpoints,
+    containerPadding = [10, 10],
+    containerMargin = [10, 10],
+    layouts: defaultLayouts = {},
+    cols,
+    compactType = null,
+    colapsedItems,
+    colapsedHeight = 2
+  } = props;
+  const newBreakpoint = breakpoint || getBreakpointFromWidth(breakpoints, width);
+  const colNo = getColsFromBreakpoint(newBreakpoint, cols);
+  let fireOnLoadLayoutChange = true;
+  const initialLayout = findOrGenerateResponsiveLayout(defaultLayouts, breakpoints, newBreakpoint, newBreakpoint, colNo, compactType, {
+    [newBreakpoint]: colNo
+  }, colapsedHeight, colapsedItems);
+  if (defaultLayouts[newBreakpoint]) {
+    if (deepEqual(defaultLayouts[newBreakpoint], initialLayout)) {
+      fireOnLoadLayoutChange = false;
+    }
+  }
+  const ret = {
+    layout: initialLayout,
+    breakpoint: newBreakpoint,
+    cols: colNo,
+    contaierMargin: getIndentationValue(containerMargin, newBreakpoint),
+    contaierPadding: getIndentationValue(containerPadding, newBreakpoint),
+    fireOnLoadLayoutChange
+  };
+  console.log("generateInitialState", ret, initialLayout);
+  return ret;
+}
+function Responsive(props) {
+  const {
+    width,
+    height,
+    breakpoint,
+    compactType = null,
+    breakpoints = {
+      lg: 1200,
+      md: 996,
+      sm: 768,
+      xs: 480,
+      xxs: 1
+    },
+    cols = {
+      lg: 12,
+      md: 10,
+      sm: 6,
+      xs: 4,
+      xxs: 2
+    },
+    containerPadding = [10, 10],
+    containerMargin = [10, 10],
+    layouts = {},
+    onBreakpointChange = noop,
+    onLayoutChange = noop,
+    onContainerChange = noop,
+    layoutItemRender,
+    colapsedItems,
+    colapsedHeight = 2,
+    ...other
+  } = props;
+  const [currentState, setCurrentState] = useState(() => generateInitialState(props));
+  const refLayouts = useRef({
+    layouts: {
+      ...layouts,
+      [currentState.breakpoint]: currentState.layout
+    },
+    breakpoint: currentState.breakpoint,
+    breakpoints,
+    colapsedItems,
+    width,
+    height
+  });
+  const isFirstRender = useFirstRender([width, height, layouts]);
+  useEffect(() => {
+    console.log("useEffect componente", currentState.fireOnLoadLayoutChange);
+    onContainerChange({
+      containerWidth: refLayouts.current.width,
+      containerHeight: refLayouts.current.height,
+      containerMargin: currentState.contaierMargin,
+      containerPadding: currentState.contaierPadding,
+      breakpoint: currentState.breakpoint,
+      cols: currentState.cols
+    });
+    if (currentState.fireOnLoadLayoutChange) {
+      onLayoutChange(currentState.layout, {
+        ...layouts,
+        [currentState.breakpoint]: currentState.layout
+      });
+    }
+    return () => {
+      console.debug("destruccion del componente");
+    };
+  }, []);
+  useEffect(() => {
+    if (isFirstRender) {
+      return;
+    }
+    const newBreakpoint = breakpoint || getBreakpointFromWidth(breakpoints, width);
+    const newCols = getColsFromBreakpoint(newBreakpoint, cols);
+    const lastBreakpoint = currentState.breakpoint;
+    const newLayouts = {
+      ...layouts
+    };
+    let newContainerMargin = currentState.contaierMargin;
+    let newContainerPadding = currentState.contaierPadding;
+    console.debug("useEffect responsive newLayouts es igual:", deepEqual(layouts, refLayouts.current.layouts), refLayouts.current.layouts);
+    if (newBreakpoint !== currentState.breakpoint || newCols !== currentState.cols || breakpoints !== refLayouts.current.breakpoints || colapsedItems !== refLayouts.current.colapsedItems || !deepEqual(layouts, refLayouts.current.layouts)) {
+      console.debug("useEffect responsive con cambio de algo", newBreakpoint, lastBreakpoint);
+      newContainerMargin = getIndentationValue(containerMargin, newBreakpoint);
+      newContainerPadding = getIndentationValue(containerPadding, newBreakpoint);
+      if (!(lastBreakpoint in newLayouts)) {
+        console.error("useEffect casi imposible", lastBreakpoint, newLayouts);
+        newLayouts[lastBreakpoint] = cloneLayout(currentState.layout);
+      }
+      const layout = findOrGenerateResponsiveLayout(newLayouts, breakpoints, newBreakpoint, lastBreakpoint, newCols, compactType, cols, colapsedHeight, colapsedItems);
+      newLayouts[newBreakpoint] = layout;
+      if (newBreakpoint !== currentState.breakpoint) {
+        onBreakpointChange(newBreakpoint, newCols, width, height);
+      }
+      refLayouts.current.layouts = newLayouts;
+      refLayouts.current.breakpoint = newBreakpoint;
+      refLayouts.current.breakpoints = breakpoints;
+      refLayouts.current.colapsedItems = colapsedItems;
+      console.debug("useEffect responsive****", layout);
+      setCurrentState({
+        breakpoint: newBreakpoint,
+        layout,
+        cols: newCols,
+        contaierMargin: newContainerMargin,
+        contaierPadding: newContainerPadding
+      });
+    }
+    onContainerChange({
+      containerWidth: width,
+      containerHeight: height,
+      containerMargin: newContainerMargin,
+      containerPadding: newContainerPadding,
+      breakpoint: newBreakpoint,
+      cols: newCols
+    });
+  }, [width, height, layouts, breakpoint, breakpoints, colapsedItems]);
+  const localOnLayoutChange = useCallback((newlayout) => {
+    console.log("localOnLayoutChange layouts antes de iniciar", refLayouts.current.layouts, newlayout);
+    try {
+      refLayouts.current.layouts[refLayouts.current.breakpoint] = cloneLayout(newlayout);
+    } catch (error) {
+      console.warn("localOnLayoutChange error");
+    }
+    setCurrentState((prev) => ({
+      ...prev,
+      layout: cloneLayout(newlayout)
+    }));
+    onLayoutChange(newlayout, {
+      ...refLayouts.current.layouts
+    });
+  }, [onLayoutChange]);
+  console.log("Render ResponsiveReactGridLayout: ", layouts, currentState, width, height);
+  return /* @__PURE__ */ jsx(GridLayout, {
+    width,
+    height,
+    colapsedHeight,
+    layoutItemRender,
+    containerMargin: currentState.contaierMargin,
+    containerPadding: getIndentationValue(containerPadding, currentState.breakpoint),
+    onLayoutChange: localOnLayoutChange,
+    layout: currentState.layout,
+    cols: currentState.cols,
+    compactType,
+    ...other
+  });
+}
+export {
+  Responsive as R,
+  addLayoutItemToBreakPointIfNoExists as a,
+  addLayoutItemToBreakPoints as b,
+  cloneLayouts as c
+};

package/components/GridLayout/WidthProvider/index.8ff65909.js

@@ -0,0 +1,67 @@
+import { useRef, useState, useMemo, useCallback, useEffect } from "react";
+import clsx from "clsx";
+import { throttle } from "lodash";
+import { useResizeObserver } from "@m4l/graphics";
+import { jsx } from "react/jsx-runtime";
+const THROTTLE_RESIZE_TIME = 200;
+const layoutClassName = "react-grid-layout";
+function WidthProvider(ComposedComponent) {
+  return (props) => {
+    const {
+      measureBeforeMount = true,
+      ...rest
+    } = props;
+    const refMounted = useRef(false);
+    const [currentState, setCurrentState] = useState({
+      mounted: false,
+      width: 1280,
+      height: 100
+    });
+    const onWindowResizeMemo = useMemo(() => () => {
+      const node = elementRef.current;
+      if (node instanceof HTMLElement && node.offsetWidth) {
+        console.log("onWindowResize*******************************", node.offsetWidth, node.offsetHeight);
+        setCurrentState((prev) => ({
+          ...prev,
+          width: node.offsetWidth,
+          height: node.offsetHeight
+        }));
+      }
+    }, []);
+    const throttleResize = throttle(onWindowResizeMemo, THROTTLE_RESIZE_TIME, {
+      leading: false,
+      trailing: true
+    });
+    const onResize = useCallback((_target) => {
+      throttleResize();
+    }, []);
+    const elementRef = useResizeObserver(onResize);
+    useEffect(() => {
+      setCurrentState((prev) => ({
+        ...prev,
+        mounted: true
+      }));
+      refMounted.current = true;
+      onWindowResizeMemo();
+      return () => {
+      };
+    }, []);
+    if (measureBeforeMount && !currentState.mounted) {
+      return /* @__PURE__ */ jsx("div", {
+        className: clsx(props.className, layoutClassName),
+        style: props.style,
+        ref: elementRef
+      });
+    }
+    console.log("Render with provider");
+    return /* @__PURE__ */ jsx(ComposedComponent, {
+      innerRef: elementRef,
+      width: currentState.width,
+      height: currentState.height,
+      ...rest
+    });
+  };
+}
+export {
+  WidthProvider as W
+};

package/components/GridLayout/calculateUtils.d.ts

@@ -0,0 +1,42 @@
+import { GridItemState, Maximize } from './subcomponents/GridItem/types';
+import { Position, PositionParams } from './types';
+export declare function calcGridColWidth(positionParams: PositionParams): number;
+export declare function calcGridItemWHPx(gridUnits: number, colOrRowSize: number, marginPx: number): number;
+/**
+ * Return position on the page given an x, y, w, h.
+ * left, top, width, height are all in pixels.
+ * @param  {PositionParams} positionParams  Parameters of grid needed for coordinates calculations.
+ * @param  {Number}  x                      X coordinate in grid units.
+ * @param  {Number}  y                      Y coordinate in grid units.
+ * @param  {Number}  w                      W coordinate in grid units.
+ * @param  {Number}  h                      H coordinate in grid units.
+ * @return {Position}                       Object containing coords.
+ */
+export declare function calcGridItemPosition(positionParams: PositionParams, x: number, y: number, w: number, h: number, maximize: Maximize, state?: GridItemState): Position;
+/**
+ * Translate x and y coordinates from pixels to grid units.
+ * @param  {PositionParams} positionParams  Parameters of grid needed for coordinates calculations.
+ * @param  {Number} top                     Top position (relative to parent) in pixels.
+ * @param  {Number} left                    Left position (relative to parent) in pixels.
+ * @param  {Number} w                       W coordinate in grid units.
+ * @param  {Number} h                       H coordinate in grid units.
+ * @return {Object}                         x and y in grid units.
+ */
+export declare function calcXY(positionParams: PositionParams, top: number, left: number, w: number, h: number): {
+    x: number;
+    y: number;
+};
+/**
+ * Given a height and width in pixel values, calculate grid units.
+ * @param  {PositionParams} positionParams  Parameters of grid needed for coordinates calcluations.
+ * @param  {Number} height                  Height in pixels.
+ * @param  {Number} width                   Width in pixels.
+ * @param  {Number} x                       X coordinate in grid units.
+ * @param  {Number} y                       Y coordinate in grid units.
+ * @return {Object}                         w, h as grid units.
+ */
+export declare function calcWH(positionParams: PositionParams, width: number, height: number, x: number, y: number): {
+    w: number;
+    h: number;
+};
+export declare function clamp(num: number, lowerBound: number, upperBound: number): number;