@m4l/components 7.2.0 → 7.2.2

package/src/components/GridLayout/GridLayout.tsx

@@ -1,923 +0,0 @@
-/* eslint-disable @typescript-eslint/no-shadow */
-// @flow
-import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
-
-import clsx from 'clsx';
-import {
-  bottom,
-  cloneLayout,
-  cloneLayoutItem,
-  compact,
-  getAllCollisions,
-  getLayoutItem,
-  getLayoutItemH,
-  isEqualLayout,
-  moveElement,
-  noop,
-  withLayoutItem,
-} from './utils';
-
-import { MemonizedGridItem } from './subcomponents/GridItem';
-
-// Types
-import type {
-  GridResizeEvent,
-  GridDragEvent,
-  Layout,
-  LayoutItem,
-  GridLayoutState,
-  GridLayoutRefState,
-} from './types';
-
-import { GridLayoutProps } from './types';
-import { GridLayoutRoot } from './styles';
-import { Maximize } from './subcomponents/GridItem/types';
-
-import {
-  DEFAULT_COLS,
-  DEFAULT_CONTAINER_HEIGHT,
-  DEFAULT_MARGIN,
-  DEFAULT_CONTAINER_PADDING,
-  DEFAULT_CONTAINER_WIDTH,
-  DEFAULT_ROW_HEIGHT,
-  DEFAULT_TRANSFORM_SCALE,
-  DEFAULT_COLAPSED_HEIGHT,
-} from './constants';
-import { gridLayoutClasses } from './classes';
-/* import { Icon } from '../Icon';
-import { useEnvironment } from '@m4l/core'; */
-
-// End Types
-
-//const layoutClassName = 'react-grid-layout';
-// const layoutClassName = 'M4LGridLayout';
-
-/**
- * A reactive, fluid grid layout with draggable, resizable components.
- *
- */
-
-/**
- * TODO: Documentar
- */
-export function GridLayout(props: GridLayoutProps): JSX.Element {
-  const {
-    layoutItemRender,
-    innerRef, //Referencia requerida por el provedor WidthProvider para detectar los cambios de tamaño
-    autoSize = true,
-    cols = DEFAULT_COLS,
-    containerPadding = DEFAULT_CONTAINER_PADDING,
-    margin = DEFAULT_MARGIN,
-    rowHeight = DEFAULT_ROW_HEIGHT,
-    colapsedHeight = DEFAULT_COLAPSED_HEIGHT,
-
-    containerWidth = DEFAULT_CONTAINER_WIDTH,
-    containerHeight = DEFAULT_CONTAINER_HEIGHT,
-    transformScale = DEFAULT_TRANSFORM_SCALE,
-
-    className = '',
-    style = {},
-    draggableHandle = '',
-    draggableCancel = '',
-
-    maxRows = Infinity, // infinite vertical growth
-    layout = [],
-
-    isBounded = false,
-    isDraggable = true,
-    isResizable = true,
-    allowOverlap = false,
-    useCSSTransforms = true,
-
-    compactType = 'vertical',
-    preventCollision = false,
-
-    resizeHandles = ['se'],
-    resizeHandle,
-
-    maximizeId,
-
-    onLayoutChange = noop,
-    onDragStart = noop,
-    onDrag = noop,
-    onDragStop = noop,
-    onResizeStart = noop,
-    onResize = noop,
-    onResizeStop = noop,
-  } = props;
-
-  /**
-   * currentState variable de estado que indica si está en dragging, y en que posición debe pintar el placeholder
-   */
-  const [currentState, setCurrentState] = useState<GridLayoutState>({
-    mounted: false,
-  });
-
-  /**
-   * currentState variable de estado que indica si está en dragging, y en que posición debe pintar el placeholder
-   */
-  const [nrOnlayoutChanges, setNrOnlayoutChanges] = useState<number>(0);
-  /**
-   * "finalLayoutRender" es la variable de estado que contiene el layout de trabajo actual
-   * Si se re-renderiza el compononente pero no ha cambiado el layout,
-   */
-  const [finalLayoutRender, setFinalLayoutRender] = useState<Layout>(layout);
-
-  /**
-   * "zIndexes" varable de estado que permite saber el z-index de los popups.
-   * Este vector contienes los layoutItems tipo poups, y el z-index, es la posicion en el vector.
-   * Cuando ingresa un nuevo popup, el z-index se pone de último en el vector
-   */
-  const [zIndexes, setzIndexes] = useState<string[]>(() => {
-    return layout.filter(li => li.freeMove).map(lmap => lmap.i);
-  });
-
-  /**
-   * "refState" variable mutable de referencia alcanzabe desdes cualquier función sea memonizada o no
-   */
-  const refState = useRef<GridLayoutRefState>({
-    layout,
-    oldDragItem: undefined,
-    oldLayout: undefined,
-    oldResizeItem: undefined,
-    zIndexes: zIndexes,
-    colapsedHeight,
-    rowHeight,
-  });
-
-  refState.current.colapsedHeight = colapsedHeight;
-  refState.current.rowHeight = rowHeight;
-  /**
-   * Efecto que identifica si ya se montó (renderizó) por primera vez el componente
-   */
-  useEffect(() => {
-    setCurrentState({ mounted: true });
-  }, []);
-  /**
-   * Efecto que identifica si cambio se se debe reportar un cambio en el layout onLayoutChange
-   */
-  useEffect(() => {
-    if (nrOnlayoutChanges > 0) {
-      // console.log(
-      //     'nrOnlayoutChanges fired',
-      //     nrOnlayoutChanges,
-      //     finalLayoutRender,
-      //     refState.current.layout,
-      // );
-
-      onLayoutChange(refState.current.layout);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [nrOnlayoutChanges]);
-
-  /** Efecto que se da cuando se cambia la prop "layout"*/
-  useEffect(() => {
-    //console.log('useEffect GridLayout es IGUAL:', isEqualLayout(finalLayoutRender, layout));
-    //Solo se actualiza procede a actualizar el finalLayout si es diferente
-    if (!isEqualLayout(finalLayoutRender, layout)) {
-      const newLayout = cloneLayout(layout); //Se clona para evitar que se manipule desde afuera del componente
-
-      //Posicionar el zIndex de la ventana recien agregada
-      const newzIndexes = [...zIndexes]; //Se clona para que react pueda ver el cambio
-
-      //Buscar en todos los layoutItems quue son freeMove y agregar los layouts que no estan
-      // al vector "zIndexes" si faltan a los
-      for (let index = 0; index < newLayout.length; index++) {
-        const li = newLayout[index];
-
-        if (li.freeMove && newzIndexes.indexOf(li.i) === -1) {
-          newzIndexes.push(li.i);
-        }
-      }
-      //Actualizar el variables de estado y referencia con la nueva prop layout
-      refState.current.layout = newLayout;
-      setFinalLayoutRender(newLayout);
-      //Solo establecer los zIndexes si se agregó un nuevo layout
-      if (newzIndexes.length !== zIndexes.length) {
-        setzIndexes(newzIndexes);
-        refState.current.zIndexes = newzIndexes;
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [layout]);
-  /**
-   * Función encargada de comparar el layout anterior vs el actual motivando a que se ejecute el efecto que depende "nrOnlayoutChanges"
-   */
-  const onLayoutMaybeChanged = useCallback((newLayout: Layout, oldLayout?: Layout) => {
-    if (!oldLayout) {
-      oldLayout = refState.current.layout;
-    }
-
-    if (!isEqualLayout(oldLayout, newLayout)) {
-      setNrOnlayoutChanges(prev => prev + 1);
-    }
-  }, []);
-
-  /**
-   * When dragging starts, ** viene del GridItem
-   * Esta funcion debe ser memonizada en el arranque, debido a que el draggable que está en el gridItem
-   * No permite que se cambie la función durante el dragging, de igual manera pasa con resizeable.
-   * Debido a esta condición, se hace necesario el "refState"
-   * @param {String} i Id of the child
-   * @param {Number} x X position of the move
-   * @param {Number} y Y position of the move
-   * @param {Event} e The mousedown event
-   * @param {Element} node The current dragging DOM element
-   */
-  const localOnDragStart = useCallback(
-    (i: string, _x: number, _y: number, gridDragEvent: GridDragEvent): void => {
-      //Traer el ultimo layout que tiene el sistema, el cual es el mismo finalLayoutRender, que por el usuo de useCallback hay
-      //ponerlo en el ref
-      const { layout: layoutCurrent } = refState.current;
-      const { e, node } = gridDragEvent;
-
-      const li = getLayoutItem(layoutCurrent, i);
-
-      //console.log('GridLayout localOnDragStart', li);
-      if (!li) {
-        return;
-      }
-
-      //Inicializar el dragging en la variable mutable de referencia
-      refState.current = {
-        ...refState.current,
-        oldDragItem: cloneLayoutItem(li),
-        oldLayout: layoutCurrent, //Punto de arranque, layout actual
-      };
-
-      //console.log('localOnDragStart');
-
-      if (li && li.freeMove) {
-        onClickSetOnTopFreeMove(li.i, 'onDragStart');
-      }
-      //Cuando se está en Dragging es conveniente desactivar la ejecución por defecto para los eventos que no son pasivos
-      if (gridDragEvent.e.type !== 'touchmove') {
-        gridDragEvent.e.preventDefault();
-      }
-      //Cuando se está en Dragging es conveniente detener la propagación de eventos para evitar mousedown  sobre otros componentes
-      gridDragEvent.e.stopPropagation();
-
-      return onDragStart(layoutCurrent, li, li, undefined, e, node);
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [],
-  );
-
-  /**
-   * Each drag movement create a new dragelement and move the element to the dragged location
-   * @param {String} i Id of the child
-   * @param {Number} x X position of the move
-   * @param {Number} y Y position of the move
-   * @param {Event} e The mousedown event
-   * @param {Element} node The current dragging DOM element
-   */
-  const localOnDrag = useCallback(
-    (i: string, x: number, y: number, gridDragEvent: GridDragEvent) => {
-      const { oldDragItem, layout: layoutCurrent } = refState.current;
-      const { e, node } = gridDragEvent;
-      const li = getLayoutItem(layoutCurrent, i);
-
-      if (!li) {
-        return;
-      }
-
-      // Create placeholder (display only)
-      /**
-       * El place holder se mueve en enteros de columnas y su propia altura,
-       * En el GridItem se explica la logica de cambio de "x" y "y" de acuerdo a la posición del mouse
-       */
-      const newPlaceholder = {
-        w: li.w,
-        h: getLayoutItemH(li, refState.current.colapsedHeight, refState.current.rowHeight),
-        x: li.x,
-        y: li.y,
-        placeholder: true,
-        i: i,
-      };
-
-      // Move the element to the dragged location.
-      const isUserAction = true;
-      try {
-        //Se pone en un trycatch para capturar el error dentro de moveElement
-        let newLayout: Layout;
-
-        //Si no es popup(freeMove) se utiliza la función moveElement
-        if (!li.freeMove) {
-          newLayout = moveElement(
-            layoutCurrent,
-            li,
-            x,
-            y,
-            isUserAction,
-            preventCollision,
-            compactType,
-            cols,
-            refState.current.colapsedHeight,
-            refState.current.rowHeight,
-            allowOverlap,
-          );
-        } else {
-          //Se modifica antes de clonar "x" y "y" del layoutItem, para evitar doble busqueda de li en el newLayout.
-          //TODO: Me queda la duda si esto puede afectar el evento isEqualLayout
-          li.x = x;
-          li.y = y;
-          newPlaceholder.x = x;
-          newPlaceholder.y = y;
-
-          //Se crea un nuevo layout cada vez
-          newLayout = cloneLayout(layoutCurrent);
-        }
-
-        /**
-         * "finalLayout" Si el layoutItem es freeMove o si el gridLayout permite sobreponer los elementos no se compacta.
-         * Por el contrario si es un layout no freeMove y no se permite el overlap, debe compactar
-         */
-        const finalLayout =
-          allowOverlap || li.freeMove
-            ? newLayout
-            : compact(
-              newLayout,
-              compactType,
-              cols,
-              refState.current.colapsedHeight,
-              refState.current.rowHeight,
-              allowOverlap,
-            );
-
-        refState.current = {
-          ...refState.current,
-          layout: finalLayout,
-          activeDrag: newPlaceholder,
-        };
-
-        //Actualizar el currentState con la nueva posición del placeHolder
-        setCurrentState(prev => ({
-          ...prev,
-          activeDrag: newPlaceholder,
-        }));
-
-        //Actualizar el finalLayout que es reactivo
-        setFinalLayoutRender(finalLayout);
-
-        //Cuando se está en Dragging es conveniente desactivar la ejecución por defecto para los eventos que no son pasivos
-        if (gridDragEvent.e.type !== 'touchmove') {
-          gridDragEvent.e.preventDefault();
-        }
-        //Cuando se está en Dragging es conveniente detener la propagación de eventos para evitar mousedown  sobre otros componentes
-        gridDragEvent.e.stopPropagation();
-
-        //Invoca el handler que viene por props
-        onDrag(newLayout, oldDragItem, li, newPlaceholder, e, node);
-      } catch (_e) {
-        console.warn('GridLayout error capturado');
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [],
-  );
-  /**
-   * When dragging stops, figure out which position the element is closest to and update its x and y.
-   * @param  {String} i Index of the child.
-   * @param {Number} x X position of the move
-   * @param {Number} y Y position of the move
-   * @param {Event} e The mousedown event
-   * @param {Element} node The current dragging DOM element
-   */
-  const localOnDragStop = useCallback(
-    (i: string, x: number, y: number, { e, node }: GridDragEvent) => {
-      //Si no se está en activeDragging salirse.
-      //Solo se dá cuando se logra mover el element, si no se mueve, no se alcanza a setear activeDrag
-      if (!refState.current.activeDrag) {
-        //console.log('GridLayout localOnDragStop sin movimiento');
-        return;
-      }
-
-      /**
-       *
-       */
-      const { oldDragItem, layout: layoutCurrent, oldLayout } = refState.current;
-
-      const li = getLayoutItem(layoutCurrent, i);
-      if (!li) {
-        return;
-      }
-      let newLayout: Layout;
-      // Move the element here
-      const isUserAction = true;
-      if (!li.freeMove) {
-        newLayout = moveElement(
-          layoutCurrent,
-          li,
-          x,
-          y,
-          isUserAction,
-          preventCollision,
-          compactType,
-          cols,
-          refState.current.colapsedHeight,
-          refState.current.rowHeight,
-          allowOverlap,
-        );
-      } else {
-        /**
-         * Se modifica antes de clonar "x" y "y" del layoutItem actual, para evitar doble busqueda del li en el newLayout
-         * Se puede hacer con tranquilidad porque en el onDrag se clona ocupando una nueva posición de memoria
-         * El lanzamiento del evento onLayoutChange se va a realizar si al final del movimiento el usuaio cambio
-         * la dispoción del layoutItem. No en el entermedio (onDrag)
-         */
-        li.x = x;
-        li.y = y;
-        //Se clona el layout para tener un elemento puro de react
-        newLayout = cloneLayout(layoutCurrent);
-      }
-
-      /**
-       * "finalLayout" Igual que en onDrag, Si el layoutItem es freeMove o si el gridLayout permite sobreponer elementos no se compacta.
-       * Por el contrario si es un layout no freeMove y no se permite el overlap, debe compactar
-       */
-      const finalLayout = allowOverlap
-        ? newLayout || li.freeMove
-        : compact(
-          newLayout,
-          compactType,
-          cols,
-          refState.current.colapsedHeight,
-          refState.current.rowHeight,
-          allowOverlap,
-        );
-
-      //Actualizar el currentState indicando que ya no hay placeholder
-      setCurrentState(prev => ({
-        ...prev,
-        activeDrag: undefined,
-      }));
-
-      //Actualizar el finalLayout como el layout de estado actual
-      //TODO: Puede mejorar implementando una validación de cambios con respecto al ultimo que dejo el onDrag
-      setFinalLayoutRender(finalLayout);
-
-      //Actualizar la variable mutable, reestableciendo los valores de dragging o resizing
-      refState.current = {
-        ...refState.current,
-        layout: finalLayout,
-        oldDragItem: undefined,
-        oldLayout: undefined,
-        activeDrag: undefined,
-      };
-
-      //console.log('localOnDragStop', finalLayout);
-      //Cuando se está en Dragging es conveniente desactivar la ejecución por defecto para los eventos que no son pasivos
-      if (e.type !== 'touchmove') {
-        e.preventDefault();
-      }
-      //Cuando se está en Dragging es conveniente detener la propagación de eventos para evitar mousedown  sobre otros componentes
-      e.stopPropagation();
-      //Reportar el cambio de layout si entre el inicial capturado en el startDrag y el que queda en el stop
-      onLayoutMaybeChanged(finalLayout, oldLayout);
-      //Invoca el handler que viene por props
-      onDragStop(layoutCurrent, oldDragItem, li, undefined, e, node);
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [],
-  );
-
-  /**
-   * "localOnResizeStart" Función encargada de inicializar el proceso de resizing
-   *
-   */
-  const localOnResizeStart = useCallback(
-    (i: string, _w: number, _h: number, { e, node }: GridResizeEvent) => {
-      const { layout: layoutCurrent } = refState.current;
-      const li = getLayoutItem(layoutCurrent, i);
-
-      if (!li) {
-        return;
-      }
-
-      //Inicializar el resize en la variable mutable de referencia
-      refState.current = {
-        ...refState.current,
-        oldResizeItem: cloneLayoutItem(li),
-        oldLayout: refState.current.layout, //Punto de arranque, layout actual
-      };
-      //Invoca el handler que viene por props
-      onResizeStart(layoutCurrent, li, li, undefined, e, node);
-
-      if (li && li.freeMove) {
-        onClickSetOnTopFreeMove(li.i, 'onResizeStart');
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [],
-  );
-  /**
-   * "localOnResize" Función encargada de cambiar el tamaño del layoutItem directamente en el layout actual
-   *
-   */
-  const localOnResize = useCallback(
-    (i: string, w: number, h: number, { e, node }: GridResizeEvent) => {
-      const { layout: layoutCurrent, oldResizeItem } = refState.current;
-      // console.log('GridLayout localOnResize 1');
-      let newLayout: Layout;
-      let li: LayoutItem | undefined;
-
-      if (!oldResizeItem?.freeMove) {
-        /**
-         * Si no es freeMove
-         */
-
-        /**
-         * cb sirve espcialmente cuando se previenen colisiones, evitando pasar por encima de otro item,
-         * limitando su crecimiento al borde de otos items.
-         * Por defecto las colisiones no se previenen, por lo tanto el w y h viene del OnResize del gridItem
-         * @param cbLi
-         * @returns
-         */
-        const cb = (cbLi: LayoutItem) => {
-          // Something like quad tree should be used
-          // to find collisions faster
-          let hasCollisions;
-          if (preventCollision && !allowOverlap) {
-            const collisions = getAllCollisions(
-              layoutCurrent,
-              { ...cbLi, w, h },
-              refState.current.colapsedHeight,
-              refState.current.rowHeight,
-            ).filter(layoutItem => layoutItem.i !== cbLi.i);
-            hasCollisions = collisions.length > 0;
-
-            // If we're colliding, we need adjust the placeholder.
-            if (hasCollisions) {
-              // adjust w && h to maximum allowed space
-              let leastX = Infinity,
-                leastY = Infinity;
-              collisions.forEach(layoutItem => {
-                if (layoutItem.x > cbLi.x) {
-                  leastX = Math.min(leastX, layoutItem.x);
-                }
-                if (layoutItem.y > cbLi.y) {
-                  leastY = Math.min(leastY, layoutItem.y);
-                }
-              });
-
-              if (Number.isFinite(leastX)) {
-                cbLi.w = leastX - cbLi.x;
-              }
-              if (Number.isFinite(leastY)) {
-                cbLi.h = leastY - cbLi.y;
-              }
-            }
-          }
-
-          if (!hasCollisions) {
-            // Set new width and height.
-            cbLi.w = w;
-            cbLi.h = h;
-          }
-
-          return cbLi;
-        };
-        /**
-         * witLayoutItem clona el layout en una nueva posicion de memoria, manteniendo puro el layout
-         * y retonar el layoutItem Clonado con los posibles cambios si se previenen colisiones.
-         */
-        const [tempLayout, tempLi] = withLayoutItem(cloneLayout(layoutCurrent), i, cb);
-
-        newLayout = tempLayout;
-        li = tempLi;
-      } else {
-        newLayout = cloneLayout(layoutCurrent);
-        li = getLayoutItem(newLayout, i);
-        if (li) {
-          li.w = w;
-          li.h = h;
-        }
-      }
-
-      if (!li) {
-        return;
-      }
-
-      // Create placeholder element (display only)
-      /**
-       * El place holder cambia su altura y ancho basado en el "w" y "h" retornado por el paso previo,
-       */
-      const newPlaceholder = {
-        w: li.w,
-        h: li.h,
-        x: li.x,
-        y: li.y,
-        static: true,
-        i: i,
-      };
-
-      try {
-        /**
-         * "finalLayout" Igual que en onDrag, Si el layoutItem es freeMove o si el gridLayout permite sobreponer elementos no se compacta.
-         * Por el contrario si es un layout no freeMove y no se permite el overlap, debe compactar
-         */
-        const finalLayout =
-          allowOverlap || li.freeMove
-            ? newLayout
-            : compact(
-              newLayout,
-              compactType,
-              cols,
-              refState.current.colapsedHeight,
-              refState.current.rowHeight,
-              allowOverlap,
-            );
-
-        refState.current = {
-          ...refState.current,
-          layout: finalLayout,
-          activeDrag: newPlaceholder,
-        };
-
-        //Actualizar el newLayout
-        //TODO: Puede mejorar implementando una validación de cambios con respecto al ultimo que dejo el onDrag
-        setFinalLayoutRender(finalLayout);
-
-        //Actualiza el placeholder en la variable de estado
-        setCurrentState(prev => ({ ...prev, activeDrag: newPlaceholder }));
-
-        //Invoca el handler que viene por props
-        onResize(newLayout, oldResizeItem, li, newPlaceholder, e, node);
-      } catch (_e) {
-        //console.log('GridLayout localOnResize capturado');
-      }
-
-      //Cuando se está en Dragging es conveniente desactivar la ejecución por defecto para los eventos que no son pasivos
-      if (e.type !== 'touchmove') {
-        e.preventDefault();
-      }
-      //Cuando se está en Dragging es conveniente detener la propagación de eventos para evitar mousedown  sobre otros componentes
-      e.stopPropagation();
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [],
-  );
-  /**
-   * "localOnResizeStop" Función encargada de finalizar el proceso de resizing
-   *
-   */
-  const localOnResizeStop = useCallback(
-    (i: string, _w: number, _h: number, { e, node }: GridResizeEvent) => {
-      if (!refState.current.activeDrag) {
-        //console.log('GridLayout localOnResizeStop sin cambio');
-        return;
-      }
-
-      const { layout: layoutCurrent, oldResizeItem, oldLayout } = refState.current;
-
-      const l = getLayoutItem(layoutCurrent, i);
-
-      /**
-       * No se necista crear un nuevo layout, porque durante el onResize ya se modificó el  gridItem
-       * Lo que se hace es limpiar el estado de placeholder y resizing
-       */
-
-      refState.current = {
-        ...refState.current,
-        // layout: finalLayout,
-        oldResizeItem: undefined,
-        oldLayout: undefined,
-        activeDrag: undefined,
-      };
-      //Limpiar el placeholder
-      setCurrentState(prev => ({ ...prev, activeDrag: undefined }));
-
-      //Evaluar si cambió el layout y lanzar el evento
-      onLayoutMaybeChanged(layoutCurrent, oldLayout);
-
-      //Invoca el handler que viene por props
-      if (l) {
-        onResizeStop(layoutCurrent, oldResizeItem, l, undefined, e, node);
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [],
-  );
-  /**
-   * "onClickSetOnTopFreeMove" Función encargada de cambiar el z-Index de los gridItems freeMove (Popup)
-   *
-   */
-  const onClickSetOnTopFreeMove = useCallback((i: string, _source?: string) => {
-    const { layout: layoutCurrent } = refState.current;
-    const index = refState.current.zIndexes.indexOf(i);
-    const l = getLayoutItem(layoutCurrent, i);
-
-    //console.log('onClickSetOnTopFreeMove', index, refState.current.zIndexes.length, source);
-
-    if (l && l?.freeMove) {
-      //Esta función solo si invoca si el gridItem es freeMove. Pero no sobra re-validar
-
-      //Si el indice del li es diferente a longitud maxima -1, significa que hay que ponerlo de ultima.
-      //O si el e layoutItem se agregó y no estaba en el listado de items, en teoría no debería suceder
-      //Debido a que se tiene un useEffect de "layout" donde agrega los gridItems nuevo a zIndexes.
-      if (index !== refState.current.zIndexes.length - 1 || index === -1) {
-        const newIndexes: string[] = [...refState.current.zIndexes]; //se crea una nueva variable pura
-
-        //Borra el elemento donde esté
-        if (index !== -1) {
-          newIndexes.splice(index, 1); // Elimina el elemento del vector
-        }
-        //Agrea al final del vector el item,
-        newIndexes.push(i);
-
-        refState.current.zIndexes = newIndexes;
-
-        //Cambiar la variable de estado
-        //TODO: Ojalá pudiera hacerse de otra forma que no hiciera re-renderizar todos los gridItems
-        setzIndexes(newIndexes);
-      }
-    }
-  }, []);
-
-  /**
-   * Create a placeholder object.
-   * @returns {Element} Placeholder div.
-   */
-  const placeholder = (): ReactNode => {
-    const { activeDrag } = currentState;
-    if (!activeDrag) {
-      return null;
-    }
-
-    // {...this.state.activeDrag} is pretty slow, actually
-    return (
-      <MemonizedGridItem
-        type="placeholder"
-        layoutItemRender={layoutItemRender}
-        w={activeDrag.w}
-        h={activeDrag.h}
-        x={activeDrag.x}
-        y={activeDrag.y}
-        i={activeDrag.i}
-        className={gridLayoutClasses.gridItemPlaceholder}
-        containerWidth={containerWidth}
-        containerHeight={containerHeight}
-        cols={cols}
-        margin={margin}
-        containerPadding={containerPadding}
-        maxRows={maxRows}
-        rowHeight={rowHeight}
-        isDraggable={false}
-        isResizable={false}
-        isBounded={false}
-        useCSSTransforms={useCSSTransforms}
-        transformScale={transformScale}
-        draggableCancel={''}
-        draggableHandle={''}
-        minW={0}
-        maxW={0}
-        minH={0}
-        maxH={0}
-        maximize="none"
-        colapsed={activeDrag.colapsed}
-        colapsedHeight={colapsedHeight}
-      />
-    );
-  };
-
-  /**
-   * Given a grid item, set its style attributes & surround in a <Draggable>.
-   * @param  {Element} child React element.
-   * @returns {Element}       Element wrapped in draggable and properly placed.
-   */
-  const processGridItem = useCallback(
-    (l: LayoutItem, isMounted: boolean) => {
-      // Determine user manipulations possible.
-      // If an item is static, it can't be manipulated by default.
-      // Any properties defined directly on the grid item will take precedence.
-      const draggable =
-        typeof l.isDraggable === 'boolean' ? l.isDraggable : !l.static && isDraggable;
-      const resizable =
-        typeof l.isResizable === 'boolean' ? l.isResizable : !l.static && isResizable;
-      const resizeHandlesOptions = l.resizeHandles || resizeHandles;
-
-      // isBounded set on child if set on parent, and child is not explicitly false
-      const bounded = draggable && isBounded && l.isBounded !== false;
-
-      const mximize: Maximize = maximizeId
-        ? maximizeId === l.i
-          ? 'maximize_me'
-          : 'maximize_other'
-        : 'none';
-
-      let zIndex: number | undefined = undefined;
-      let newStyle: React.CSSProperties | undefined;
-      if (l.freeMove) {
-        zIndex = zIndexes.indexOf(l.i);
-        if (zIndex !== -1) {
-          zIndex = zIndex + 1;
-          newStyle = { zIndex };
-        }
-      }
-      // console.log('===processGridItem', l.i, bounded);
-      return (
-        <MemonizedGridItem
-          key={l.i}
-          type="layoutItem"
-          layoutItemRender={layoutItemRender}
-          containerWidth={containerWidth}
-          containerHeight={containerHeight}
-          cols={cols}
-          margin={margin}
-          containerPadding={containerPadding || margin}
-          maxRows={maxRows}
-          rowHeight={rowHeight}
-          draggableCancel={draggableCancel}
-          draggableHandle={draggableHandle}
-          onDragStart={localOnDragStart}
-          onDrag={localOnDrag}
-          onDragStop={localOnDragStop}
-          onResizeStart={localOnResizeStart}
-          onResize={localOnResize}
-          onResizeStop={localOnResizeStop}
-          onFreeMoveClick={l.freeMove ? onClickSetOnTopFreeMove : undefined}
-          isDraggable={draggable}
-          isResizable={resizable}
-          isBounded={bounded}
-          useCSSTransforms={useCSSTransforms && isMounted}
-          usePercentages={!isMounted}
-          transformScale={transformScale}
-          w={l.w}
-          h={l.h}
-          x={l.x}
-          y={l.y}
-          i={l.i}
-          minH={l.minH}
-          minW={l.minW}
-          maxH={l.maxH}
-          maxW={l.maxW}
-          static={l.static}
-          resizeHandles={resizeHandlesOptions}
-          resizeHandle={resizeHandle}
-          maximize={mximize}
-          freeMove={l.freeMove}
-          colapsed={l.colapsed}
-          visible={l.visible}
-          colapsedHeight={colapsedHeight}
-          style={newStyle}
-        />
-      );
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      containerWidth,
-      containerHeight,
-      cols,
-      margin,
-      containerPadding,
-      maxRows,
-      rowHeight,
-      draggableCancel,
-      draggableHandle,
-      isDraggable,
-      isResizable,
-      isBounded,
-      useCSSTransforms,
-      transformScale,
-      resizeHandles,
-      resizeHandle,
-      maximizeId,
-      zIndexes,
-      colapsedHeight,
-      rowHeight,
-    ],
-  );
-  /**
-   * Calculates a pixel value for the container.
-   * @returns {String} Container height in pixels.
-   */
-  const containerAutoSizeHeight = useCallback((): string | undefined => {
-    if (!autoSize) {
-      return;
-    }
-    const nbRow = bottom(finalLayoutRender, colapsedHeight, rowHeight);
-
-    const containerPaddingY = containerPadding ? containerPadding[1] : margin[1];
-
-    return nbRow * rowHeight + (nbRow - 1) * margin[1] + containerPaddingY * 2 + 'px';
-    //TODO: Gnenerar margin bottom
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [autoSize, containerPadding, margin, finalLayoutRender, colapsedHeight]);
-
-  const mergedStyle = {
-    height: containerAutoSizeHeight(),
-    ...style,
-  };
-
-  //console.log(`Render ReactGridLayout height: ${containerHeight},width:${containerWidth}`); //, cols, finalLayoutRender, layout
-  return (
-    <GridLayoutRoot
-      className={clsx(gridLayoutClasses.root, className)}
-      style={mergedStyle}
-      ref={innerRef}
-      >
-      {finalLayoutRender.map(li => processGridItem(li, !!currentState.mounted))}
-      {placeholder()}
-    </GridLayoutRoot>
-  );
-}