@m4l/components 3.1.6 → 3.1.8

package/components/GridLayout/subcomponents/Griditem/index-B8Q7iMhr.js

@@ -1,395 +0,0 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-import React__default, { useRef, useEffect, useState, useCallback, useMemo } from "react";
-import { D as DraggableCore_1 } from "../../../../react-draggable-DsCPdgQP.js";
-import { R as Resizable } from "../../../../react-resizable-eBbFl2dX.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-EPw3AYiQ.js";
-import clsx from "clsx";
-import { deepEqual } from "fast-equals";
-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;
-    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) {
-        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) {
-      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) {
-        return;
-      }
-      if (refProps.current.colapsed) {
-        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.colapsed}-${colapsedHeight}`]: colapsed,
-    [gridLayoutClasses.gridItemFreeMove]: freeMove,
-    [gridLayoutClasses.resizeHide]: colapsed,
-    [gridLayoutClasses.invisible]: !visible,
-    [gridLayoutClasses.cssTransforms]: useCSSTransforms,
-    "react-draggable": isDraggable
-    //Requerido para el componente Draggable
-    // dropping: Boolean(droppingPosition),
-  });
-  const styleFinal = {
-    ...style,
-    ...createStyle(pos)
-    //TODO: Delegar el estilo en el ItemRender
-  };
-  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
-};