@wordpress/components/build/ui/grid/hook.js

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = useGrid;

var _emotion = require("emotion");

var _element = require("@wordpress/element");

var _context = require("../context");

var _utils = require("./utils");

var _useResponsiveValue = require("../utils/use-responsive-value");

var _configValues = _interopRequireDefault(require("../../utils/config-values"));

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * @param {import('../context').ViewOwnProps<import('./types').Props, 'div'>} props
 */
function useGrid(props) {
  const {
    align,
    alignment,
    className,
    columnGap,
    columns = 2,
    gap = 3,
    isInline = false,
    justify,
    rowGap,
    rows,
    templateColumns,
    templateRows,
    ...otherProps
  } = (0, _context.useContextSystem)(props, 'Grid');
  const columnsAsArray = Array.isArray(columns) ? columns : [columns];
  const column = (0, _useResponsiveValue.useResponsiveValue)(columnsAsArray);
  const rowsAsArray = Array.isArray(rows) ? rows : [rows];
  const row = (0, _useResponsiveValue.useResponsiveValue)(rowsAsArray);
  const gridTemplateColumns = templateColumns || !!columns && `repeat(${column}, 1fr)`;
  const gridTemplateRows = templateRows || !!rows && `repeat(${row}, 1fr)`;
  const classes = (0, _element.useMemo)(() => {
    const alignmentProps = (0, _utils.getAlignmentProps)(alignment);
    const gridClasses = /*#__PURE__*/(0, _emotion.css)({
      alignItems: align,
      display: isInline ? 'inline-grid' : 'grid',
      gap: `calc( ${_configValues.default.gridBase} * ${gap} )`,
      gridTemplateColumns: gridTemplateColumns || undefined,
      gridTemplateRows: gridTemplateRows || undefined,
      gridRowGap: rowGap,
      gridColumnGap: columnGap,
      justifyContent: justify,
      verticalAlign: isInline ? 'middle' : undefined,
      ...alignmentProps
    }, ";label:gridClasses;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdWkvZ3JpZC9ob29rLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1Ec0IiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy91aS9ncmlkL2hvb2suanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MsIGN4IH0gZnJvbSAnZW1vdGlvbic7XG5cbi8qKlxuICogV29yZFByZXNzIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyB1c2VNZW1vIH0gZnJvbSAnQHdvcmRwcmVzcy9lbGVtZW50JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgdXNlQ29udGV4dFN5c3RlbSB9IGZyb20gJy4uL2NvbnRleHQnO1xuaW1wb3J0IHsgZ2V0QWxpZ25tZW50UHJvcHMgfSBmcm9tICcuL3V0aWxzJztcbmltcG9ydCB7IHVzZVJlc3BvbnNpdmVWYWx1ZSB9IGZyb20gJy4uL3V0aWxzL3VzZS1yZXNwb25zaXZlLXZhbHVlJztcbmltcG9ydCBDT05GSUcgZnJvbSAnLi4vLi4vdXRpbHMvY29uZmlnLXZhbHVlcyc7XG5cbi8qKlxuICogQHBhcmFtIHtpbXBvcnQoJy4uL2NvbnRleHQnKS5WaWV3T3duUHJvcHM8aW1wb3J0KCcuL3R5cGVzJykuUHJvcHMsICdkaXYnPn0gcHJvcHNcbiAqL1xuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gdXNlR3JpZCggcHJvcHMgKSB7XG5cdGNvbnN0IHtcblx0XHRhbGlnbixcblx0XHRhbGlnbm1lbnQsXG5cdFx0Y2xhc3NOYW1lLFxuXHRcdGNvbHVtbkdhcCxcblx0XHRjb2x1bW5zID0gMixcblx0XHRnYXAgPSAzLFxuXHRcdGlzSW5saW5lID0gZmFsc2UsXG5cdFx0anVzdGlmeSxcblx0XHRyb3dHYXAsXG5cdFx0cm93cyxcblx0XHR0ZW1wbGF0ZUNvbHVtbnMsXG5cdFx0dGVtcGxhdGVSb3dzLFxuXHRcdC4uLm90aGVyUHJvcHNcblx0fSA9IHVzZUNvbnRleHRTeXN0ZW0oIHByb3BzLCAnR3JpZCcgKTtcblxuXHRjb25zdCBjb2x1bW5zQXNBcnJheSA9IEFycmF5LmlzQXJyYXkoIGNvbHVtbnMgKSA/IGNvbHVtbnMgOiBbIGNvbHVtbnMgXTtcblx0Y29uc3QgY29sdW1uID0gdXNlUmVzcG9uc2l2ZVZhbHVlKCBjb2x1bW5zQXNBcnJheSApO1xuXHRjb25zdCByb3dzQXNBcnJheSA9IEFycmF5LmlzQXJyYXkoIHJvd3MgKSA/IHJvd3MgOiBbIHJvd3MgXTtcblx0Y29uc3Qgcm93ID0gdXNlUmVzcG9uc2l2ZVZhbHVlKCByb3dzQXNBcnJheSApO1xuXG5cdGNvbnN0IGdyaWRUZW1wbGF0ZUNvbHVtbnMgPVxuXHRcdHRlbXBsYXRlQ29sdW1ucyB8fCAoICEhIGNvbHVtbnMgJiYgYHJlcGVhdCgkeyBjb2x1bW4gfSwgMWZyKWAgKTtcblx0Y29uc3QgZ3JpZFRlbXBsYXRlUm93cyA9XG5cdFx0dGVtcGxhdGVSb3dzIHx8ICggISEgcm93cyAmJiBgcmVwZWF0KCR7IHJvdyB9LCAxZnIpYCApO1xuXG5cdGNvbnN0IGNsYXNzZXMgPSB1c2VNZW1vKCAoKSA9PiB7XG5cdFx0Y29uc3QgYWxpZ25tZW50UHJvcHMgPSBnZXRBbGlnbm1lbnRQcm9wcyggYWxpZ25tZW50ICk7XG5cblx0XHRjb25zdCBncmlkQ2xhc3NlcyA9IGNzcygge1xuXHRcdFx0YWxpZ25JdGVtczogYWxpZ24sXG5cdFx0XHRkaXNwbGF5OiBpc0lubGluZSA/ICdpbmxpbmUtZ3JpZCcgOiAnZ3JpZCcsXG5cdFx0XHRnYXA6IGBjYWxjKCAkeyBDT05GSUcuZ3JpZEJhc2UgfSAqICR7IGdhcCB9IClgLFxuXHRcdFx0Z3JpZFRlbXBsYXRlQ29sdW1uczogZ3JpZFRlbXBsYXRlQ29sdW1ucyB8fCB1bmRlZmluZWQsXG5cdFx0XHRncmlkVGVtcGxhdGVSb3dzOiBncmlkVGVtcGxhdGVSb3dzIHx8IHVuZGVmaW5lZCxcblx0XHRcdGdyaWRSb3dHYXA6IHJvd0dhcCxcblx0XHRcdGdyaWRDb2x1bW5HYXA6IGNvbHVtbkdhcCxcblx0XHRcdGp1c3RpZnlDb250ZW50OiBqdXN0aWZ5LFxuXHRcdFx0dmVydGljYWxBbGlnbjogaXNJbmxpbmUgPyAnbWlkZGxlJyA6IHVuZGVmaW5lZCxcblx0XHRcdC4uLmFsaWdubWVudFByb3BzLFxuXHRcdH0gKTtcblxuXHRcdHJldHVybiBjeCggZ3JpZENsYXNzZXMsIGNsYXNzTmFtZSApO1xuXHR9LCBbXG5cdFx0YWxpZ24sXG5cdFx0YWxpZ25tZW50LFxuXHRcdGNsYXNzTmFtZSxcblx0XHRjb2x1bW5HYXAsXG5cdFx0Z2FwLFxuXHRcdGdyaWRUZW1wbGF0ZUNvbHVtbnMsXG5cdFx0Z3JpZFRlbXBsYXRlUm93cyxcblx0XHRpc0lubGluZSxcblx0XHRqdXN0aWZ5LFxuXHRcdHJvd0dhcCxcblx0XSApO1xuXG5cdHJldHVybiB7IC4uLm90aGVyUHJvcHMsIGNsYXNzTmFtZTogY2xhc3NlcyB9O1xufVxuIl19 */"));
    return (0, _emotion.cx)(gridClasses, className);
  }, [align, alignment, className, columnGap, gap, gridTemplateColumns, gridTemplateRows, isInline, justify, rowGap]);
  return { ...otherProps,
    className: classes
  };
}
//# sourceMappingURL=hook.js.map