react-grid-layout/dist/extras.mjs.map

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

{"version":3,"sources":["../src/extras/GridBackground.tsx"],"names":[],"mappings":"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","file":"extras.mjs","sourcesContent":["/**\n * GridBackground component\n *\n * Renders an SVG grid background that aligns with GridLayout cells.\n * Use this to visualize the grid structure behind your layout.\n */\n\nimport * as React from \"react\";\nimport { useMemo } from \"react\";\nimport { calcGridCellDimensions } from \"../core/calculate.js\";\nimport type { GridCellConfig } from \"../core/calculate.js\";\n\nexport interface GridBackgroundProps extends GridCellConfig {\n  /**\n   * Number of rows to display. If \"auto\", calculates based on height.\n   * @default 10\n   */\n  rows?: number | \"auto\";\n\n  /**\n   * Height of the background in pixels. Used when rows=\"auto\".\n   */\n  height?: number;\n\n  /**\n   * Color of the grid cell backgrounds.\n   * @default \"#e0e0e0\"\n   */\n  color?: string;\n\n  /**\n   * Border radius of grid cells in pixels.\n   * @default 4\n   */\n  borderRadius?: number;\n\n  /**\n   * Additional CSS class name.\n   */\n  className?: string;\n\n  /**\n   * Additional inline styles.\n   */\n  style?: React.CSSProperties;\n}\n\n/**\n * SVG grid background component.\n *\n * Renders a visual grid that aligns with GridLayout cells. Position this\n * behind your GridLayout using CSS positioning.\n *\n * @example\n * ```tsx\n * import { GridBackground } from 'react-grid-layout/extras';\n *\n * function MyGrid() {\n *   const { width, containerRef, mounted } = useContainerWidth();\n *\n *   return (\n *     <div ref={containerRef} style={{ position: 'relative' }}>\n *       {mounted && (\n *         <>\n *           <GridBackground\n *             width={width}\n *             cols={12}\n *             rowHeight={30}\n *             margin={[10, 10]}\n *             rows={10}\n *             color=\"#f0f0f0\"\n *           />\n *           <GridLayout width={width} gridConfig={{ cols: 12, rowHeight: 30 }}>\n *             {children}\n *           </GridLayout>\n *         </>\n *       )}\n *     </div>\n *   );\n * }\n * ```\n */\nexport function GridBackground({\n  width,\n  cols,\n  rowHeight,\n  margin = [10, 10],\n  containerPadding,\n  rows = 10,\n  height,\n  color = \"#e0e0e0\",\n  borderRadius = 4,\n  className,\n  style\n}: GridBackgroundProps): React.ReactElement {\n  const dims = useMemo(\n    () =>\n      calcGridCellDimensions({\n        width,\n        cols,\n        rowHeight,\n        margin,\n        containerPadding\n      }),\n    [width, cols, rowHeight, margin, containerPadding]\n  );\n\n  // Calculate number of rows\n  const rowCount = useMemo(() => {\n    if (rows !== \"auto\") return rows;\n    if (height) {\n      // Calculate rows that fit in the given height\n      const padding = containerPadding ?? margin;\n      return Math.ceil(\n        (height - padding[1] * 2 + margin[1]) / (rowHeight + margin[1])\n      );\n    }\n    return 10;\n  }, [rows, height, rowHeight, margin, containerPadding]);\n\n  // Calculate total height\n  const totalHeight = useMemo(() => {\n    const padding = containerPadding ?? margin;\n    return padding[1] * 2 + rowCount * rowHeight + (rowCount - 1) * margin[1];\n  }, [rowCount, rowHeight, margin, containerPadding]);\n\n  // Generate cell rectangles\n  const cells = useMemo(() => {\n    const rects: React.ReactElement[] = [];\n    const { cellWidth, cellHeight, offsetX, offsetY, gapX, gapY } = dims;\n\n    for (let row = 0; row < rowCount; row++) {\n      for (let col = 0; col < cols; col++) {\n        const x = offsetX + col * (cellWidth + gapX);\n        const y = offsetY + row * (cellHeight + gapY);\n\n        rects.push(\n          <rect\n            key={`${row}-${col}`}\n            x={x}\n            y={y}\n            width={cellWidth}\n            height={cellHeight}\n            rx={borderRadius}\n            ry={borderRadius}\n            fill={color}\n          />\n        );\n      }\n    }\n\n    return rects;\n  }, [dims, rowCount, cols, borderRadius, color]);\n\n  return (\n    <svg\n      className={className}\n      style={{\n        position: \"absolute\",\n        top: 0,\n        left: 0,\n        width: width,\n        height: totalHeight,\n        pointerEvents: \"none\",\n        ...style\n      }}\n      aria-hidden=\"true\"\n    >\n      {cells}\n    </svg>\n  );\n}\n\nexport default GridBackground;\n"]}