@shopify/polaris/build/esm/components/Grid/Grid.js

Shopify’s admin product component library

import React, { useState, useMemo } from 'react';
import { tokens } from '@shopify/polaris-tokens';
import { debounce } from '../../utilities/debounce.js';
import { useEventListener } from '../../utilities/use-event-listener.js';
import styles from './Grid.scss.js';
import { Cell } from './components/Cell/Cell.js';

const {
  breakpoints
} = tokens;

/** **Experimental!** This component is in alpha. Use with caution. */
const Grid = function Grid({
  gap,
  areas,
  children,
  columns
}) {
  const [gridTemplateAreas, setGridTemplateAreas] = useState(getAreas(areas));
  const style = {
    '--pc-grid-gap-xs': gap === null || gap === void 0 ? void 0 : gap.xs,
    '--pc-grid-gap-sm': gap === null || gap === void 0 ? void 0 : gap.sm,
    '--pc-grid-gap-md': gap === null || gap === void 0 ? void 0 : gap.md,
    '--pc-grid-gap-lg': gap === null || gap === void 0 ? void 0 : gap.lg,
    '--pc-grid-gap-xl': gap === null || gap === void 0 ? void 0 : gap.xl,
    '--pc-grid-columns-xs': columns === null || columns === void 0 ? void 0 : columns.xs,
    '--pc-grid-columns-sm': columns === null || columns === void 0 ? void 0 : columns.sm,
    '--pc-grid-columns-md': columns === null || columns === void 0 ? void 0 : columns.md,
    '--pc-grid-columns-lg': columns === null || columns === void 0 ? void 0 : columns.lg,
    '--pc-grid-columns-xl': columns === null || columns === void 0 ? void 0 : columns.xl,
    gridTemplateAreas
  };
  const handleResize = useMemo(() => debounce(() => setGridTemplateAreas(getAreas(areas)), 50), [areas]);
  useEventListener('resize', handleResize);
  return /*#__PURE__*/React.createElement("div", {
    className: styles.Grid,
    style: style
  }, children);
};

function getAreas(areas) {
  if (areas === undefined) return;
  const xl = window.matchMedia(`(min-width: ${breakpoints['breakpoints-xl'].value})`).matches;
  const lg = window.matchMedia(`(min-width: ${breakpoints['breakpoints-lg'].value})`).matches;
  const md = window.matchMedia(`(min-width: ${breakpoints['breakpoints-md'].value})`).matches;
  const sm = window.matchMedia(`(min-width: ${breakpoints['breakpoints-sm'].value})`).matches;

  switch (true) {
    case xl:
      return formatAreas(areas.xl);

    case lg:
      return formatAreas(areas.lg);

    case md:
      return formatAreas(areas.md);

    case sm:
      return formatAreas(areas.sm);

    default:
      return formatAreas(areas.xs);
  }
}

function formatAreas(areas) {
  return `'${areas === null || areas === void 0 ? void 0 : areas.join(`' '`)}'`;
}
Grid.Cell = Cell;

export { Grid, formatAreas };