react-grid-layout/dist/extras.mjs

A draggable and resizable grid layout with responsive breakpoints, for React.

import { calcGridCellDimensions } from './chunk-2KUHNJXF.mjs';
import { useMemo } from 'react';
import { jsx } from 'react/jsx-runtime';

function GridBackground({
  width,
  cols,
  rowHeight,
  margin = [10, 10],
  containerPadding,
  rows = 10,
  height,
  color = "#e0e0e0",
  borderRadius = 4,
  className,
  style
}) {
  const dims = useMemo(
    () => calcGridCellDimensions({
      width,
      cols,
      rowHeight,
      margin,
      containerPadding
    }),
    [width, cols, rowHeight, margin, containerPadding]
  );
  const rowCount = useMemo(() => {
    if (rows !== "auto") return rows;
    if (height) {
      const padding = containerPadding ?? margin;
      return Math.ceil(
        (height - padding[1] * 2 + margin[1]) / (rowHeight + margin[1])
      );
    }
    return 10;
  }, [rows, height, rowHeight, margin, containerPadding]);
  const totalHeight = useMemo(() => {
    const padding = containerPadding ?? margin;
    return padding[1] * 2 + rowCount * rowHeight + (rowCount - 1) * margin[1];
  }, [rowCount, rowHeight, margin, containerPadding]);
  const cells = useMemo(() => {
    const rects = [];
    const { cellWidth, cellHeight, offsetX, offsetY, gapX, gapY } = dims;
    for (let row = 0; row < rowCount; row++) {
      for (let col = 0; col < cols; col++) {
        const x = offsetX + col * (cellWidth + gapX);
        const y = offsetY + row * (cellHeight + gapY);
        rects.push(
          /* @__PURE__ */ jsx(
            "rect",
            {
              x,
              y,
              width: cellWidth,
              height: cellHeight,
              rx: borderRadius,
              ry: borderRadius,
              fill: color
            },
            `${row}-${col}`
          )
        );
      }
    }
    return rects;
  }, [dims, rowCount, cols, borderRadius, color]);
  return /* @__PURE__ */ jsx(
    "svg",
    {
      className,
      style: {
        position: "absolute",
        top: 0,
        left: 0,
        width,
        height: totalHeight,
        pointerEvents: "none",
        ...style
      },
      "aria-hidden": "true",
      children: cells
    }
  );
}

export { GridBackground };
//# sourceMappingURL=extras.mjs.map
//# sourceMappingURL=extras.mjs.map