Function GridLayout

src/react/components/GridLayout.tsx:296–1128

(props: GridLayoutProps)

 * GridLayout - A reactive, fluid grid layout with draggable, resizable components.
 */
export function GridLayout(props: GridLayoutProps): ReactElement {
  const {
    // Required
    children,
    width,

    // Composable config interfaces
    gridConfig: gridConfigProp,
    dragConfig: dragConfigProp,
    resizeConfig: resizeConfigProp,
    dropConfig: dropConfigProp,
    positionStrategy = defaultPositionStrategy,
    compactor: compactorProp,
    constraints = defaultConstraints,

    // Layout data
    layout: propsLayout = [],
    droppingItem: droppingItemProp,

    // Container props
    autoSize = true,
    className = "",
    style = {},
    innerRef,

    // Callbacks
    onLayoutChange = noop,
    onDragStart: onDragStartProp = noop,
    onDrag: onDragProp = noop,
    onDragStop: onDragStopProp = noop,
    onResizeStart: onResizeStartProp = noop,
    onResize: onResizeProp = noop,
    onResizeStop: onResizeStopProp = noop,
    onDrop: onDropProp = noop,
    onDropDragOver: onDropDragOverProp = noop
  } = props;

  // Resolve config interfaces with defaults
  const gridConfig: GridConfig = useMemo(
    () => ({ ...defaultGridConfig, ...gridConfigProp }),
    [gridConfigProp]
  );
  const dragConfig: DragConfig = useMemo(
    () => ({ ...defaultDragConfig, ...dragConfigProp }),
    [dragConfigProp]
  );
  const resizeConfig: ResizeConfig = useMemo(
    () => ({ ...defaultResizeConfig, ...resizeConfigProp }),
    [resizeConfigProp]
  );
  const dropConfig: DropConfig = useMemo(
    () => ({ ...defaultDropConfig, ...dropConfigProp }),
    [dropConfigProp]
  );

  // Destructure resolved configs for convenience
  const { cols, rowHeight, maxRows, margin, containerPadding } = gridConfig;
  const {