@m4l/components 9.4.28 → 9.4.29-beta.1

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

@@ -1,412 +1,336 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-import React, { useRef, useEffect, useState, useCallback, useMemo } from "react";
-import { DraggableCore } from "react-draggable";
-import { h as getH, s as setTransform, j as setTopLeft, p as perc } from "../../utils.js";
-import { c as calcXY, a as calcGridItemWHPx, b as calcGridColWidth, d as calcWH, e as clamp, f as calcGridItemPosition } from "../../calculateUtils.js";
-import clsx from "clsx";
-import { deepEqual } from "fast-equals";
-import { D as DEFAULT_COLS, c as DEFAULT_ROW_HEIGHT, e as DEFAULT_CONTAINER_WIDTH, f as DEFAULT_CONTAINER_HEIGHT, b as DEFAULT_MARGIN, a as DEFAULT_CONTAINER_PADDING, g as DEFAULT_TRANSFORM_SCALE, d as DEFAULT_COLAPSED_HEIGHT } from "../../constants.js";
-import { g as gridLayoutClasses } from "../../classes/index.js";
-import { R as Resizable } from "../../../extended/React-Resizable/Resizable/Resizable.js";
-function GridItem(props) {
+import { jsx as L, Fragment as Me } from "@emotion/react/jsx-runtime";
+import Oe, { useRef as K, useEffect as _e, useState as ve, useCallback as d, useMemo as Fe } from "react";
+import { DraggableCore as Pe } from "react-draggable";
+import { Resizable as Ne } from "../../../extended/React-Resizable/Resizable/Resizable.js";
+import "../../../extended/React-Resizable/ResizableBox/slots/ResizableBoxSlots.js";
+import { getH as Q, setTransform as Ge, setTopLeft as Ue, perc as ge } from "../../utils.js";
+import { calcXY as V, calcGridItemWHPx as le, calcGridColWidth as Be, calcWH as ke, clamp as v, calcGridItemPosition as F } from "../../calculateUtils.js";
+import Xe from "clsx";
+import { deepEqual as Ye } from "fast-equals";
+import { DEFAULT_COLS as $e, DEFAULT_ROW_HEIGHT as je, DEFAULT_CONTAINER_WIDTH as qe, DEFAULT_CONTAINER_HEIGHT as Je, DEFAULT_MARGIN as Ke, DEFAULT_CONTAINER_PADDING as Qe, DEFAULT_TRANSFORM_SCALE as Ve, DEFAULT_COLAPSED_HEIGHT as Ze } from "../../constants.js";
+import { gridLayoutClasses as a } from "../../classes/index.js";
+function et(z) {
   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
+    layoutItemRender: P,
+    type: N,
+    i: p,
+    x: w,
+    y: W,
+    w: A,
+    h: M,
+    cols: S = $e,
+    rowHeight: x = je,
+    containerWidth: R = qe,
+    containerHeight: O = Je,
+    margin: G = Ke,
+    containerPadding: U = Qe,
+    transformScale: f = Ve,
+    colapsedHeight: T = Ze,
+    isBounded: de,
+    maxRows: B = 1 / 0,
+    className: me = "",
+    draggableCancel: k = "",
+    draggableHandle: Z = "",
+    minH: D = 1,
+    minW: y = 1,
+    maxH: C = 1 / 0,
+    maxW: b = 1 / 0,
+    isResizable: X = !0,
+    isDraggable: Y = !0,
+    resizeHandles: ee,
+    resizeHandle: te,
+    useCSSTransforms: ne = !0,
+    usePercentages: ue,
+    style: fe,
+    freeMove: he,
+    maximize: m = "none",
+    colapsed: g,
+    visible: pe = !0,
+    onDragStart: re,
+    onDrag: ie,
+    onDragStop: oe,
+    onFreeMoveClick: ce
+  } = z, e = K({
+    cols: S,
+    x: w,
+    y: W,
+    w: A,
+    h: Q(M, T, x, g),
+    minW: y,
+    maxW: b,
+    minH: D,
+    maxH: C,
+    containerWidth: R,
+    containerHeight: O,
+    margin: G,
+    containerPadding: U,
+    rowHeight: x,
+    maxRows: B,
+    colapsed: g
   });
-  useEffect(() => {
-    refProps.current = {
-      cols,
-      x,
-      y,
-      w,
-      h: getH(h, colapsedHeight, rowHeight, colapsed),
-      minW,
-      maxW,
-      minH,
-      maxH,
-      containerWidth,
-      containerHeight,
-      margin,
-      containerPadding,
-      rowHeight,
-      maxRows,
-      colapsed
+  _e(() => {
+    e.current = {
+      cols: S,
+      x: w,
+      y: W,
+      w: A,
+      h: Q(M, T, x, g),
+      minW: y,
+      maxW: b,
+      minH: D,
+      maxH: C,
+      containerWidth: R,
+      containerHeight: O,
+      margin: G,
+      containerPadding: U,
+      rowHeight: x,
+      maxRows: B,
+      colapsed: g
     };
   }, [
-    cols,
-    x,
-    y,
+    S,
     w,
-    h,
-    minW,
-    maxW,
-    minH,
-    maxH,
-    containerWidth,
-    containerHeight,
-    margin,
-    containerPadding,
-    rowHeight,
-    maxRows,
-    colapsed,
-    colapsedHeight
+    W,
+    A,
+    M,
+    y,
+    b,
+    D,
+    C,
+    R,
+    O,
+    G,
+    U,
+    x,
+    B,
+    g,
+    T
   ]);
-  const [currentState, setCurrentState] = useState({
+  const [$, _] = ve({
     resizing: void 0,
     dragging: void 0
-  });
-  const refState = useRef({
+  }), u = K({
     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
-      };
-    },
+  }), ae = K(null), H = d(
+    (n, t) => ({
+      cols: e.current.cols,
+      containerPadding: e.current.containerPadding,
+      containerWidth: n || e.current.containerWidth,
+      containerHeight: t || e.current.containerHeight,
+      containerMargin: e.current.margin,
+      maxRows: e.current.maxRows,
+      rowHeight: e.current.rowHeight
+    }),
     []
-  );
-  const createStyle = (argPos) => {
-    let newStyle;
-    if (useCSSTransforms) {
-      newStyle = setTransform(argPos);
-    } else {
-      newStyle = setTopLeft(argPos);
-      if (usePercentages) {
-        newStyle.left = perc(argPos.left / containerWidth);
-        newStyle.width = perc(argPos.width / containerWidth);
-      }
-    }
-    return newStyle;
-  };
-  const gridItemOnDragStart = useCallback((e, { node }) => {
-    if (!onDragStart) {
+  ), Re = (n) => {
+    let t;
+    return ne ? t = Ge(n) : (t = Ue(n), ue && (t.left = ge(n.left / R), t.width = ge(n.width / R))), t;
+  }, we = d((n, { node: t }) => {
+    if (!re)
       return;
-    }
-    const newPosition = { top: 0, left: 0 };
-    const { offsetParent } = node;
-    if (!offsetParent) {
+    const r = { top: 0, left: 0 }, { offsetParent: c } = t;
+    if (!c)
       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;
-    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
+    const o = c.getBoundingClientRect(), i = t.getBoundingClientRect(), s = i.left / f, l = o.left / f, E = i.top / f, I = o.top / f;
+    r.left = s - l + c.scrollLeft, r.top = E - I + c.scrollTop, u.current.dragging = r, _((J) => ({ ...J, dragging: r }));
+    const { x: h, y: q } = V(
+      H(),
+      r.top,
+      r.left,
+      e.current.w,
+      e.current.h
     );
-    onDragStart(i, newX, newY, {
-      e,
-      node,
-      newPosition
+    re(p, h, q, {
+      e: n,
+      node: t,
+      newPosition: r
     });
-  }, []);
-  const gridItemOnDrag = useCallback(
-    (e, { node, deltaX, deltaY }) => {
-      if (!onDrag) {
-        return;
-      }
-      if (!refState.current.dragging) {
+  }, []), xe = d(
+    (n, { node: t, deltaX: r, deltaY: c }) => {
+      if (!ie || !u.current.dragging)
         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]
+      let o = u.current.dragging.top + c, i = u.current.dragging.left + r;
+      const s = H();
+      if (de) {
+        const { offsetParent: h } = t;
+        if (h) {
+          const q = h.clientHeight - le(
+            e.current.h,
+            e.current.rowHeight,
+            e.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);
+          o = v(o, 0, q);
+          const J = Be(s), Ae = R - le(e.current.w, J, e.current.margin[0]);
+          i = v(i, 0, Ae);
         }
       }
-      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
+      const l = { top: o, left: i };
+      u.current.dragging = l, _((h) => ({ ...h, dragging: l }));
+      const { x: E, y: I } = V(
+        s,
+        o,
+        i,
+        e.current.w,
+        e.current.h
       );
-      onDrag(i, newX, newY, {
-        e,
-        node,
-        newPosition
+      ie(p, E, I, {
+        e: n,
+        node: t,
+        newPosition: l
       });
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
-  );
-  const gridItemOnDragStop = useCallback((e, { node }) => {
-    if (!onDragStop) {
+  ), He = d((n, { node: t }) => {
+    if (!oe || !u.current.dragging)
       return;
-    }
-    if (!refState.current.dragging) {
-      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
+    const { left: r, top: c } = u.current.dragging, o = { top: c, left: r };
+    u.current.dragging = void 0, _((l) => ({ ...l, dragging: void 0 }));
+    const { x: i, y: s } = V(
+      H(),
+      c,
+      r,
+      e.current.w,
+      e.current.h
     );
-    return onDragStop(i, newX, newY, {
-      e,
-      node,
-      newPosition
+    return oe(p, i, s, {
+      e: n,
+      node: t,
+      newPosition: o
     });
-  }, []);
-  const onResizeHandler = useCallback(
-    (e, { node, size }, handlerName) => {
-      const handler = props[handlerName];
-      if (!handler) {
+  }, []), j = d(
+    (n, { node: t, size: r }, c) => {
+      const o = z[c];
+      if (!o || e.current.colapsed)
         return;
-      }
-      if (refProps.current.colapsed) {
-        return;
-      }
-      let { w: newW, h: newH } = calcWH(
-        getPositionParams(),
-        size.width,
-        size.height,
-        refProps.current.x,
-        refProps.current.y
+      let { w: i, h: s } = ke(
+        H(),
+        r.width,
+        r.height,
+        e.current.x,
+        e.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 l = Math.max(e.current.minW, 1), E = Math.min(e.current.maxW, e.current.cols - e.current.x);
+      i = v(i, l, E), s = v(s, e.current.minH, e.current.maxH);
+      const I = c === "onResizeStop" ? void 0 : r;
+      _((h) => ({
+        ...h,
+        resizing: I
+      })), u.current.resizing = I, o(p, i, s, { e: n, node: t, size: r });
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
-  );
-  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)
+  ), Ie = d((n, t) => {
+    j(n, t, "onResizeStop");
+  }, []), ze = d((n, t) => {
+    j(n, t, "onResizeStart");
+  }, []), Se = d(() => {
+    ce && ce(p);
+  }, []), Te = d(
+    (n, t, r) => {
+      const c = F(r, 0, 0, S - w, 0, m).width, o = F(r, 0, 0, y, D, m), i = F(r, 0, 0, b, C, m), s = [o.width, o.height], l = [
+        Math.min(i.width, c),
+        Math.min(i.height, 1 / 0)
       ];
-      return /* @__PURE__ */ jsx(
-        Resizable,
+      return /* @__PURE__ */ L(
+        Ne,
         {
           draggableOpts: {
-            disabled: !isResizable || maximize !== "none" || colapsed
+            disabled: !X || m !== "none" || g
           },
-          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
+          className: X ? void 0 : "react-resizable-hide",
+          width: t.width,
+          height: t.height,
+          minConstraints: s,
+          maxConstraints: l,
+          onResizeStop: Ie,
+          onResizeStart: ze,
+          onResize: ye,
+          transformScale: f,
+          resizeHandles: ee,
+          handle: te,
+          children: n
         }
       );
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
-      cols,
-      x,
-      minW,
-      minH,
-      maxW,
-      maxH,
-      isResizable,
-      transformScale,
-      resizeHandles,
-      resizeHandle,
-      maximize,
-      colapsed
+      S,
+      w,
+      y,
+      D,
+      b,
+      C,
+      X,
+      f,
+      ee,
+      te,
+      m,
+      g
     ]
-  );
-  const mixinDraggable = useCallback(
-    (child) => {
-      return /* @__PURE__ */ jsx(
-        DraggableCore,
-        {
-          disabled: !isDraggable || maximize !== "none",
-          onStart: gridItemOnDragStart,
-          onDrag: gridItemOnDrag,
-          onStop: gridItemOnDragStop,
-          handle: draggableHandle,
-          cancel: ".react-resizable-handle" + (draggableCancel ? "," + draggableCancel : ""),
-          scale: transformScale,
-          nodeRef: elementRef,
-          children: child
-        }
-      );
-    },
+  ), De = d(
+    (n) => /* @__PURE__ */ L(
+      Pe,
+      {
+        disabled: !Y || m !== "none",
+        onStart: we,
+        onDrag: xe,
+        onStop: He,
+        handle: Z,
+        cancel: ".react-resizable-handle" + (k ? "," + k : ""),
+        scale: f,
+        nodeRef: ae,
+        children: n
+      }
+    ),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [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,
+    [Y, Z, f, k, m]
+  ), ye = d((n, t) => {
+    j(n, t, "onResize");
+  }, []), Ce = H(R, O), se = F(
+    Ce,
     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.colapsed}-${colapsedHeight}`]: colapsed,
-    [gridLayoutClasses.gridItemFreeMove]: freeMove,
-    [gridLayoutClasses.resizeHide]: colapsed,
-    [gridLayoutClasses.invisible]: !visible,
-    [gridLayoutClasses.cssTransforms]: useCSSTransforms,
-    "react-draggable": isDraggable
+    W,
+    A,
+    Q(M, T, x, g),
+    m,
+    $
+  ), be = Xe(a.gridItemRoot, me, {
+    [`${a.gridItemType}-${N}`]: !0,
+    [a.static]: z.static,
+    [a.resizing]: !!$.resizing,
+    [a.dragging]: !!$.dragging,
+    [a.maximizeMe]: m === "maximize_me",
+    [a.maximizeOther]: m === "maximize_other",
+    [a.colapsed]: g,
+    [`${a.colapsed}-${T}`]: g,
+    [a.gridItemFreeMove]: he,
+    [a.resizeHide]: g,
+    [a.invisible]: !pe,
+    [a.cssTransforms]: ne,
+    "react-draggable": Y
     //Requerido para el componente Draggable
     // dropping: Boolean(droppingPosition),
-  });
-  const styleFinal = {
-    ...style,
-    ...createStyle(pos)
+  }), Ee = {
+    ...fe,
+    ...Re(se)
     //TODO: Delegar el estilo en el ItemRender
-  };
-  const memoLayouItemRender = useMemo(() => {
-    return /* @__PURE__ */ jsx(ComponentItemRender, { type, i });
-  }, [type, i]);
-  const gridItemRoot = /* @__PURE__ */ jsx(
+  }, Le = Fe(() => /* @__PURE__ */ L(P, { type: N, i: p }), [N, p]), We = De(Te(/* @__PURE__ */ L(
     "div",
     {
-      className: classNameFinal,
-      ref: elementRef,
-      style: styleFinal,
+      className: be,
+      ref: ae,
+      style: Ee,
       role: "none",
-      onClick: localFreeMoveOnClick,
-      children: memoLayouItemRender
+      onClick: Se,
+      children: Le
     }
-  );
-  const gridItem = mixinDraggable(mixinResizable(gridItemRoot, pos, getPositionParams()));
-  return /* @__PURE__ */ jsx(Fragment, { children: gridItem });
+  ), se, H()));
+  return /* @__PURE__ */ L(Me, { children: We });
 }
-const MemonizedGridItem = React.memo(GridItem, (prevProps, nextProps) => {
-  return deepEqual(prevProps, nextProps);
-});
+const ut = Oe.memo(et, (z, P) => Ye(z, P));
 export {
-  MemonizedGridItem as M
+  et as GridItem,
+  ut as MemonizedGridItem
 };